@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/themes/Themes.story.js

@@ -0,0 +1,1191 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo, useState } from "react";
+import { Banner, Box, Breadcrumbs, Button, BUTTON_VARIANT_NAMES, Clickable, Column, GridColumns, Input, Join, Message, Pill, PILL_VARIANT_NAMES, Select, Separator, Spacer, Stack, Step, Stepper, Tab, Tabs, Text } from "../elements";
+import { THEME, useTheme } from "../Theme";
+import { THEME_DARK } from "@artsy/palette-tokens/dist/themes/v3Dark";
+import CheckmarkFillIcon from "@artsy/icons/CheckmarkFillIcon";
+import CloseFillIcon from "@artsy/icons/CloseFillIcon";
+import { debounce } from "es-toolkit";
+export default {
+  title: "Theme"
+};
+export var Theme = function Theme() {
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Theme"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Box, {
+    as: "pre",
+    my: 0
+  }, JSON.stringify(theme, null, 2)));
+};
+export var Colors = function Colors() {
+  var _useTheme2 = useTheme(),
+    theme = _useTheme2.theme;
+  var colors = Object.entries(theme.colors);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Color Palette"), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm"
+  }, "The Artsy color palette has been updated to improve the accessibility. Each color has been adjusted to ensure sufficient contrast and has specific roles as to which colors can be used in conjunction with each other."), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, "Color Value"), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, "Hex Value"))), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 6
+  }), colors.map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      value = _ref2[1];
+    return /*#__PURE__*/React.createElement(GridColumns, {
+      key: name,
+      justifyContent: "space-between",
+      my: 4
+    }, /*#__PURE__*/React.createElement(Column, {
+      span: 6,
+      display: "flex",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Box, {
+      width: 60,
+      height: 60,
+      bg: name,
+      borderRadius: "50%"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "xl",
+      ml: 2
+    }, name)), /*#__PURE__*/React.createElement(Column, {
+      span: 6,
+      display: "flex",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm",
+      color: "mono60"
+    }, "color:\xA0"), /*#__PURE__*/React.createElement(Text, {
+      variant: "sm"
+    }, value)));
+  }));
+};
+export var Spacing = function Spacing() {
+  var _useTheme3 = useTheme(),
+    theme = _useTheme3.theme;
+  var spacing = Object.keys(theme.space).sort(function (a, b) {
+    return parseFloat(a) - parseFloat(b);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Spacing"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(Spacer, {
+      y: 2
+    })
+  }, spacing.map(function (key) {
+    var px = parseFloat(key) * 10;
+    return /*#__PURE__*/React.createElement(Box, {
+      key: key
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "lg-display"
+    }, key), /*#__PURE__*/React.createElement(Text, {
+      variant: "xs"
+    }, px, "px"), /*#__PURE__*/React.createElement(Box, {
+      width: px,
+      height: 1,
+      bg: "mono60"
+    }));
+  })));
+};
+export var Grid = function Grid() {
+  var _useTheme4 = useTheme(),
+    theme = _useTheme4.theme;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Desktop"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(GridColumns, {
+    my: 12,
+    width: "100%",
+    height: 800
+  }, Array.from(Array(12)).map(function (_, i) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: i,
+      span: [1],
+      bg: "mono10",
+      height: "100%"
+    });
+  })), /*#__PURE__*/React.createElement(Separator, {
+    my: 12,
+    color: "mono30"
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Tablet"), /*#__PURE__*/React.createElement(GridColumns, {
+    my: 12,
+    width: theme.breakpoints.sm,
+    height: 800,
+    mx: "auto"
+  }, Array.from(Array(12)).map(function (_, i) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: i,
+      span: [1],
+      bg: "mono10",
+      height: "100%"
+    });
+  })), /*#__PURE__*/React.createElement(Separator, {
+    my: 12,
+    color: "mono30"
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Mobile"), /*#__PURE__*/React.createElement(GridColumns, {
+    my: 12,
+    width: 480,
+    gridColumnGap: 1,
+    height: 800,
+    mx: "auto"
+  }, Array.from(Array(12)).map(function (_, i) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: i,
+      span: [1],
+      bg: "mono10",
+      height: "100%"
+    });
+  })));
+};
+export var Typography = function Typography() {
+  var _useTheme5 = useTheme(),
+    theme = _useTheme5.theme;
+  var treatments = Object.keys(theme.textVariants);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Type Scale"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, "Size"), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, "Details"))), /*#__PURE__*/React.createElement(Separator, {
+    my: 4,
+    color: "mono30"
+  }), /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(Separator, {
+      my: 4,
+      color: "mono30"
+    })
+  }, treatments.map(function (name) {
+    return /*#__PURE__*/React.createElement(GridColumns, {
+      key: name
+    }, /*#__PURE__*/React.createElement(Column, {
+      span: 6
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: name
+    }, name, /*#__PURE__*/React.createElement("br", null), [theme.textVariants[name].fontSize, theme.textVariants[name].lineHeight, theme.textVariants[name].letterSpacing].filter(Boolean).join("/"))), /*#__PURE__*/React.createElement(Column, {
+      span: 6
+    }, Object.entries(theme.textVariants[name]).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      return /*#__PURE__*/React.createElement(Text, {
+        key: key,
+        variant: "sm"
+      }, /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        color: "mono60"
+      }, key, ":"), " ", value);
+    })));
+  })));
+};
+export var Buttons = function Buttons() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Buttons"), /*#__PURE__*/React.createElement(Separator, {
+    my: 12,
+    color: "mono30"
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Default"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Focus"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Hover"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Loading"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Disabled"))), /*#__PURE__*/React.createElement(Separator, {
+    my: 4,
+    color: "mono30"
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Large - 50px"), /*#__PURE__*/React.createElement(GridColumns, {
+    gridRowGap: 6
+  }, BUTTON_VARIANT_NAMES.map(function (variant) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: variant
+    }, /*#__PURE__*/React.createElement(Column, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      width: 150
+    }, "Default")), /*#__PURE__*/React.createElement(Column, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      width: 150,
+      focus: true
+    }, "Focus")), /*#__PURE__*/React.createElement(Column, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      width: 150,
+      hover: true
+    }, "Hover")), /*#__PURE__*/React.createElement(Column, {
+      span: 2
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      width: 150,
+      loading: true
+    }, "Loading")), /*#__PURE__*/React.createElement(Column, {
+      span: 2,
+      wrap: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      width: 150,
+      disabled: true
+    }, "Disabled")));
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Small - 30px"), /*#__PURE__*/React.createElement(GridColumns, {
+    gridColumnGap: 12,
+    gridRowGap: 6
+  }, BUTTON_VARIANT_NAMES.map(function (variant) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: variant
+    }, /*#__PURE__*/React.createElement(Column, {
+      span: 1
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      size: "small",
+      width: 100
+    }, "Default")), /*#__PURE__*/React.createElement(Column, {
+      span: 1
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      size: "small",
+      width: 100,
+      focus: true
+    }, "Focus")), /*#__PURE__*/React.createElement(Column, {
+      span: 1
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      size: "small",
+      width: 100,
+      hover: true
+    }, "Hover")), /*#__PURE__*/React.createElement(Column, {
+      span: 1
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      size: "small",
+      width: 100,
+      loading: true
+    }, "Loading")), /*#__PURE__*/React.createElement(Column, {
+      span: 1,
+      wrap: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: variant,
+      size: "small",
+      width: 100,
+      disabled: true
+    }, "Disabled")));
+  })));
+};
+export var Components = function Components() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Components"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Messages"), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Default"), /*#__PURE__*/React.createElement(Message, {
+    title: "Message Title",
+    variant: "default"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Info"), /*#__PURE__*/React.createElement(Message, {
+    title: "Message Title",
+    variant: "info"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Warning"), /*#__PURE__*/React.createElement(Message, {
+    title: "Message Title",
+    variant: "warning"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Error"), /*#__PURE__*/React.createElement(Message, {
+    title: "Message Title",
+    variant: "error"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Banners"), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Default Light"), /*#__PURE__*/React.createElement(Banner, {
+    dismissable: true,
+    variant: "defaultLight"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Default Dark"), /*#__PURE__*/React.createElement(Banner, {
+    dismissable: true,
+    variant: "defaultDark"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Success"), /*#__PURE__*/React.createElement(Banner, {
+    dismissable: true,
+    variant: "success"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Error"), /*#__PURE__*/React.createElement(Banner, {
+    dismissable: true,
+    variant: "error"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 6
+  }, "Brand"), /*#__PURE__*/React.createElement(Banner, {
+    dismissable: true,
+    variant: "brand"
+  }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 4
+  }, "Pills"), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 3
+  }, "Default"), /*#__PURE__*/React.createElement(Column, {
+    span: 3
+  }, "Focus"), /*#__PURE__*/React.createElement(Column, {
+    span: 3
+  }, "Hover"), /*#__PURE__*/React.createElement(Column, {
+    span: 3
+  }, "Active"))), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 6
+  }), /*#__PURE__*/React.createElement(GridColumns, {
+    gridRowGap: 6
+  }, PILL_VARIANT_NAMES.map(function (variant) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: variant
+    }, /*#__PURE__*/React.createElement(Column, {
+      span: 3
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: variant
+    }, "Default")), /*#__PURE__*/React.createElement(Column, {
+      span: 3
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: variant,
+      focus: true
+    }, "Focus")), /*#__PURE__*/React.createElement(Column, {
+      span: 3
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: variant,
+      hover: true
+    }, "Hover")), variant !== "profile" && /*#__PURE__*/React.createElement(Column, {
+      span: 3
+    }, /*#__PURE__*/React.createElement(Pill, {
+      variant: variant,
+      active: true
+    }, "Active")));
+  })), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Navigational Tabs"), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "2 Tabs"), /*#__PURE__*/React.createElement(Tabs, {
+    fill: true
+  }, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "3 Tabs"), /*#__PURE__*/React.createElement(Tabs, {
+    fill: true
+  }, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "4 Tabs"), /*#__PURE__*/React.createElement(Tabs, {
+    fill: true
+  }, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 04"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "5 Tabs"), /*#__PURE__*/React.createElement(Tabs, {
+    fill: true
+  }, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 04"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 05"
+  })), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Content Tabs"), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "2 Tabs"), /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "3 Tabs"), /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "4 Tabs"), /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 04"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "5 Tabs"), /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 04"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    name: "Default 05"
+  })), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Steps"), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "3 Steps"), /*#__PURE__*/React.createElement(Stepper, {
+    currentStepIndex: 0
+  }, /*#__PURE__*/React.createElement(Step, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 03"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "4 Steps"), /*#__PURE__*/React.createElement(Stepper, {
+    currentStepIndex: 0
+  }, /*#__PURE__*/React.createElement(Step, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 04"
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "lg-display",
+    my: 4
+  }, "5 Steps"), /*#__PURE__*/React.createElement(Stepper, {
+    currentStepIndex: 0
+  }, /*#__PURE__*/React.createElement(Step, {
+    name: "Active"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 02"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 03"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 04"
+  }), /*#__PURE__*/React.createElement(Step, {
+    name: "Default 05"
+  })), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Breadcrumbs"), /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement("a", {
+    href: "#example"
+  }, "Level 01"), /*#__PURE__*/React.createElement("a", {
+    href: "#example"
+  }, "Level 02"), /*#__PURE__*/React.createElement("a", {
+    href: "#example"
+  }, "Level 03"), /*#__PURE__*/React.createElement("a", {
+    href: "#example"
+  }, "Level 04 (Active)")));
+};
+var OPTIONS = [{
+  text: "First",
+  value: "firstValue"
+}, {
+  text: "Middle",
+  value: "middleValue"
+}, {
+  text: "Last",
+  value: "lastValue"
+}];
+export var Inputs = function Inputs() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Inputs & Selections"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Inputs"), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Default"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Focus"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Hover"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Active"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Error"), /*#__PURE__*/React.createElement(Column, {
+    span: 2,
+    wrap: true
+  }, "Disabled"))), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 6
+  }), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "No Title"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Default"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    focus: true,
+    placeholder: "Focus"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    hover: true,
+    placeholder: "Hover"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    focus: true,
+    placeholder: "Active",
+    defaultValue: "Active"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    error: "Input Value Error Message/Reason",
+    placeholder: "Error"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: true,
+    placeholder: "Disabled"
+  }))), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "Title"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    placeholder: "Default"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    focus: true,
+    placeholder: "Focus"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    hover: true,
+    placeholder: "Hover"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    focus: true,
+    placeholder: "Active",
+    defaultValue: "Active"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    error: "Input Value Error Message/Reason",
+    placeholder: "Error"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    disabled: true,
+    placeholder: "Disabled"
+  }))), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "Title & Subtitle"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    placeholder: "Default"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    focus: true,
+    placeholder: "Focus"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    hover: true,
+    placeholder: "Hover"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    focus: true,
+    placeholder: "Active",
+    defaultValue: "Active"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    error: "Input Value Error Message/Reason",
+    placeholder: "Error"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Input, {
+    title: "Title",
+    description: "Subtitle",
+    disabled: true,
+    placeholder: "Disabled"
+  }))), /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    my: 6
+  }, "Selects"), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Default"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Focus"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Hover"), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, "Error"), /*#__PURE__*/React.createElement(Column, {
+    span: 2,
+    wrap: true
+  }, "Disabled"))), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 6
+  }), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "No Title"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: OPTIONS
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: OPTIONS,
+    focus: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: OPTIONS,
+    hover: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: OPTIONS,
+    error: "Input Value Error Message/Reason"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2,
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: OPTIONS,
+    disabled: true
+  }))), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "Title"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    options: OPTIONS
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    options: OPTIONS,
+    focus: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    options: OPTIONS,
+    hover: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    options: OPTIONS,
+    error: "Input Value Error Message/Reason"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2,
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    options: OPTIONS,
+    disabled: true
+  }))), /*#__PURE__*/React.createElement(Text, {
+    my: 6,
+    variant: "lg-display"
+  }, "Title & Subtitle"), /*#__PURE__*/React.createElement(GridColumns, null, /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    description: "Subtitle",
+    options: OPTIONS
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    description: "Subtitle",
+    options: OPTIONS,
+    focus: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    description: "Subtitle",
+    options: OPTIONS,
+    hover: true
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    description: "Subtitle",
+    options: OPTIONS,
+    error: "Input Value Error Message/Reason"
+  })), /*#__PURE__*/React.createElement(Column, {
+    span: 2,
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    title: "Title",
+    description: "Subtitle",
+    options: OPTIONS,
+    disabled: true
+  }))));
+};
+var contrastRatio = function contrastRatio(hexColor1, hexColor2) {
+  // Convert hex color to RGB
+  var hexToRgb = function hexToRgb(hex) {
+    var r = parseInt(hex.slice(1, 3), 16);
+    var g = parseInt(hex.slice(3, 5), 16);
+    var b = parseInt(hex.slice(5, 7), 16);
+    return [r, g, b];
+  };
+
+  // Calculate relative luminance
+  var getLuminance = function getLuminance(rgb) {
+    var a = rgb.map(function (v) {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+  };
+  var rgb1 = hexToRgb(hexColor1);
+  var rgb2 = hexToRgb(hexColor2);
+  var luminance1 = getLuminance(rgb1);
+  var luminance2 = getLuminance(rgb2);
+
+  // Calculate contrast ratio
+  var ratio = (Math.max(luminance1, luminance2) + 0.05) / (Math.min(luminance1, luminance2) + 0.05);
+  return parseFloat(ratio.toFixed(2)); // Round to two decimal places for readability
+};
+
+export var Effects = function Effects() {
+  var _useTheme6 = useTheme(),
+    theme = _useTheme6.theme;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl",
+    mb: 4
+  }, "Effects"), /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    mb: 12
+  }, "Visual effects tokens including shadows, gradients, and overlays used throughout the design system."), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(GridColumns, {
+    gridRowGap: 12
+  }, /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "fit-content",
+    px: 6,
+    py: 4,
+    borderRadius: 2,
+    style: {
+      boxShadow: theme.effects.dropShadow
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, "theme.effects.dropShadow"))), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "box-shadow:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.dropShadow)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "fit-content",
+    px: 6,
+    py: 4,
+    borderRadius: 2,
+    style: {
+      boxShadow: theme.effects.innerShadow
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, "theme.effects.innerShadow"))), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "box-shadow:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.innerShadow)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "fit-content",
+    px: 6,
+    py: 4,
+    borderRadius: 2,
+    style: {
+      boxShadow: theme.effects.flatShadow
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono60"
+  }, "theme.effects.flatShadow"))), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "box-shadow:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.flatShadow)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "fit-content",
+    px: 6,
+    py: 4,
+    borderRadius: 2,
+    bg: "mono30"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono0",
+    style: {
+      textShadow: theme.effects.textShadow
+    }
+  }, "theme.effects.textShadow"))), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "text-shadow:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.textShadow)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: "fit-content",
+    px: 6,
+    py: 4,
+    borderRadius: 2,
+    border: "1px solid",
+    borderColor: "mono5",
+    background: theme.effects.overlayGradient
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm",
+    color: "mono0",
+    style: {
+      textShadow: theme.effects.textShadow
+    }
+  }, "theme.effects.overlayGradient"))), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "background:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.overlayGradient)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    bg: "mono30",
+    position: "relative",
+    p: 4,
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    style: {
+      background: theme.effects.fadeRight
+    }
+  }), "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum!")), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "background:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.fadeRight)), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Box, {
+    bg: "mono30",
+    position: "relative",
+    p: 4
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    top: 2,
+    left: 2,
+    right: 2,
+    bottom: 2,
+    borderRadius: 2,
+    style: {
+      backgroundColor: theme.effects.backdrop
+    }
+  }), "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsum quasi nesciunt perferendis iste nemo impedit molestias vero obcaecati commodi autem illum eius, modi dolorem eum. Similique ut consectetur rerum!")), /*#__PURE__*/React.createElement(Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm",
+    color: "mono60"
+  }, "background:", " "), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "sm"
+  }, theme.effects.backdrop))));
+};
+export var ContrastRatios = function ContrastRatios() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    variant: "xxl"
+  }, "Contrast Ratios"), /*#__PURE__*/React.createElement(Separator, {
+    color: "mono30",
+    my: 12
+  }), /*#__PURE__*/React.createElement(GridColumns, null, [THEME, THEME_DARK].map(function (theme) {
+    return /*#__PURE__*/React.createElement(Column, {
+      key: theme.name,
+      span: 6
+    }, /*#__PURE__*/React.createElement(Stack, {
+      gap: 6
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "lg-display"
+    }, theme.name), /*#__PURE__*/React.createElement(Stack, {
+      gap: 1
+    }, Object.entries(theme.colors).map(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        name = _ref6[0],
+        value = _ref6[1];
+      return /*#__PURE__*/React.createElement(ContrastRatioSwatch, {
+        key: name,
+        name: name,
+        value: value,
+        theme: theme
+      });
+    }))));
+  })));
+};
+var ContrastRatioSwatch = function ContrastRatioSwatch(_ref7) {
+  var name = _ref7.name,
+    _value = _ref7.value,
+    theme = _ref7.theme;
+  var _useState = useState(_value),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var debouncedSetValue = useMemo(function () {
+    return debounce(setValue, 500);
+  }, []);
+  var numerator = contrastRatio(value, theme.colors.mono0);
+  return /*#__PURE__*/React.createElement(Stack, {
+    key: value,
+    gap: 1,
+    flexDirection: "row",
+    flex: 1,
+    bg: theme.colors.mono0,
+    color: value,
+    alignItems: "center",
+    justifyContent: "space-between",
+    px: 2,
+    py: 1,
+    borderRadius: 5
+  }, /*#__PURE__*/React.createElement(Stack, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 1
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    value: value,
+    onChange: function onChange(e) {
+      debouncedSetValue(e.target.value);
+      navigator.clipboard.writeText(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Clickable, {
+    onClick: function onClick() {
+      setValue(_value);
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    key: value,
+    variant: "lg-display"
+  }, name, " = ", numerator, ":1"))), /*#__PURE__*/React.createElement(Stack, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 0.5
+  }, numerator > 4.5 ? /*#__PURE__*/React.createElement(CheckmarkFillIcon, {
+    fill: "green100",
+    bg: "mono0",
+    style: {
+      borderRadius: "50%"
+    }
+  }) : /*#__PURE__*/React.createElement(CloseFillIcon, {
+    fill: "red100",
+    bg: "mono0",
+    style: {
+      borderRadius: "50%"
+    }
+  }), numerator > 3 ? /*#__PURE__*/React.createElement(CheckmarkFillIcon, {
+    fill: "green100",
+    bg: "mono0",
+    style: {
+      borderRadius: "50%"
+    }
+  }) : /*#__PURE__*/React.createElement(CloseFillIcon, {
+    fill: "red100",
+    bg: "mono0",
+    style: {
+      borderRadius: "50%"
+    }
+  })));
+};
+ContrastRatioSwatch.displayName = "ContrastRatioSwatch";
+//# sourceMappingURL=Themes.story.js.map