@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/index.js

@@ -1,46 +1,62 @@
-export * from "./ArtsyKeyboardAvoidingView";
-export * from "./Autocomplete";
-export * from "./Avatar";
-export * from "./BackButton";
-export * from "./Banner";
-export * from "./BorderBox";
-export * from "./Box";
-export * from "./Button";
-export * from "./Checkbox";
-export * from "./Chip";
-export * from "./ClassTheme";
-export * from "./Collapse";
-export * from "./CollapsibleMenuItem";
-export * from "./Dialog";
-export * from "./EntityHeader";
-export * from "./Flex";
-export * from "./Header";
-export * from "./Histogram";
-export * from "./Image";
-export * from "./Input";
-export * from "./Join";
-export * from "./LazyFlatlist";
-export * from "./LegacyScreen";
-export * from "./LegacyTabs";
-export * from "./List";
-export * from "./MeasuredView";
-export * from "./MenuItem";
-export * from "./Message";
-export * from "./Pill";
-export * from "./PopIn";
-export * from "./Popover";
-export * from "./ProgressBar";
-export * from "./Radio";
-export * from "./Screen";
-export * from "./SearchInput";
-export * from "./Separator";
-export * from "./SimpleMessage";
-export * from "./Skeleton";
-export * from "./Spacer";
-export * from "./Spinner";
-export * from "./Switch";
-export * from "./Tabs";
-export * from "./Text";
-export * from "./ToolTip";
-export * from "./Touchable";
-export * from "./VisualClue";
+"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("./ArtsyKeyboardAvoidingView"), exports);
+__exportStar(require("./Autocomplete"), exports);
+__exportStar(require("./Avatar"), exports);
+__exportStar(require("./BackButton"), exports);
+__exportStar(require("./Banner"), exports);
+__exportStar(require("./BorderBox"), exports);
+__exportStar(require("./Box"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./Chip"), exports);
+__exportStar(require("./ClassTheme"), exports);
+__exportStar(require("./Collapse"), exports);
+__exportStar(require("./CollapsibleMenuItem"), exports);
+__exportStar(require("./Dialog"), exports);
+__exportStar(require("./EntityHeader"), exports);
+__exportStar(require("./Flex"), exports);
+__exportStar(require("./Header"), exports);
+__exportStar(require("./Histogram"), exports);
+__exportStar(require("./Image"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Join"), exports);
+__exportStar(require("./LazyFlatlist"), exports);
+__exportStar(require("./LegacyScreen"), exports);
+__exportStar(require("./LegacyTabs"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./MeasuredView"), exports);
+__exportStar(require("./MenuItem"), exports);
+__exportStar(require("./Message"), exports);
+__exportStar(require("./Pill"), exports);
+__exportStar(require("./PopIn"), exports);
+__exportStar(require("./Popover"), exports);
+__exportStar(require("./ProgressBar"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./Screen"), exports);
+__exportStar(require("./SearchInput"), exports);
+__exportStar(require("./Separator"), exports);
+__exportStar(require("./SimpleMessage"), exports);
+__exportStar(require("./Skeleton"), exports);
+__exportStar(require("./Spacer"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Switch"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./Text"), exports);
+__exportStar(require("./ToolTip"), exports);
+__exportStar(require("./Touchable"), exports);
+__exportStar(require("./VisualClue"), exports);

package/dist/index.js

@@ -1,8 +1,24 @@
-export * from "./animation";
-export * from "./constants";
-export * from "./elements";
-export * from "./utils/hooks";
-export * from "./utils/text";
-export * from "./Theme";
-export * from "./tokens";
-export * from "./types";
+"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("./animation"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./elements"), exports);
+__exportStar(require("./utils/hooks"), exports);
+__exportStar(require("./utils/text"), exports);
+__exportStar(require("./Theme"), exports);
+__exportStar(require("./tokens"), exports);
+__exportStar(require("./types"), exports);

package/dist/setupJest.js

@@ -1,10 +1,15 @@
-import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
-jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);
-jest.mock("react-native-blurhash", () => {
-    const ReactNative = require("react-native");
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var mock_1 = __importDefault(require("react-native-safe-area-context/jest/mock"));
+jest.mock("react-native-safe-area-context", function () { return mock_1.default; });
+jest.mock("react-native-blurhash", function () {
+    var ReactNative = require("react-native");
     return {
         Blurhash: ReactNative.View,
     };
 });
-jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock"));
-jest.mock("react-native-worklets", () => require("react-native-worklets/src/mock"));
+jest.mock("react-native-reanimated", function () { return require("react-native-reanimated/mock"); });
+jest.mock("react-native-worklets", function () { return require("react-native-worklets/src/mock"); });

package/dist/storybook/decorators.js

@@ -1,45 +1,54 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useEffect, useState } from "react";
-import { Appearance, Platform, StatusBar } from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import { Theme } from "../Theme";
-import { Flex, Pill, Text } from "../elements";
-import { ScreenDimensionsProvider } from "../utils/hooks";
-export const withTheme = (story) => _jsx(Theme, { theme: "v3light", children: story() });
-const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
-export const useDarkModeSwitcher = (story) => {
-    const [mode, setModeState] = useState("system");
-    const [systemMode, setSystemMode] = useState(Appearance.getColorScheme() ?? "light");
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDarkModeSwitcher = exports.withTheme = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var Theme_1 = require("../Theme");
+var elements_1 = require("../elements");
+var hooks_1 = require("../utils/hooks");
+var withTheme = function (story) { return (0, jsx_runtime_1.jsx)(Theme_1.Theme, { theme: "v3light", children: story() }); };
+exports.withTheme = withTheme;
+var DARK_MODE_STORAGE_KEY = "dark-mode-mode";
+var useDarkModeSwitcher = function (story) {
+    var _a = (0, react_1.useState)("system"), mode = _a[0], setModeState = _a[1];
+    var _b = (0, react_1.useState)(react_native_1.Appearance.getColorScheme() === "dark" ? "dark" : "light"), systemMode = _b[0], setSystemMode = _b[1];
     // Load initial value from AsyncStorage on mount
-    useEffect(() => {
-        AsyncStorage.getItem(DARK_MODE_STORAGE_KEY)
-            .then((value) => {
+    (0, react_1.useEffect)(function () {
+        async_storage_1.default.getItem(DARK_MODE_STORAGE_KEY)
+            .then(function (value) {
             if (value && (value === "light" || value === "dark" || value === "system")) {
                 setModeState(value);
             }
         })
-            .catch((error) => {
+            .catch(function (error) {
             console.error("Failed to load dark mode preference:", error);
         });
     }, []);
-    useEffect(() => {
-        const subscription = Appearance.addChangeListener(({ colorScheme }) => {
-            setSystemMode(colorScheme ?? "light");
+    (0, react_1.useEffect)(function () {
+        var subscription = react_native_1.Appearance.addChangeListener(function (_a) {
+            var colorScheme = _a.colorScheme;
+            setSystemMode(colorScheme === "dark" ? "dark" : "light");
         });
-        return () => subscription.remove();
+        return function () { return subscription.remove(); };
     }, []);
-    const setMode = (newMode) => {
+    var setMode = function (newMode) {
         setModeState(newMode);
-        AsyncStorage.setItem(DARK_MODE_STORAGE_KEY, newMode).catch((error) => {
+        async_storage_1.default.setItem(DARK_MODE_STORAGE_KEY, newMode).catch(function (error) {
             console.error("Failed to save dark mode preference:", error);
         });
     };
-    const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
-    const theme = isDarkMode ? "v3dark" : "v3light";
-    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsxs(Theme, { theme: theme, children: [_jsx(StatusBar
+    var isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
+    var theme = isDarkMode ? "v3dark" : "v3light";
+    return ((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsxs)(Theme_1.Theme, { theme: theme, children: [(0, jsx_runtime_1.jsx)(react_native_1.StatusBar
                     // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
                     , { 
                         // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
-                        barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
+                        barStyle: isDarkMode && react_native_1.Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && react_native_1.Platform.OS === "android" ? "black" : "white", translucent: true }), (0, jsx_runtime_1.jsxs)(elements_1.Flex, { flex: 1, backgroundColor: "background", children: [(0, jsx_runtime_1.jsxs)(elements_1.Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [(0, jsx_runtime_1.jsx)(elements_1.Text, { color: "mono100", children: "Dark mode" }), (0, jsx_runtime_1.jsxs)(elements_1.Flex, { flexDirection: "row", gap: 1, children: [(0, jsx_runtime_1.jsx)(elements_1.Pill, { variant: "default", selected: mode === "light", onPress: function () { return setMode("light"); }, children: "Light" }), (0, jsx_runtime_1.jsx)(elements_1.Pill, { variant: "default", selected: mode === "dark", onPress: function () { return setMode("dark"); }, children: "Dark" }), (0, jsx_runtime_1.jsx)(elements_1.Pill, { variant: "default", selected: mode === "system", onPress: function () { return setMode("system"); }, children: "System" })] })] }), (0, jsx_runtime_1.jsx)(elements_1.Flex, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
 };
+exports.useDarkModeSwitcher = useDarkModeSwitcher;

package/dist/storybook/helpers.js

@@ -1,22 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FlatList } from "react-native";
-import { Flex, Spacer } from "../elements";
-export const DataList = ({ data, keyExtractor, renderItem, contentContainerStyle, }) => (_jsx(FlatList, { data: data, keyExtractor: keyExtractor ?? ((item) => `${item}`), renderItem: renderItem, ItemSeparatorComponent: () => _jsx(Spacer, { y: 4 }), contentContainerStyle: [
-        {
-            flexGrow: 1,
-            alignItems: "center",
-            justifyContent: "center",
-            paddingVertical: 30,
-        },
-        contentContainerStyle,
-    ] }));
-export const List = ({ children, contentContainerStyle, style, horizontal, }) => (_jsx(FlatList, { horizontal: horizontal, data: Array.isArray(children) ? children : [children], keyExtractor: (_, index) => `${index}`, renderItem: ({ item: child }) => child, ItemSeparatorComponent: () => (_jsx(Spacer, { x: horizontal ? 2 : undefined, y: horizontal ? undefined : 2 })), contentContainerStyle: [
-        {
-            flexGrow: 1,
-            alignItems: "center",
-            justifyContent: "center",
-            paddingVertical: 30,
-        },
-        contentContainerStyle,
-    ], style: style }));
-export const Row = ({ children }) => (_jsx(Flex, { width: "100%", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", children: children }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = exports.List = exports.DataList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var elements_1 = require("../elements");
+var DataList = function (_a) {
+    var data = _a.data, keyExtractor = _a.keyExtractor, renderItem = _a.renderItem, contentContainerStyle = _a.contentContainerStyle;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: data, keyExtractor: keyExtractor !== null && keyExtractor !== void 0 ? keyExtractor : (function (item) { return "".concat(item); }), renderItem: renderItem, ItemSeparatorComponent: function () { return (0, jsx_runtime_1.jsx)(elements_1.Spacer, { y: 4 }); }, contentContainerStyle: [
+            {
+                flexGrow: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                paddingVertical: 30,
+            },
+            contentContainerStyle,
+        ] }));
+};
+exports.DataList = DataList;
+var List = function (_a) {
+    var children = _a.children, contentContainerStyle = _a.contentContainerStyle, style = _a.style, horizontal = _a.horizontal;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { horizontal: horizontal, data: Array.isArray(children) ? children : [children], keyExtractor: function (_, index) { return "".concat(index); }, renderItem: function (_a) {
+            var child = _a.item;
+            return child;
+        }, ItemSeparatorComponent: function () { return ((0, jsx_runtime_1.jsx)(elements_1.Spacer, { x: horizontal ? 2 : undefined, y: horizontal ? undefined : 2 })); }, contentContainerStyle: [
+            {
+                flexGrow: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                paddingVertical: 30,
+            },
+            contentContainerStyle,
+        ], style: style }));
+};
+exports.List = List;
+var Row = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(elements_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-evenly", alignItems: "center", children: children }));
+};
+exports.Row = Row;

package/dist/tokens.js

@@ -1,17 +1,29 @@
+"use strict";
 /**
  * All of the config for the Artsy theming system are based on the
  * on tokens from palette
  */
-import { THEME } from "@artsy/palette-tokens";
-import { THEME_DARK } from "@artsy/palette-tokens/dist/themes/v3Dark";
-import { convertWebSpacingUnitsToMobile, convertWebTextTreatmentsToMobile, } from "./utils/webTokensToMobile";
-const { textVariants, space, colors } = THEME;
-export const COLOR_LAYER_NAME = {
-    ...colors,
-    /** Adding this here for dev usage. Avoid using it for actual components. */
-    devpurple: "#6E1EFF",
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-export const COLOR_LAYER_ROLE = [
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEMES = exports.COLOR_LAYER_ROLE = exports.COLOR_LAYER_NAME = void 0;
+var palette_tokens_1 = require("@artsy/palette-tokens");
+var v3Dark_1 = require("@artsy/palette-tokens/dist/themes/v3Dark");
+var webTokensToMobile_1 = require("./utils/webTokensToMobile");
+var textVariants = palette_tokens_1.THEME.textVariants, space = palette_tokens_1.THEME.space, colors = palette_tokens_1.THEME.colors;
+exports.COLOR_LAYER_NAME = __assign(__assign({}, colors), { 
+    /** Adding this here for dev usage. Avoid using it for actual components. */
+    devpurple: "#6E1EFF" });
+exports.COLOR_LAYER_ROLE = [
     // name: Anything big/surface: background, cards, button fills, etc.
     // onName: Anything small, texts, icons, etc.
     // onNameContrast: Anything small, texts, icons, etc based on contrast.
@@ -36,9 +48,9 @@ export const COLOR_LAYER_ROLE = [
     "brand",
     "onBrand",
 ];
-const v3 = {
-    space: convertWebSpacingUnitsToMobile(space),
-    colors: COLOR_LAYER_NAME,
+var v3 = {
+    space: (0, webTokensToMobile_1.convertWebSpacingUnitsToMobile)(space),
+    colors: exports.COLOR_LAYER_NAME,
     fonts: {
         sans: {
             regular: "Unica77LL-Regular",
@@ -47,59 +59,8 @@ const v3 = {
             mediumItalic: "Unica77LL-MediumItalic",
         },
     },
-    textTreatments: convertWebTextTreatmentsToMobile(textVariants),
-};
-const v3light = {
-    ...v3,
-    colors: {
-        ...v3.colors,
-        background: colors.mono0,
-        onBackground: colors.mono100,
-        onBackgroundHigh: colors.mono100,
-        onBackgroundMedium: colors.mono60,
-        onBackgroundLow: colors.mono30,
-        surface: colors.mono0,
-        onSurface: colors.mono100,
-        onSurfaceHigh: colors.mono100,
-        onSurfaceMedium: colors.mono60,
-        onSurfaceLow: colors.mono5,
-        primary: colors.mono100,
-        onPrimaryHigh: colors.mono0,
-        onPrimaryMedium: colors.mono5,
-        onPrimaryLow: colors.mono5,
-        secondary: colors.mono30,
-        onSecondaryHigh: colors.mono100,
-        onSecondaryMedium: colors.mono60,
-        onSecondaryLow: colors.mono60,
-        brand: colors.blue100,
-        onBrand: colors.mono0,
-    },
-};
-const v3dark = {
-    ...v3,
-    colors: {
-        ...THEME_DARK.colors,
-        devpurple: v3.colors.devpurple,
-        background: THEME_DARK.colors.mono0,
-        onBackground: THEME_DARK.colors.mono100,
-        onBackgroundHigh: THEME_DARK.colors.mono100,
-        onBackgroundMedium: THEME_DARK.colors.mono100,
-        onBackgroundLow: THEME_DARK.colors.mono60,
-        surface: "#333",
-        onSurface: THEME_DARK.colors.mono0,
-        onSurfaceHigh: THEME_DARK.colors.mono0,
-        onSurfaceMedium: THEME_DARK.colors.mono60,
-        onSurfaceLow: "#555",
-        primary: THEME_DARK.colors.mono0,
-        onPrimaryHigh: THEME_DARK.colors.mono100,
-        onPrimaryMedium: THEME_DARK.colors.mono60,
-        onPrimaryLow: THEME_DARK.colors.mono60,
-        secondary: THEME_DARK.colors.mono60,
-        onSecondaryHigh: THEME_DARK.colors.mono0,
-        onSecondaryMedium: THEME_DARK.colors.mono5,
-        onSecondaryLow: THEME_DARK.colors.mono5,
-        brand: THEME_DARK.colors.blue100,
-        onBrand: THEME_DARK.colors.mono0,
-    },
+    textTreatments: (0, webTokensToMobile_1.convertWebTextTreatmentsToMobile)(textVariants),
 };
-export const THEMES = { v3, v3light, v3dark };
+var v3light = __assign(__assign({}, v3), { colors: __assign(__assign({}, v3.colors), { background: colors.mono0, onBackground: colors.mono100, onBackgroundHigh: colors.mono100, onBackgroundMedium: colors.mono60, onBackgroundLow: colors.mono30, surface: colors.mono0, onSurface: colors.mono100, onSurfaceHigh: colors.mono100, onSurfaceMedium: colors.mono60, onSurfaceLow: colors.mono5, primary: colors.mono100, onPrimaryHigh: colors.mono0, onPrimaryMedium: colors.mono5, onPrimaryLow: colors.mono5, secondary: colors.mono30, onSecondaryHigh: colors.mono100, onSecondaryMedium: colors.mono60, onSecondaryLow: colors.mono60, brand: colors.blue100, onBrand: colors.mono0 }) });
+var v3dark = __assign(__assign({}, v3), { colors: __assign(__assign({}, v3Dark_1.THEME_DARK.colors), { devpurple: v3.colors.devpurple, background: v3Dark_1.THEME_DARK.colors.mono0, onBackground: v3Dark_1.THEME_DARK.colors.mono100, onBackgroundHigh: v3Dark_1.THEME_DARK.colors.mono100, onBackgroundMedium: v3Dark_1.THEME_DARK.colors.mono100, onBackgroundLow: v3Dark_1.THEME_DARK.colors.mono60, surface: "#333", onSurface: v3Dark_1.THEME_DARK.colors.mono0, onSurfaceHigh: v3Dark_1.THEME_DARK.colors.mono0, onSurfaceMedium: v3Dark_1.THEME_DARK.colors.mono60, onSurfaceLow: "#555", primary: v3Dark_1.THEME_DARK.colors.mono0, onPrimaryHigh: v3Dark_1.THEME_DARK.colors.mono100, onPrimaryMedium: v3Dark_1.THEME_DARK.colors.mono60, onPrimaryLow: v3Dark_1.THEME_DARK.colors.mono60, secondary: v3Dark_1.THEME_DARK.colors.mono60, onSecondaryHigh: v3Dark_1.THEME_DARK.colors.mono0, onSecondaryMedium: v3Dark_1.THEME_DARK.colors.mono5, onSecondaryLow: v3Dark_1.THEME_DARK.colors.mono5, brand: v3Dark_1.THEME_DARK.colors.blue100, onBrand: v3Dark_1.THEME_DARK.colors.mono0 }) });
+exports.THEMES = { v3: v3, v3light: v3light, v3dark: v3dark };

package/dist/types.js

@@ -1,7 +1,12 @@
-import { COLOR_LAYER_ROLE, COLOR_LAYER_NAME } from "./tokens";
-export const isRoleLayer = (name) => {
-    return COLOR_LAYER_ROLE.includes(name);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNameLayer = exports.isRoleLayer = void 0;
+var tokens_1 = require("./tokens");
+var isRoleLayer = function (name) {
+    return tokens_1.COLOR_LAYER_ROLE.includes(name);
 };
-export const isNameLayer = (name) => {
-    return Object.keys(COLOR_LAYER_NAME).includes(name);
+exports.isRoleLayer = isRoleLayer;
+var isNameLayer = function (name) {
+    return Object.keys(tokens_1.COLOR_LAYER_NAME).includes(name);
 };
+exports.isNameLayer = isNameLayer;

package/dist/utils/Wrap.js

@@ -1,17 +1,25 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { getChildrenByTypeDeep } from "react-nanny";
-export const Wrap = ({ if: condition, children }) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrap = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_nanny_1 = require("react-nanny");
+var Wrap = function (_a) {
+    var condition = _a.if, children = _a.children;
     if (condition) {
-        return _jsx(_Fragment, { children: children });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     }
-    const wrapContentChildren = getChildrenByTypeDeep(children, Wrap.Content);
+    var wrapContentChildren = (0, react_nanny_1.getChildrenByTypeDeep)(children, exports.Wrap.Content);
     if (wrapContentChildren.length === 0) {
         throw new Error("Wrap.Content is required");
     }
     if (wrapContentChildren.length > 1) {
         throw new Error("You can't have more than one Wrap.Content");
     }
-    const actualWrapContent = wrapContentChildren[0];
-    return _jsx(_Fragment, { children: actualWrapContent });
+    var actualWrapContent = wrapContentChildren[0];
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actualWrapContent });
+};
+exports.Wrap = Wrap;
+exports.Wrap.Content = function (_a) {
+    var children = _a.children;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
-Wrap.Content = ({ children }) => _jsx(_Fragment, { children: children });

package/dist/utils/colors.stories.js

@@ -1,24 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from "../elements/Flex";
-import { Text } from "../elements/Text";
-import { List, Row } from "../storybook/helpers";
-import { COLOR_LAYER_NAME } from "../tokens";
-import { isRoleLayer } from "../types";
-import { useColor } from "../utils/hooks";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.All = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = require("../elements/Flex");
+var Text_1 = require("../elements/Text");
+var helpers_1 = require("../storybook/helpers");
+var tokens_1 = require("../tokens");
+var types_1 = require("../types");
+var hooks_1 = require("../utils/hooks");
+exports.default = {
     title: "Tokens/colors",
 };
-const ColorSquare = ({ color: theColor, border }) => {
-    const color = useColor();
-    const contrast = theColor.startsWith("on") &&
+var ColorSquare = function (_a) {
+    var _b;
+    var theColor = _a.color, border = _a.border;
+    var color = (0, hooks_1.useColor)();
+    var contrast = theColor.startsWith("on") &&
         (theColor.endsWith("High") || theColor.endsWith("Medium") || theColor.endsWith("Low"))
-        ? theColor.match(/(High|Medium|Low)$/)?.[0]
+        ? (_b = theColor.match(/(High|Medium|Low)$/)) === null || _b === void 0 ? void 0 : _b[0]
         : undefined;
-    const colorWithoutContrast = theColor.replace(/(High|Medium|Low)$/, "");
-    const cssName = useCssColorName(theColor);
-    const namedName = useNamedColorName(theColor);
-    const displayName = isRoleLayer(theColor) ? namedName : cssName;
-    return (_jsxs(Flex, { children: [_jsx(Flex, { style: [
+    var colorWithoutContrast = theColor.replace(/(High|Medium|Low)$/, "");
+    var cssName = useCssColorName(theColor);
+    var namedName = useNamedColorName(theColor);
+    var displayName = (0, types_1.isRoleLayer)(theColor) ? namedName : cssName;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [
                     {
                         backgroundColor: color(theColor),
                         width: 80,
@@ -30,18 +35,19 @@ const ColorSquare = ({ color: theColor, border }) => {
                         borderWidth: 0.5,
                         borderColor: "grey",
                     },
-                ] }), _jsx(Text, { children: colorWithoutContrast }), contrast && _jsx(Text, { children: contrast }), _jsx(Text, { color: "onBackgroundLow", children: displayName })] }));
+                ] }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: colorWithoutContrast }), contrast && (0, jsx_runtime_1.jsx)(Text_1.Text, { children: contrast }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "onBackgroundLow", children: displayName })] }));
 };
-export const All = () => (_jsxs(List, { children: [_jsxs(Row, { children: [_jsx(ColorSquare, { color: "mono100", border: true }), _jsx(ColorSquare, { color: "mono60" }), _jsx(ColorSquare, { color: "mono30" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "mono15" }), _jsx(ColorSquare, { color: "mono10" }), _jsx(ColorSquare, { color: "mono5" }), _jsx(ColorSquare, { color: "mono0", border: true })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "blue150" }), _jsx(ColorSquare, { color: "blue100" }), _jsx(ColorSquare, { color: "blue10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "green150" }), _jsx(ColorSquare, { color: "green100" }), _jsx(ColorSquare, { color: "green10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "yellow150" }), _jsx(ColorSquare, { color: "yellow100" }), _jsx(ColorSquare, { color: "yellow10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "orange150" }), _jsx(ColorSquare, { color: "orange100" }), _jsx(ColorSquare, { color: "orange10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "red150" }), _jsx(ColorSquare, { color: "red100" }), _jsx(ColorSquare, { color: "red10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "brand" }), _jsx(ColorSquare, { color: "devpurple" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "background", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onBackgroundHigh", border: true }), _jsx(ColorSquare, { color: "onBackgroundMedium" }), _jsx(ColorSquare, { color: "onBackgroundLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "surface", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSurfaceHigh", border: true }), _jsx(ColorSquare, { color: "onSurfaceMedium" }), _jsx(ColorSquare, { color: "onSurfaceLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "primary", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onPrimaryHigh", border: true }), _jsx(ColorSquare, { color: "onPrimaryMedium" }), _jsx(ColorSquare, { color: "onPrimaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "secondary" }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSecondaryHigh" }), _jsx(ColorSquare, { color: "onSecondaryMedium" }), _jsx(ColorSquare, { color: "onSecondaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "brand" }) }), _jsx(Row, { children: _jsx(ColorSquare, { color: "onBrand", border: true }) })] }));
-const useNamedColorName = (theColor) => {
-    const color = useColor();
-    const cssName = useCssColorName(theColor);
-    const namedColor = Object.keys(COLOR_LAYER_NAME).find((name) => color(name) === color(theColor));
+var All = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono100", border: true }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono60" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono30" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono15" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono10" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono5" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "mono0", border: true })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "blue150" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "blue100" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "blue10" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "green150" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "green100" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "green10" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "yellow150" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "yellow100" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "yellow10" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "orange150" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "orange100" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "orange10" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "red150" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "red100" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "red10" })] }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "brand" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "devpurple" })] }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "background", border: true }) }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "onBackgroundHigh", border: true }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onBackgroundMedium" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onBackgroundLow" })] }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "surface", border: true }) }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSurfaceHigh", border: true }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSurfaceMedium" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSurfaceLow" })] }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "primary", border: true }) }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "onPrimaryHigh", border: true }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onPrimaryMedium" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onPrimaryLow" })] }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "secondary" }) }), (0, jsx_runtime_1.jsxs)(helpers_1.Row, { children: [(0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSecondaryHigh" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSecondaryMedium" }), (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onSecondaryLow" })] }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "brand" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(ColorSquare, { color: "onBrand", border: true }) })] })); };
+exports.All = All;
+var useNamedColorName = function (theColor) {
+    var color = (0, hooks_1.useColor)();
+    var cssName = useCssColorName(theColor);
+    var namedColor = Object.keys(tokens_1.COLOR_LAYER_NAME).find(function (name) { return color(name) === color(theColor); });
     if (namedColor === undefined)
         return cssName;
     return namedColor;
 };
-const useCssColorName = (theColor) => {
-    const color = useColor();
+var useCssColorName = function (theColor) {
+    var color = (0, hooks_1.useColor)();
     return color(theColor);
 };