@frontify/fondue-components 1.3.2 → 1.3.3

package/dist/fondue-components.js

@@ -1,4 +1,4 @@
-import "./fondue-components2.js";
+/* empty css                   */
 import { Button as e } from "./fondue-components3.js";
 import { Checkbox as m } from "./fondue-components4.js";
 import { Dialog as f } from "./fondue-components5.js";

package/dist/fondue-components10.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-toggle-group";
 import { forwardRef as m } from "react";
-import { useControllableState as S } from "./fondue-components23.js";
-import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components24.js";
+import { useControllableState as S } from "./fondue-components22.js";
+import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components23.js";
 const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
   const [p, C] = S({
     prop: o,

package/dist/fondue-components11.js

@@ -1,53 +1,76 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { IconCheckMark as p, IconExclamationMarkTriangle as u } from "@frontify/fondue-icons";
-import { forwardRef as a } from "react";
-import { cn as i } from "./fondue-components14.js";
-import { rootStyles as w, loadingStatusStyles as S, inputStyles as F, slotStyles as N } from "./fondue-components25.js";
-const s = ({
-  children: l,
-  className: r,
-  status: t = "neutral",
-  "data-test-id": e = "fondue-text-input",
-  ...m
-}, x) => /* @__PURE__ */ f("div", { className: i(w, r), "data-status": t, "data-test-id": e, children: [
-  t === "loading" ? /* @__PURE__ */ o("div", { className: S, "data-test-id": `${e}-loader` }) : null,
-  /* @__PURE__ */ o("input", { type: "text", ...m, ref: x, className: F, "aria-invalid": t === "error" }),
-  t === "success" ? /* @__PURE__ */ o(
-    p,
-    {
-      size: 16,
-      className: "tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3",
-      "data-test-id": `${e}-success-icon`
-    }
-  ) : null,
-  t === "error" ? /* @__PURE__ */ o(
-    u,
-    {
-      size: 16,
-      className: "tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3",
-      "data-test-id": `${e}-error-icon`
-    }
-  ) : null,
-  l
-] });
-s.displayName = "TextField.Root";
-const n = ({ name: l, className: r, ...t }, e) => /* @__PURE__ */ o(
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as R, IconExclamationMarkTriangle as g } from "@frontify/fondue-icons";
+import { forwardRef as d, useRef as S } from "react";
+import { cn as n } from "./fondue-components13.js";
+import { rootStyles as N, loadingStatusStyles as h, inputStyles as y, slotStyles as T } from "./fondue-components24.js";
+const m = ({
+  children: s,
+  className: i,
+  status: e = "neutral",
+  "data-test-id": o = "fondue-text-input",
+  ...t
+}, u) => {
+  const c = S(!1);
+  return /* @__PURE__ */ F("div", { className: n(N, i), "data-status": e, "data-test-id": o, children: [
+    e === "loading" ? /* @__PURE__ */ r("div", { className: h, "data-test-id": `${o}-loader` }) : null,
+    /* @__PURE__ */ r(
+      "input",
+      {
+        onMouseDown: (a) => {
+          c.current = !0, a.currentTarget.dataset.showFocusRing = "false";
+        },
+        type: "text",
+        ...t,
+        onFocus: (a) => {
+          var l;
+          c.current || (a.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, a);
+        },
+        onBlur: (a) => {
+          var l;
+          a.target.dataset.showFocusRing = "false", c.current = !1, (l = t.onBlur) == null || l.call(t, a);
+        },
+        ref: u,
+        className: y,
+        "aria-invalid": e === "error"
+      }
+    ),
+    e === "success" ? /* @__PURE__ */ r(
+      R,
+      {
+        size: 16,
+        className: "tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3",
+        "data-test-id": `${o}-success-icon`
+      }
+    ) : null,
+    e === "error" ? /* @__PURE__ */ r(
+      g,
+      {
+        size: 16,
+        className: "tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3",
+        "data-test-id": `${o}-error-icon`
+      }
+    ) : null,
+    s
+  ] });
+};
+m.displayName = "TextField.Root";
+const f = ({ name: s, className: i, ...e }, o) => /* @__PURE__ */ r(
   "div",
   {
     "data-slot": !0,
-    "data-name": l,
-    ...t,
-    ref: e,
-    className: i(N, r)
+    "data-name": s,
+    ...e,
+    ref: o,
+    className: n(T, i)
   }
 );
-n.displayName = "TextField.Slot";
-const d = a(s), y = a(n), c = d;
-c.Root = d;
-c.Slot = y;
+f.displayName = "TextField.Slot";
+const x = d(m), k = d(f), w = x;
+w.Root = x;
+w.Slot = k;
 export {
-  s as TextFieldRoot,
-  n as TextFieldSlot,
-  c as TextInput
+  m as TextFieldRoot,
+  f as TextFieldSlot,
+  w as TextInput
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    type SyntheticEvent,\n    forwardRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { inputStyles, loadingStatusStyles, rootStyles, slotStyles } from './styles/textInputStyles';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    return (\n        <div className={cn(rootStyles, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={loadingStatusStyles} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n\n            <input type=\"text\" {...inputProps} ref={ref} className={inputStyles} aria-invalid={status === 'error'} />\n\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className=\"tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3\"\n                    data-test-id={`${dataTestId}-success-icon`}\n                />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className=\"tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3\"\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(slotStyles, className)}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","inputProps","ref","jsxs","cn","rootStyles","loadingStatusStyles","jsx","inputStyles","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","slotStyles","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA0GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,GAAYP,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GACzE,UAAA;AAAA,EAAWD,MAAA,8BACP,OAAI,EAAA,WAAWO,GAAqB,gBAAc,GAAGN,CAAU,UAAA,CAAW,IAC3E;AAAA,EAEJ,gBAAAO,EAAC,SAAM,EAAA,MAAK,QAAQ,GAAGN,GAAY,KAAAC,GAAU,WAAWM,GAAa,gBAAcT,MAAW,QAAS,CAAA;AAAA,EAEtGA,MAAW,YACR,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,MAAM;AAAA,MACN,WAAU;AAAA,MACV,gBAAc,GAAGT,CAAU;AAAA,IAAA;AAAA,EAAA,IAE/B;AAAA,EAEHD,MAAW,UACR,gBAAAQ;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,MAAM;AAAA,MACN,WAAU;AAAA,MACV,gBAAc,GAAGV,CAAU;AAAA,IAAA;AAAA,EAAA,IAE/B;AAAA,EAEHH;AACL,EAAA,CAAA;AAGRD,EAAc,cAAc;AAQf,MAAAe,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAd,GAAW,GAAGe,KACtBC,MAGI,gBAAAP;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWK;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWV,EAAGW,GAAYjB,CAAS;AAAA,EAAA;AAAA;AAK/Ca,EAAc,cAAc;AAE5B,MAAMK,IAA4BC,EAA6CrB,CAAa,GACtFsB,IAA4BD,EAA+CN,CAAa,GAEjFQ,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { inputStyles, loadingStatusStyles, rootStyles, slotStyles } from './styles/textInputStyles';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(rootStyles, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={loadingStatusStyles} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\n                {...inputProps}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    inputProps.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    inputProps.onBlur?.(blurEvent);\n                }}\n                ref={ref}\n                className={inputStyles}\n                aria-invalid={status === 'error'}\n            />\n\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className=\"tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3\"\n                    data-test-id={`${dataTestId}-success-icon`}\n                />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className=\"tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3\"\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(slotStyles, className)}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","inputProps","ref","wasClicked","useRef","jsxs","cn","rootStyles","loadingStatusStyles","jsx","mouseEvent","focusEvent","_a","blurEvent","inputStyles","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","slotStyles","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA2GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,GAAYT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GACzE,UAAA;AAAA,IAAWD,MAAA,8BACP,OAAI,EAAA,WAAWS,GAAqB,gBAAc,GAAGR,CAAU,UAAA,CAAW,IAC3E;AAAA,IACJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAP,EAAW,UAAU,IACVO,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGT;AAAA,QACJ,SAAS,CAACU,MAAe;;AACjB,UAACR,EAAW,YACDQ,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAX,EAAW,YAAX,QAAAW,EAAA,KAAAX,GAAqBU;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCV,EAAW,UAAU,KACrBS,IAAAX,EAAW,WAAX,QAAAW,EAAA,KAAAX,GAAoBY;AAAA,QACxB;AAAA,QACA,KAAAX;AAAA,QACA,WAAWY;AAAA,QACX,gBAAcf,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACR,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,gBAAc,GAAGf,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHD,MAAW,UACR,gBAAAU;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,gBAAc,GAAGhB,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EACL,EAAA,CAAA;AAER;AACAD,EAAc,cAAc;AAQf,MAAAqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,KACtBC,MAGI,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWS;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWd,EAAGe,GAAYvB,CAAS;AAAA,EAAA;AAAA;AAK/CmB,EAAc,cAAc;AAE5B,MAAMK,IAA4BC,EAA6C3B,CAAa,GACtF4B,IAA4BD,EAA+CN,CAAa,GAEjFQ,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components12.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import { forwardRef as l } from "react";
-import { cn as T } from "./fondue-components14.js";
-import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components26.js";
+import { cn as T } from "./fondue-components13.js";
+import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components25.js";
 const a = ({ children: i, enterDelay: e = 700 }) => /* @__PURE__ */ t(o.Provider, { children: /* @__PURE__ */ t(o.Root, { delayDuration: e, children: i }) });
 a.displayName = "Tooltip.Root";
 const d = ({ children: i, "data-test-id": e = "fondue-tooltip-content" }, r) => /* @__PURE__ */ t(o.Trigger, { "data-test-id": e, asChild: !0, ref: r, children: i });

package/dist/fondue-components13.js

@@ -1,11 +1,15 @@
-import { cn as t } from "./fondue-components14.js";
-const i = "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none", n = "focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none";
-t([i, "tw-ring-inset"]);
-t([n, "tw-ring-inset"]);
-const o = "focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue";
+import { extendTailwindMerge as e } from "./fondue-components27.js";
+import { tv as o } from "./fondue-components28.js";
+const r = e({
+  prefix: "tw-",
+  extend: {
+    classGroups: {
+      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
+    }
+  }
+}), m = (...t) => r(...t), x = (t) => o(t);
 export {
-  o as FOCUS_OUTLINE,
-  i as FOCUS_STYLE,
-  n as FOCUS_VISIBLE_STYLE
+  m as cn,
+  x as sv
 };
 //# sourceMappingURL=fondue-components13.js.map

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cn } from './styleUtilities';\n\nexport const FOCUS_STYLE = 'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_STYLE_NO_OFFSET = 'tw-ring-4 tw-ring-blue dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_VISIBLE_STYLE =\n    'focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none';\nexport const FOCUS_STYLE_INSET = cn([FOCUS_STYLE, 'tw-ring-inset']);\nexport const FOCUS_VISIBLE_STYLE_INSET = cn([FOCUS_VISIBLE_STYLE, 'tw-ring-inset']);\nexport const FOCUS_WITHIN_STYLE =\n    'focus-within:tw-ring-4 focus-within:tw-ring-blue focus-within:tw-ring-offset-2 focus-within:dark:tw-ring-offset-black focus-within:tw-outline-none';\nexport const FOCUS_OUTLINE = 'focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue';\n"],"names":["FOCUS_STYLE","FOCUS_VISIBLE_STYLE","cn","FOCUS_OUTLINE"],"mappings":";AAIO,MAAMA,IAAc,qFAEdC,IACT;AAC6BC,EAAG,CAACF,GAAa,eAAe,CAAC;AACzBE,EAAG,CAACD,GAAqB,eAAe,CAAC;AAG3E,MAAME,IAAgB;"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n    prefix: 'tw-',\n    extend: {\n        classGroups: {\n            'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n        },\n    },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n    return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n    return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}

package/dist/fondue-components14.js

@@ -1,15 +1,158 @@
-import { extendTailwindMerge as e } from "./fondue-components27.js";
-import { tv as o } from "./fondue-components28.js";
-const r = e({
-  prefix: "tw-",
-  extend: {
-    classGroups: {
-      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
+import { FOCUS_OUTLINE as e } from "./fondue-components26.js";
+import { sv as t } from "./fondue-components13.js";
+const r = t({
+  base: `tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${e}`,
+  variants: {
+    disabled: {
+      true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
+    },
+    rounding: {
+      medium: "tw-rounded",
+      full: "tw-rounded-full"
+    },
+    size: {
+      small: "tw-h-6 tw-text-body-small",
+      medium: "tw-h-9 tw-text-body-medium",
+      large: "tw-h-12 tw-text-body-large"
+    },
+    aspect: {
+      square: "tw-aspect-square tw-px-0",
+      default: ""
+    },
+    hugWidth: {
+      false: "tw-w-full"
+    },
+    emphasis: {
+      default: "",
+      weak: "",
+      strong: ""
+    },
+    style: {
+      default: "",
+      positive: "",
+      negative: "",
+      danger: "",
+      loud: ""
     }
+  },
+  compoundVariants: [
+    {
+      disabled: !1,
+      style: "default",
+      emphasis: "default",
+      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "default",
+      emphasis: "weak",
+      class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "default",
+      emphasis: "strong",
+      class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "positive",
+      emphasis: "default",
+      class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "positive",
+      emphasis: "weak",
+      class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "positive",
+      emphasis: "strong",
+      class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "negative",
+      emphasis: "default",
+      class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "negative",
+      emphasis: "weak",
+      class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "negative",
+      emphasis: "strong",
+      class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "danger",
+      emphasis: "default",
+      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "danger",
+      emphasis: "weak",
+      class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "danger",
+      emphasis: "strong",
+      class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
+    },
+    {
+      disabled: !1,
+      style: "loud",
+      emphasis: "default",
+      class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
+    },
+    {
+      disabled: !1,
+      style: "loud",
+      emphasis: "weak",
+      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
+    },
+    {
+      disabled: !1,
+      style: "loud",
+      emphasis: "strong",
+      class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
+    },
+    {
+      aspect: "default",
+      size: "small",
+      class: "tw-px-2"
+    },
+    {
+      aspect: "default",
+      size: "medium",
+      class: "tw-px-4"
+    },
+    {
+      aspect: "default",
+      size: "large",
+      class: "tw-px-6"
+    }
+  ],
+  defaultVariants: {
+    style: "default",
+    emphasis: "strong",
+    size: "medium",
+    rounding: "medium",
+    hugWidth: !0,
+    aspect: "default",
+    disabled: !1
   }
-}), m = (...t) => r(...t), x = (t) => o(t);
+});
 export {
-  m as cn,
-  x as sv
+  r as buttonStyles
 };
 //# sourceMappingURL=fondue-components14.js.map

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n    prefix: 'tw-',\n    extend: {\n        classGroups: {\n            'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n        },\n    },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n    return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n    return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background tw-border-button-strong-border ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background tw-border-button-positive-border ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background tw-border-button-negative-border ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background tw-border-button-danger-border ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-bg-box-selected tw-border-button-border ' +\n                'hover:tw-bg-box-selected-hover ' +\n                'active:tw-bg-box-selected-pressed ',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        style: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":"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"}

package/dist/fondue-components15.js

@@ -1,26 +1,6 @@
-import { sv as e } from "./fondue-components14.js";
+import { sv as e } from "./fondue-components13.js";
 const s = e({
-  base: "tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium",
   variants: {
-    disabled: {
-      true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
-    },
-    rounding: {
-      medium: "tw-rounded",
-      full: "tw-rounded-full"
-    },
-    size: {
-      small: "tw-h-6 tw-text-body-small",
-      medium: "tw-h-9 tw-text-body-medium",
-      large: "tw-h-12 tw-text-body-large"
-    },
-    aspect: {
-      square: "tw-aspect-square tw-px-0",
-      default: ""
-    },
-    hugWidth: {
-      false: "tw-w-full"
-    },
     emphasis: {
       default: "",
       weak: "",
@@ -32,6 +12,9 @@ const s = e({
       negative: "",
       danger: "",
       loud: ""
+    },
+    disabled: {
+      true: "tw-text-box-disabled-inverse"
     }
   },
   compoundVariants: [
@@ -39,119 +22,100 @@ const s = e({
       disabled: !1,
       style: "default",
       emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "default",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "default",
       emphasis: "strong",
-      class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
+      class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "positive",
       emphasis: "default",
-      class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
+      class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "positive",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "positive",
       emphasis: "strong",
-      class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "negative",
       emphasis: "default",
-      class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "negative",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "negative",
       emphasis: "strong",
-      class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
+      class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "danger",
       emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "danger",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "danger",
       emphasis: "strong",
-      class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
+      class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "loud",
       emphasis: "default",
-      class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "loud",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
     },
     {
       disabled: !1,
       style: "loud",
       emphasis: "strong",
-      class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
-    },
-    {
-      aspect: "default",
-      size: "small",
-      class: "tw-px-2"
-    },
-    {
-      aspect: "default",
-      size: "medium",
-      class: "tw-px-4"
-    },
-    {
-      aspect: "default",
-      size: "large",
-      class: "tw-px-6"
+      class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
     }
   ],
   defaultVariants: {
-    style: "default",
     emphasis: "strong",
-    size: "medium",
-    rounding: "medium",
-    hugWidth: !0,
-    aspect: "default",
+    style: "default",
     disabled: !1
   }
 });
 export {
-  s as buttonStyles
+  s as iconStyles
 };
 //# sourceMappingURL=fondue-components15.js.map