@frontify/fondue 12.0.0-beta.127 → 12.0.0-beta.128

package/dist/components/DatePicker/DatePickerTrigger.es.js

@@ -1,5 +1,5 @@
-import { merge as c } from "../../utilities/merge.es.js";
-import { Validation as s } from "../../utilities/validation.es.js";
+import { merge as s } from "../../utilities/merge.es.js";
+import { Validation as e } from "../../utilities/validation.es.js";
 import t, { forwardRef as h } from "react";
 import S from "../../foundation/Icon/Generated/IconCaretUp.es.js";
 import { IconSize as l } from "../../foundation/Icon/IconSize.es.js";
@@ -7,8 +7,8 @@ import z from "../../foundation/Icon/Generated/IconCaretDown.es.js";
 import { TextInput as F } from "../TextInput/TextInput.es.js";
 import R from "../../foundation/Icon/Generated/IconCalendar.es.js";
 const I = h(
-  ({ value: r, onClick: e, isClearable: o, placeHolder: m, isCalendarOpen: f, validation: a = s.Default, onDateChanged: i }, d) => {
-    const w = a === s.Error, g = "tw-right-14", p = "tw-right-8", E = "tw-right-4", n = ((u) => {
+  ({ value: o, onClick: a, isClearable: i, placeHolder: m, isCalendarOpen: f, validation: r = e.Default, onDateChanged: n }, d) => {
+    const w = r === e.Error || r === e.Warning, g = "tw-right-14", p = "tw-right-8", E = "tw-right-4", c = ((u) => {
       switch (u) {
         case 0:
           return E;
@@ -19,25 +19,25 @@ const I = h(
       }
       return "";
     })(
-      (r && o ? 1 : 0) + (w ? 1 : 0)
+      (o && i ? 1 : 0) + (w ? 1 : 0)
     );
     return /* @__PURE__ */ t.createElement("div", { ref: d, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: c([
+        className: s([
           "tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]",
-          n
+          c
         ])
       },
       f ? /* @__PURE__ */ t.createElement(S, { size: l.Size20 }) : /* @__PURE__ */ t.createElement(z, { size: l.Size20 })
     ), /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: c([
+        className: s([
           "tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10",
-          n
+          c
         ]),
-        onClick: e,
+        onClick: a,
         "data-test-id": "open-close-click-zone"
       }
     ), /* @__PURE__ */ t.createElement(
@@ -45,13 +45,13 @@ const I = h(
       {
         decorator: /* @__PURE__ */ t.createElement(R, null),
         placeholder: m,
-        value: r,
-        clearable: o,
-        onEnterPressed: e,
+        value: o,
+        clearable: i,
+        onEnterPressed: a,
         onClear: () => {
-          i && i(null);
+          n && n(null);
         },
-        validation: a
+        validation: r
       }
     ));
   }

package/dist/components/DatePicker/DatePickerTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isErrorValidationState = validation === Validation.Error;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACK,UAAAC,IAAyBJ,MAAeC,EAAW,OAEnDI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAyB,IAAI;AAAA,IAGvC;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}
+{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isWarningOrErrorValidationState = validation === Validation.Error || validation === Validation.Warning;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isWarningOrErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACD,UAAMC,IAAkCJ,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAkC,IAAI;AAAA,IAGhD;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}

package/dist/components/Textarea/Textarea.es.js

@@ -1,76 +1,80 @@
-import { useMemoizedId as T } from "../../hooks/useMemoizedId.es.js";
-import { useFocusRing as h } from "@react-aria/focus";
-import { mergeProps as z } from "@react-aria/utils";
-import { FOCUS_STYLE as C } from "../../utilities/focusStyle.es.js";
-import { merge as v } from "../../utilities/merge.es.js";
-import { validationClassMap as F, Validation as a } from "../../utilities/validation.es.js";
-import t from "react";
-import L from "react-textarea-autosize";
-import S from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import { LoadingCircle as I, LoadingCircleSize as M } from "../LoadingCircle/LoadingCircle.es.js";
-const P = ({
-  id: c,
-  value: p,
+import { useMemoizedId as h } from "../../hooks/useMemoizedId.es.js";
+import { useFocusRing as z } from "@react-aria/focus";
+import { mergeProps as C } from "@react-aria/utils";
+import { FOCUS_STYLE as F } from "../../utilities/focusStyle.es.js";
+import { merge as c } from "../../utilities/merge.es.js";
+import { validationClassMap as L, Validation as e } from "../../utilities/validation.es.js";
+import r from "react";
+import S from "react-textarea-autosize";
+import I from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
+import { LoadingCircle as M, LoadingCircleSize as P } from "../LoadingCircle/LoadingCircle.es.js";
+const v = ({
+  id: p,
+  value: u,
   required: d = !1,
   decorator: o,
-  placeholder: u,
+  placeholder: f,
   disabled: l = !1,
   onInput: s,
-  onBlur: i,
-  validation: r = a.Default,
-  minRows: m,
-  maxRows: f,
+  onBlur: m,
+  validation: t = e.Default,
+  minRows: i,
+  maxRows: b,
   autosize: n = !1,
-  resizeable: b = !0,
+  resizeable: x = !0,
   onFocus: w,
-  selectable: x = !1
+  selectable: g = !1
 }) => {
-  const g = n ? L : "textarea", { isFocusVisible: E, focusProps: k } = h({ isTextInput: !0 }), N = { maxRows: f, minRows: m };
-  return /* @__PURE__ */ t.createElement("div", { className: "tw-relative" }, o && /* @__PURE__ */ t.createElement(
+  const E = n ? S : "textarea", { isFocusVisible: k, focusProps: N } = z({ isTextInput: !0 }), T = { maxRows: b, minRows: i };
+  return /* @__PURE__ */ r.createElement("div", { className: "tw-relative" }, o && /* @__PURE__ */ r.createElement(
     "div",
     {
       className: "tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80",
       "data-test-id": "decorator"
     },
     o
-  ), /* @__PURE__ */ t.createElement(
-    g,
+  ), /* @__PURE__ */ r.createElement(
+    E,
     {
-      ...z(k, {
-        onBlur: (e) => i && i(e.target.value),
-        onInput: (e) => s && s(e.target.value)
+      ...C(N, {
+        onBlur: (a) => m && m(a.target.value),
+        onInput: (a) => s && s(a.target.value)
       }),
-      ...n ? N : { rows: m },
-      id: T(c),
-      value: p,
-      placeholder: u,
+      ...n ? T : { rows: i },
+      id: h(p),
+      value: u,
+      placeholder: f,
       required: d,
-      className: v([
+      className: c([
         "tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60",
         !!o && "tw-pl-7 ",
         l ? "tw-border-black-5 tw-bg-black-5 tw-text-black-40" : "tw-text-black tw-border-black-20 hover:tw-border-black-90",
-        E && C,
-        F[r],
-        !b && "tw-resize-none",
-        r === a.Error && "tw-pr-8"
+        k && F,
+        L[t],
+        !x && "tw-resize-none",
+        t === e.Error && "tw-pr-8"
       ]),
       disabled: l,
-      onFocus: (e) => {
-        x && e.target.select(), w && w(e);
+      onFocus: (a) => {
+        g && a.target.select(), w && w(a);
       },
       "data-test-id": "textarea"
     }
-  ), r === a.Loading && /* @__PURE__ */ t.createElement("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10" }, /* @__PURE__ */ t.createElement(I, { size: M.ExtraSmall })), r === a.Error && /* @__PURE__ */ t.createElement(
+  ), t === e.Loading && /* @__PURE__ */ r.createElement("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10" }, /* @__PURE__ */ r.createElement(M, { size: P.ExtraSmall })), (t === e.Error || t === e.Warning) && /* @__PURE__ */ r.createElement(
     "span",
     {
-      className: "tw-absolute tw-top-[0.6rem] tw-right-[0.6rem] tw-text-red-60",
+      className: c([
+        "tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]",
+        t === e.Error && "tw-text-text-negative",
+        t === e.Warning && "tw-text-text-warning"
+      ]),
       "data-test-id": "error-state-exclamation-mark-icon"
     },
-    /* @__PURE__ */ t.createElement(S, null)
+    /* @__PURE__ */ r.createElement(I, null)
   ));
 };
-P.displayName = "FondueTextarea";
+v.displayName = "FondueTextarea";
 export {
-  P as Textarea
+  v as Textarea
 };
 //# sourceMappingURL=Textarea.es.js.map

package/dist/components/Textarea/Textarea.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { FC, FocusEvent, FormEvent, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n};\n\nexport const Textarea: FC<TextareaProps> = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n}) => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                data-test-id=\"textarea\"\n            />\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {validation === Validation.Error && (\n                <span\n                    className=\"tw-absolute tw-top-[0.6rem] tw-right-[0.6rem] tw-text-red-60\"\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,IAA8B,CAAC;AAAA,EACxC,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAM;AACI,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAAC,MAAM;AACZ,QAAIU,KACA,EAAE,OAAO,UAETD,KACAA,EAAQ,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EAAA,GAEhBN,MAAeC,EAAW,WACvB,gBAAAa,EAAA,cAAC,UAAK,WAAU,wHAAA,GACX,gBAAAA,EAAA,cAAAO,GAAA,EAAc,MAAMC,EAAkB,WAAY,CAAA,CACvD,GAEHtB,MAAeC,EAAW,SACvB,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,oCAEZS,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAhC,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport React, { FC, FocusEvent, FormEvent, ReactNode } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n};\n\nexport const Textarea: FC<TextareaProps> = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n}) => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                data-test-id=\"textarea\"\n            />\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","Component","TextareaAutosize","isFocusVisible","focusProps","useFocusRing","autosizeProps","React","mergeProps","event","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAiCO,MAAMA,IAA8B,CAAC;AAAA,EACxC,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAM;AACI,QAAAC,IAAYJ,IAAWK,IAAmB,YAE1C,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAV,GAAS,SAAAD;AAEjC,SACK,gBAAAY,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GACVnB,KACG,gBAAAmB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA;AAAA,IAEZnB;AAAA,EAGT,GAAA,gBAAAmB,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACI,GAAIO,EAAWJ,GAAY;AAAA,QACxB,QAAQ,CAACK,MAA2CjB,KAAUA,EAAOiB,EAAM,OAAO,KAAK;AAAA,QACvF,SAAS,CAACA,MACNlB,KAAWA,EAASkB,EAAM,OAA+B,KAAK;AAAA,MAAA,CACrE;AAAA,MACA,GAAIZ,IAAWS,IAAgB,EAAE,MAAMX,EAAQ;AAAA,MAChD,IAAIe,EAAczB,CAAM;AAAA,MACxB,OAAAC;AAAA,MACA,aAAAG;AAAA,MACA,UAAAF;AAAA,MACA,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA,CAAC,CAACvB,KAAa;AAAA,QACfE,IACM,qDACA;AAAA,QACNa,KAAkBS;AAAA,QAClBC,EAAmBpB,CAAU;AAAA,QAC7B,CAACK,KAAc;AAAA,QACfL,MAAeC,EAAW,SAAS;AAAA,MAAA,CACtC;AAAA,MACD,UAAAJ;AAAA,MACA,SAAS,CAACwB,MAAM;AACZ,QAAId,KACAc,EAAE,OAAO,UAETf,KACAA,EAAQe,CAAC;AAAA,MAEjB;AAAA,MACA,gBAAa;AAAA,IAAA;AAAA,EACjB,GACCrB,MAAeC,EAAW,2CACtB,QAAK,EAAA,WAAU,2HACX,gBAAAa,EAAA,cAAAQ,GAAA,EAAc,MAAMC,EAAkB,YAAY,CACvD,IAEFvB,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAa,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,EAAM;AAAA,QACb;AAAA,QACAlB,MAAeC,EAAW,SAAS;AAAA,QACnCD,MAAeC,EAAW,WAAW;AAAA,MAAA,CACxC;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZuB,GAA4B,IAAA;AAAA,EAAA,CAGzC;AAER;AACAjC,EAAS,cAAc;"}

package/dist/components/Trigger/Trigger.es.js

@@ -1,45 +1,45 @@
-import { IconSize as i } from "../../foundation/Icon/IconSize.es.js";
-import { useFocusRing as m } from "@react-aria/focus";
-import { FOCUS_STYLE as c, FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
+import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
+import { useFocusRing as u } from "@react-aria/focus";
+import { FOCUS_STYLE as m, FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
 import { merge as r } from "../../utilities/merge.es.js";
-import { Validation as u, validationClassMap as S } from "../../utilities/validation.es.js";
+import { Validation as n, validationClassMap as S } from "../../utilities/validation.es.js";
 import e from "react";
 import F from "../../foundation/Icon/Generated/IconCross.es.js";
 import C from "../../foundation/Icon/Generated/IconTrashBin.es.js";
 import N from "../../foundation/Icon/Generated/IconCaretDown.es.js";
 import h from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
 var D = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(D || {}), I = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Weak = "Weak", t))(I || {});
-const y = (t, a, n, l, o) => r([
+const y = (t, l, s, i, o) => r([
   "tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]",
-  t && c,
-  a ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : r([
+  t && m,
+  l ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : r([
     "hover:tw-border-line-xx-strong",
-    l === "Weak" ? "" : "tw-bg-base",
-    n ? "tw-border-line-xx-strong" : "tw-border-line",
-    l === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : S[o]
+    i === "Weak" ? "" : "tw-bg-base",
+    s ? "tw-border-line-xx-strong" : "tw-border-line",
+    i === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : S[o]
   ])
 ]), z = ({
   buttonProps: t,
-  onClear: a,
-  onDelete: n,
-  children: l,
+  onClear: l,
+  onDelete: s,
+  children: i,
   disabled: o = !1,
-  isOpen: s = !1,
+  isOpen: c = !1,
   isFocusVisible: b = !1,
   size: f = "Small",
   showClear: p = !1,
-  validation: w = u.Default,
-  emphasis: d = "Default"
+  validation: a = n.Default,
+  emphasis: g = "Default"
   /* Default */
 }) => {
-  const { focusProps: g, isFocusVisible: x } = m(), { focusProps: k, isFocusVisible: E } = m();
+  const { focusProps: x, isFocusVisible: d } = u(), { focusProps: k, isFocusVisible: E } = u();
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       "data-test-id": "trigger",
-      className: y(b, o, s, d, w)
+      className: y(b, o, c, g, a)
     },
-    l,
+    i,
     /* @__PURE__ */ e.createElement(
       "div",
       {
@@ -51,19 +51,19 @@ const y = (t, a, n, l, o) => r([
       p && /* @__PURE__ */ e.createElement(
         "button",
         {
-          ...g,
+          ...x,
           "data-test-id": "dropdown-clear-button",
           "aria-label": "Clear selection",
           type: "button",
           className: r([
-            x && c,
+            d && m,
             o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
           ]),
-          onClick: () => !!a && a()
+          onClick: () => !!l && l()
         },
-        /* @__PURE__ */ e.createElement(F, { size: i.Size12 })
+        /* @__PURE__ */ e.createElement(F, { size: w.Size12 })
       ),
-      !!n && /* @__PURE__ */ e.createElement(
+      !!s && /* @__PURE__ */ e.createElement(
         "button",
         {
           ...k,
@@ -72,12 +72,12 @@ const y = (t, a, n, l, o) => r([
           type: "button",
           className: r([
             "tw-rounded",
-            E && c,
+            E && m,
             o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
           ]),
-          onClick: n
+          onClick: s
         },
-        /* @__PURE__ */ e.createElement(C, { size: i.Size12 })
+        /* @__PURE__ */ e.createElement(C, { size: w.Size12 })
       ),
       /* @__PURE__ */ e.createElement(
         "button",
@@ -90,17 +90,21 @@ const y = (t, a, n, l, o) => r([
             "tw-rounded",
             o ? "tw-pointer-events-none tw-text-black-40" : r([
               "group-hover:tw-text-black ",
-              s ? "tw-text-black-100" : "tw-text-black-80",
+              c ? "tw-text-black-100" : "tw-text-black-80",
               v
             ])
           ])
         },
-        /* @__PURE__ */ e.createElement("div", { className: r(["tw-transition-transform", s && "tw-rotate-180"]) }, /* @__PURE__ */ e.createElement(N, { size: i.Size16 }))
+        /* @__PURE__ */ e.createElement("div", { className: r(["tw-transition-transform", c && "tw-rotate-180"]) }, /* @__PURE__ */ e.createElement(N, { size: w.Size16 }))
       ),
-      w === u.Error && /* @__PURE__ */ e.createElement(
+      (a === n.Error || a === n.Warning) && /* @__PURE__ */ e.createElement(
         "span",
         {
-          className: "tw-flex tw-items-center tw-justify-center tw-text-red-60",
+          className: r([
+            "tw-flex tw-items-center tw-justify-center",
+            a === n.Error && "tw-text-text-negative",
+            a === n.Warning && "tw-text-text-warning"
+          ]),
           "data-test-id": "error-state-exclamation-mark-icon"
         },
         /* @__PURE__ */ e.createElement(h, null)

package/dist/components/Trigger/Trigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport enum TriggerSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n    disabled?: boolean;\n    isOpen?: boolean;\n    onClear?: () => void;\n    onDelete?: () => void;\n    buttonProps?: HTMLAttributes<HTMLElement>;\n    isFocusVisible?: boolean;\n    size?: TriggerSize;\n    showClear?: boolean;\n    validation?: Validation;\n    emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n    isFocusVisible: boolean,\n    disabled: boolean,\n    isOpen: boolean,\n    emphasis: TriggerEmphasis,\n    validation: Validation,\n) =>\n    merge([\n        'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n        isFocusVisible && FOCUS_STYLE,\n        disabled\n            ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n            : merge([\n                  'hover:tw-border-line-xx-strong',\n                  emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n                  isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n                  emphasis === TriggerEmphasis.Weak\n                      ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n                      : validationClassMap[validation],\n              ]),\n    ]);\n\nexport const Trigger: FC<TriggerProps> = ({\n    buttonProps,\n    onClear,\n    onDelete,\n    children,\n    disabled = false,\n    isOpen = false,\n    isFocusVisible = false,\n    size = TriggerSize.Small,\n    showClear = false,\n    validation = Validation.Default,\n    emphasis = TriggerEmphasis.Default,\n}) => {\n    const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n    const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n    return (\n        <div\n            data-test-id=\"trigger\"\n            className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n        >\n            {children}\n            <div\n                className={merge([\n                    'tw-flex-none tw-flex tw-items-center tw-absolute',\n                    size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n                ])}\n            >\n                {showClear && (\n                    <button\n                        {...clearableFocusProps}\n                        data-test-id=\"dropdown-clear-button\"\n                        aria-label=\"Clear selection\"\n                        type=\"button\"\n                        className={merge([\n                            isClearFocusVisible && FOCUS_STYLE,\n                            disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n                        ])}\n                        onClick={() => !!onClear && onClear()}\n                    >\n                        <IconCross size={IconSize.Size12} />\n                    </button>\n                )}\n                {!!onDelete && (\n                    <button\n                        {...onDeleteFocusProps}\n                        data-test-id=\"dropdown-delete-button\"\n                        aria-label=\"Delete selection\"\n                        type=\"button\"\n                        className={merge([\n                            'tw-rounded',\n                            isOnDeleteFocusVisible && FOCUS_STYLE,\n                            disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n                        ])}\n                        onClick={onDelete}\n                    >\n                        <IconTrashBin size={IconSize.Size12} />\n                    </button>\n                )}\n                <button\n                    {...buttonProps}\n                    aria-hidden=\"true\"\n                    type=\"button\"\n                    disabled={disabled}\n                    className={merge([\n                        'tw-rounded',\n                        disabled\n                            ? 'tw-pointer-events-none tw-text-black-40'\n                            : merge([\n                                  'group-hover:tw-text-black ',\n                                  isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n                                  FOCUS_VISIBLE_STYLE,\n                              ]),\n                    ])}\n                >\n                    <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n                        <IconCaretDown size={IconSize.Size16} />\n                    </div>\n                </button>\n                {validation === Validation.Error && (\n                    <span\n                        className=\"tw-flex tw-items-center tw-justify-center tw-text-red-60\"\n                        data-test-id=\"error-state-exclamation-mark-icon\"\n                    >\n                        <IconExclamationMarkTriangle />\n                    </span>\n                )}\n            </div>\n        </div>\n    );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}
+{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, HTMLAttributes } from 'react';\n\nexport enum TriggerSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n    disabled?: boolean;\n    isOpen?: boolean;\n    onClear?: () => void;\n    onDelete?: () => void;\n    buttonProps?: HTMLAttributes<HTMLElement>;\n    isFocusVisible?: boolean;\n    size?: TriggerSize;\n    showClear?: boolean;\n    validation?: Validation;\n    emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n    isFocusVisible: boolean,\n    disabled: boolean,\n    isOpen: boolean,\n    emphasis: TriggerEmphasis,\n    validation: Validation,\n) =>\n    merge([\n        'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n        isFocusVisible && FOCUS_STYLE,\n        disabled\n            ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n            : merge([\n                  'hover:tw-border-line-xx-strong',\n                  emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n                  isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n                  emphasis === TriggerEmphasis.Weak\n                      ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n                      : validationClassMap[validation],\n              ]),\n    ]);\n\nexport const Trigger: FC<TriggerProps> = ({\n    buttonProps,\n    onClear,\n    onDelete,\n    children,\n    disabled = false,\n    isOpen = false,\n    isFocusVisible = false,\n    size = TriggerSize.Small,\n    showClear = false,\n    validation = Validation.Default,\n    emphasis = TriggerEmphasis.Default,\n}) => {\n    const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n    const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n    return (\n        <div\n            data-test-id=\"trigger\"\n            className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n        >\n            {children}\n            <div\n                className={merge([\n                    'tw-flex-none tw-flex tw-items-center tw-absolute',\n                    size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n                ])}\n            >\n                {showClear && (\n                    <button\n                        {...clearableFocusProps}\n                        data-test-id=\"dropdown-clear-button\"\n                        aria-label=\"Clear selection\"\n                        type=\"button\"\n                        className={merge([\n                            isClearFocusVisible && FOCUS_STYLE,\n                            disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n                        ])}\n                        onClick={() => !!onClear && onClear()}\n                    >\n                        <IconCross size={IconSize.Size12} />\n                    </button>\n                )}\n                {!!onDelete && (\n                    <button\n                        {...onDeleteFocusProps}\n                        data-test-id=\"dropdown-delete-button\"\n                        aria-label=\"Delete selection\"\n                        type=\"button\"\n                        className={merge([\n                            'tw-rounded',\n                            isOnDeleteFocusVisible && FOCUS_STYLE,\n                            disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n                        ])}\n                        onClick={onDelete}\n                    >\n                        <IconTrashBin size={IconSize.Size12} />\n                    </button>\n                )}\n                <button\n                    {...buttonProps}\n                    aria-hidden=\"true\"\n                    type=\"button\"\n                    disabled={disabled}\n                    className={merge([\n                        'tw-rounded',\n                        disabled\n                            ? 'tw-pointer-events-none tw-text-black-40'\n                            : merge([\n                                  'group-hover:tw-text-black ',\n                                  isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n                                  FOCUS_VISIBLE_STYLE,\n                              ]),\n                    ])}\n                >\n                    <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n                        <IconCaretDown size={IconSize.Size16} />\n                    </div>\n                </button>\n                {(validation === Validation.Error || validation === Validation.Warning) && (\n                    <span\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center',\n                            validation === Validation.Error && 'tw-text-text-negative',\n                            validation === Validation.Warning && 'tw-text-text-warning',\n                        ])}\n                        data-test-id=\"error-state-exclamation-mark-icon\"\n                    >\n                        <IconExclamationMarkTriangle />\n                    </span>\n                )}\n            </div>\n        </div>\n    );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}