@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Checkbox/Check.js

@@ -1,56 +1,93 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckmarkIcon } from "@artsy/icons/native";
-import { themeGet } from "@styled-system/theme-get";
-import styled, { css } from "styled-components/native";
-import { Box } from "../Box";
-export const CHECK_SIZE = 22;
-const CHECK_MODES = {
+"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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.Check = exports.CHECK_SIZE = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var theme_get_1 = require("@styled-system/theme-get");
+var native_2 = __importStar(require("styled-components/native"));
+var Box_1 = require("../Box");
+exports.CHECK_SIZE = 22;
+var CHECK_MODES = {
     default: {
-        resting: css `
-      background-color: ${themeGet("colors.mono0")};
-      border-color: ${themeGet("colors.mono10")};
-    `,
-        selected: css `
-      background-color: ${themeGet("colors.mono100")};
-      border-color: ${themeGet("colors.mono100")};
-    `,
+        resting: (0, native_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono0"), (0, theme_get_1.themeGet)("colors.mono10")),
+        selected: (0, native_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono100"), (0, theme_get_1.themeGet)("colors.mono100")),
     },
     disabled: {
-        resting: css `
-      background-color: ${themeGet("colors.mono5")};
-      border-color: ${themeGet("colors.mono10")};
-    `,
-        selected: css `
-      background-color: ${themeGet("colors.mono30")};
-      border-color: ${themeGet("colors.mono30")};
-    `,
+        resting: (0, native_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono5"), (0, theme_get_1.themeGet)("colors.mono10")),
+        selected: (0, native_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono30"), (0, theme_get_1.themeGet)("colors.mono30")),
     },
     error: {
-        resting: css `
-      background-color: ${themeGet("colors.mono0")};
-      border-color: ${themeGet("colors.red100")};
-    `,
-        selected: css `
-      background-color: ${themeGet("colors.mono100")};
-      border-color: ${themeGet("colors.mono100")};
-    `,
+        resting: (0, native_2.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono0"), (0, theme_get_1.themeGet)("colors.red100")),
+        selected: (0, native_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n    "])), (0, theme_get_1.themeGet)("colors.mono100"), (0, theme_get_1.themeGet)("colors.mono100")),
     },
 };
 /** Toggeable check mark */
-export const Check = ({ disabled, selected, testID, ...rest }) => {
-    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckmarkIcon, { fill: "mono0" }) }));
+var Check = function (_a) {
+    var disabled = _a.disabled, selected = _a.selected, testID = _a.testID, rest = __rest(_a, ["disabled", "selected", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(Container, __assign({ disabled: disabled, selected: selected }, rest, { "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && (0, jsx_runtime_1.jsx)(native_1.CheckmarkIcon, { fill: "mono0" }) })));
 };
-const Container = styled(Box) `
-  width: ${CHECK_SIZE}px;
-  height: ${CHECK_SIZE}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid;
-  border-radius: 1px;
-
-  ${(props) => {
-    const mode = (() => {
+exports.Check = Check;
+var Container = (0, native_2.default)(Box_1.Box)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid;\n  border-radius: 1px;\n\n  ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid;\n  border-radius: 1px;\n\n  ", ";\n"])), exports.CHECK_SIZE, exports.CHECK_SIZE, function (props) {
+    var mode = (function () {
         switch (true) {
             case props.error:
                 return CHECK_MODES.error;
@@ -61,5 +98,5 @@ const Container = styled(Box) `
         }
     })();
     return props.selected ? mode.selected : mode.resting;
-}};
-`;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/elements/Checkbox/Checkbox.js

@@ -1,34 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { themeGet } from "@styled-system/theme-get";
-import { useState } from "react";
-import { PixelRatio, StyleSheet, TouchableWithoutFeedback, } from "react-native";
-import styled from "styled-components/native";
-import { CssTransition } from "../../animation/CssTransition";
-import { useTheme } from "../../utils/hooks/useTheme";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-const CHECKBOX_SIZE = 20;
-const DURATION = 250;
-export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, accessibilityLabel, accessibilityHint, ...restProps }) => {
-    const { color, space } = useTheme();
-    const fontScale = PixelRatio.getFontScale();
-    const checkboxSize = CHECKBOX_SIZE * fontScale;
-    const [checked, setChecked] = useState(checkedProp);
-    const isChecked = checkedProp ?? checked;
-    const defaultCheckboxStyle = {
+"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.DisabledMark = exports.CheckMark = exports.Checkbox = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_get_1 = require("@styled-system/theme-get");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("styled-components/native"));
+var CssTransition_1 = require("../../animation/CssTransition");
+var useTheme_1 = require("../../utils/hooks/useTheme");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var CHECKBOX_SIZE = 20;
+var DURATION = 250;
+var Checkbox = function (_a) {
+    var checkedProp = _a.checked, disabled = _a.disabled, error = _a.error, onPress = _a.onPress, text = _a.text, subtitle = _a.subtitle, children = _a.children, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, restProps = __rest(_a, ["checked", "disabled", "error", "onPress", "text", "subtitle", "children", "accessibilityLabel", "accessibilityHint"]);
+    var _b = (0, useTheme_1.useTheme)(), color = _b.color, space = _b.space;
+    var fontScale = react_native_1.PixelRatio.getFontScale();
+    var checkboxSize = CHECKBOX_SIZE * fontScale;
+    var _c = (0, react_1.useState)(checkedProp), checked = _c[0], setChecked = _c[1];
+    var isChecked = checkedProp !== null && checkedProp !== void 0 ? checkedProp : checked;
+    var defaultCheckboxStyle = {
         backgroundColor: color("mono0"),
         borderColor: color("mono60"),
     };
-    const checkedCheckboxStyle = {
+    var checkedCheckboxStyle = {
         backgroundColor: color("mono100"),
         borderColor: color("mono100"),
     };
-    const disabledCheckboxStyle = {
+    var disabledCheckboxStyle = {
         backgroundColor: color("mono5"),
         borderColor: color("mono10"),
     };
-    const checkboxStyles = {
+    var checkboxStyles = {
         default: {
             unchecked: defaultCheckboxStyle,
             checked: checkedCheckboxStyle,
@@ -38,47 +71,50 @@ export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text,
             checked: checkedCheckboxStyle,
         },
     };
-    const checkboxStyle = disabled
+    var checkboxStyle = disabled
         ? disabledCheckboxStyle
         : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
-    const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
-    const subtitleColor = error ? color("red100") : disabled ? color("mono30") : color("mono60");
-    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: (event) => {
+    var textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
+    var subtitleColor = error ? color("red100") : disabled ? color("mono30") : color("mono60");
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled: disabled }, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: function (event) {
             if (disabled) {
                 return;
             }
             setChecked(!checked);
-            onPress?.(event);
-        }, children: _jsxs(Flex, { flex: 1, ...restProps, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
+            onPress === null || onPress === void 0 ? void 0 : onPress(event);
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ flex: 1 }, restProps, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(CssTransition_1.CssTransition, { style: [
                                     styles(fontScale).container,
                                     text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
                                     checkboxStyle,
                                 ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
-                                    (!!disabled ? (_jsx(DisabledMark, { size: checkboxSize })) : (_jsx(CheckMark, { size: checkboxSize }))) }) }), _jsxs(Flex, { justifyContent: "center", flex: 1, children: [!!text && (_jsx(Text, { variant: "sm-display", color: textColor, children: text })), children] })] }), !!subtitle && (_jsx(Flex, { ml: `${(CHECKBOX_SIZE + space(1)) * fontScale}px`, mt: "6px", children: _jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
+                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledMark, { size: checkboxSize })) : ((0, jsx_runtime_1.jsx)(exports.CheckMark, { size: checkboxSize }))) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "center", flex: 1, children: [!!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", color: textColor, children: text })), children] })] }), !!subtitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: "".concat((CHECKBOX_SIZE + space(1)) * fontScale, "px"), mt: "6px", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] })) }));
 };
+exports.Checkbox = Checkbox;
 // styled-component does not have support for Animated.View
-const styles = (fontScale) => StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderStyle: "solid",
-        width: CHECKBOX_SIZE * fontScale,
-        height: CHECKBOX_SIZE * fontScale,
-    },
-});
+var styles = function (fontScale) {
+    return react_native_1.StyleSheet.create({
+        container: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderWidth: 1,
+            borderStyle: "solid",
+            width: CHECKBOX_SIZE * fontScale,
+            height: CHECKBOX_SIZE * fontScale,
+        },
+    });
+};
 // This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
-export const CheckMark = ({ size }) => {
-    const { color } = useTheme();
-    return (_jsx(Box, { style: {
+var CheckMark = function (_a) {
+    var size = _a.size;
+    var color = (0, useTheme_1.useTheme)().color;
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: {
             transform: [{ rotate: "-45deg" }],
             borderBottomWidth: 2,
             borderLeftWidth: 2,
         }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomColor: color("mono0"), borderLeftColor: color("mono0") }));
 };
-export const DisabledMark = styled(CheckMark) `
-  border-bottom-color: ${themeGet("colors.mono30")};
-  border-left-color: ${themeGet("colors.mono30")};
-`;
+exports.CheckMark = CheckMark;
+exports.DisabledMark = (0, native_1.default)(exports.CheckMark)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n"], ["\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n"])), (0, theme_get_1.themeGet)("colors.mono30"), (0, theme_get_1.themeGet)("colors.mono30"));
+var templateObject_1;

package/dist/elements/Checkbox/Checkbox.stories.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from "./Checkbox";
-import { List, Row } from "../../storybook/helpers";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = Variants;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Checkbox_1 = require("./Checkbox");
+var helpers_1 = require("../../storybook/helpers");
+exports.default = {
     title: "Checkbox",
-    component: Checkbox,
+    component: Checkbox_1.Checkbox,
 };
-export function Variants() {
-    return (_jsxs(List, { style: { marginLeft: 20 }, children: [_jsx(Row, { children: _jsx(Checkbox, { text: "Default" }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked", checked: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Error", error: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Default with multiline
-text` }) }), _jsx(Row, { children: _jsx(Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), _jsx(Row, { children: _jsx(Checkbox, { text: `Error with multiline
-text`, subtitle: "With subtitle", error: true }) })] }));
+function Variants() {
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default with multiline\ntext" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error with multiline\ntext", subtitle: "With subtitle", error: true }) })] }));
 }

package/dist/elements/Checkbox/index.js

@@ -1,2 +1,18 @@
-export * from "./Check";
-export * from "./Checkbox";
+"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("./Check"), exports);
+__exportStar(require("./Checkbox"), exports);

package/dist/elements/Chip/Chip.js

@@ -1,28 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from "moti";
-import { useState } from "react";
-import { useColor, useSpace } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Image } from "../Image";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const Chip = ({ image, title, subtitle, onPress }) => {
-    const color = useColor();
-    const space = useSpace();
-    const [isPressed, setIsPressed] = useState(false);
-    const FROM_COLOR = color("mono10");
-    const TO_COLOR = color("mono5");
-    const handleOnPressIn = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var moti_1 = require("moti");
+var react_1 = require("react");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Image_1 = require("../Image");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var Chip = function (_a) {
+    var image = _a.image, title = _a.title, subtitle = _a.subtitle, onPress = _a.onPress;
+    var color = (0, hooks_1.useColor)();
+    var space = (0, hooks_1.useSpace)();
+    var _b = (0, react_1.useState)(false), isPressed = _b[0], setIsPressed = _b[1];
+    var FROM_COLOR = color("mono10");
+    var TO_COLOR = color("mono5");
+    var handleOnPressIn = function () {
         setIsPressed(true);
     };
-    const handleOnPressOut = () => {
+    var handleOnPressOut = function () {
         setIsPressed(false);
     };
-    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: title, onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { animate: {
+    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityLabel: title, onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && (0, jsx_runtime_1.jsx)(Image_1.Image, { src: image, width: 70, height: 70 }), (0, jsx_runtime_1.jsxs)(moti_1.View, { animate: {
                         backgroundColor: !isPressed ? TO_COLOR : FROM_COLOR,
                     }, style: {
                         flex: 1,
                         padding: space(1),
                         justifyContent: "center",
-                    }, children: [!!subtitle && (_jsx(Text, { variant: "xs", color: "mono60", selectable: false, children: subtitle })), _jsx(Text, { variant: "sm-display", selectable: false, children: title })] })] }) }));
+                    }, children: [!!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "mono60", selectable: false, children: subtitle })), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", selectable: false, children: title })] })] }) }));
 };
+exports.Chip = Chip;

package/dist/elements/Chip/Chip.stories.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert } from "react-native";
-import { Chip } from "./Chip";
-import { Flex } from "../Flex";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variations = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var Chip_1 = require("./Chip");
+var Flex_1 = require("../Flex");
+exports.default = {
     title: "Chip",
-    component: Chip,
+    component: Chip_1.Chip,
 };
-export const Variations = () => {
-    return (_jsxs(Flex, { p: 2, justifyContent: "center", alignItems: "center", gap: 2, children: [_jsx(Chip, { title: "Only title" }), _jsx(Chip, { title: "Title and subtitle", subtitle: "Subtitle" }), _jsx(Chip, { title: "Title and image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Title, subtitle and image", subtitle: "Cow image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Press me", subtitle: "Pressing alerts something", onPress: () => Alert.alert("Pressed") })] }));
+var Variations = function () {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { p: 2, justifyContent: "center", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(Chip_1.Chip, { title: "Only title" }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { title: "Title and subtitle", subtitle: "Subtitle" }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { title: "Title and image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { title: "Title, subtitle and image", subtitle: "Cow image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), (0, jsx_runtime_1.jsx)(Chip_1.Chip, { title: "Press me", subtitle: "Pressing alerts something", onPress: function () { return react_native_1.Alert.alert("Pressed"); } })] }));
 };
+exports.Variations = Variations;

package/dist/elements/Chip/index.js

@@ -1 +1,17 @@
-export * from "./Chip";
+"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("./Chip"), exports);

package/dist/elements/ClassTheme/ClassTheme.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme, Theme } from "../../";
-export const ClassTheme = ({ theme = "v3", children, }) => {
-    const currentTheme = useTheme();
-    return (_jsx(Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassTheme = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var __1 = require("../../");
+var ClassTheme = function (_a) {
+    var _b = _a.theme, theme = _b === void 0 ? "v3" : _b, children = _a.children;
+    var currentTheme = (0, __1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(__1.Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
 };
+exports.ClassTheme = ClassTheme;

package/dist/elements/ClassTheme/index.js

@@ -1 +1,17 @@
-export * from "./ClassTheme";
+"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("./ClassTheme"), exports);

package/dist/elements/Collapse/Collapse.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from "react-native";
-export const Collapse = ({ opened, children }) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapse = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var Collapse = function (_a) {
+    var opened = _a.opened, children = _a.children;
     if (!opened) {
         return null;
     }
-    return _jsx(View, { children: children });
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: children });
 };
+exports.Collapse = Collapse;

package/dist/elements/Collapse/Collapse.stories.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Collapse } from "./Collapse";
-import { LinkText, Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Something = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Collapse_1 = require("./Collapse");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Collapse",
-    component: Collapse,
+    component: Collapse_1.Collapse,
 };
-export const Something = () => {
-    const [opened, setOpened] = useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), _jsx(Collapse, { opened: opened, children: _jsx(Text, { children: "inside" }) })] }));
+var Something = function () {
+    var _a = (0, react_1.useState)(true), opened = _a[0], setOpened = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.LinkText, { onPress: function () { return setOpened(function (v) { return !v; }); }, children: "toggle" }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: opened, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "inside" }) })] }));
 };
+exports.Something = Something;

package/dist/elements/Collapse/index.js

@@ -1 +1,17 @@
-export * from "./Collapse";
+"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("./Collapse"), exports);