@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/BorderBox/BorderBox.js

@@ -1,15 +1,20 @@
-import { themeGet } from "@styled-system/theme-get";
-import styled from "styled-components/native";
-import { border, space as styledSpace } from "styled-system";
-import { Flex } from "../Flex";
+"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.BorderBox = 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");
+var Flex_1 = require("../Flex");
 /**
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-export const BorderBox = styled(Flex) `
-  border: 1px solid ${themeGet("colors.mono10")};
-  border-radius: 2px;
-  padding: ${themeGet("space.2")};
-  ${border}
-  ${styledSpace}
-`;
+exports.BorderBox = (0, native_1.default)(Flex_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: ", ";\n  ", "\n  ", "\n"], ["\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: ", ";\n  ", "\n  ", "\n"])), (0, theme_get_1.themeGet)("colors.mono10"), (0, theme_get_1.themeGet)("space.2"), styled_system_1.border, styled_system_1.space);
+var templateObject_1;

package/dist/elements/BorderBox/index.js

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

package/dist/elements/Box/Box.js

@@ -1,7 +1,17 @@
-import { View } from "react-native";
-import styled from "styled-components/native";
-import { border, color, flexbox, layout, position, space, system, textAlign, } from "styled-system";
-const gap = 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.Box = void 0;
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("styled-components/native"));
+var styled_system_1 = require("styled-system");
+var gap = (0, styled_system_1.system)({
     gap: {
         property: "gap",
         scale: "space",
@@ -18,13 +28,5 @@ const gap = system({
 /**
  * Box is just a `View` with common styled-system props.
  */
-export const Box = styled(View) `
-  ${space}
-  ${color}
-  ${flexbox}
-  ${layout}
-  ${position}
-  ${border}
-  ${textAlign}
-  ${gap}
-`;
+exports.Box = (0, native_1.default)(react_native_1.View)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), styled_system_1.space, styled_system_1.color, styled_system_1.flexbox, styled_system_1.layout, styled_system_1.position, styled_system_1.border, styled_system_1.textAlign, gap);
+var templateObject_1;

package/dist/elements/Box/Box.stories.js

@@ -1,18 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { List } from "../../storybook/helpers";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Spacer } from "../Spacer";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GapProps = exports.RegularViewProps = exports.Styled = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var helpers_1 = require("../../storybook/helpers");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Box",
-    component: Box,
+    component: Box_1.Box,
 };
-export const Styled = () => (_jsx(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: _jsx(Box, { px: 1, backgroundColor: "blue100", flexDirection: "row", height: 300, width: 200, top: 2, borderBottomWidth: 1, textAlign: "center" }) }));
-export const RegularViewProps = () => {
-    const r = useRef(null);
-    return (_jsx(Flex, { flex: 1, children: _jsx(Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
+var Styled = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, backgroundColor: "blue100", flexDirection: "row", height: 300, width: 200, top: 2, borderBottomWidth: 1, textAlign: "center" }) })); };
+exports.Styled = Styled;
+var RegularViewProps = function () {
+    var r = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: function (e) { return console.log(e.nativeEvent.layout); }, ref: r }) }));
 };
-const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "mono10"];
-export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", gap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-1`))) }), _jsx(Text, { children: "Row gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", rowGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-2`))) }), _jsx(Text, { children: "Column gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", columnGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-3`))) }), _jsx(Spacer, { y: 6 })] }));
+exports.RegularViewProps = RegularViewProps;
+var colors = ["red10", "green10", "yellow10", "devpurple", "red100", "mono10"];
+var GapProps = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "mono100", gap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map(function (color) { return ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, "".concat(color, "-1"))); }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Row gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "mono100", rowGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map(function (color) { return ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, "".concat(color, "-2"))); }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Column gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "mono100", columnGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map(function (color) { return ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, "".concat(color, "-3"))); }) }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 6 })] })); };
+exports.GapProps = GapProps;

package/dist/elements/Box/index.js

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

package/dist/elements/Button/Button.js

@@ -1,48 +1,80 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { animated, config, Spring } from "@react-spring/native";
-import { useState } from "react";
-import { PixelRatio, Pressable, } from "react-native";
-import Haptic from "react-native-haptic-feedback";
-import styled from "styled-components/native";
-import { useColor } from "../../utils/hooks";
-import { isTestEnvironment } from "../../utils/tests/isTestEnvironment";
-import { Box } from "../Box";
-import { Flex } from "../Flex/Flex";
-import { MeasuredView } from "../MeasuredView";
-import { Spacer } from "../Spacer";
-import { Spinner } from "../Spinner";
-import { Text } from "../Text/Text";
-import { useTextStyleForPalette } from "../Text/helpers";
+"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._test_DisplayState = exports.Button = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@react-spring/native");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
+var native_2 = __importDefault(require("styled-components/native"));
+var hooks_1 = require("../../utils/hooks");
+var isTestEnvironment_1 = require("../../utils/tests/isTestEnvironment");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex/Flex");
+var MeasuredView_1 = require("../MeasuredView");
+var Spacer_1 = require("../Spacer");
+var Spinner_1 = require("../Spinner");
+var Text_1 = require("../Text/Text");
+var helpers_1 = require("../Text/helpers");
 var DisplayState;
 (function (DisplayState) {
     DisplayState["Enabled"] = "enabled";
     DisplayState["Disabled"] = "disabled";
     DisplayState["Loading"] = "loading";
     DisplayState["Pressed"] = "pressed";
-})(DisplayState || (DisplayState = {}));
-export const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loading, longestText, onPress, size = "large", variant = "fillDark", testOnly_state, testID, textVariant, hitSlop, ...rest }) => {
-    const textVariantBySize = size === "small" ? "xs" : "sm";
-    const textStyle = { fontSize: useTextStyleForPalette(textVariant ?? textVariantBySize).fontSize };
-    const [innerDisplayState, setInnerDisplayState] = useState(DisplayState.Enabled);
-    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
+})(DisplayState || (exports._test_DisplayState = DisplayState = {}));
+var Button = function (_a) {
+    var children = _a.children, disabled = _a.disabled, haptic = _a.haptic, icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, loading = _a.loading, longestText = _a.longestText, onPress = _a.onPress, _c = _a.size, size = _c === void 0 ? "large" : _c, _d = _a.variant, variant = _d === void 0 ? "fillDark" : _d, testOnly_state = _a.testOnly_state, testID = _a.testID, textVariant = _a.textVariant, hitSlop = _a.hitSlop, rest = __rest(_a, ["children", "disabled", "haptic", "icon", "iconPosition", "loading", "longestText", "onPress", "size", "variant", "testOnly_state", "testID", "textVariant", "hitSlop"]);
+    var textVariantBySize = size === "small" ? "xs" : "sm";
+    var textStyle = { fontSize: (0, helpers_1.useTextStyleForPalette)(textVariant !== null && textVariant !== void 0 ? textVariant : textVariantBySize).fontSize };
+    var _e = (0, react_1.useState)(DisplayState.Enabled), innerDisplayState = _e[0], setInnerDisplayState = _e[1];
+    var _f = (0, react_1.useState)({
         width: 0,
         height: 0,
-    });
-    const displayState = testOnly_state ?? // if we use the test prop, use that
-        (loading // if we have loading or disabled in props, they are used
-            ? DisplayState.Loading
-            : disabled
-                ? DisplayState.Disabled
-                : innerDisplayState); // otherwise use the inner state for pressed or enabled
-    const getSize = () => {
+    }), longestTextMeasurements = _f[0], setLongestTextMeasurements = _f[1];
+    var displayState = testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : (loading // if we have loading or disabled in props, they are used
+        ? DisplayState.Loading
+        : disabled
+            ? DisplayState.Disabled
+            : innerDisplayState); // otherwise use the inner state for pressed or enabled
+    var getSize = function () {
         switch (size) {
             case "small":
-                return { height: 30 * PixelRatio.getFontScale(), mx: "15px" };
+                return { height: 30 * react_native_1.PixelRatio.getFontScale(), mx: "15px" };
             case "large":
-                return { height: 50 * PixelRatio.getFontScale(), mx: "30px" };
+                return { height: 50 * react_native_1.PixelRatio.getFontScale(), mx: "30px" };
         }
     };
-    const handlePress = (event) => {
+    var handlePress = function (event) {
         if (onPress === undefined || onPress === null) {
             return;
         }
@@ -52,7 +84,7 @@ export const Button = ({ children, disabled, haptic, icon, iconPosition = "left"
         // Did someone tap really fast? Flick the highlighted state
         if (displayState === DisplayState.Enabled) {
             setInnerDisplayState(DisplayState.Pressed);
-            setTimeout(() => {
+            setTimeout(function () {
                 setInnerDisplayState(DisplayState.Enabled);
             }, 0.3);
         }
@@ -61,42 +93,43 @@ export const Button = ({ children, disabled, haptic, icon, iconPosition = "left"
             setInnerDisplayState(DisplayState.Enabled);
         }
         if (haptic !== undefined) {
-            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(event);
     };
-    const containerSize = getSize();
-    const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return (_jsx(Spring, { to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
-                disabled,
-            }, hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
+    var containerSize = getSize();
+    var to = useStyleForVariantAndState(variant, testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : displayState);
+    return ((0, jsx_runtime_1.jsx)(native_1.Spring, { to: to, config: native_1.config.stiff, children: function (springProps) { return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+                disabled: disabled,
+            }, hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: function () {
                 if (displayState === DisplayState.Loading) {
                     return;
                 }
                 setInnerDisplayState(DisplayState.Pressed);
-            }, onPressOut: () => {
+            }, onPressOut: function () {
                 if (displayState === DisplayState.Loading) {
                     return;
                 }
                 setInnerDisplayState(DisplayState.Enabled);
-            }, onPress: handlePress, testID: testID, children: _jsx(Flex, { flexDirection: "row", children: _jsx(AnimatedContainer, { ...rest, style: {
+            }, onPress: handlePress, testID: testID, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(AnimatedContainer, __assign({}, rest, { style: {
                         backgroundColor: springProps.backgroundColor,
                         borderColor: springProps.borderColor,
                         height: containerSize.height,
-                    }, children: _jsxs(Flex, { mx: containerSize.mx, children: [_jsxs(Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", 
+                    }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mx: containerSize.mx, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", 
                                 // Do not show the content when the button is loading
-                                style: { opacity: displayState === DisplayState.Loading ? 0 : 1 }, children: [iconPosition === "left-start" && !!icon ? (_jsxs(Box, { position: "absolute", left: 0, children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? (_jsxs(_Fragment, { children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, !isTestEnvironment() && longestText && longestTextMeasurements.width === 0 && (_jsx(MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: _jsx(Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), _jsx(AnimatedText, { style: [
+                                style: { opacity: displayState === DisplayState.Loading ? 0 : 1 }, children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, !(0, isTestEnvironment_1.isTestEnvironment)() && longestText && longestTextMeasurements.width === 0 && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), (0, jsx_runtime_1.jsx)(AnimatedText, { style: [
                                             {
                                                 width: "auto",
                                                 color: springProps.textColor,
                                                 textDecorationLine: springProps.textDecorationLine,
                                             },
                                             textStyle,
-                                        ], textAlign: "center", selectable: false, children: children }), iconPosition === "right" && !!icon && (_jsxs(_Fragment, { children: [_jsx(Spacer, { x: 0.5 }), icon] }))] }), displayState === DisplayState.Loading && (_jsx(SpinnerContainer, { children: _jsx(Spinner, { size: size, color: to.loaderColor }) }))] }) }) }) })) }));
+                                        ], textAlign: "center", selectable: false, children: children }), iconPosition === "right" && !!icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] }))] }), displayState === DisplayState.Loading && ((0, jsx_runtime_1.jsx)(SpinnerContainer, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: to.loaderColor }) }))] }) })) }) })); } }));
 };
-const useStyleForVariantAndState = (variant, state) => {
-    const color = useColor();
-    const retval = {
+exports.Button = Button;
+var useStyleForVariantAndState = function (variant, state) {
+    var color = (0, hooks_1.useColor)();
+    var retval = {
         textDecorationLine: "none",
     };
     switch (variant) {
@@ -322,20 +355,8 @@ const useStyleForVariantAndState = (variant, state) => {
     }
     return retval;
 };
-const Container = styled(Box) `
-  position: relative;
-  border-width: 1px;
-  border-radius: 50px;
-  width: ${(p) => (p.block ? "100%" : "auto")};
-  overflow: hidden;
-`;
-const SpinnerContainer = styled(Box) `
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
-const AnimatedContainer = animated(Container);
-const AnimatedText = animated(Text);
-export { DisplayState as _test_DisplayState };
+var Container = (0, native_2.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-width: 1px;\n  border-radius: 50px;\n  width: ", ";\n  overflow: hidden;\n"], ["\n  position: relative;\n  border-width: 1px;\n  border-radius: 50px;\n  width: ", ";\n  overflow: hidden;\n"])), function (p) { return (p.block ? "100%" : "auto"); });
+var SpinnerContainer = (0, native_2.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n"])));
+var AnimatedContainer = (0, native_1.animated)(Container);
+var AnimatedText = (0, native_1.animated)(Text_1.Text);
+var templateObject_1, templateObject_2;

package/dist/elements/Button/Button.stories.js

@@ -1,13 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { capitalize } from "lodash";
-import { useState } from "react";
-import { Button } from "./Button";
-import { DataList, List } from "../../storybook/helpers";
-import { Wrap } from "../../utils/Wrap";
-import { Flex } from "../Flex";
-import { LinkText } from "../Text";
-const sizes = ["small", "large"];
-const variants = [
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var Button_1 = require("./Button");
+var helpers_1 = require("../../storybook/helpers");
+var Wrap_1 = require("../../utils/Wrap");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var sizes = ["small", "large"];
+var variants = [
     "fillDark",
     "fillLight",
     "fillGray",
@@ -17,9 +31,9 @@ const variants = [
     "outlineLight",
     "text",
 ];
-export default {
+exports.default = {
     title: "Button",
-    component: Button,
+    component: Button_1.Button,
     argTypes: {
         variant: {
             control: "select",
@@ -31,23 +45,34 @@ export default {
         },
     },
 };
-export const Default = {
+exports.Default = {
     args: {
         variant: "fillDark",
         size: "large",
         children: "Press me",
     },
-    render: (args) => _jsx(Button, { ...args }),
+    render: function (args) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, args)); },
 };
-export const Sizes = () => (_jsx(DataList, { data: sizes, renderItem: ({ item: size }) => (_jsx(Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: capitalize(size) })) }));
-export const States = () => {
-    const [variant, setVariant] = useState("fillDark");
-    return (_jsxs(List, { children: [_jsx(Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map((v) => (_jsx(LinkText, { color: "orange", onPress: () => setVariant(v), mr: "2", children: v }))) }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" })] }));
+var Sizes = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: function (_a) {
+        var size = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: function () { return console.log("tapped ".concat(size)); }, children: (0, lodash_1.capitalize)(size) }));
+    } })); };
+exports.Sizes = Sizes;
+var States = function () {
+    var _a = (0, react_1.useState)("fillDark"), variant = _a[0], setVariant = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map(function (v) { return ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: function () { return setVariant(v); }, mr: "2", children: v })); }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, loading: true, children: "Loading" })] }));
 };
-export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: _jsx(Flex, { backgroundColor: "pink", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
-export const VariantsLoading = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => {
+exports.States = States;
+var Variants = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+        var variant = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }) }) }) }));
+    } })); };
+exports.Variants = Variants;
+var VariantsLoading = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+        var variant = _a.item;
         if (variant !== "outlineLight") {
-            return (_jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }));
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }));
         }
-        return (_jsx(Flex, { backgroundColor: "pink", py: 0.5, children: _jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }));
-    } }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", py: 0.5, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }) }));
+    } })); };
+exports.VariantsLoading = VariantsLoading;

package/dist/elements/Button/CTAButton.js

@@ -1,3 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "./Button";
-export const CTAButton = (props) => _jsx(Button, { block: true, haptic: true, ...props });
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CTAButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("./Button");
+var CTAButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ block: true, haptic: true }, props)); };
+exports.CTAButton = CTAButton;

package/dist/elements/Button/FollowButton.js

@@ -1,12 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckmarkIcon } from "@artsy/icons/native";
-import { DEFAULT_ICON_SIZE_SMALL } from "../../constants";
-import { formatLargeNumber } from "../../utils/formatLargeNumber";
-import { Button } from "../Button";
-export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    const followText = isFollowed ? "Following" : "Follow";
-    const followCountText = !!followCount && followCount > 1 ? " " + formatLargeNumber(followCount, 1) : "";
-    const text = followText + followCountText;
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed &&
-            !loading && (_jsx(CheckmarkIcon, { fill: "mono60", width: DEFAULT_ICON_SIZE_SMALL, height: DEFAULT_ICON_SIZE_SMALL })), loading: loading, ...restProps, children: !loading && 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.FollowButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var constants_1 = require("../../constants");
+var formatLargeNumber_1 = require("../../utils/formatLargeNumber");
+var Button_1 = require("../Button");
+var FollowButton = function (_a) {
+    var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading"]);
+    var followText = isFollowed ? "Following" : "Follow";
+    var followCountText = !!followCount && followCount > 1 ? " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : "";
+    var text = followText + followCountText;
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed &&
+            !loading && ((0, jsx_runtime_1.jsx)(native_1.CheckmarkIcon, { fill: "mono60", width: constants_1.DEFAULT_ICON_SIZE_SMALL, height: constants_1.DEFAULT_ICON_SIZE_SMALL })), loading: loading }, restProps, { children: !loading && text })));
+};
+exports.FollowButton = FollowButton;

package/dist/elements/Button/LinkButton.js

@@ -1,4 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const LinkButton = (props) => (_jsx(Touchable, { accessibilityRole: "link", onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var LinkButton = function (props) { return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "link", onPress: props.onPress, children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ underline: true }, props)) })); };
+exports.LinkButton = LinkButton;

package/dist/elements/Button/colors.js

@@ -1,6 +1,9 @@
-import { useColor } from "../../utils/hooks/useColor";
-export const useColorsForVariantAndState = () => {
-    const color = useColor();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorsForVariantAndState = void 0;
+var useColor_1 = require("../../utils/hooks/useColor");
+var useColorsForVariantAndState = function () {
+    var color = (0, useColor_1.useColor)();
     return {
         fillDark: {
             disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
@@ -72,3 +75,4 @@ export const useColorsForVariantAndState = () => {
         },
     };
 };
+exports.useColorsForVariantAndState = useColorsForVariantAndState;

package/dist/elements/Button/index.js

@@ -1,4 +1,20 @@
-export * from "./Button";
-export * from "./CTAButton";
-export * from "./LinkButton";
-export * from "./FollowButton";
+"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("./Button"), exports);
+__exportStar(require("./CTAButton"), exports);
+__exportStar(require("./LinkButton"), exports);
+__exportStar(require("./FollowButton"), exports);