@mobily/stacks
Version:
⚡ A set of useful components to help you build and maintain React Native (Web too) layouts with ease.
1,751 lines (1,722 loc) • 74.6 kB
JavaScript
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_array.js
function sub(x, offset, len) {
var result = new Array(len);
var j = 0;
var i = offset;
while (j < len) {
result[j] = x[i];
j = j + 1 | 0;
i = i + 1 | 0;
}
;
return result;
}
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/curry.js
function app(_f, _args) {
while (true) {
var args = _args;
var f = _f;
var init_arity = f.length;
var arity = init_arity === 0 ? 1 : init_arity;
var len = args.length;
var d = arity - len | 0;
if (d === 0) {
return f.apply(null, args);
}
if (d >= 0) {
return function(f2, args2) {
return function(x) {
return app(f2, args2.concat([x]));
};
}(f, args);
}
_args = sub(args, arity, -d | 0);
_f = f.apply(null, sub(args, 0, arity));
continue;
}
;
}
function _1(o, a0) {
var arity = o.length;
if (arity === 1) {
return o(a0);
} else {
switch (arity) {
case 1:
return o(a0);
case 2:
return function(param) {
return o(a0, param);
};
case 3:
return function(param, param$1) {
return o(a0, param, param$1);
};
case 4:
return function(param, param$1, param$2) {
return o(a0, param, param$1, param$2);
};
case 5:
return function(param, param$1, param$2, param$3) {
return o(a0, param, param$1, param$2, param$3);
};
case 6:
return function(param, param$1, param$2, param$3, param$4) {
return o(a0, param, param$1, param$2, param$3, param$4);
};
case 7:
return function(param, param$1, param$2, param$3, param$4, param$5) {
return o(a0, param, param$1, param$2, param$3, param$4, param$5);
};
default:
return app(o, [a0]);
}
}
}
// src/Stacks_component_Box.bs.js
import * as React4 from "react";
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_option.js
function some(x) {
if (x === void 0) {
return {
BS_PRIVATE_NESTED_SOME_NONE: 0
};
} else if (x !== null && x.BS_PRIVATE_NESTED_SOME_NONE !== void 0) {
return {
BS_PRIVATE_NESTED_SOME_NONE: x.BS_PRIVATE_NESTED_SOME_NONE + 1 | 0
};
} else {
return x;
}
}
function valFromOption(x) {
if (!(x !== null && x.BS_PRIVATE_NESTED_SOME_NONE !== void 0)) {
return x;
}
var depth = x.BS_PRIVATE_NESTED_SOME_NONE;
if (depth === 0) {
return;
} else {
return {
BS_PRIVATE_NESTED_SOME_NONE: depth - 1 | 0
};
}
}
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/belt_Option.js
function mapWithDefaultU(opt, $$default, f) {
if (opt !== void 0) {
return f(valFromOption(opt));
} else {
return $$default;
}
}
function mapU(opt, f) {
if (opt !== void 0) {
return some(f(valFromOption(opt)));
}
}
function flatMapU(opt, f) {
if (opt !== void 0) {
return f(valFromOption(opt));
}
}
function getWithDefault(opt, $$default) {
if (opt !== void 0) {
return valFromOption(opt);
} else {
return $$default;
}
}
function isSome(param) {
return param !== void 0;
}
// src/Stacks_hooks.bs.js
import * as React3 from "react";
import * as Wonka2 from "wonka";
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml.js
function int_max(x, y) {
if (x > y) {
return x;
} else {
return y;
}
}
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_obj.js
var for_in = function(o, foo) {
for (var x in o) {
foo(x);
}
};
function equal(a, b) {
if (a === b) {
return true;
}
var a_type = typeof a;
if (a_type === "string" || a_type === "number" || a_type === "boolean" || a_type === "undefined" || a === null) {
return false;
}
var b_type = typeof b;
if (a_type === "function" || b_type === "function") {
throw {
RE_EXN_ID: "Invalid_argument",
_1: "equal: functional value",
Error: new Error()
};
}
if (b_type === "number" || b_type === "undefined" || b === null) {
return false;
}
var tag_a = a.TAG | 0;
var tag_b = b.TAG | 0;
if (tag_a === 248) {
return a[1] === b[1];
}
if (tag_a === 251) {
throw {
RE_EXN_ID: "Invalid_argument",
_1: "equal: abstract value",
Error: new Error()
};
}
if (tag_a !== tag_b) {
return false;
}
var len_a = a.length | 0;
var len_b = b.length | 0;
if (len_a === len_b) {
if (Array.isArray(a)) {
var _i = 0;
while (true) {
var i = _i;
if (i === len_a) {
return true;
}
if (!equal(a[i], b[i])) {
return false;
}
_i = i + 1 | 0;
continue;
}
;
} else if (a instanceof Date && b instanceof Date) {
return !(a > b || a < b);
} else {
var result = {
contents: true
};
var do_key_a = function(key) {
if (!Object.prototype.hasOwnProperty.call(b, key)) {
result.contents = false;
return;
}
};
var do_key_b = function(key) {
if (!Object.prototype.hasOwnProperty.call(a, key) || !equal(b[key], a[key])) {
result.contents = false;
return;
}
};
for_in(a, do_key_a);
if (result.contents) {
for_in(b, do_key_b);
}
return result.contents;
}
} else {
return false;
}
}
function notequal(a, b) {
return !equal(a, b);
}
// src/Stacks_utils.bs.js
import * as Wonka from "wonka";
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/js_int.js
var max = 2147483647;
var min = -2147483648;
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/js_math.js
function floor_int(f) {
if (f > max) {
return max;
} else if (f < min) {
return min;
} else {
return Math.floor(f);
}
}
function random_int(min2, max2) {
return floor_int(Math.random() * (max2 - min2 | 0)) + min2 | 0;
}
// node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/belt_Array.js
function get(arr, i) {
if (i >= 0 && i < arr.length) {
return some(arr[i]);
}
}
function makeByU(l, f) {
if (l <= 0) {
return [];
}
var res = new Array(l);
for (var i = 0; i < l; ++i) {
res[i] = f(i);
}
return res;
}
function slice(a, offset, len) {
if (len <= 0) {
return [];
}
var lena = a.length;
var ofs = offset < 0 ? int_max(lena + offset | 0, 0) : offset;
var hasLen = lena - ofs | 0;
var copyLength = hasLen < len ? hasLen : len;
if (copyLength <= 0) {
return [];
}
var result = new Array(copyLength);
for (var i = 0; i < copyLength; ++i) {
result[i] = a[ofs + i | 0];
}
return result;
}
function getByU(a, p) {
var l = a.length;
var i = 0;
var r;
while (r === void 0 && i < l) {
var v = a[i];
if (p(v)) {
r = some(v);
}
i = i + 1 | 0;
}
;
return r;
}
function getIndexByU(a, p) {
var l = a.length;
var i = 0;
var r;
while (r === void 0 && i < l) {
var v = a[i];
if (p(v)) {
r = i;
}
i = i + 1 | 0;
}
;
return r;
}
function mapWithIndexU(a, f) {
var l = a.length;
var r = new Array(l);
for (var i = 0; i < l; ++i) {
r[i] = f(i, a[i]);
}
return r;
}
function reduceWithIndexU(a, x, f) {
var r = x;
for (var i = 0, i_finish = a.length; i < i_finish; ++i) {
r = f(r, a[i], i);
}
return r;
}
// src/Stacks_utils.bs.js
import * as ReactNative from "react-native";
// src/Stacks_utils.js
import * as React from "react";
var normalizeResponsiveProp = (value) => {
if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
return [value];
}
if (value && value.length) {
return value;
}
console.warn(`Invalid responsive prop value: ${JSON.stringify(value)}`);
return [];
};
var negateSpace = (value) => {
if (typeof value === "number") {
return [value * -1];
}
if (value && value.length) {
const l = value.length;
const xs = new Array(l);
for (var i = 0; i < l; ++i) {
xs[i] = value[i] * -1;
}
return xs;
}
return void 0;
};
var unset = Object.freeze(true);
var unsetFillViewValue = (value) => {
if (value === unset) {
return void 0;
}
return value === void 0 ? 0 : value;
};
var isColumnComponent = (node) => {
return typeof node === "object" && "type" in node && node.type.__isColumn__;
};
var isRowComponent = (node) => {
return typeof node === "object" && "type" in node && node.type.__isRow__;
};
var markAsColumn = (node) => {
node.__isColumn__ = true;
};
var markAsRow = (node) => {
node.__isRow__ = true;
};
// src/Stacks_utils.bs.js
function negateSpace2(prim) {
return negateSpace(prim);
}
var unset2 = unset;
function unsetFillViewValue2(prim) {
return unsetFillViewValue(prim);
}
function isColumnComponent2(prim) {
return isColumnComponent(prim);
}
function isRowComponent2(prim) {
return isRowComponent(prim);
}
function markAsColumn2(prim) {
markAsColumn(prim);
}
function markAsRow2(prim) {
markAsRow(prim);
}
function makeBreakpoints(breakpoints) {
var breakpoints$1 = breakpoints.slice();
return breakpoints$1.sort(function(a, b) {
return b[1] - a[1] | 0;
});
}
var defaultBreakpoints = makeBreakpoints([
[
"mobile",
480
],
[
"tablet",
768
],
[
"desktop",
992
]
]);
function randomColor(param) {
var arr = makeByU(3, function(param2) {
return random_int(0, 255);
});
var colors = arr.map(function(prim) {
return String(prim);
}).join(", ");
return "rgba(" + colors + ", 0.2)";
}
function splitEvery(xs, size) {
if (size < 1 || xs.length <= size) {
return [xs];
}
var offset = 0;
var arr = [];
while (offset < xs.length) {
var len = offset + size | 0;
arr.push(slice(xs, offset, size));
offset = len;
}
;
return arr;
}
function memo(fn) {
var lastResult = {
contents: void 0
};
return function(param) {
var result = lastResult.contents;
if (result !== void 0) {
return valFromOption(result);
}
var result$1 = fn(void 0);
lastResult.contents = some(result$1);
return result$1;
};
}
function intersperse(xs, delimiter) {
return reduceWithIndexU(xs, [], function(acc, value, index) {
if ((xs.length - 1 | 0) === index) {
acc.push(value);
} else {
acc.push(value, delimiter);
}
return acc;
});
}
var makeDimensionsSource = memo(function(param) {
return Wonka.share(Wonka.make(function(observer) {
var listener = ReactNative.Dimensions.addEventListener("change", observer.next);
return function() {
listener.remove();
};
}));
});
function resolveCurrentBreakpoint(currentWidth, breakpoints) {
var defaultBreakpoint = defaultBreakpoints[0];
return getWithDefault(getByU(breakpoints, function(breakpoint) {
return currentWidth > breakpoint[1];
}), defaultBreakpoint)[0];
}
function resolveResponsiveProp(currentWidth, breakpoints, responsiveProp) {
return mapU(responsiveProp, function(responsiveProp2) {
var normalizedValues = normalizeResponsiveProp(responsiveProp2);
var defaultValue = normalizedValues[normalizedValues.length - 1 | 0];
if (normalizedValues.length === 1) {
return defaultValue;
} else {
return getWithDefault(flatMapU(getIndexByU(breakpoints, function(breakpoint) {
return currentWidth > breakpoint[1];
}), function(index) {
return get(normalizedValues, (breakpoints.length - 1 | 0) - index | 0);
}), defaultValue);
}
});
}
function compareBreakpoints(mapFn, currentBreakpoint, breakpoints, boundBreakpoint) {
return getWithDefault(flatMapU(flatMapU(boundBreakpoint, function(boundBreakpoint2) {
return mapU(getIndexByU(breakpoints, function(breakpoint) {
return currentBreakpoint === breakpoint[0];
}), function(currentBreakpointIndex) {
return [
boundBreakpoint2,
currentBreakpointIndex
];
});
}), function(tuple) {
var currentBreakpointIndex = tuple[1];
var boundBreakpoint2 = tuple[0];
return mapU(getIndexByU(breakpoints, function(breakpoint) {
return boundBreakpoint2 === breakpoint[0];
}), function(breakpointIndex) {
return mapFn(currentBreakpointIndex, breakpointIndex);
});
}), false);
}
function isBreakpointBelow(param, param$1, param$2) {
return compareBreakpoints(function(currentBreakpointIndex, breakpointIndex) {
return currentBreakpointIndex > breakpointIndex;
}, param, param$1, param$2);
}
function isBreakpointAbove(param, param$1, param$2) {
return compareBreakpoints(function(currentBreakpointIndex, breakpointIndex) {
return currentBreakpointIndex < breakpointIndex;
}, param, param$1, param$2);
}
function resolveCollapsibleProps(collapseBelow, reverse, currentBreakpoint, breakpoints) {
var isCollapsed = isBreakpointBelow(currentBreakpoint, breakpoints, collapseBelow);
var reverse$1 = getWithDefault(reverse, false);
var direction = reverse$1 ? isCollapsed ? "column-reverse" : "row-reverse" : isCollapsed ? "column" : "row";
return {
direction,
isCollapsed
};
}
// src/Stacks_hooks.bs.js
import * as ReactNative3 from "react-native";
// src/Stacks_context.bs.js
import * as React2 from "react";
import * as ReactNative2 from "react-native";
var context = React2.createContext({
debug: false,
spacing: 4,
breakpoints: defaultBreakpoints,
dimensions: ReactNative2.Dimensions.get("window")
});
var make2 = context.Provider;
function makeProps(value, children, param) {
return {
value,
children
};
}
var Provider = {
make: make2,
makeProps
};
var context$1 = React2.createContext({
isCollapsed: false,
space: void 0,
alignY: void 0,
height: void 0,
width: void 0
});
function useColumns(param) {
return React2.useContext(context$1);
}
var make$1 = context$1.Provider;
function makeProps$1(value, children, param) {
return {
value,
children
};
}
var Provider$1 = {
make: make$1,
makeProps: makeProps$1
};
var ColumnsContext = {
context: context$1,
useColumns,
Provider: Provider$1
};
var context$2 = React2.createContext({
space: void 0,
defaultHeight: void 0
});
function useRows(param) {
return React2.useContext(context$2);
}
var make$2 = context$2.Provider;
function makeProps$2(value, children, param) {
return {
value,
children
};
}
var Provider$2 = {
make: make$2,
makeProps: makeProps$2
};
var RowsContext = {
context: context$2,
useRows,
Provider: Provider$2
};
// src/Stacks_hooks.bs.js
function useWindowDimensions(param) {
var match = React3.useState(function() {
return ReactNative3.Dimensions.get("window");
});
var setDimensions = match[1];
React3.useEffect(function() {
var subscription = _1(Wonka2.subscribe(function(layout) {
setDimensions(function(param2) {
return layout.window;
});
}), _1(Wonka2.debounce(function(param2) {
if (ReactNative3.Platform.OS === "web") {
return 60;
} else {
return 0;
}
}), makeDimensionsSource(void 0)));
return subscription.unsubscribe;
}, []);
return match[0];
}
function useStacks(param) {
return React3.useContext(context);
}
function useSpacing(__x) {
return mapWithDefaultU(__x, 0, function(value) {
var match = React3.useContext(context);
return match.spacing * value;
});
}
function useSpacingHelpers(param) {
var match = React3.useContext(context);
var spacing = match.spacing;
var multiply = function(__x) {
return mapU(__x, function(value) {
return spacing * value;
});
};
var divide = function(__x) {
return mapU(__x, function(value) {
return value / spacing;
});
};
return {
multiply,
divide
};
}
function useCurrentBreakpoint(param) {
var match = React3.useContext(context);
return resolveCurrentBreakpoint(match.dimensions.width, match.breakpoints);
}
function useDebugStyle(param) {
var match = React3.useContext(context);
var style = React3.useRef(void 0);
style.current = match.debug ? {
backgroundColor: randomColor(void 0)
} : void 0;
return style.current;
}
function useResponsiveProp(param) {
var match = React3.useContext(context);
var breakpoints = match.breakpoints;
var partial_arg = match.dimensions.width;
return function(param2) {
return resolveResponsiveProp(partial_arg, breakpoints, param2);
};
}
function useDeepMemoize(deps) {
var ref = React3.useRef([]);
if (notequal(deps, ref.current)) {
ref.current = deps;
}
return ref.current;
}
// src/Stacks_component_Box.bs.js
import * as ReactNative5 from "react-native";
// src/Stacks_styles.bs.js
import * as ReactNative4 from "react-native";
// node_modules/.pnpm/rescript-react-native@0.68.1_lvg6d4uu442o4ggjdrq4asnyum/node_modules/rescript-react-native/src/apis/Style.bs.js
function pct(num) {
return num.toString() + "%";
}
// src/Stacks_styles.bs.js
var styles = ReactNative4.StyleSheet.create({
fullWidth: {
width: pct(100)
},
fullHeight: {
height: pct(100)
},
flexContent: {
flex: 0,
flexBasis: "auto"
},
flexFluid: {
flexBasis: pct(0),
flexGrow: 1,
flexShrink: 0
},
flexBasis12: {
flexBasis: pct(50)
},
flexBasis13: {
flexBasis: pct(33.3333)
},
flexBasis14: {
flexBasis: pct(25)
},
flexBasis23: {
flexBasis: pct(66.6667)
},
flexBasis34: {
flexBasis: pct(75)
},
flexBasis15: {
flexBasis: pct(20)
},
flexBasis25: {
flexBasis: pct(40)
},
flexBasis35: {
flexBasis: pct(60)
},
flexBasis45: {
flexBasis: pct(80)
},
alignStart: {
alignItems: "flex-start"
},
alignCenter: {
alignItems: "center"
},
alignEnd: {
alignItems: "flex-end"
},
alignStretch: {
alignItems: "stretch"
},
justifyStart: {
justifyContent: "flex-start"
},
justifyCenter: {
justifyContent: "center"
},
justifyEnd: {
justifyContent: "flex-end"
},
justifySpaceAround: {
justifyContent: "space-around"
},
justifySpaceBetween: {
justifyContent: "space-between"
},
justifySpaceEvenly: {
justifyContent: "space-evenly"
},
alignSelfStart: {
alignSelf: "flex-start"
},
alignSelfAuto: {
alignSelf: "auto"
},
alignSelfCenter: {
alignSelf: "center"
},
alignSelfEnd: {
alignSelf: "flex-end"
},
alignSelfStretch: {
alignSelf: "stretch"
},
directionRow: {
flexDirection: "row"
},
directionRowReverse: {
flexDirection: "row-reverse"
},
directionColumn: {
flexDirection: "column"
},
directionColumnReverse: {
flexDirection: "column-reverse"
},
wrap: {
flexWrap: "wrap"
},
nowrap: {
flexWrap: "nowrap"
},
grow: {
flexGrow: 1
},
shrink: {
flexShrink: 1
}
});
function margin(__x) {
return mapU(__x, function(value) {
return {
margin: value
};
});
}
function marginX(__x) {
return mapU(__x, function(value) {
return {
marginHorizontal: value
};
});
}
function marginY(__x) {
return mapU(__x, function(value) {
return {
marginVertical: value
};
});
}
function marginTop(__x) {
return mapU(__x, function(value) {
return {
marginTop: value
};
});
}
function marginRight(__x) {
return mapU(__x, function(value) {
return {
marginRight: value
};
});
}
function marginLeft(__x) {
return mapU(__x, function(value) {
return {
marginLeft: value
};
});
}
function marginBottom(__x) {
return mapU(__x, function(value) {
return {
marginBottom: value
};
});
}
function marginStart(__x) {
return mapU(__x, function(value) {
return {
marginStart: value
};
});
}
function marginEnd(__x) {
return mapU(__x, function(value) {
return {
marginEnd: value
};
});
}
function padding(__x) {
return mapU(__x, function(value) {
return {
padding: value
};
});
}
function paddingX(__x) {
return mapU(__x, function(value) {
return {
paddingHorizontal: value
};
});
}
function paddingY(__x) {
return mapU(__x, function(value) {
return {
paddingVertical: value
};
});
}
function paddingTop(__x) {
return mapU(__x, function(value) {
return {
paddingTop: value
};
});
}
function paddingRight(__x) {
return mapU(__x, function(value) {
return {
paddingRight: value
};
});
}
function paddingLeft(__x) {
return mapU(__x, function(value) {
return {
paddingLeft: value
};
});
}
function paddingBottom(__x) {
return mapU(__x, function(value) {
return {
paddingBottom: value
};
});
}
function paddingStart(__x) {
return mapU(__x, function(value) {
return {
paddingStart: value
};
});
}
function paddingEnd(__x) {
return mapU(__x, function(value) {
return {
paddingEnd: value
};
});
}
function top(value) {
return {
top: value
};
}
function right(value) {
return {
right: value
};
}
function bottom(value) {
return {
bottom: value
};
}
function left(value) {
return {
left: value
};
}
function resolveAlignItems(__x) {
return mapU(__x, function(value) {
if (value === "top" || value === "left") {
return styles.alignStart;
} else if (value === "right" || value === "bottom") {
return styles.alignEnd;
} else if (value === "center") {
return styles.alignCenter;
} else {
return styles.alignStretch;
}
});
}
function resolveAlignSelf(__x) {
return mapU(__x, function(value) {
if (value === "top" || value === "left") {
return styles.alignSelfStart;
} else if (value === "right" || value === "bottom") {
return styles.alignSelfEnd;
} else if (value === "stretch") {
return styles.alignSelfStretch;
} else if (value === "center") {
return styles.alignSelfCenter;
} else {
return styles.alignSelfAuto;
}
});
}
function resolveJustifyContent(__x) {
return mapU(__x, function(value) {
if (value === "right" || value === "bottom") {
return styles.justifyEnd;
} else if (value === "between") {
return styles.justifySpaceBetween;
} else if (value === "center") {
return styles.justifyCenter;
} else if (value === "evenly") {
return styles.justifySpaceEvenly;
} else if (value === "around") {
return styles.justifySpaceAround;
} else {
return styles.justifyStart;
}
});
}
function resolveFlexBasis(__x) {
return mapU(__x, function(value) {
if (value === "1/3") {
return styles.flexBasis13;
} else if (value === "1/4") {
return styles.flexBasis14;
} else if (value === "1/5") {
return styles.flexBasis15;
} else if (value === "2/3") {
return styles.flexBasis23;
} else if (value === "2/5") {
return styles.flexBasis25;
} else if (value === "3/4") {
return styles.flexBasis34;
} else if (value === "3/5") {
return styles.flexBasis35;
} else if (value === "4/5") {
return styles.flexBasis45;
} else if (value === "fluid") {
return styles.flexFluid;
} else if (value === "content") {
return styles.flexContent;
} else {
return styles.flexBasis12;
}
});
}
function resolveDirection(__x) {
return mapU(__x, function(value) {
if (value === "row") {
return styles.directionRow;
} else if (value === "column-reverse") {
return styles.directionColumnReverse;
} else if (value === "row-reverse") {
return styles.directionRowReverse;
} else {
return styles.directionColumn;
}
});
}
function resolveWrap(__x) {
return mapU(__x, function(value) {
if (value === "nowrap") {
return styles.nowrap;
} else {
return styles.wrap;
}
});
}
// src/Stacks_component_Box.bs.js
function Stacks_component_Box(Props) {
var padding2 = Props.padding;
var paddingX2 = Props.paddingX;
var paddingY2 = Props.paddingY;
var paddingTop2 = Props.paddingTop;
var paddingBottom2 = Props.paddingBottom;
var paddingLeft2 = Props.paddingLeft;
var paddingRight2 = Props.paddingRight;
var paddingEnd2 = Props.paddingEnd;
var paddingStart2 = Props.paddingStart;
var margin2 = Props.margin;
var marginX2 = Props.marginX;
var marginY2 = Props.marginY;
var marginTop2 = Props.marginTop;
var marginBottom2 = Props.marginBottom;
var marginLeft2 = Props.marginLeft;
var marginRight2 = Props.marginRight;
var marginEnd2 = Props.marginEnd;
var marginStart2 = Props.marginStart;
var alignX = Props.alignX;
var alignY = Props.alignY;
var alignSelf = Props.alignSelf;
var direction = Props.direction;
var wrap = Props.wrap;
var flex = Props.flex;
var style = Props.style;
var viewRef = Props.viewRef;
var children = Props.children;
var match = useStacks(void 0);
var dimensions = match.dimensions;
var breakpoints = match.breakpoints;
var currentBreakpoint = useCurrentBreakpoint(void 0);
var match$1 = useSpacingHelpers(void 0);
var multiply = match$1.multiply;
var debugStyle = useDebugStyle(void 0);
var deps = useDeepMemoize([
padding2,
paddingX2,
paddingY2,
paddingTop2,
paddingBottom2,
paddingLeft2,
paddingRight2,
paddingEnd2,
paddingStart2,
margin2,
marginX2,
marginY2,
marginTop2,
marginBottom2,
marginLeft2,
marginRight2,
marginEnd2,
marginStart2,
alignX,
alignY,
alignSelf,
direction,
wrap,
flex,
breakpoints,
currentBreakpoint,
debugStyle,
style
]);
var style$1 = React4.useMemo(function() {
var resolveResponsiveProp2 = function(values) {
var partial_arg = dimensions.width;
return resolveResponsiveProp(partial_arg, breakpoints, values);
};
var padding$1 = padding(multiply(resolveResponsiveProp2(padding2)));
var paddingX$1 = paddingX(multiply(resolveResponsiveProp2(paddingX2)));
var paddingY$1 = paddingY(multiply(resolveResponsiveProp2(paddingY2)));
var paddingTop$1 = paddingTop(multiply(resolveResponsiveProp2(paddingTop2)));
var paddingBottom$1 = paddingBottom(multiply(resolveResponsiveProp2(paddingBottom2)));
var paddingLeft$1 = paddingLeft(multiply(resolveResponsiveProp2(paddingLeft2)));
var paddingRight$1 = paddingRight(multiply(resolveResponsiveProp2(paddingRight2)));
var paddingEnd$1 = paddingEnd(multiply(resolveResponsiveProp2(paddingEnd2)));
var paddingStart$1 = paddingStart(multiply(resolveResponsiveProp2(paddingStart2)));
var margin$1 = margin(multiply(resolveResponsiveProp2(margin2)));
var marginX$1 = marginX(multiply(resolveResponsiveProp2(marginX2)));
var marginY$1 = marginY(multiply(resolveResponsiveProp2(marginY2)));
var marginTop$1 = marginTop(multiply(resolveResponsiveProp2(marginTop2)));
var marginBottom$1 = marginBottom(multiply(resolveResponsiveProp2(marginBottom2)));
var marginLeft$1 = marginLeft(multiply(resolveResponsiveProp2(marginLeft2)));
var marginRight$1 = marginRight(multiply(resolveResponsiveProp2(marginRight2)));
var marginEnd$1 = marginEnd(multiply(resolveResponsiveProp2(marginEnd2)));
var marginStart$1 = marginStart(multiply(resolveResponsiveProp2(marginStart2)));
var alignX$1 = resolveResponsiveProp2(alignX);
var alignY$1 = resolveResponsiveProp2(alignY);
var alignSelf$1 = resolveResponsiveProp2(alignSelf);
var direction$1 = resolveResponsiveProp2(direction);
var wrap$1 = resolveResponsiveProp2(wrap);
var flex$1 = resolveResponsiveProp2(flex);
var direction$2 = getWithDefault(direction$1, "column");
var match2 = direction$2 === "column-reverse" || direction$2 === "column" ? [
resolveAlignItems(alignX$1),
resolveJustifyContent(alignY$1)
] : [
resolveJustifyContent(alignX$1),
resolveAlignItems(alignY$1)
];
return [
padding$1,
paddingX$1,
paddingY$1,
paddingTop$1,
paddingBottom$1,
paddingLeft$1,
paddingRight$1,
paddingEnd$1,
paddingStart$1,
margin$1,
marginX$1,
marginY$1,
marginTop$1,
marginBottom$1,
marginLeft$1,
marginRight$1,
marginEnd$1,
marginStart$1,
match2[0],
match2[1],
resolveDirection(direction$1),
resolveWrap(wrap$1),
resolveFlexBasis(flex$1),
resolveAlignSelf(alignSelf$1),
debugStyle,
style
];
}, deps);
var tmp = {
ref: viewRef,
style: style$1,
children: getWithDefault(children, null),
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccessibilityTap,
onLayout: Props.onLayout,
onMagicTap: Props.onMagicTap,
onMoveShouldSetResponder: Props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture,
onResponderEnd: Props.onResponderEnd,
onResponderGrant: Props.onResponderGrant,
onResponderMove: Props.onResponderMove,
onResponderReject: Props.onResponderReject,
onResponderRelease: Props.onResponderRelease,
onResponderStart: Props.onResponderStart,
onResponderTerminate: Props.onResponderTerminate,
onResponderTerminationRequest: Props.onResponderTerminationRequest,
onStartShouldSetResponder: Props.onStartShouldSetResponder,
onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture,
pointerEvents: Props.pointerEvents,
removeClippedSubviews: Props.removeClippedSubviews,
renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid,
shouldRasterizeIOS: Props.shouldRasterizeIOS,
testID: Props.testID,
onMouseDown: Props.onMouseDown,
onMouseEnter: Props.onMouseEnter,
onMouseLeave: Props.onMouseLeave,
onMouseMove: Props.onMouseMove,
onMouseOver: Props.onMouseOver,
onMouseOut: Props.onMouseOut,
onMouseUp: Props.onMouseUp
};
return React4.createElement(Props.as || ReactNative5.View, tmp);
}
var make3 = Stacks_component_Box;
// src/Stacks_component_Stack.bs.js
import * as React5 from "react";
function Stacks_component_Stack(Props) {
var space = Props.space;
var align = Props.align;
var horizontal = Props.horizontal;
var divider = Props.divider;
var margin2 = Props.margin;
var marginTop2 = Props.marginTop;
var marginLeft2 = Props.marginLeft;
var style = Props.style;
var children = Props.children;
var resolveResponsiveProp2 = useResponsiveProp(void 0);
var horizontal$1 = resolveResponsiveProp2(horizontal);
var direction = mapWithDefaultU(horizontal$1, "column", function(value) {
if (value) {
return "row";
} else {
return "column";
}
});
var isVertical = direction === "column";
var width = isVertical ? some(styles.fullWidth) : void 0;
var alignY = isVertical ? void 0 : align;
var alignX = isVertical ? align : void 0;
var style$1 = [
width,
style
];
var xs = React5.Children.toArray(children);
var children$1 = mapWithDefaultU(divider, xs, function(divider2) {
return intersperse(xs, divider2);
});
var tmp = {
direction: [direction],
style: style$1,
children: React5.Children.map(children$1, function(child, index) {
var marginTop3 = isVertical && index !== 0 ? space : void 0;
var marginLeft3 = isVertical || index === 0 ? void 0 : space;
var tmp2 = {
flex: ["content"],
children: child,
marginTop: marginTop3,
marginLeft: marginLeft3,
alignX,
alignY
};
return React5.createElement(make3, tmp2);
}),
padding: Props.padding,
paddingX: Props.paddingX,
paddingY: Props.paddingY,
paddingTop: Props.paddingTop,
paddingBottom: Props.paddingBottom,
paddingLeft: Props.paddingLeft,
paddingRight: Props.paddingRight,
paddingEnd: Props.paddingEnd,
paddingStart: Props.paddingStart,
margin: Props.margin,
marginX: Props.marginX,
marginY: Props.marginY,
marginTop: Props.marginTop,
marginBottom: Props.marginBottom,
marginLeft: Props.marginLeft,
marginRight: Props.marginRight,
marginEnd: Props.marginEnd,
marginStart: Props.marginStart,
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccessibilityTap,
onLayout: Props.onLayout,
onMagicTap: Props.onMagicTap,
onMoveShouldSetResponder: Props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture,
onResponderEnd: Props.onResponderEnd,
onResponderGrant: Props.onResponderGrant,
onResponderMove: Props.onResponderMove,
onResponderReject: Props.onResponderReject,
onResponderRelease: Props.onResponderRelease,
onResponderStart: Props.onResponderStart,
onResponderTerminate: Props.onResponderTerminate,
onResponderTerminationRequest: Props.onResponderTerminationRequest,
onStartShouldSetResponder: Props.onStartShouldSetResponder,
onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture,
pointerEvents: Props.pointerEvents,
removeClippedSubviews: Props.removeClippedSubviews,
renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid,
shouldRasterizeIOS: Props.shouldRasterizeIOS,
testID: Props.testID,
viewRef: Props.viewRef,
onMouseDown: Props.onMouseDown,
onMouseEnter: Props.onMouseEnter,
onMouseLeave: Props.onMouseLeave,
onMouseMove: Props.onMouseMove,
onMouseOver: Props.onMouseOver,
onMouseOut: Props.onMouseOut,
onMouseUp: Props.onMouseUp
};
return React5.createElement(make3, tmp);
}
var make4 = Stacks_component_Stack;
// src/Stacks_component_Columns.bs.js
import * as React7 from "react";
// src/Stacks_component_Column.bs.js
import * as React6 from "react";
function Stacks_component_Column(Props) {
var width = Props.width;
var style = Props.style;
var children = Props.children;
var match = ColumnsContext.useColumns(void 0);
var space = match.space;
var isCollapsed = match.isCollapsed;
var boxPaddingLeft = isCollapsed ? void 0 : space;
var marginTop2 = isCollapsed ? space : void 0;
var flex = isCollapsed ? void 0 : isSome(width) ? width : match.width;
var height = isCollapsed ? ["content"] : match.height;
var tmp = {
children,
padding: Props.padding,
paddingX: Props.paddingX,
paddingY: Props.paddingY,
paddingTop: Props.paddingTop,
paddingBottom: Props.paddingBottom,
paddingLeft: Props.paddingLeft,
paddingRight: Props.paddingRight,
paddingEnd: Props.paddingEnd,
paddingStart: Props.paddingStart,
flex: height,
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccessibilityTap,
onLayout: Props.onLayout,
onMagicTap: Props.onMagicTap,
onMoveShouldSetResponder: Props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture,
onResponderEnd: Props.onResponderEnd,
onResponderGrant: Props.onResponderGrant,
onResponderMove: Props.onResponderMove,
onResponderReject: Props.onResponderReject,
onResponderRelease: Props.onResponderRelease,
onResponderStart: Props.onResponderStart,
onResponderTerminate: Props.onResponderTerminate,
onResponderTerminationRequest: Props.onResponderTerminationRequest,
onStartShouldSetResponder: Props.onStartShouldSetResponder,
onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture,
pointerEvents: Props.pointerEvents,
removeClippedSubviews: Props.removeClippedSubviews,
renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid,
shouldRasterizeIOS: Props.shouldRasterizeIOS,
style: Props.style,
testID: Props.testID,
viewRef: Props.viewRef,
onMouseDown: Props.onMouseDown,
onMouseEnter: Props.onMouseEnter,
onMouseLeave: Props.onMouseLeave,
onMouseMove: Props.onMouseMove,
onMouseOver: Props.onMouseOver,
onMouseOut: Props.onMouseOut,
onMouseUp: Props.onMouseUp
};
if (match.alignY !== void 0) {
tmp.alignY = valFromOption(match.alignY);
}
var tmp$1 = {
style: [isCollapsed ? some(styles.fullWidth) : void 0],
children: React6.createElement(make3, tmp),
paddingLeft: boxPaddingLeft,
marginTop: marginTop2,
flex
};
return React6.createElement(make3, tmp$1);
}
markAsColumn2(Stacks_component_Column);
var make5 = Stacks_component_Column;
// src/Stacks_component_Columns.bs.js
function Stacks_component_Columns(Props) {
var space = Props.space;
var heightOpt = Props.height;
var reverse = Props.reverse;
var alignX = Props.alignX;
var alignY = Props.alignY;
var collapseBelow = Props.collapseBelow;
var defaultWidthOpt = Props.defaultWidth;
var style = Props.style;
var children = Props.children;
var height = heightOpt !== void 0 ? heightOpt : ["content"];
var defaultWidth = defaultWidthOpt !== void 0 ? defaultWidthOpt : ["fluid"];
var match = useStacks(void 0);
var currentBreakpoint = useCurrentBreakpoint(void 0);
var match$1 = resolveCollapsibleProps(collapseBelow, reverse, currentBreakpoint, match.breakpoints);
var isCollapsed = match$1.isCollapsed;
var alignX$1 = isCollapsed ? void 0 : alignX;
var boxMarginTop = isCollapsed ? negateSpace2(space) : void 0;
var boxMarginLeft = isCollapsed ? void 0 : negateSpace2(space);
var style$1 = [
some(styles.fullWidth),
style
];
var config = React7.useMemo(function() {
return {
isCollapsed,
space,
alignY,
height,
width: defaultWidth
};
}, [
isCollapsed,
space,
alignY,
height,
defaultWidth
]);
var tmp = {
direction: [match$1.direction],
flex: height,
children: React7.Children.map(children, function(child) {
if (React7.isValidElement(child)) {
if (isColumnComponent2(child)) {
return child;
} else {
return React7.createElement(make5, {
children: child
});
}
} else {
return null;
}
}),
marginTop: boxMarginTop,
marginLeft: boxMarginLeft,
alignX: alignX$1,
alignY: Props.alignY
};
var tmp$1 = {
flex: height,
style: style$1,
children: React7.createElement(make3, tmp),
padding: Props.padding,
paddingX: Props.paddingX,
paddingY: Props.paddingY,
paddingTop: Props.paddingTop,
paddingBottom: Props.paddingBottom,
paddingLeft: Props.paddingLeft,
paddingRight: Props.paddingRight,
paddingEnd: Props.paddingEnd,
paddingStart: Props.paddingStart,
margin: Props.margin,
marginX: Props.marginX,
marginY: Props.marginY,
marginTop: Props.marginTop,
marginBottom: Props.marginBottom,
marginLeft: Props.marginLeft,
marginRight: Props.marginRight,
marginEnd: Props.marginEnd,
marginStart: Props.marginStart,
alignY: Props.alignY,
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccessibilityTap,
onLayout: Props.onLayout,
onMagicTap: Props.onMagicTap,
onMoveShouldSetResponder: Props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture,
onResponderEnd: Props.onResponderEnd,
onResponderGrant: Props.onResponderGrant,
onResponderMove: Props.onResponderMove,
onResponderReject: Props.onResponderReject,
onResponderRelease: Props.onResponderRelease,
onResponderStart: Props.onResponderStart,
onResponderTerminate: Props.onResponderTerminate,
onResponderTerminationRequest: Props.onResponderTerminationRequest,
onStartShouldSetResponder: Props.onStartShouldSetResponder,
onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture,
pointerEvents: Props.pointerEvents,
removeClippedSubviews: Props.removeClippedSubviews,
renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid,
shouldRasterizeIOS: Props.shouldRasterizeIOS,
testID: Props.testID,
viewRef: Props.viewRef,
onMouseDown: Props.onMouseDown,
onMouseEnter: Props.onMouseEnter,
onMouseLeave: Props.onMouseLeave,
onMouseMove: Props.onMouseMove,
onMouseOver: Props.onMouseOver,
onMouseOut: Props.onMouseOut,
onMouseUp: Props.onMouseUp
};
return React7.createElement(ColumnsContext.Provider.make, ColumnsContext.Provider.makeProps(config, React7.createElement(make3, tmp$1), void 0));
}
var make6 = Stacks_component_Columns;
// src/Stacks_component_Rows.bs.js
import * as React9 from "react";
// src/Stacks_component_Row.bs.js
import * as React8 from "react";
function Stacks_component_Row(Props) {
var widthOpt = Props.width;
var height = Props.height;
var children = Props.children;
var width = widthOpt !== void 0 ? widthOpt : ["fluid"];
var match = RowsContext.useRows(void 0);
var height$1 = isSome(height) ? height : match.defaultHeight;
var tmp = {
flex: width,
children,
padding: Props.padding,
paddingX: Props.paddingX,
paddingY: Props.paddingY,
paddingTop: Props.paddingTop,
paddingBottom: Props.paddingBottom,
paddingLeft: Props.paddingLeft,
paddingRight: Props.paddingRight,
paddingEnd: Props.paddingEnd,
paddingStart: Props.paddingStart,
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccessibilityTap,
onLayout: Props.onLayout,
onMagicTap: Props.onMagicTap,
onMoveShouldSetResponder: Props.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture,
onResponderEnd: Props.onResponderEnd,
onResponderGrant: Props.onResponderGrant,
onResponderMove: Props.onResponderMove,
onResponderReject: Props.onResponderReject,
onResponderRelease: Props.onResponderRelease,
onResponderStart: Props.onResponderStart,
onResponderTerminate: Props.onResponderTerminate,
onResponderTerminationRequest: Props.onResponderTerminationRequest,
onStartShouldSetResponder: Props.onStartShouldSetResponder,
onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture,
pointerEvents: Props.pointerEvents,
removeClippedSubviews: Props.removeClippedSubviews,
renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid,
shouldRasterizeIOS: Props.shouldRasterizeIOS,
style: Props.style,
testID: Props.testID,
viewRef: Props.viewRef,
onMouseDown: Props.onMouseDown,
onMouseEnter: Props.onMouseEnter,
onMouseLeave: Props.onMouseLeave,
onMouseMove: Props.onMouseMove,
onMouseOver: Props.onMouseOver,
onMouseOut: Props.onMouseOut,
onMouseUp: Props.onMouseUp
};
var tmp$1 = {
direction: ["row"],
children: React8.createElement(make3, tmp),
flex: height$1
};
if (match.space !== void 0) {
tmp$1.paddingTop = valFromOption(match.space);
}
return React8.createElement(make3, tmp$1);
}
markAsRow2(Stacks_component_Row);
var make7 = Stacks_component_Row;
// src/Stacks_component_Rows.bs.js
function Stacks_component_Rows(Props) {
var space = Props.space;
var reverse = Props.reverse;
var defaultHeightOpt = Props.defaultHeight;
var children = Props.children;
var defaultHeight = defaultHeightOpt !== void 0 ? defaultHeightOpt : ["fluid"];
var direction = mapWithDefaultU(reverse, "column", function(reverse2) {
if (reverse2) {
return "column-reverse";
} else {
return "column";
}
});
var negativeSpace = negateSpace2(space);
var config = React9.useMemo(function() {
return {
space,
defaultHeight
};
}, [
space,
defaultHeight
]);
var tmp = {
direction: [direction],
flex: ["fluid"],
children: React9.Children.map(children, function(child) {
if (React9.isValidElement(child)) {
if (isRowComponent2(child)) {
return child;
} else {
return React9.createElement(make7, {
children: child
});
}
} else {
return null;
}
}),
marginTop: negativeSpace,
alignX: Props.alignX,
alignY: Props.alignY
};
var tmp$1 = {
direction: ["row"],
flex: ["fluid"],
children: React9.createElement(make3, tmp),
padding: Props.padding,
paddingX: Props.paddingX,
paddingY: Props.paddingY,
paddingTop: Props.paddingTop,
paddingBottom: Props.paddingBottom,
paddingLeft: Props.paddingLeft,
paddingRight: Props.paddingRight,
paddingEnd: Props.paddingEnd,
paddingStart: Props.paddingStart,
margin: Props.margin,
marginX: Props.marginX,
marginY: Props.marginY,
marginTop: Props.marginTop,
marginBottom: Props.marginBottom,
marginLeft: Props.marginLeft,
marginRight: Props.marginRight,
marginEnd: Props.marginEnd,
marginStart: Props.marginStart,
accessibilityActions: Props.accessibilityActions,
accessibilityElementsHidden: Props.accessibilityElementsHidden,
accessibilityHint: Props.accessibilityHint,
accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors,
accessibilityLabel: Props.accessibilityLabel,
accessibilityLiveRegion: Props.accessibilityLiveRegion,
accessibilityRole: Props.accessibilityRole,
accessibilityState: Props.accessibilityState,
accessibilityValue: Props.accessibilityValue,
accessibilityViewIsModal: Props.accessibilityViewIsModal,
accessible: Props.accessible,
collapsable: Props.collapsable,
hitSlop: Props.hitSlop,
importantForAccessibility: Props.importantForAccessibility,
nativeID: Props.nativeID,
needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing,
onAccessibilityEscape: Props.onAccessibilityEscape,
onAccessibilityTap: Props.onAccess