@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -1,46 +1,83 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { TouchableWithoutFeedback } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, onToolTipPress, testID, text, }) => {
-    const initialBoxDimensions = { height: 0, width: 0 };
-    const boxDimensions = useSharedValue(initialBoxDimensions);
-    const animationStyle = useAnimatedStyle(() => {
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolTipTextContainer = exports.ToolTipFlyout = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var ToolTipFlyout = function (_a) {
+    var containerStyle = _a.containerStyle, tapToDismiss = _a.tapToDismiss, height = _a.height, width = _a.width, onClose = _a.onClose, onToolTipPress = _a.onToolTipPress, testID = _a.testID, text = _a.text;
+    var initialBoxDimensions = { height: 0, width: 0 };
+    var boxDimensions = (0, react_native_reanimated_1.useSharedValue)(initialBoxDimensions);
+    var animationStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
-            height: withTiming(boxDimensions.get().height, {
+            height: (0, react_native_reanimated_1.withTiming)(boxDimensions.get().height, {
                 duration: 500,
             }),
-            width: withTiming(boxDimensions.get().width, {
+            width: (0, react_native_reanimated_1.withTiming)(boxDimensions.get().width, {
                 duration: 500,
             }),
         };
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         if (text) {
-            boxDimensions.set(() => ({
-                height,
-                width,
-            }));
+            boxDimensions.set(function () { return ({
+                height: height,
+                width: width,
+            }); });
         }
         else {
-            boxDimensions.set(() => initialBoxDimensions);
+            boxDimensions.set(function () { return initialBoxDimensions; });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [text, height, width]);
-    const color = useColor();
-    const handleClose = () => {
+    var color = (0, useColor_1.useColor)();
+    var handleClose = function () {
         onClose();
     };
-    const onPress = () => {
-        onToolTipPress?.();
+    var onPress = function () {
+        onToolTipPress === null || onToolTipPress === void 0 ? void 0 : onToolTipPress();
         if (tapToDismiss) {
             handleClose();
         }
     };
-    return (_jsx(TouchableWithoutFeedback, { accessibilityLabel: "Tooltip", accessibilityHint: "Tap to dismiss", onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityLabel: "Tooltip", accessibilityHint: "Tap to dismiss", onPress: onPress, testID: testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                 {
                     backgroundColor: color("mono100"),
                     position: "absolute",
@@ -49,12 +86,15 @@ export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onC
                 },
                 containerStyle,
                 animationStyle,
-            ], children: _jsx(Flex, { justifyContent: "center", alignItems: "center", bg: "mono100", children: _jsx(ToolTipTextContainer, { text: text }) }) }) }));
+            ], children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", alignItems: "center", bg: "mono100", children: (0, jsx_runtime_1.jsx)(exports.ToolTipTextContainer, { text: text }) }) }) }));
 };
+exports.ToolTipFlyout = ToolTipFlyout;
 /** Please be careful with applying any styling here. This forms the basis with which we measure
  * in advance by how large we can inflate a tooltip.
  */
-export const ToolTipTextContainer = ({ text }) => {
-    const color = useColor();
-    return (_jsx(Text, { variant: "xs", color: color("mono0"), pb: 0.5, children: text }));
+var ToolTipTextContainer = function (_a) {
+    var text = _a.text;
+    var color = (0, useColor_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color("mono0"), pb: 0.5, children: text }));
 };
+exports.ToolTipTextContainer = ToolTipTextContainer;

package/dist/elements/ToolTip/index.js

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

package/dist/elements/Touchable/Touchable.js

@@ -1,27 +1,55 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { TouchableOpacity, TouchableWithoutFeedback, } from "react-native";
-import Haptic from "react-native-haptic-feedback";
-import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Touchable = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
+var constants_1 = require("../../constants");
+var Flex_1 = require("../Flex");
 /**
  * `haptic` can be used like:
  * <Touchable haptic />
  * or
  * <Touchable haptic="impactHeavy" />
  */
-export const Touchable = ({ children, flex, haptic, noFeedback, onPress, underlayColor, ...props }) => {
-    const color = useColor();
-    const inner = React.Children.count(children) === 1 ? children : _jsx(Flex, { flex: flex, children: children });
-    const onPressWrapped = (evt) => {
+var Touchable = function (_a) {
+    var children = _a.children, flex = _a.flex, haptic = _a.haptic, noFeedback = _a.noFeedback, onPress = _a.onPress, props = __rest(_a, ["children", "flex", "haptic", "noFeedback", "onPress"]);
+    var inner = react_1.default.Children.count(children) === 1 ? children : (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: flex, children: children });
+    var onPressWrapped = function (evt) {
         if (onPress === undefined) {
             return;
         }
         if (haptic !== undefined) {
-            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(evt);
     };
-    return noFeedback ? (_jsx(TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : (_jsx(TouchableOpacity, { activeOpacity: DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
+    return noFeedback ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({}, props, { onPress: onPressWrapped, children: inner }))) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ activeOpacity: constants_1.DEFAULT_ACTIVE_OPACITY }, props, { onPress: onPressWrapped, children: inner })));
 };
+exports.Touchable = Touchable;

package/dist/elements/Touchable/Touchable.stories.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TrashIcon } from "@artsy/icons/native";
-import { Touchable } from "./Touchable";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Examples = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var Touchable_1 = require("./Touchable");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Touchable",
-    component: Touchable,
+    component: Touchable_1.Touchable,
 };
-export const Examples = () => (_jsxs(List, { children: [_jsx(Touchable, { accessibilityRole: "button", children: _jsx(Text, { children: "This is a text wrapped in a `Touchable`." }) }), _jsx(Touchable, { accessibilityRole: "button", children: _jsxs(Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [_jsx(TrashIcon, {}), _jsx(Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));
+var Examples = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is a text wrapped in a `Touchable`." }) }), (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [(0, jsx_runtime_1.jsx)(native_1.TrashIcon, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] })); };
+exports.Examples = Examples;

package/dist/elements/Touchable/TouchableHighlightColor.js

@@ -1,15 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { Touchable } from "./Touchable";
-export const TouchableHighlightColor = (props) => {
-    const { activeOpacity = 1, activeColor = "blue100", normalColor = "mono100", onPressIn, onPressOut, render, ...restProps } = props;
-    const [highlighted, setHighlighted] = useState(false);
-    const color = highlighted ? activeColor : normalColor;
-    return (_jsx(Touchable, { noFeedback: true, activeOpacity: activeOpacity, onPressIn: (event) => {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TouchableHighlightColor = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Touchable_1 = require("./Touchable");
+var TouchableHighlightColor = function (props) {
+    var _a = props.activeOpacity, activeOpacity = _a === void 0 ? 1 : _a, _b = props.activeColor, activeColor = _b === void 0 ? "blue100" : _b, _c = props.normalColor, normalColor = _c === void 0 ? "mono100" : _c, onPressIn = props.onPressIn, onPressOut = props.onPressOut, render = props.render, restProps = __rest(props, ["activeOpacity", "activeColor", "normalColor", "onPressIn", "onPressOut", "render"]);
+    var _d = (0, react_1.useState)(false), highlighted = _d[0], setHighlighted = _d[1];
+    var color = highlighted ? activeColor : normalColor;
+    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, __assign({ noFeedback: true, activeOpacity: activeOpacity, onPressIn: function (event) {
             setHighlighted(true);
-            onPressIn?.(event);
-        }, onPressOut: (event) => {
+            onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+        }, onPressOut: function (event) {
             setHighlighted(false);
-            onPressOut?.(event);
-        }, ...restProps, children: render({ color, highlighted }) }));
+            onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+        } }, restProps, { children: render({ color: color, highlighted: highlighted }) })));
 };
+exports.TouchableHighlightColor = TouchableHighlightColor;

package/dist/elements/Touchable/TouchableWithScale.js

@@ -1,20 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Animated, TouchableWithoutFeedback, } from "react-native";
-const ANIMATION_DEFAULTS = {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TouchableWithScale = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var ANIMATION_DEFAULTS = {
     stiffness: 600,
     damping: 120,
     useNativeDriver: true,
 };
-const NOOP = () => { };
-export const TouchableWithScale = ({ defaultScale = 1, activeScale = 0.95, onPressIn = NOOP, onPressOut = NOOP, style, children, ...restProps }) => {
-    const scaleAnimation = new Animated.Value(defaultScale);
-    const handlePressIn = (event) => {
-        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: activeScale }).start();
+var NOOP = function () { };
+var TouchableWithScale = function (_a) {
+    var _b = _a.defaultScale, defaultScale = _b === void 0 ? 1 : _b, _c = _a.activeScale, activeScale = _c === void 0 ? 0.95 : _c, _d = _a.onPressIn, onPressIn = _d === void 0 ? NOOP : _d, _e = _a.onPressOut, onPressOut = _e === void 0 ? NOOP : _e, style = _a.style, children = _a.children, restProps = __rest(_a, ["defaultScale", "activeScale", "onPressIn", "onPressOut", "style", "children"]);
+    var scaleAnimation = new react_native_1.Animated.Value(defaultScale);
+    var handlePressIn = function (event) {
+        react_native_1.Animated.spring(scaleAnimation, __assign(__assign({}, ANIMATION_DEFAULTS), { toValue: activeScale })).start();
         onPressIn(event);
     };
-    const handlePressOut = (event) => {
-        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: defaultScale }).start();
+    var handlePressOut = function (event) {
+        react_native_1.Animated.spring(scaleAnimation, __assign(__assign({}, ANIMATION_DEFAULTS), { toValue: defaultScale })).start();
         onPressOut(event);
     };
-    return (_jsx(TouchableWithoutFeedback, { onPressIn: handlePressIn, onPressOut: handlePressOut, ...restProps, children: _jsx(Animated.View, { style: [style, { transform: [{ scale: scaleAnimation }] }], children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPressIn: handlePressIn, onPressOut: handlePressOut }, restProps, { children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style, { transform: [{ scale: scaleAnimation }] }], children: children }) })));
 };
+exports.TouchableWithScale = TouchableWithScale;

package/dist/elements/Touchable/index.js

@@ -1,3 +1,19 @@
-export * from "./Touchable";
-export * from "./TouchableWithScale";
-export * from "./TouchableHighlightColor";
+"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("./Touchable"), exports);
+__exportStar(require("./TouchableWithScale"), exports);
+__exportStar(require("./TouchableHighlightColor"), exports);

package/dist/elements/VisualClue/VisualClue.stories.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { VisualClueDot, VisualClueText } from "./";
-import { List } from "../../storybook/helpers";
-import { Box } from "../Box";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualClue = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var _1 = require("./");
+var helpers_1 = require("../../storybook/helpers");
+var Box_1 = require("../Box");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Theme/Text",
 };
-export const VisualClue = () => (_jsxs(List, { children: [_jsxs(Box, { children: [_jsx(Text, { children: "Default" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, {}) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 4" }), _jsx(Box, { position: "absolute", top: "4px", right: "-4px", children: _jsx(VisualClueDot, { diameter: 4 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 8" }), _jsx(Box, { position: "absolute", top: "4px", right: "-10px", children: _jsx(VisualClueDot, { diameter: 8 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red50" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red50" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red100" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red100" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: mono60" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "mono60" }) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] }));
+var VisualClue = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Default" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-8px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, {}) })] }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Diameter: 4" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-4px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, { diameter: 4 }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Diameter: 8" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-10px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, { diameter: 8 }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Color: red50" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-8px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, { color: "red50" }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Color: red100" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-8px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, { color: "red100" }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Color: mono60" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", top: "4px", right: "-8px", children: (0, jsx_runtime_1.jsx)(_1.VisualClueDot, { color: "mono60" }) })] }), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "A Feature" }), (0, jsx_runtime_1.jsx)(_1.VisualClueText, { style: { top: 14, right: -24 } })] })] })); };
+exports.VisualClue = VisualClue;

package/dist/elements/VisualClue/VisualClueDot.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-const DOT_DIAMETER = 6;
-const FILL_COLOR = "blue100";
-export const VisualClueDot = ({ diameter = DOT_DIAMETER, color = FILL_COLOR, style, }) => {
-    const colors = useColor();
-    return (_jsx(Flex, { style: {
-            height: diameter,
-            minWidth: diameter,
-            borderRadius: diameter / 2,
-            backgroundColor: colors(color),
-            ...style,
-        } }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualClueDot = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var DOT_DIAMETER = 6;
+var FILL_COLOR = "blue100";
+var VisualClueDot = function (_a) {
+    var _b = _a.diameter, diameter = _b === void 0 ? DOT_DIAMETER : _b, _c = _a.color, color = _c === void 0 ? FILL_COLOR : _c, style = _a.style;
+    var colors = (0, useColor_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: __assign({ height: diameter, minWidth: diameter, borderRadius: diameter / 2, backgroundColor: colors(color) }, style) }));
+};
+exports.VisualClueDot = VisualClueDot;

package/dist/elements/VisualClue/VisualClueText.js

@@ -1,16 +1,27 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-import { PopIn } from "../PopIn";
-import { Text } from "../Text";
-const WRAPPER_WIDTH = 56;
-const WRAPPER_HEIGHT = 46;
-export const VisualClueText = ({ style = {} }) => {
-    const colors = useColor();
-    return (_jsx(Flex, { width: 0, overflow: "visible", children: _jsx(Flex, { width: 55, justifyContent: "center", children: _jsx(Flex, { style: {
-                    width: WRAPPER_WIDTH,
-                    height: WRAPPER_HEIGHT,
-                    ...style,
-                    position: "absolute",
-                }, children: _jsx(PopIn, { children: _jsx(Text, { style: { fontSize: 12, color: colors("blue100") }, children: "New" }) }) }) }) }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualClueText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var PopIn_1 = require("../PopIn");
+var Text_1 = require("../Text");
+var WRAPPER_WIDTH = 56;
+var WRAPPER_HEIGHT = 46;
+var VisualClueText = function (_a) {
+    var _b = _a.style, style = _b === void 0 ? {} : _b;
+    var colors = (0, useColor_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 0, overflow: "visible", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 55, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: __assign(__assign({ width: WRAPPER_WIDTH, height: WRAPPER_HEIGHT }, style), { position: "absolute" }), children: (0, jsx_runtime_1.jsx)(PopIn_1.PopIn, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: { fontSize: 12, color: colors("blue100") }, children: "New" }) }) }) }) }));
+};
+exports.VisualClueText = VisualClueText;

package/dist/elements/VisualClue/index.js

@@ -1,2 +1,18 @@
-export * from "./VisualClueText";
-export * from "./VisualClueDot";
+"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("./VisualClueText"), exports);
+__exportStar(require("./VisualClueDot"), exports);