@ttoss/theme 1.7.18 → 1.7.20

package/dist/esm/chunk-WYJOWQUP.js

@@ -1,927 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
-    exports: {}
-  }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-
-// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js
-var require_loading = __commonJS({
-  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js"(exports) {
-    "use strict";
-
-    var data = {
-      "width": 24,
-      "height": 24,
-      "body": '<path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".5"/><path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate"/></path>'
-    };
-    exports.__esModule = true;
-    exports.default = data;
-  }
-});
-
-// ../../node_modules/.pnpm/@iconify+icons-mdi@1.2.48/node_modules/@iconify/icons-mdi/success-circle.js
-var require_success_circle = __commonJS({
-  "../../node_modules/.pnpm/@iconify+icons-mdi@1.2.48/node_modules/@iconify/icons-mdi/success-circle.js"(exports) {
-    "use strict";
-
-    var data = {
-      "width": 24,
-      "height": 24,
-      "body": '<path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/>'
-    };
-    exports.__esModule = true;
-    exports.default = data;
-  }
-});
-
-// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js
-var require_three_dots_loading = __commonJS({
-  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js"(exports) {
-    "use strict";
-
-    var data = {
-      "width": 24,
-      "height": 24,
-      "body": '<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle>'
-    };
-    exports.__esModule = true;
-    exports.default = data;
-  }
-});
-
-// src/themes/Bruttal/BruttalIcons.ts
-var import_loading = __toESM(require_loading(), 1);
-var import_success_circle = __toESM(require_success_circle(), 1);
-var import_three_dots_loading = __toESM(require_three_dots_loading(), 1);
-import { addIcon } from "@ttoss/react-icons";
-import addFilledIcon from "@iconify/icons-carbon/add-filled.js";
-import arrowRightIcon from "@iconify/icons-carbon/arrow-right.js";
-import arrowUpRightIcon from "@iconify/icons-carbon/arrow-up-right.js";
-import attachmentIcon from "@iconify/icons-carbon/attachment.js";
-import calendarIcon from "@iconify/icons-carbon/calendar.js";
-import caretDownIcon from "@iconify/icons-carbon/caret-down.js";
-import caretUpIcon from "@iconify/icons-carbon/caret-up.js";
-import checkMarkIcon from "@iconify/icons-carbon/checkmark.js";
-import checkMarkOutlineIcon from "@iconify/icons-carbon/checkmark-outline.js";
-import checkboxCheckedFilled from "@iconify/icons-carbon/checkbox-checked-filled.js";
-import checkboxIcon from "@iconify/icons-carbon/checkbox.js";
-import checkboxIndeterminateFilledIcon from "@iconify/icons-carbon/checkbox-indeterminate-filled.js";
-import chevronDownIcon from "@iconify/icons-carbon/chevron-down.js";
-import chevronLeftIcon from "@iconify/icons-carbon/chevron-left.js";
-import chevronRightIcon from "@iconify/icons-carbon/chevron-right.js";
-import chevronUpIcon from "@iconify/icons-carbon/chevron-up.js";
-import closeFilledIcon from "@iconify/icons-carbon/close-filled.js";
-import closeIcon from "@iconify/icons-carbon/close.js";
-import copyIcon from "@iconify/icons-carbon/copy.js";
-import downloadIcon from "@iconify/icons-carbon/download.js";
-import editIcon from "@iconify/icons-carbon/edit.js";
-import emailIcon from "@iconify/icons-carbon/email.js";
-import errorFilledIcon from "@iconify/icons-carbon/error-filled.js";
-import informationFilledIcon from "@iconify/icons-carbon/information-filled.js";
-import languageIcon from "@iconify/icons-carbon/language.js";
-import menuIcon from "@iconify/icons-carbon/menu.js";
-import pasteIcon from "@iconify/icons-carbon/paste.js";
-import radioButtonCheckedIcon from "@iconify/icons-carbon/radio-button-checked.js";
-import radioButtonIcon from "@iconify/icons-carbon/radio-button.js";
-import renewIcon from "@iconify/icons-carbon/renew.js";
-import searchIcon from "@iconify/icons-carbon/search.js";
-import shareIcon from "@iconify/icons-carbon/share.js";
-import timeIcon from "@iconify/icons-carbon/time.js";
-import trashCanIcon from "@iconify/icons-carbon/trash-can.js";
-import uploadIcon from "@iconify/icons-carbon/upload.js";
-import userAvatarFilledAltIcon from "@iconify/icons-carbon/user-avatar-filled-alt.js";
-import viewFilledIcon from "@iconify/icons-carbon/view-filled.js";
-import viewOffFilledIcon from "@iconify/icons-carbon/view-off-filled.js";
-import warningAltIcon from "@iconify/icons-carbon/warning-alt.js";
-import warningFilledIcon from "@iconify/icons-carbon/warning-filled.js";
-var replicateIcon = {
-  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M42 15V42H15V15H42ZM42 12H15C14.2044 12 13.4413 12.3161 12.8787 12.8787C12.3161 13.4413 12 14.2044 12 15V42C12 42.7956 12.3161 43.5587 12.8787 44.1213C13.4413 44.6839 14.2044 45 15 45H42C42.7956 45 43.5587 44.6839 44.1213 44.1213C44.6839 43.5587 45 42.7956 45 42V15C45 14.2044 44.6839 13.4413 44.1213 12.8787C43.5587 12.3161 42.7956 12 42 12Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.76389C3 4.23744 4.26071 3 5.81588 3H29V5.57963H5.81588C5.71221 5.57963 5.62816 5.66213 5.62816 5.76389V28.994C5.62816 29.0957 5.71221 29.1782 5.81588 29.1782H22.2607L18.7784 25.7602L20.6368 23.9361L27.2916 30.4681L20.6368 37L18.7784 35.1759L22.2607 31.7579H5.81588C4.26071 31.7579 3 30.5204 3 28.994V5.76389Z" fill="currentColor"/>
-  </svg>`,
-  width: 48,
-  height: 48
-};
-var subtractIcon = {
-  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 26H34V22H14V26ZM24 44C21.2333 44 18.6333 43.4747 16.2 42.424C13.7667 41.3733 11.65 39.9487 9.85 38.15C8.05 36.35 6.62533 34.2333 5.576 31.8C4.52667 29.3667 4.00133 26.7667 4 24C4 21.2333 4.52533 18.6333 5.576 16.2C6.62667 13.7667 8.05133 11.65 9.85 9.85C11.65 8.05 13.7667 6.62533 16.2 5.576C18.6333 4.52667 21.2333 4.00133 24 4C26.7667 4 29.3667 4.52533 31.8 5.576C34.2333 6.62667 36.35 8.05133 38.15 9.85C39.95 11.65 41.3753 13.7667 42.426 16.2C43.4767 18.6333 44.0013 21.2333 44 24C44 26.7667 43.4747 29.3667 42.424 31.8C41.3733 34.2333 39.9487 36.35 38.15 38.15C36.35 39.95 34.2333 41.3753 31.8 42.426C29.3667 43.4767 26.7667 44.0013 24 44Z" fill="black"/>
-  </svg>
-  `,
-  width: 48,
-  height: 48
-};
-var BrutalIcons = {
-  add: addFilledIcon,
-  "arrow-right": arrowRightIcon,
-  attachment: attachmentIcon,
-  avatar: userAvatarFilledAltIcon,
-  "caret-down": caretDownIcon,
-  "caret-up": caretUpIcon,
-  calendar: calendarIcon,
-  "checkbox-checked": checkboxCheckedFilled,
-  "checkbox-indeterminate": checkboxIndeterminateFilledIcon,
-  "checkbox-unchecked": checkboxIcon,
-  check: checkMarkIcon,
-  "check-mark": checkMarkOutlineIcon,
-  close: closeIcon,
-  copy: copyIcon,
-  download: downloadIcon,
-  edit: editIcon,
-  email: emailIcon,
-  delete: trashCanIcon,
-  error: errorFilledIcon,
-  info: informationFilledIcon,
-  language: languageIcon,
-  loading: import_loading.default,
-  "menu-open": menuIcon,
-  "open-link": arrowUpRightIcon,
-  paste: pasteIcon,
-  "picker-down": chevronDownIcon,
-  "picker-up": chevronUpIcon,
-  "nav-left": chevronLeftIcon,
-  "nav-right": chevronRightIcon,
-  "radio-not-selected": radioButtonIcon,
-  "radio-selected": radioButtonCheckedIcon,
-  refresh: renewIcon,
-  replicate: replicateIcon,
-  search: searchIcon,
-  share: shareIcon,
-  subtract: subtractIcon,
-  "success-circle": import_success_circle.default,
-  "small-close": closeFilledIcon,
-  "three-dots-loading": import_three_dots_loading.default,
-  time: timeIcon,
-  upload: uploadIcon,
-  "view-off": viewOffFilledIcon,
-  "view-on": viewFilledIcon,
-  warning: warningFilledIcon,
-  "warning-alt": warningAltIcon
-};
-Object.entries(BrutalIcons).forEach(([key, icon]) => {
-  addIcon(key, icon);
-});
-
-// src/themes/Bruttal/BruttalFonts.ts
-var BruttalFonts = ["https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css?family=Work+Sans:wght@0,400;0,700;1,400;1,700&display=swap", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
-
-// src/helpers/geometricCalc.ts
-var SIZE_TYPE = "rem";
-var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
-  const result = initialValue * Math.pow(base, ratio);
-  return `${result.toFixed(2)}${sizeType}`;
-};
-var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
-  const result = initialValue / Math.pow(base, ratio);
-  return `${result.toFixed(2)}${sizeType}`;
-};
-
-// src/tokens/fontSizes.ts
-var SIZE_TYPE2 = "rem";
-var BASE = 1;
-var MULTIPLIER_FACTOR = 1.333;
-var fontSizes = {
-  "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
-  xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
-  sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
-  base: `${BASE}${SIZE_TYPE2}`,
-  lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
-  xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
-  "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
-  "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
-  "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
-  "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
-  "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
-};
-
-// src/tokens/fontWeights.ts
-var fontWeights = {
-  thin: 100,
-  extralight: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800
-};
-
-// src/tokens/letterSpacings.ts
-var letterSpacings = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  regular: "0em",
-  wide: "0.05em",
-  wider: "0.1em",
-  widest: "0.5em"
-};
-
-// src/tokens/lineHeights.ts
-var BASE2 = 100;
-var MULTIPLIER_FACTOR2 = 1.333;
-var SIZE_TYPE3 = "%";
-var lineHeights = {
-  "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
-  xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
-  sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
-  base: "normal",
-  lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
-  xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
-  "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
-  flat: "100%"
-};
-
-// src/tokens/space.ts
-var SIZE_TYPE4 = "rem";
-var MD = 0.5;
-var MULTIPLIER_FACTOR3 = 1.618;
-var space = {
-  none: 0,
-  "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
-  xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
-  sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
-  md: `${MD}${SIZE_TYPE4}`,
-  lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
-  xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
-  "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
-  "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
-  "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
-  "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
-  "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
-  "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
-};
-
-// src/tokens/zIndices.ts
-var zIndices = {
-  deep: -9999,
-  behind: -1,
-  auto: "auto",
-  base: 0,
-  docked: 10,
-  /**
-   * Sticky is a CSS property that can be applied to an element to make it
-   * "stick" or remain fixed in a specific position relative to the viewport
-   * as the user scrolls the page. When an element is set as sticky, it will
-   * initially behave like a normal element but once the user scrolls past a
-   * certain threshold, it will stick to the designated position.
-   */
-  sticky: 100,
-  /**
-   * An overlay is a graphical element used in user interfaces to cover or
-   * partially obscure the underlying content. It is typically a
-   * semi-transparent or opaque layer that is positioned above other elements
-   * on the screen. Overlays are commonly employed to provide visual effects,
-   * create modal or pop-up dialogs, highlight or focus user attention, or
-   * serve as a background for elements such as tooltips, modals, or dropdown
-   * menus. They are often used to add depth, dimension, and visual hierarchy
-   * to the interface by visually separating or layering content.
-   */
-  overlay: 1e3,
-  /**
-   * A modal is a user interface component that appears as a dialog or window
-   * overlay on top of the main content, temporarily interrupting the user's
-   * interaction flow. It is commonly used to display additional information,
-   * request user input, or confirm an action. Modals typically have a higher
-   * z-index value than other elements on the page to ensure they are visually
-   * prominent and receive the user's full attention. They often feature a
-   * close button or an overlay click outside the modal to dismiss them and
-   * return to the underlying content. Modals help to focus user attention and
-   * provide a context-specific interaction within a larger interface.
-   */
-  modal: 2e3,
-  /**
-   * A dropdown is a user interface component that presents a list of
-   * selectable options when triggered by a user action, such as clicking on a
-   * dropdown button or input field. When activated, a dropdown expands
-   * vertically to reveal a list of choices, allowing the user to select a
-   * single option. The selected option is then displayed in the closed state
-   * of the dropdown. Dropdowns are commonly used to conserve space on a page
-   * or provide a convenient way to choose from a predefined set of options.
-   * They can be found in various contexts, such as navigation menus, form
-   * inputs, or filter controls. Dropdowns enhance user interaction by
-   * providing a compact and organized selection mechanism within the interface.
-   */
-  dropdown: 3e3,
-  /**
-   * A popover is a user interface component that provides contextual
-   * information or options when triggered by a user action, such as hovering
-   * over an element or clicking a button. It typically appears as a small
-   * overlay near the triggering element, offering additional details, actions,
-   * or related content. Popovers are designed to be non-intrusive and provide
-   * concise information or quick actions without requiring the user to
-   * navigate to a different page or screen. They are often used to enhance the
-   * user's understanding or provide supplementary functionality within a
-   * specific context. Popovers are commonly positioned above other elements in
-   * the interface to ensure visibility and accessibility.
-   */
-  popover: 4e3,
-  /**
-   * A tooltip is a small, informative message or hint that appears when a user
-   * hovers over or interacts with an element, such as a button, link, or icon.
-   * It is typically displayed as a brief, contextual text or label that
-   * provides additional information or clarifies the purpose of the element.
-   * Tooltips are used to improve the user's understanding of interface
-   * elements and enhance usability. They are generally positioned near the
-   * associated element, often appearing as a small box or bubble that pops up
-   * temporarily and disappears when the user moves the cursor away from the
-   * element. Tooltips are designed to be unobtrusive and provide helpful
-   * guidance or supplementary details without requiring the user to take any
-   * additional actions.
-   */
-  tooltip: 5e3,
-  /**
-   * A toast is a brief, temporary notification or message that appears on the
-   *  screen to provide important information or alerts to the user. It
-   * typically appears as a small box or banner positioned in a non-intrusive
-   * area of the interface, such as the top or bottom of the screen. Toasts are
-   * used to communicate updates, notifications, or status messages that may
-   * require the user's attention but do not require immediate action. They are
-   *  designed to be unobtrusive and automatically disappear after a short
-   * period, often with a fade-out animation. Toasts are commonly used in web
-   * and mobile applications to provide timely feedback or inform the user
-   * about completed actions, errors, or system updates.
-   */
-  toast: 6e3
-};
-
-// src/themes/Bruttal/BruttalTheme.ts
-var coreFonts = {
-  main: '"Atkinson Hyperlegible", sans-serif',
-  contrast: '"Work Sans", sans-serif',
-  monospace: '"Inconsolata", sans-serif'
-};
-var brandColors = {
-  complimentary: "#f4f3f3",
-  main: "#292C2a",
-  darkNeutral: "#325C82",
-  accent: "#0469E3",
-  lightNeutral: "#F8F8F8"
-};
-var coreColors = {
-  ...brandColors,
-  gray100: "#f9f9f9",
-  gray200: "#dedede",
-  gray300: "#c4c4c4",
-  gray400: "#ababab",
-  gray500: "#929292",
-  gray600: "#7a7a7a",
-  gray700: "#626262",
-  gray800: "#4c4c4c",
-  gray900: "#323232",
-  black: "#000000",
-  red100: "#ffebeb",
-  red200: "#fdbfbf",
-  red300: "#f99595",
-  red400: "#f56c6c",
-  red500: "#ef4444",
-  red600: "#e42828",
-  red700: "#c62121",
-  white: "#ffffff",
-  amber600: "#d97706",
-  teal600: "#0d9488"
-};
-var coreBorders = {
-  none: "0px solid",
-  thin: "1px solid",
-  medium: "2px solid",
-  thick: "4px solid"
-};
-var coreRadii = {
-  sharp: "0px",
-  xs: "2px",
-  sm: "4px",
-  md: "6px",
-  lg: "8px",
-  xl: "12px",
-  "2xl": "16px",
-  "3xl": "24px",
-  circle: "9999px"
-};
-var BruttalTheme = {
-  /**
-   * Tokens
-   */
-  fontSizes,
-  fontWeights,
-  letterSpacings,
-  space,
-  lineHeights,
-  zIndices,
-  colors: {
-    background: coreColors.complimentary,
-    text: coreColors.black,
-    muted: coreColors.gray200,
-    onMuted: coreColors.gray600,
-    mutedOutline: coreColors.gray300,
-    danger: coreColors.red700,
-    onDanger: coreColors.white,
-    notice: coreColors.amber600,
-    onNotice: coreColors.white,
-    positive: coreColors.teal600,
-    onPositive: coreColors.white,
-    surface: coreColors.white,
-    contentHeader: coreColors.gray200,
-    onContentHeader: coreColors.black,
-    outline: coreColors.gray500,
-    primary: coreColors.main,
-    onPrimary: coreColors.white,
-    secondary: coreColors.gray100,
-    onSecondary: coreColors.black,
-    highlight: coreColors.darkNeutral,
-    onHighlight: coreColors.complimentary,
-    accent: coreColors.accent,
-    onAccent: coreColors.white,
-    neutral: coreColors.darkNeutral,
-    onNeutral: coreColors.lightNeutral,
-    underemphasize: coreColors.gray300
-  },
-  fonts: {
-    main: coreColors.main,
-    contrast: coreFonts.contrast,
-    body: coreFonts.main,
-    highlight: coreFonts.main,
-    caption: coreFonts.main
-  },
-  borders: {
-    default: coreBorders.thin,
-    secondary: coreBorders.medium,
-    muted: coreBorders.thin,
-    interaction: coreBorders.medium,
-    danger: coreBorders.medium,
-    highlight: coreBorders.medium
-  },
-  radii: {
-    informative: coreRadii.xs,
-    default: coreRadii.sm,
-    action: coreRadii.sm
-  },
-  /**
-   * Global styles
-   */
-  styles: {
-    root: {
-      fontFamily: "body",
-      fontWeight: "normal",
-      fontSize: "base",
-      zIndex: "base",
-      margin: 0,
-      padding: 0,
-      backgroundColor: "background",
-      /**
-       * HTML elements
-       */
-      table: {
-        borderCollapse: "collapse"
-      },
-      th: {
-        paddingX: "md",
-        paddingY: "md"
-      },
-      tr: {
-        borderBottom: "default"
-      },
-      td: {
-        paddingX: "xl",
-        paddingY: "md"
-      }
-    },
-    a: {
-      color: "text",
-      fontFamily: "body",
-      textDecorationLine: "underline",
-      lineHeight: "base",
-      "&.quiet:not(:hover)": {
-        textDecorationLine: "none"
-      },
-      ":visited": {
-        color: "highlight"
-      }
-    }
-  },
-  /**
-   * Components
-   */
-  badges: {
-    positive: {
-      color: "onPositive",
-      bg: "positive"
-    },
-    negative: {
-      color: "onDanger",
-      bg: "danger"
-    },
-    neutral: {
-      color: "onSecondary",
-      bg: "secondary",
-      border: "muted",
-      borderColor: "onMuted"
-    },
-    informative: {
-      color: "onNotice",
-      bg: "notice"
-    },
-    muted: {
-      color: "onMuted",
-      bg: "muted"
-    }
-  },
-  buttons: {
-    accent: {
-      backgroundColor: "accent",
-      color: "onAccent",
-      borderRadius: "action",
-      borderColor: "accent",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
-      }
-    },
-    primary: {
-      backgroundColor: "primary",
-      color: "onPrimary",
-      borderRadius: "action",
-      borderColor: "primary",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
-      },
-      ":active": {
-        backgroundColor: "primary",
-        color: "onPrimary",
-        borderColor: "outline"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
-      }
-    },
-    secondary: {
-      backgroundColor: "secondary",
-      color: "onSecondary",
-      borderRadius: "action",
-      border: "secondary",
-      borderColor: "onSecondary",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
-      }
-    },
-    destructive: {
-      color: "onDanger",
-      backgroundColor: "danger",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
-      }
-    },
-    closeButton: {
-      backgroundColor: "background",
-      color: "primary",
-      border: "default",
-      borderColor: "primary",
-      borderRadius: "action",
-      ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        color: "onMuted",
-        cursor: "not-allowed"
-      },
-      ":is(:focus-within, :hover):not(:disabled)": {
-        color: "onHighlight",
-        backgroundColor: "highlight",
-        borderColor: "highlight"
-      }
-    },
-    actionButton: {
-      default: {
-        backgroundColor: "secondary",
-        color: "onSecondary",
-        border: "default",
-        borderColor: "onSecondary",
-        transition: "all 0.2s",
-        ":is(:focus-within, :hover)": {
-          backgroundColor: "highlight",
-          borderColor: "highlight",
-          color: "onHighlight"
-        }
-      },
-      accent: {
-        backgroundColor: "accent",
-        color: "onAccent",
-        border: "none"
-      },
-      quiet: {
-        backgroundColor: "transparent",
-        color: "text",
-        border: "none",
-        borderColor: "transparent"
-      }
-    }
-  },
-  cards: {
-    primary: {
-      backgroundColor: "primary",
-      border: "1px solid black",
-      padding: [4, 5],
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "fit-content"
-    }
-  },
-  forms: {
-    label: {
-      color: "text",
-      '&:is([aria-disabled="true"])': {
-        color: "onMuted"
-      },
-      '& > span[aria-label="tooltip"]': {
-        fontSize: "sm",
-        marginLeft: "2xs"
-      },
-      '&:has(input[type="checkbox"])': {
-        fontSize: "base",
-        gap: "md"
-      },
-      '& > div:has(input[type="checkbox"]) > svg': {
-        marginRight: 0
-      },
-      '&:has(input[type="checkbox"]:disabled)': {
-        color: "onMuted"
-      },
-      '&:has(div > input[type="radio"])': {
-        alignItems: "center"
-      },
-      '&:has(div > input[type="radio"]:disabled)': {
-        color: "muted"
-      }
-    },
-    radio: {
-      color: "text",
-      fontFamily: "body",
-      fontSize: "lg",
-      "input:disabled ~ &": {
-        color: "muted"
-      },
-      'input[aria-invalid="true"] ~ &': {
-        color: "danger"
-      },
-      "input:focus ~ &": {
-        bg: "transparent"
-      },
-      "&:is(svg, svg + svg)": {
-        width: fontSizes.base,
-        height: fontSizes.base
-      }
-    },
-    checkbox: {
-      "input:focus ~ &": {
-        bg: "transparent"
-      },
-      "input:not(:checked) ~ &": {
-        color: "primary"
-      },
-      "input:disabled ~ &": {
-        color: "muted"
-      },
-      "input:disabled ~ & path": {
-        backgroundColor: "onMuted"
-      },
-      'input[aria-invalid="true"] ~ &': {
-        color: "danger"
-      },
-      "&:is(svg, svg + svg)": {
-        width: fontSizes.base,
-        height: fontSizes.base
-      }
-    },
-    input: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
-      backgroundColor: "surface",
-      fontSize: "base",
-      lineHeight: "base",
-      "::placeholder": {
-        color: "onMuted"
-      },
-      ":focus-within": {
-        outlineColor: "neutral"
-      },
-      ":disabled": {
-        backgroundColor: "muted",
-        color: "onMuted",
-        border: "muted",
-        borderColor: "onMuted"
-      },
-      '&[aria-invalid="true"]': {
-        borderColor: "danger"
-      },
-      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
-        color: "danger"
-      }
-    },
-    inputNumber: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
-      ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        color: "muted"
-      },
-      ":disabled ~ span > iconify-icon": {
-        color: "muted",
-        cursor: "default"
-      },
-      ":focus-within": {
-        outlineColor: "highlight"
-      },
-      ':not(:disabled, [aria-invalid="true"]):hover': {
-        borderColor: "highlight"
-      },
-      ':not(:disabled, [aria-invalid="true"]) ~ span:has(iconify-icon):hover': {
-        color: "highlight"
-      },
-      "& ~ span:has(iconify-icon)": {
-        fontSize: "base"
-      },
-      '&[aria-invalid="true"]': {
-        border: "danger",
-        borderColor: "danger",
-        color: "danger",
-        outlineColor: "danger"
-      },
-      '&[aria-invalid="true"] ~ span>iconify-icon': {
-        color: "danger"
-      }
-    },
-    select: {
-      color: "text",
-      backgroundColor: "surface",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
-      ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        color: "onMuted"
-      },
-      ":disabled ~ * > span:has(iconify-icon)": {
-        color: "onMuted"
-      },
-      '&[aria-invalid="true"]': {
-        border: "danger",
-        borderColor: "danger",
-        outlineColor: "danger"
-      },
-      '&[aria-invalid="true"] ~ * > span.error-icon': {
-        color: "danger"
-      }
-    },
-    textarea: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      backgroundColor: "surface",
-      borderRadius: "action",
-      ":focus-within": {
-        outlineColor: "primary"
-      },
-      ":disabled::placeholder": {
-        color: "onMuted"
-      },
-      ":disabled": {
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        border: "muted",
-        color: "onMuted"
-      },
-      '&[aria-invalid="true"]': {
-        borderColor: "danger",
-        outlineColor: "danger"
-      },
-      '&[aria-invalid="true"]+span>iconify-icon': {
-        color: "danger",
-        fontSize: "base"
-      }
-    }
-  },
-  text: {
-    default: {
-      color: "text",
-      fontFamily: "body"
-    },
-    title: {
-      fontFamily: "heading",
-      fontSize: 4,
-      lineSpace: "3.5"
-    },
-    help: {
-      color: "text",
-      '&[aria-disabled="true"]': {
-        color: "onMuted"
-      },
-      negative: {
-        color: "danger",
-        '&[aria-disabled="true"]': {
-          color: "onMuted"
-        }
-      }
-    },
-    headline: {
-      fontFamily: "contrast",
-      fontWeight: "bold",
-      lineHeight: "flat",
-      fontSize: "5xl",
-      letterSpacing: "regular"
-    },
-    subheadline: {
-      fontFamily: "main",
-      fontWeight: "bold",
-      lineHeight: "base",
-      fontSize: "xl",
-      letterSpacing: "regular"
-    },
-    h1: {
-      fontFamily: "contrast",
-      fontWeight: "extrabold",
-      lineHeight: "base",
-      fontSize: "3xl",
-      letterSpacing: "regular"
-    },
-    h2: {
-      fontFamily: "contrast",
-      fontWeight: "bold",
-      lineHeight: "base",
-      fontSize: "2xl",
-      letterSpacing: "regular"
-    },
-    h3: {
-      fontFamily: "contrast",
-      fontWeight: "bold",
-      lineHeight: "base",
-      fontSize: "xl",
-      letterSpacing: "regular"
-    },
-    h4: {
-      fontFamily: "contrast",
-      fontWeight: "semibold",
-      lineHeight: "base",
-      fontSize: "lg",
-      letterSpacing: "regular"
-    },
-    h5: {
-      fontFamily: "contrast",
-      fontWeight: "semibold",
-      lineHeight: "base",
-      fontSize: "base",
-      letterSpacing: "regular"
-    }
-  }
-};
-export { BrutalIcons, BruttalFonts, BruttalTheme };