@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -1,34 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLeftIcon, SearchIcon } from "@artsy/icons/native";
-import isArray from "lodash/isArray";
-import isString from "lodash/isString";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { PixelRatio, TextInput } from "react-native";
-import { DEFAULT_HIT_SLOP } from "../../constants";
-import { useColor, useTheme } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest }) => {
-    const theme = useTheme();
-    const ref = useRef(null);
-    const [inputWidth, setInputWidth] = useState(0);
-    const placeholderWidths = useRef([]);
-    useLayoutEffect(() => {
-        ref.current?.measureInWindow((_x, _y, width) => {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEARCH_INPUT_CONTAINER_BORDER_RADIUS = exports.SEARCH_INPUT_CONTAINER_HEIGHT = exports.RoundSearchInput = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var isArray_1 = __importDefault(require("lodash/isArray"));
+var isString_1 = __importDefault(require("lodash/isString"));
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var constants_1 = require("../../constants");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var RoundSearchInput = function (_a) {
+    var value = _a.value, placeholder = _a.placeholder, onLeftIconPress = _a.onLeftIconPress, rest = __rest(_a, ["value", "placeholder", "onLeftIconPress"]);
+    var theme = (0, hooks_1.useTheme)();
+    var ref = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(0), inputWidth = _b[0], setInputWidth = _b[1];
+    var placeholderWidths = (0, react_1.useRef)([]);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, width) {
             if (width > 0 && width !== inputWidth) {
                 setInputWidth(width);
             }
         });
     }, []);
-    const [isFocused, setIsFocused] = useState(false);
-    const color = useColor();
-    const getPlaceholder = useCallback(() => {
+    var _c = (0, react_1.useState)(false), isFocused = _c[0], setIsFocused = _c[1];
+    var color = (0, hooks_1.useColor)();
+    var getPlaceholder = (0, react_1.useCallback)(function () {
         if (!placeholder) {
             return "";
         }
         // if it's android and we only have one string, return that string
-        if (isString(placeholder)) {
+        if ((0, isString_1.default)(placeholder)) {
             return placeholder;
         }
         // Wait until the input width is known and the placeholder widths are known to avoid flashes
@@ -36,7 +66,7 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
             return "";
         }
         // otherwise, find a placeholder that has longest width that fits in the inputtext
-        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
+        var longestFittingStringIndex = placeholderWidths.current.findIndex(function (placeholderWidth) {
             return placeholderWidth <= inputWidth;
         });
         if (longestFittingStringIndex > -1) {
@@ -48,54 +78,57 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
     if (value && __DEV__) {
         throw new Error("Avoid controlled inputs and use the defaultValue prop instead");
     }
-    const inputStyles = useMemo(() => {
+    var inputStyles = (0, react_1.useMemo)(function () {
         return {
             flex: 1,
-            height: SEARCH_INPUT_CONTAINER_HEIGHT,
+            height: exports.SEARCH_INPUT_CONTAINER_HEIGHT,
             fontFamily: theme.theme.fonts.sans.regular,
             fontSize: 16,
             lineHeight: 20,
             color: color("mono100"),
         };
     }, [color]);
-    const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
-        if (!isArray(placeholder)) {
+    var renderAndroidPlaceholderMeasuringHack = (0, react_1.useCallback)(function () {
+        if (!(0, isArray_1.default)(placeholder)) {
             return null;
         }
         // Do not render the hack if we have already measured the placeholder
         if (placeholderWidths.current.length > 0) {
             return null;
         }
-        return (_jsx(Flex, { style: {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
                 position: "absolute",
                 top: -10000, // make sure its off the screen
                 width: 10000, // make sure Texts can take as much space as they need
                 alignItems: "baseline", // this is to make Texts get the smallest width they can get to fit the text
-            }, children: placeholder.map((placeholderString, index) => (_jsx(Text, { onLayout: (event) => {
+            }, children: placeholder.map(function (placeholderString, index) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: function (event) {
                     placeholderWidths.current[index] = event.nativeEvent.layout.width;
-                }, numberOfLines: 1, style: inputStyles, children: placeholderString }, index))) }));
+                }, numberOfLines: 1, style: inputStyles, children: placeholderString }, index)); }) }));
     }, [placeholder, inputStyles]);
-    return (_jsxs(Flex, { flexDirection: "row", style: {
-            height: SEARCH_INPUT_CONTAINER_HEIGHT,
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", style: {
+            height: exports.SEARCH_INPUT_CONTAINER_HEIGHT,
             paddingRight: CONTAINER_HORIZONTAL_PADDING,
-            paddingLeft: 2 * CONTAINER_HORIZONTAL_PADDING + 16 * PixelRatio.getFontScale(),
-            borderRadius: SEARCH_INPUT_CONTAINER_BORDER_RADIUS,
+            paddingLeft: 2 * CONTAINER_HORIZONTAL_PADDING + 16 * react_native_1.PixelRatio.getFontScale(),
+            borderRadius: exports.SEARCH_INPUT_CONTAINER_BORDER_RADIUS,
             backgroundColor: color("mono5"),
-        }, children: [renderAndroidPlaceholderMeasuringHack(), _jsx(TextInput, { ...rest, placeholder: getPlaceholder(), ref: ref, style: inputStyles, autoCapitalize: "none", blurOnSubmit: true, 
+        }, children: [renderAndroidPlaceholderMeasuringHack(), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, __assign({}, rest, { placeholder: getPlaceholder(), ref: ref, style: inputStyles, autoCapitalize: "none", blurOnSubmit: true, 
                 // We only support up to 100 chars search in our backend,
                 // anything above that would lead to an error
-                maxLength: 100, clearButtonMode: "always", placeholderTextColor: color("mono60"), onFocus: (e) => {
+                maxLength: 100, clearButtonMode: "always", placeholderTextColor: color("mono60"), onFocus: function (e) {
+                    var _a;
                     setIsFocused(true);
-                    rest.onFocus?.(e);
-                }, enterKeyHint: "search", returnKeyType: "search" }), _jsx(Flex, { position: "absolute", height: SEARCH_INPUT_CONTAINER_HEIGHT, justifyContent: "center", alignItems: "center", style: {
+                    (_a = rest.onFocus) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+                }, enterKeyHint: "search", returnKeyType: "search" })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", height: exports.SEARCH_INPUT_CONTAINER_HEIGHT, justifyContent: "center", alignItems: "center", style: {
                     paddingHorizontal: CONTAINER_HORIZONTAL_PADDING,
-                }, children: _jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: `${isFocused ? "Back" : "Search"}`, onPress: () => {
-                        ref.current?.blur();
+                }, children: (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityLabel: "".concat(isFocused ? "Back" : "Search"), onPress: function () {
+                        var _a;
+                        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.blur();
                         setIsFocused(false);
-                        onLeftIconPress?.();
-                    }, hitSlop: DEFAULT_HIT_SLOP, haptic: "impactLight", children: !isFocused ? (_jsx(SearchIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) : (_jsx(ArrowLeftIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) }) })] }));
+                        onLeftIconPress === null || onLeftIconPress === void 0 ? void 0 : onLeftIconPress();
+                    }, hitSlop: constants_1.DEFAULT_HIT_SLOP, haptic: "impactLight", children: !isFocused ? ((0, jsx_runtime_1.jsx)(native_1.SearchIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) : ((0, jsx_runtime_1.jsx)(native_1.ArrowLeftIcon, { fill: "mono60", width: ICON_SIZE, height: ICON_SIZE })) }) })] }));
 };
-export const SEARCH_INPUT_CONTAINER_HEIGHT = 48;
-const CONTAINER_HORIZONTAL_PADDING = 16;
-export const SEARCH_INPUT_CONTAINER_BORDER_RADIUS = 24;
-const ICON_SIZE = 24;
+exports.RoundSearchInput = RoundSearchInput;
+exports.SEARCH_INPUT_CONTAINER_HEIGHT = 48;
+var CONTAINER_HORIZONTAL_PADDING = 16;
+exports.SEARCH_INPUT_CONTAINER_BORDER_RADIUS = 24;
+var ICON_SIZE = 24;

package/dist/elements/SearchInput/SearchInput.js

@@ -1,17 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchIcon } from "@artsy/icons/native";
-import { useColor } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Input } from "../Input";
-export const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...props }) => {
-    const color = useColor();
-    return (_jsx(Flex, { flexDirection: "row", justifyContent: "center", children: _jsx(Input, { icon: _jsx(SearchIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
-                onClear?.();
-            }, onChangeText: onChangeText, ...props, onFocus: (e) => {
-                props.onFocus?.(e);
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Input_1 = require("../Input");
+var SearchInput = function (_a) {
+    var _b = _a.enableCancelButton, enableCancelButton = _b === void 0 ? true : _b, onChangeText = _a.onChangeText, onClear = _a.onClear, props = __rest(_a, ["enableCancelButton", "onChangeText", "onClear"]);
+    var color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Input_1.Input, __assign({ icon: (0, jsx_runtime_1.jsx)(native_1.SearchIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: function () {
+                onClear === null || onClear === void 0 ? void 0 : onClear();
+            }, onChangeText: onChangeText }, props, { onFocus: function (e) {
+                var _a;
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }, style: {
                 color: color("mono100"),
-            }, onBlur: (e) => {
-                props.onBlur?.(e);
-            } }) }));
+            }, onBlur: function (e) {
+                var _a;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            } })) }));
 };
+exports.SearchInput = SearchInput;

package/dist/elements/SearchInput/index.js

@@ -1,2 +1,18 @@
-export * from "./SearchInput";
-export * from "./RoundSearchInput";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SearchInput"), exports);
+__exportStar(require("./RoundSearchInput"), exports);

package/dist/elements/Separator/Separator.js

@@ -1,15 +1,23 @@
-import { themeGet } from "@styled-system/theme-get";
-import styled from "styled-components/native";
-import { border, space, width } from "styled-system";
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = void 0;
+var theme_get_1 = require("@styled-system/theme-get");
+var native_1 = __importDefault(require("styled-components/native"));
+var styled_system_1 = require("styled-system");
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-export const Separator = styled.View.attrs((props) => ({
-    width: props.width ?? "100%",
-})) `
-  border: 1px solid ${themeGet("colors.onBackgroundLow")};
-  border-bottom-width: 0;
-  ${space};
-  ${width};
-  ${border};
-`;
+exports.Separator = native_1.default.View.attrs(function (props) {
+    var _a;
+    return ({
+        width: (_a = props.width) !== null && _a !== void 0 ? _a : "100%",
+    });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-bottom-width: 0;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  border: 1px solid ", ";\n  border-bottom-width: 0;\n  ", ";\n  ", ";\n  ", ";\n"])), (0, theme_get_1.themeGet)("colors.onBackgroundLow"), styled_system_1.space, styled_system_1.width, styled_system_1.border);
+var templateObject_1;

package/dist/elements/Separator/Separator.stories.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator } from "./Separator";
-import { Spacer } from "../Spacer";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Styled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Separator_1 = require("./Separator");
+var Spacer_1 = require("../Spacer");
+exports.default = {
     title: "Separator",
-    component: Separator,
+    component: Separator_1.Separator,
 };
-export const Styled = () => (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Spacer, { y: 2 }), _jsx(Separator, { borderColor: "red" })] }));
+var Styled = function () { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Separator_1.Separator, {}), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 }), (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "red" })] })); };
+exports.Styled = Styled;

package/dist/elements/Separator/ShadowSeparator.js

@@ -1,7 +1,14 @@
-import styled from "styled-components/native";
-import { Separator } from "./Separator";
-export const ShadowSeparator = styled(Separator) `
-  box-shadow: 0 -1px 1px rgba(50, 50, 50, 0.1);
-  width: 100%;
-  height: 0;
-`;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShadowSeparator = void 0;
+var native_1 = __importDefault(require("styled-components/native"));
+var Separator_1 = require("./Separator");
+exports.ShadowSeparator = (0, native_1.default)(Separator_1.Separator)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: 0 -1px 1px rgba(50, 50, 50, 0.1);\n  width: 100%;\n  height: 0;\n"], ["\n  box-shadow: 0 -1px 1px rgba(50, 50, 50, 0.1);\n  width: 100%;\n  height: 0;\n"])));
+var templateObject_1;

package/dist/elements/Separator/index.js

@@ -1,2 +1,18 @@
-export * from "./Separator";
-export * from "./ShadowSeparator";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Separator"), exports);
+__exportStar(require("./ShadowSeparator"), exports);

package/dist/elements/SimpleMessage/SimpleMessage.js

@@ -1,15 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { themeGet } from "@styled-system/theme-get";
-import styled from "styled-components/native";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-const StyledFlex = styled(Flex) `
-  background-color: ${themeGet("colors.mono5")};
-  border-radius: 2px;
-`;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleMessage = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_get_1 = require("@styled-system/theme-get");
+var native_1 = __importDefault(require("styled-components/native"));
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var StyledFlex = (0, native_1.default)(Flex_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 2px;\n"], ["\n  background-color: ", ";\n  border-radius: 2px;\n"
+    /**
+     * A generic message window for displaying ZeroStates, notices, errors, etc.
+     */
+])), (0, theme_get_1.themeGet)("colors.mono5"));
 /**
  * A generic message window for displaying ZeroStates, notices, errors, etc.
  */
-export const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
-    return (_jsx(StyledFlex, { p: 2, ...restProps, children: _jsx(Text, { color: "mono60", variant: textVariant, children: children }) }));
+var SimpleMessage = function (_a) {
+    var children = _a.children, _b = _a.textVariant, textVariant = _b === void 0 ? "sm" : _b, restProps = __rest(_a, ["children", "textVariant"]);
+    return ((0, jsx_runtime_1.jsx)(StyledFlex, __assign({ p: 2 }, restProps, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono60", variant: textVariant, children: children }) })));
 };
+exports.SimpleMessage = SimpleMessage;
+var templateObject_1;

package/dist/elements/SimpleMessage/index.js

@@ -1 +1,17 @@
-export * from "./SimpleMessage";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SimpleMessage"), exports);

package/dist/elements/Skeleton/Skeleton.js

@@ -1,9 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { Animated } from "react-native";
-import { useColor } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonBox = exports.SkeletonText = exports.Skeleton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
 /**
  * Creates a skeleton animation for a component.
  *
@@ -14,29 +39,35 @@ import { Text } from "../Text";
  *   <SkeletonBox width={100} height={100} />
  * </Skeleton>
  */
-export const Skeleton = ({ children }) => {
-    const opacity = useRef(new Animated.Value(0.5));
-    const animationRef = useRef(null);
-    useEffect(() => {
-        animationRef.current = Animated.loop(Animated.timing(opacity.current, {
+var Skeleton = function (_a) {
+    var children = _a.children;
+    var opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0.5));
+    var animationRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        animationRef.current = react_native_1.Animated.loop(react_native_1.Animated.timing(opacity.current, {
             toValue: 1,
             duration: 1000,
             useNativeDriver: true,
         }));
         animationRef.current.start();
-        return () => {
+        return function () {
             animationRef.current.stop();
         };
     }, []);
-    return (_jsx(Animated.View, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
             opacity: opacity.current,
         }, children: children }));
 };
-export const SkeletonText = ({ children, ...rest }) => {
-    const color = useColor();
-    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("mono10"), color: "rgb(251, 0, 0, 0)", children: children }) }));
+exports.Skeleton = Skeleton;
+var SkeletonText = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "flex-start", children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({}, rest, { bg: color("mono10"), color: "rgb(251, 0, 0, 0)", children: children })) }));
 };
-export const SkeletonBox = ({ children, ...rest }) => {
-    const color = useColor();
-    return (_jsx(Flex, { ...rest, bg: color("mono10"), children: children }));
+exports.SkeletonText = SkeletonText;
+var SkeletonBox = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, rest, { bg: color("mono10"), children: children })));
 };
+exports.SkeletonBox = SkeletonBox;

package/dist/elements/Skeleton/Skeleton.stories.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { range } from "lodash";
-import { Skeleton, SkeletonBox, SkeletonText } from "./Skeleton";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-import { Join } from "../Join";
-import { Spacer } from "../Spacer";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoaders = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_1 = require("lodash");
+var Skeleton_1 = require("./Skeleton");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+var Join_1 = require("../Join");
+var Spacer_1 = require("../Spacer");
+exports.default = {
     title: "Skeleton",
-    component: Skeleton,
+    component: Skeleton_1.Skeleton,
 };
-export const SkeletonLoaders = () => (_jsx(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: _jsxs(Skeleton, { children: [_jsxs(Join, { separator: _jsx(Spacer, { y: 1 }), children: [_jsx(SkeletonText, { variant: "lg", children: "Hi i am loading" }), _jsx(SkeletonText, { variant: "md", children: "Me too" }), _jsx(SkeletonText, { variant: "sm", children: "Also loading" }), _jsx(SkeletonText, { variant: "xs", children: "Also loading" })] }), _jsx(Spacer, { y: 2 }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", children: range(1, 100).map((index) => (_jsx(SkeletonBox, { mr: 1, mb: 1, width: 20, height: 20 }, index))) })] }) }));
+var SkeletonLoaders = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: (0, jsx_runtime_1.jsxs)(Skeleton_1.Skeleton, { children: [(0, jsx_runtime_1.jsxs)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), children: [(0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "lg", children: "Hi i am loading" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "md", children: "Me too" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "sm", children: "Also loading" }), (0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonText, { variant: "xs", children: "Also loading" })] }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 2 }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", children: (0, lodash_1.range)(1, 100).map(function (index) { return ((0, jsx_runtime_1.jsx)(Skeleton_1.SkeletonBox, { mr: 1, mb: 1, width: 20, height: 20 }, index)); }) })] }) })); };
+exports.SkeletonLoaders = SkeletonLoaders;

package/dist/elements/Skeleton/index.js

@@ -1 +1,17 @@
-export * from "./Skeleton";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Skeleton"), exports);