@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/ButtonNew/Button.js

@@ -1,59 +1,30 @@
-"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 __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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const colors_1 = require("./colors");
-const MeasuredView_1 = require("../../elements/MeasuredView");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Spinner_1 = require("../Spinner");
-const Text_1 = require("../Text");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Pressable } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import Animated, { interpolateColor, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useColorsForVariantAndState } from "./colors";
+import { MeasuredView } from "../../elements/MeasuredView";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Spinner } from "../Spinner";
+import { Text, useTextStyleForPalette } from "../Text";
 const ANIMATION_DURATION = 150;
-const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
+export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
     const [disabled, setDisabled, disabledV] = useStateWithProp(!!disabledProp);
     const [loading, setLoading, loadingV] = useStateWithProp(!!loadingProp);
     const [pressed, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
-    const pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+    const pressAnimationProgress = useSharedValue(0);
+    useAnimatedReaction(() => {
         return pressedV.value;
     }, (pressedVal) => {
-        return (pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, {
+        return (pressAnimationProgress.value = withTiming(pressedVal, {
             duration: ANIMATION_DURATION,
         }));
     });
-    const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
-    const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
+    const textStyle = useTextStyleForPalette(size === "small" ? "xs" : "sm");
+    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
         width: 0,
         height: 0,
     });
@@ -74,12 +45,12 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
             return;
         }
         if (haptic !== undefined) {
-            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(event);
     };
-    const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
-    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const colorsForVariantAndState = useColorsForVariantAndState();
+    const containerColorsAnim = useAnimatedStyle(() => {
         const colors = colorsForVariantAndState[variant];
         if (disabled) {
             return {
@@ -88,21 +59,21 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
             };
         }
         return {
-            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
-            borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
+            backgroundColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
         };
     });
-    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const textAnim = useAnimatedStyle(() => {
         const colors = colorsForVariantAndState[variant];
         if (loading) {
             return { color: "rgba(0, 0, 0, 0)" };
         }
         return {
-            color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
+            color: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
             textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
         };
     });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled, onPressIn: () => {
+    return (_jsx(Pressable, { disabled: disabled, onPressIn: () => {
             if (loading) {
                 return;
             }
@@ -112,17 +83,16 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
                 return;
             }
             setPressed(false);
-        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", 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, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), (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 }) }), 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] })) : null, loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: _jsx(Flex, { flexDirection: "row", children: _jsx(Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: _jsx(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: _jsxs(Flex, { height: "100%", mx: "25px", 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, _jsx(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), _jsx(MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: _jsx(Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) }), iconPosition === "right" && !!icon ? (_jsxs(_Fragment, { children: [_jsx(Spacer, { x: 0.5 }), icon] })) : null, loading ? (_jsx(Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
 };
-exports.Button = Button;
-const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-const AFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+const AText = Animated.createAnimatedComponent(Text);
+const AFlex = Animated.createAnimatedComponent(Flex);
 const useStateWithProp = (prop) => {
-    const [state, setState] = (0, react_1.useState)(!!prop);
-    (0, react_1.useEffect)(() => {
+    const [state, setState] = useState(!!prop);
+    useEffect(() => {
         setState(!!prop);
     }, [prop]);
-    const stateV = (0, react_native_reanimated_1.useDerivedValue)(() => {
+    const stateV = useDerivedValue(() => {
         if (!!state) {
             return 1;
         }

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

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpacingAround = exports.Playground = exports.Miscellaneous = exports.TheLinkButton = exports.TheCTAButton = exports.TheFollowButton = exports.VariantsDisabled = 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 react_native_1 = require("react-native");
-const Button_1 = require("./Button");
-const CTAButton_1 = require("./CTAButton");
-const FollowButton_1 = require("./FollowButton");
-const LinkButton_1 = require("./LinkButton");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Wrap_1 = require("../../utils/Wrap");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { capitalize } from "lodash";
+import { useState } from "react";
+import { Button as RNButton } from "react-native";
+import { Button } from "./Button";
+import { CTAButton } from "./CTAButton";
+import { FollowButton } from "./FollowButton";
+import { LinkButton } from "./LinkButton";
+import { DataList, List } from "../../storybook/helpers";
+import { BellIcon, LinkIcon } from "../../svgs";
+import { Wrap } from "../../utils/Wrap";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { LinkText } from "../Text";
 const sizes = ["small", "large"];
 const variants = [
     "fillDark",
@@ -27,40 +24,29 @@ const variants = [
     "outlineLight",
     "text",
 ];
-exports.default = {
+export default {
     title: "ButtonNew",
-    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((variant) => ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setVariant(variant), mr: "2", children: variant }))) }), (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" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
+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((variant) => (_jsx(LinkText, { color: "orange", onPress: () => setVariant(variant), mr: "2", children: variant }))) }), _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" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
 };
-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 }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
-exports.VariantsLoading = VariantsLoading;
-const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
-exports.VariantsDisabled = VariantsDisabled;
-const TheFollowButton = () => {
-    const [follow, setFollow] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
+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 }) => (_jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
+export const VariantsDisabled = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight", children: _jsx(Flex, { backgroundColor: "black100", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+export const TheFollowButton = () => {
+    const [follow, setFollow] = useState(true);
+    return (_jsxs(List, { children: [_jsx(FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
 };
-exports.TheFollowButton = TheFollowButton;
-const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
-exports.TheCTAButton = TheCTAButton;
-const TheLinkButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
-exports.TheLinkButton = TheLinkButton;
-const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "loading and disabled with icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
-exports.Miscellaneous = Miscellaneous;
-const Playground = () => {
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [disabled, setDisabled] = (0, react_1.useState)(true);
-    const [block, setBlock] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
+export const TheCTAButton = () => (_jsx(List, { children: _jsx(CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
+export const TheLinkButton = () => (_jsx(List, { children: _jsx(LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
+export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+export const Playground = () => {
+    const [loading, setLoading] = useState(false);
+    const [disabled, setDisabled] = useState(true);
+    const [block, setBlock] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(RNButton, { title: "loading", onPress: () => setLoading((v) => !v) }), _jsx(RNButton, { title: "disabled", onPress: () => setDisabled((v) => !v) }), _jsx(RNButton, { title: "block", onPress: () => setBlock((v) => !v) }), _jsx(List, { children: _jsxs(Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
 };
-exports.Playground = Playground;
-const SpacingAround = () => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { m: 2, children: "wow 1" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "wow 2" })] }));
-exports.SpacingAround = SpacingAround;
+export const SpacingAround = () => (_jsxs(Box, { children: [_jsx(Button, { m: 2, children: "wow 1" }), _jsx(Button, { children: "wow 2" })] }));

package/dist/elements/ButtonNew/Button.tests.js

@@ -1,31 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const Button_1 = require("./Button");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
-const Spinner_1 = require("../Spinner");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Button } from "./Button";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+import { Spinner } from "../Spinner";
 describe("Button", () => {
     it("shows spinner if loading is true", () => {
-        const { UNSAFE_queryAllByType } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, children: "wow" }));
-        expect(UNSAFE_queryAllByType(Spinner_1.Spinner)).toHaveLength(1);
+        const { UNSAFE_queryAllByType } = renderWithWrappers(_jsx(Button, { loading: true, children: "wow" }));
+        expect(UNSAFE_queryAllByType(Spinner)).toHaveLength(1);
     });
     it("invokes the onClick callback", () => {
         const onPress = jest.fn();
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, children: "wow" }));
-        react_native_1.fireEvent.press(getByTestId("the-button"));
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
         expect(onPress).toHaveBeenCalled();
     });
     it("does not invoke the onClick callback if loading is true", () => {
         const onPress = jest.fn();
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
-        react_native_1.fireEvent.press(getByTestId("the-button"));
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
     it("does not invoke the onClick callback if disabled is true", () => {
         const onPress = jest.fn();
-        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
-        react_native_1.fireEvent.press(getByTestId("the-button"));
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
 });

package/dist/elements/ButtonNew/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/ButtonNew/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/ButtonNew/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/ButtonNew/colors.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorsForVariantAndState = void 0;
-const hooks_1 = require("../../utils/hooks");
-const useColorsForVariantAndState = () => {
-    const color = (0, hooks_1.useColor)();
+import { useColor } from "../../utils/hooks";
+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/ButtonNew/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("./FollowButton"), exports);
-__exportStar(require("./LinkButton"), exports);
+export * from "./Button";
+export * from "./CTAButton";
+export * from "./FollowButton";
+export * from "./LinkButton";

package/dist/elements/Checkbox/Check.js

@@ -1,75 +1,48 @@
-"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 __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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Check = exports.CHECK_SIZE = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const native_1 = __importStar(require("styled-components/native"));
-const CheckIcon_1 = require("../../svgs/CheckIcon");
-const Box_1 = require("../Box");
-exports.CHECK_SIZE = 22;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import styled, { css } from "styled-components/native";
+import { CheckIcon } from "../../svgs/CheckIcon";
+import { Box } from "../Box";
+export const CHECK_SIZE = 22;
 const CHECK_MODES = {
     default: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
+        resting: css `
+      background-color: ${themeGet("colors.white100")};
+      border-color: ${themeGet("colors.black10")};
     `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+        selected: css `
+      background-color: ${themeGet("colors.black100")};
+      border-color: ${themeGet("colors.black100")};
     `,
     },
     disabled: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black5")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
+        resting: css `
+      background-color: ${themeGet("colors.black5")};
+      border-color: ${themeGet("colors.black10")};
     `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+        selected: css `
+      background-color: ${themeGet("colors.black30")};
+      border-color: ${themeGet("colors.black30")};
     `,
     },
     error: {
-        resting: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.red100")};
+        resting: css `
+      background-color: ${themeGet("colors.white100")};
+      border-color: ${themeGet("colors.red100")};
     `,
-        selected: (0, native_1.css) `
-      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
-      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+        selected: css `
+      background-color: ${themeGet("colors.black100")};
+      border-color: ${themeGet("colors.black100")};
     `,
     },
 };
 /** Toggeable check mark */
-const Check = ({ disabled, selected, ...rest }) => {
-    return ((0, jsx_runtime_1.jsx)(Container, { disabled: disabled, selected: selected, ...rest, children: !!selected && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "white100" }) }));
+export const Check = ({ disabled, selected, ...rest }) => {
+    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, children: !!selected && _jsx(CheckIcon, { fill: "white100" }) }));
 };
-exports.Check = Check;
-const Container = (0, native_1.default)(Box_1.Box) `
-  width: ${exports.CHECK_SIZE}px;
-  height: ${exports.CHECK_SIZE}px;
+const Container = styled(Box) `
+  width: ${CHECK_SIZE}px;
+  height: ${CHECK_SIZE}px;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/elements/Checkbox/Checkbox.js

@@ -1,26 +1,20 @@
-"use strict";
-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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const CssTransition_1 = require("../../animation/CssTransition");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
+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;
-const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, checkboxAccessibilityProps, ...restProps }) => {
-    const { color, space } = (0, useTheme_1.useTheme)();
-    const fontScale = react_native_1.PixelRatio.getFontScale();
+export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, checkboxAccessibilityProps, ...restProps }) => {
+    const { color, space } = useTheme();
+    const fontScale = PixelRatio.getFontScale();
     const checkboxSize = CHECKBOX_SIZE * fontScale;
-    const [checked, setChecked] = (0, react_1.useState)(checkedProp);
+    const [checked, setChecked] = useState(checkedProp);
     const isChecked = checkedProp ?? checked;
     const defaultCheckboxStyle = {
         backgroundColor: color("white100"),
@@ -49,22 +43,21 @@ const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtit
         : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
     const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
     const subtitleColor = error ? color("red100") : disabled ? color("black30") : color("black60");
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: (event) => {
+    return (_jsx(TouchableWithoutFeedback, { onPress: (event) => {
             if (disabled) {
                 return;
             }
             setChecked(!checked);
             onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { 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", ...checkboxAccessibilityProps, children: (0, jsx_runtime_1.jsx)(CssTransition_1.CssTransition, { style: [
+        }, children: _jsxs(Flex, { flex: 1, ...restProps, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Flex, { mt: "2px", ...checkboxAccessibilityProps, children: _jsx(CssTransition, { style: [
                                     styles(fontScale).container,
                                     text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
                                     checkboxStyle,
                                 ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
-                                    (!!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: `${(CHECKBOX_SIZE + space(1)) * fontScale}px`, mt: "6px", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
+                                    (!!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 }) }))] }) }));
 };
-exports.Checkbox = Checkbox;
 // styled-component does not have support for Animated.View
-const styles = (fontScale) => react_native_1.StyleSheet.create({
+const styles = (fontScale) => StyleSheet.create({
     container: {
         display: "flex",
         justifyContent: "center",
@@ -77,9 +70,8 @@ const styles = (fontScale) => react_native_1.StyleSheet.create({
 });
 // 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.
-const CheckMark = ({ size }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
-exports.CheckMark = CheckMark;
-exports.DisabledMark = (0, native_1.default)(exports.CheckMark) `
-  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+export const CheckMark = ({ size }) => (_jsx(Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
+export const DisabledMark = styled(CheckMark) `
+  border-bottom-color: ${themeGet("colors.black30")};
+  border-left-color: ${themeGet("colors.black30")};
 `;