@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Screen/index.js

@@ -1,48 +1,31 @@
-"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 });
-exports.Screen = void 0;
-const Background_1 = require("./Background");
-const Body_1 = require("./Body");
-const BottomView_1 = require("./BottomView");
-const FloatingHeader_1 = require("./FloatingHeader");
-const FullWidthDivider_1 = require("./FullWidthDivider");
-const FullWidthItem_1 = require("./FullWidthItem");
-const Header_1 = require("./Header");
-const ScreenBase_1 = require("./ScreenBase");
-const ScreenFlatList_1 = require("./ScreenFlatList");
-const ScreenScrollContext_1 = require("./ScreenScrollContext");
-const ScreenScrollView_1 = require("./ScreenScrollView");
-const StickySubHeader_1 = require("./StickySubHeader");
-const useListenForScreenScroll_1 = require("./hooks/useListenForScreenScroll");
-__exportStar(require("./constants"), exports);
-exports.Screen = Object.assign(ScreenBase_1.ScreenBase, {
-    AnimatedHeader: Header_1.AnimatedHeader,
-    Background: Background_1.Background,
-    Body: Body_1.Body,
-    BottomView: BottomView_1.BottomView,
-    FlatList: ScreenFlatList_1.ScreenFlatList,
-    FloatingHeader: FloatingHeader_1.FloatingHeader,
-    FullWidthDivider: FullWidthDivider_1.FullWidthDivider,
-    FullWidthItem: FullWidthItem_1.FullWidthItem,
-    Header: Header_1.Header,
-    ScreenScrollContextProvider: ScreenScrollContext_1.ScreenScrollContextProvider,
-    ScrollView: ScreenScrollView_1.ScreenScrollView,
-    StickySubHeader: StickySubHeader_1.StickySubHeader,
+import { Background } from "./Background";
+import { Body } from "./Body";
+import { BottomView } from "./BottomView";
+import { FloatingHeader } from "./FloatingHeader";
+import { FullWidthDivider } from "./FullWidthDivider";
+import { FullWidthItem } from "./FullWidthItem";
+import { AnimatedHeader, Header } from "./Header";
+import { ScreenBase } from "./ScreenBase";
+import { ScreenFlatList } from "./ScreenFlatList";
+import { ScreenScrollContextProvider, useScreenScrollContext } from "./ScreenScrollContext";
+import { ScreenScrollView } from "./ScreenScrollView";
+import { StickySubHeader } from "./StickySubHeader";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export * from "./constants";
+export const Screen = Object.assign(ScreenBase, {
+    AnimatedHeader,
+    Background,
+    Body,
+    BottomView,
+    FlatList: ScreenFlatList,
+    FloatingHeader,
+    FullWidthDivider,
+    FullWidthItem,
+    Header,
+    ScreenScrollContextProvider,
+    ScrollView: ScreenScrollView,
+    StickySubHeader: StickySubHeader,
     // Hooks
-    useListenForScreenScroll: useListenForScreenScroll_1.useListenForScreenScroll,
-    useScreenScrollContext: ScreenScrollContext_1.useScreenScrollContext,
+    useListenForScreenScroll,
+    useScreenScrollContext,
 });

package/dist/elements/SearchInput/SearchInput.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Input_1 = require("../Input");
-const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Input_1.Input, { icon: (0, jsx_runtime_1.jsx)(svgs_1.MagnifyingGlassIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Input } from "../Input";
+export const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...props }) => {
+    return (_jsx(Flex, { flexDirection: "row", justifyContent: "center", children: _jsx(Input, { icon: _jsx(MagnifyingGlassIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
                 onClear?.();
             }, onChangeText: onChangeText, ...props, onFocus: (e) => {
                 props.onFocus?.(e);
@@ -14,4 +11,3 @@ const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...prop
                 props.onBlur?.(e);
             } }) }));
 };
-exports.SearchInput = SearchInput;

package/dist/elements/SearchInput/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("./SearchInput"), exports);
+export * from "./SearchInput";

package/dist/elements/Separator/Separator.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Separator = 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");
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components/native";
+import { border, space, width } from "styled-system";
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-exports.Separator = native_1.default.View `
-  border: 1px solid ${(0, theme_get_1.themeGet)("colors.onBackgroundLow")};
+export const Separator = styled.View `
+  border: 1px solid ${themeGet("colors.onBackgroundLow")};
   border-bottom-width: 0;
-  ${styled_system_1.space};
-  ${styled_system_1.width};
-  ${styled_system_1.border};
+  ${space};
+  ${width};
+  ${border};
 `;
-exports.Separator.defaultProps = {
+Separator.defaultProps = {
     width: "100%",
 };

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

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

package/dist/elements/Separator/ShadowSeparator.js

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

package/dist/elements/Separator/index.js

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

package/dist/elements/SimpleMessage/SimpleMessage.js

@@ -1,22 +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.SimpleMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const native_1 = __importDefault(require("styled-components/native"));
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const StyledFlex = (0, native_1.default)(Flex_1.Flex) `
-  background-color: ${(0, theme_get_1.themeGet)("colors.black5")};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components/native";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+const StyledFlex = styled(Flex) `
+  background-color: ${themeGet("colors.black5")};
   border-radius: 2px;
 `;
 /**
  * A generic message window for displaying ZeroStates, notices, errors, etc.
  */
-const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(StyledFlex, { p: 2, ...restProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "black60", variant: textVariant, children: children }) }));
+export const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
+    return (_jsx(StyledFlex, { p: 2, ...restProps, children: _jsx(Text, { color: "black60", variant: textVariant, children: children }) }));
 };
-exports.SimpleMessage = SimpleMessage;

package/dist/elements/SimpleMessage/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("./SimpleMessage"), exports);
+export * from "./SimpleMessage";

package/dist/elements/Skeleton/Skeleton.js

@@ -1,34 +1,8 @@
-"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.SkeletonBox = exports.SkeletonText = exports.Skeleton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const hooks_1 = require("../../utils/hooks");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
+import { useColor } from "../../utils/hooks";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
 /**
  * Creates a skeleton animation for a component.
  *
@@ -39,22 +13,19 @@ const Text_1 = require("../Text");
  *   <SkeletonBox width={100} height={100} />
  * </Skeleton>
  */
-const Skeleton = ({ children }) => {
-    const opacity = (0, react_native_reanimated_1.useSharedValue)(0.5);
-    opacity.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { duration: 1000, easing: react_native_reanimated_1.Easing.ease }), -1, true);
-    const fadeLoopAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+export const Skeleton = ({ children }) => {
+    const opacity = useSharedValue(0.5);
+    opacity.value = withRepeat(withTiming(1, { duration: 1000, easing: Easing.ease }), -1, true);
+    const fadeLoopAnim = useAnimatedStyle(() => {
         return { opacity: opacity.value };
     }, []);
-    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: fadeLoopAnim, children: children });
+    return _jsx(Animated.View, { style: fadeLoopAnim, children: children });
 };
-exports.Skeleton = Skeleton;
-const SkeletonText = ({ children, ...rest }) => {
-    const color = (0, hooks_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "flex-start", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { ...rest, bg: color("black10"), color: color("black10"), children: children }) }));
+export const SkeletonText = ({ children, ...rest }) => {
+    const color = useColor();
+    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("black10"), color: color("black10"), children: children }) }));
 };
-exports.SkeletonText = SkeletonText;
-const SkeletonBox = ({ children, ...rest }) => {
-    const color = (0, hooks_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, bg: color("black10"), children: children }));
+export const SkeletonBox = ({ children, ...rest }) => {
+    const color = useColor();
+    return (_jsx(Flex, { ...rest, bg: color("black10"), children: children }));
 };
-exports.SkeletonBox = SkeletonBox;

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

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

package/dist/elements/Skeleton/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("./Skeleton"), exports);
+export * from "./Skeleton";

package/dist/elements/Spacer/Spacer.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Box_1 = require("../Box");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../Box";
 /**
  * Used to inject space where it's needed.
  */
-const Spacer = ({ x, y, ...props }) => (0, jsx_runtime_1.jsx)(Box_1.Box, { ml: x, mt: y, ...props });
-exports.Spacer = Spacer;
+export const Spacer = ({ x, y, ...props }) => _jsx(Box, { ml: x, mt: y, ...props });

package/dist/elements/Spacer/Spacer.stories.js

@@ -1,28 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Vertical = exports.Horizontal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Spacer_1 = require("./Spacer");
-const elements_1 = require("../../elements");
-const helpers_1 = require("../../storybook/helpers");
-const hooks_1 = require("../../utils/hooks");
-const text_1 = require("../../utils/text");
-const Box_1 = require("../Box");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spacer } from "./Spacer";
+import { Text } from "../../elements";
+import { List } from "../../storybook/helpers";
+import { useSpace } from "../../utils/hooks";
+import { bullet } from "../../utils/text";
+import { Box } from "../Box";
+export default {
     title: "Spacer",
-    component: Spacer_1.Spacer,
+    component: Spacer,
 };
 const SpacerRow = (props) => {
-    const space = (0, hooks_1.useSpace)();
+    const space = useSpace();
     const size = props.x;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "onBackground" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "onBackground" })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { color: "onBackground", children: typeof size === "string" ? `${size}` : `${size} ${text_1.bullet} ${space(size)}px` })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 20, height: 20, backgroundColor: "onBackground" }), _jsx(Spacer, { ...props }), _jsx(Box, { width: 20, height: 20, backgroundColor: "onBackground" })] }), _jsx(Text, { color: "onBackground", children: typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size)}px` })] }));
 };
-const Horizontal = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [(0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Defined (units)" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 0.5 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 1 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 2 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 4 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 6 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 12 }), (0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Custom (pixels)" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: "15px" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: "50px" })] }));
-exports.Horizontal = Horizontal;
+export const Horizontal = () => (_jsxs(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [_jsx(Text, { weight: "medium", children: "Defined (units)" }), _jsx(SpacerRow, { x: 0.5 }), _jsx(SpacerRow, { x: 1 }), _jsx(SpacerRow, { x: 2 }), _jsx(SpacerRow, { x: 4 }), _jsx(SpacerRow, { x: 6 }), _jsx(SpacerRow, { x: 12 }), _jsx(Text, { weight: "medium", children: "Custom (pixels)" }), _jsx(SpacerRow, { x: "15px" }), _jsx(SpacerRow, { x: "50px" })] }));
 const SpacerCol = (props) => {
-    const space = (0, hooks_1.useSpace)();
+    const space = useSpace();
     const size = props.y;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "black" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "black" })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { color: "black", children: typeof size === "string" ? `${size}` : `${size} ${text_1.bullet} ${space(size)}px` })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { width: 20, height: 20, backgroundColor: "black" }), _jsx(Spacer, { ...props }), _jsx(Box, { width: 20, height: 20, backgroundColor: "black" })] }), _jsx(Text, { color: "black", children: typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size)}px` })] }));
 };
-const Vertical = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Defined (units)" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [(0, jsx_runtime_1.jsx)(SpacerCol, { y: 0.5 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 1 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 2 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 4 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 6 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 12 })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Custom (pixels)" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [(0, jsx_runtime_1.jsx)(SpacerCol, { y: "15px" }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: "50px" })] })] }));
-exports.Vertical = Vertical;
+export const Vertical = () => (_jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", children: "Defined (units)" }), _jsxs(List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [_jsx(SpacerCol, { y: 0.5 }), _jsx(SpacerCol, { y: 1 }), _jsx(SpacerCol, { y: 2 }), _jsx(SpacerCol, { y: 4 }), _jsx(SpacerCol, { y: 6 }), _jsx(SpacerCol, { y: 12 })] }), _jsx(Text, { weight: "medium", children: "Custom (pixels)" }), _jsxs(List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [_jsx(SpacerCol, { y: "15px" }), _jsx(SpacerCol, { y: "50px" })] })] }));

package/dist/elements/Spacer/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("./Spacer"), exports);
+export * from "./Spacer";

package/dist/elements/Spinner/Spinner.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.getSize = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const hooks_1 = require("../../utils/hooks");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { Animated, Easing } from "react-native";
+import styled from "styled-components/native";
+import { useColor } from "../../utils/hooks";
 /**
  * Returns width and height of spinner based on size
  * @param props
  */
-const getSize = (props) => {
+export const getSize = (props) => {
     const base = { width: 25, height: 6 };
     switch (props.size) {
         case "small":
@@ -38,24 +32,23 @@ const getSize = (props) => {
             };
     }
 };
-exports.getSize = getSize;
 /**
  * Spinner component for React Native
  */
-const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) => {
-    const color = (0, hooks_1.useColor)();
-    const rotation = (0, react_1.useMemo)(() => new react_native_1.Animated.Value(0), []);
+export const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) => {
+    const color = useColor();
+    const rotation = useMemo(() => new Animated.Value(0), []);
     const startRotation = () => {
-        react_native_1.Animated.loop(react_native_1.Animated.timing(rotation, {
+        Animated.loop(Animated.timing(rotation, {
             toValue: 1,
             duration: 1000,
-            easing: react_native_1.Easing.linear,
+            easing: Easing.linear,
             useNativeDriver: true,
         }), {
             iterations: -1,
         }).start();
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         startRotation();
     }, []);
     const style = [
@@ -71,16 +64,15 @@ const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) =>
         },
         rest.style,
     ];
-    return (0, jsx_runtime_1.jsx)(Bar, { size: size, color: color(theColor), ...rest, style: style });
+    return _jsx(Bar, { size: size, color: color(theColor), ...rest, style: style });
 };
-exports.Spinner = Spinner;
 /** Generic Spinner component */
-const Bar = (0, native_1.default)(react_native_1.Animated.View) `
+const Bar = styled(Animated.View) `
   background: black;
   position: absolute;
 
   ${(props) => {
-    const { width, height } = (0, exports.getSize)(props);
+    const { width, height } = getSize(props);
     return `
       background: ${props.color};
       width: ${width}px;

package/dist/elements/Spinner/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("./Spinner"), exports);
+export * from "./Spinner";

package/dist/elements/Switch/Switch.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const hooks_1 = require("../../utils/hooks");
-const Switch = ({ value, thumbColorActive = react_native_1.Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = react_native_1.Platform.OS === "ios" ? "white100" : "black10", trackColorActive = react_native_1.Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
-    const color = (0, hooks_1.useColor)();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform, Switch as RNSwitch } from "react-native";
+import { useColor } from "../../utils/hooks";
+export const Switch = ({ value, thumbColorActive = Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = Platform.OS === "ios" ? "white100" : "black10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
+    const color = useColor();
     let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
     let trackColor = {
         false: color(trackColorInactive),
@@ -13,13 +10,12 @@ const Switch = ({ value, thumbColorActive = react_native_1.Platform.OS === "ios"
     };
     let iosBackground = color(trackColorInactive);
     if (disabled) {
-        thumbColor = react_native_1.Platform.OS === "ios" ? color("white100") : color("black30");
+        thumbColor = Platform.OS === "ios" ? color("white100") : color("black30");
         trackColor = {
             false: color("black10"),
-            true: react_native_1.Platform.OS === "ios" ? color("black30") : color("black10"),
+            true: Platform.OS === "ios" ? color("black30") : color("black10"),
         };
         iosBackground = color("black10");
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Switch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
+    return (_jsx(RNSwitch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
 };
-exports.Switch = Switch;