@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Banner/Banner.js

@@ -1,28 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Banner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const constants_1 = require("../../constants");
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", ...restProps }) => {
-    const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
-    const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Animated, Easing, TouchableOpacity } from "react-native";
+import { DEFAULT_HIT_SLOP } from "../../constants";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", ...restProps }) => {
+    const [tempHeight, setTempHeight] = useState(undefined);
+    const scaleYAnim = useRef(new Animated.Value(0)).current;
     const handleClose = () => {
-        react_native_1.Animated.timing(scaleYAnim, {
+        Animated.timing(scaleYAnim, {
             toValue: 1,
             duration: 150,
-            easing: react_native_1.Easing.linear,
+            easing: Easing.linear,
             useNativeDriver: true,
         }).start(() => {
             setTempHeight(0);
         });
         onClose?.();
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+    return (_jsx(Animated.View, { style: {
             height: tempHeight,
             transform: [
                 {
@@ -32,9 +29,8 @@ const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight",
                     }),
                 },
             ],
-        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, alignItems: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) }), !!dismissable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: constants_1.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
+        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) }), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
 };
-exports.Banner = Banner;
 const BANNER_VARIANTS = {
     defaultLight: {
         backgroundColor: "black10",

package/dist/elements/Banner/Banner.stories.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.States = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Banner_1 = require("./Banner");
-const helpers_1 = require("../../storybook/helpers");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner } from "./Banner";
+import { List } from "../../storybook/helpers";
+export default {
     title: "Banner",
-    component: Banner_1.Banner,
+    component: Banner,
 };
-const States = () => {
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { alignItems: undefined }, children: [(0, jsx_runtime_1.jsx)(Banner_1.Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Success", variant: "success" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Error", variant: "error" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Brand", variant: "brand" })] }));
+export const States = () => {
+    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" })] }));
 };
-exports.States = States;

package/dist/elements/Banner/index.js

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

package/dist/elements/BorderBox/BorderBox.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderBox = void 0;
-const theme_get_1 = require("@styled-system/theme-get");
-const native_1 = __importDefault(require("styled-components/native"));
-const styled_system_1 = require("styled-system");
-const Flex_1 = require("../Flex");
+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";
 /**
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-exports.BorderBox = (0, native_1.default)(Flex_1.Flex) `
-  border: 1px solid ${(0, theme_get_1.themeGet)("colors.black10")};
+export const BorderBox = styled(Flex) `
+  border: 1px solid ${themeGet("colors.black10")};
   border-radius: 2px;
-  padding: ${(0, theme_get_1.themeGet)("space.2")};
-  ${styled_system_1.border}
-  ${styled_system_1.space}
+  padding: ${themeGet("space.2")};
+  ${border}
+  ${styledSpace}
 `;

package/dist/elements/BorderBox/index.js

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

package/dist/elements/Box/Box.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = void 0;
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const styled_system_1 = require("styled-system");
+import { View } from "react-native";
+import styled from "styled-components/native";
+import { border, color, flexbox, layout, position, space, textAlign, } from "styled-system";
 /**
  * Box is just a `View` with common styled-system props.
  */
-exports.Box = (0, native_1.default)(react_native_1.View) `
-  ${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}
+export const Box = styled(View) `
+  ${space}
+  ${color}
+  ${flexbox}
+  ${layout}
+  ${position}
+  ${border}
+  ${textAlign}
 `;

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

@@ -1,24 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GapProps = exports.RegularViewProps = exports.Styled = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const helpers_1 = require("../../storybook/helpers");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
-exports.default = {
+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 {
     title: "Box",
-    component: Box_1.Box,
+    component: Box,
 };
-const Styled = () => ((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;
-const RegularViewProps = () => {
-    const 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: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
+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 }) }));
 };
-exports.RegularViewProps = RegularViewProps;
 const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "black10"];
-const GapProps = () => ((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: "black100", gap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((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 }) }, `${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: "black100", rowGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((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 }) }, `${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: "black100", columnGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((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 }) }, `${color}-3`))) }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 6 })] }));
-exports.GapProps = GapProps;
+export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", gap: 10, 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: "black100", rowGap: 10, 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: "black100", columnGap: 10, 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 })] }));

package/dist/elements/Box/index.js

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

package/dist/elements/Button/Button.js

@@ -1,25 +1,19 @@
-"use strict";
-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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
-const react_spring_1 = require("react-spring");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import { config } from "react-spring";
 // @ts-ignore
-const renderprops_native_1 = require("react-spring/renderprops-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const hooks_1 = require("../../utils/hooks");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex/Flex");
-const MeasuredView_1 = require("../MeasuredView");
-const Spacer_1 = require("../Spacer");
-const Spinner_1 = require("../Spinner");
-const Text_1 = require("../Text/Text");
-const helpers_1 = require("../Text/helpers");
+import { animated, Spring } from "react-spring/renderprops-native";
+import styled from "styled-components/native";
+import { useColor } from "../../utils/hooks";
+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";
 var DisplayState;
 (function (DisplayState) {
     DisplayState["Enabled"] = "enabled";
@@ -27,12 +21,11 @@ var DisplayState;
     DisplayState["Loading"] = "loading";
     DisplayState["Pressed"] = "pressed";
 })(DisplayState || (DisplayState = {}));
-exports._test_DisplayState = DisplayState;
-const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loading, longestText, onPress, size = "large", variant = "fillDark", testOnly_state, testID, textVariant, hitSlop, ...rest }) => {
+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 = (0, helpers_1.useTextStyleForPalette)(textVariant ?? textVariantBySize);
-    const [innerDisplayState, setInnerDisplayState] = (0, react_1.useState)(DisplayState.Enabled);
-    const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
+    const textStyle = useTextStyleForPalette(textVariant ?? textVariantBySize);
+    const [innerDisplayState, setInnerDisplayState] = useState(DisplayState.Enabled);
+    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
         width: 0,
         height: 0,
     });
@@ -69,13 +62,13 @@ const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loadi
             setInnerDisplayState(DisplayState.Enabled);
         }
         if (haptic !== undefined) {
-            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(event);
     };
     const containerSize = getSize();
     const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return ((0, jsx_runtime_1.jsx)(renderprops_native_1.Spring, { native: true, to: to, config: react_spring_1.config.stiff, children: (springProps) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
+    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
                 if (displayState === DisplayState.Loading) {
                     return;
                 }
@@ -85,22 +78,21 @@ const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loadi
                     return;
                 }
                 setInnerDisplayState(DisplayState.Enabled);
-            }, onPress: handlePress, testID: testID, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(AnimatedContainer, { ...rest, style: {
+            }, onPress: handlePress, testID: testID, children: _jsx(Flex, { flexDirection: "row", children: _jsx(AnimatedContainer, { ...rest, style: {
                         backgroundColor: springProps.backgroundColor,
                         borderColor: springProps.borderColor,
                         height: containerSize.height,
-                    }, 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", 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, !__TEST__ && longestText && ((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: [
+                    }, children: _jsxs(Flex, { mx: containerSize.mx, children: [_jsxs(Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", 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, !__TEST__ && longestText && (_jsx(MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: _jsx(Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), _jsx(AnimatedText, { style: [
                                             {
                                                 width: longestText ? Math.ceil(longestTextMeasurements.width) : "auto",
                                                 color: springProps.textColor,
                                                 textDecorationLine: springProps.textDecorationLine,
                                             },
                                             textStyle,
-                                        ], textAlign: "center", 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 }) }))] }) }) }) })) }));
+                                        ], textAlign: "center", 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 }) }))] }) }) }) })) }));
 };
-exports.Button = Button;
 const useStyleForVariantAndState = (variant, state) => {
-    const color = (0, hooks_1.useColor)();
+    const color = useColor();
     const retval = {
         textDecorationLine: "none",
     };
@@ -324,19 +316,20 @@ const useStyleForVariantAndState = (variant, state) => {
     }
     return retval;
 };
-const Container = (0, native_1.default)(Box_1.Box) `
+const Container = styled(Box) `
   position: relative;
   border-width: 1px;
   border-radius: 50px;
   width: ${(p) => (p.block ? "100%" : "auto")};
   overflow: hidden;
 `;
-const SpinnerContainer = (0, native_1.default)(Box_1.Box) `
+const SpinnerContainer = styled(Box) `
   position: absolute;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
 `;
-const AnimatedContainer = (0, renderprops_native_1.animated)(Container);
-const AnimatedText = (0, renderprops_native_1.animated)(Text_1.Text);
+const AnimatedContainer = animated(Container);
+const AnimatedText = animated(Text);
+export { DisplayState as _test_DisplayState };

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

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const Button_1 = require("./Button");
-const helpers_1 = require("../../storybook/helpers");
-const Wrap_1 = require("../../utils/Wrap");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
+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 = [
     "fillDark",
@@ -20,23 +17,19 @@ const variants = [
     "outlineLight",
     "text",
 ];
-exports.default = {
+export default {
     title: "Button",
-    component: Button_1.Button,
+    component: Button,
 };
-const Sizes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: ({ item: size }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: (0, lodash_1.capitalize)(size) })) }));
-exports.Sizes = Sizes;
-const States = () => {
-    const [variant, setVariant] = (0, react_1.useState)("fillDark");
-    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((v) => ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setVariant(v), mr: "2", children: v }))) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" })] }));
+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" })] }));
 };
-exports.States = States;
-const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((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: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
-exports.Variants = Variants;
-const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => {
+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 }) => {
         if (variant !== "outlineLight") {
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }));
+            return (_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: () => console.log(`tapped ${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 }) }));
     } }));
-exports.VariantsLoading = VariantsLoading;

package/dist/elements/Button/CTAButton.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CTAButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("./Button");
-const CTAButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, ...props });
-exports.CTAButton = CTAButton;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./Button";
+export const CTAButton = (props) => _jsx(Button, { block: true, haptic: true, ...props });

package/dist/elements/Button/FollowButton.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FollowButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CheckIcon_1 = require("../../svgs/CheckIcon");
-const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
-const Button_1 = require("../Button");
-const Text_1 = require("../Text");
-const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] })) }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "../../svgs/CheckIcon";
+import { formatLargeNumber } from "../../utils/formatLargeNumber";
+import { Button } from "../Button";
+import { Text } from "../Text";
+export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "black60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
 };
-exports.FollowButton = FollowButton;

package/dist/elements/Button/LinkButton.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const LinkButton = (props) => ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: props.onPress, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, ...props }) }));
-exports.LinkButton = LinkButton;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const LinkButton = (props) => (_jsx(Touchable, { onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));

package/dist/elements/Button/colors.js

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

package/dist/elements/Button/index.js

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