@frontify/fondue 12.0.0-beta.13 → 12.0.0-beta.16

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

@@ -1,5 +1,5 @@
 import { TextInput as c } from "../TextInput/TextInput.es.js";
-import l from "../../foundation/Icon/Generated/IconCalendar.es.js";
+import n from "../../foundation/Icon/Generated/IconCalendar.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -292,7 +292,7 @@ import "../../foundation/Icon/Generated/IconCardLayoutSmall16.es.js";
 import "../../foundation/Icon/Generated/IconCardLayoutSmall20.es.js";
 import "../../foundation/Icon/Generated/IconCardLayoutSmall24.es.js";
 import "../../foundation/Icon/Generated/IconCardLayoutSmall32.es.js";
-import n from "../../foundation/Icon/Generated/IconCaretDown.es.js";
+import l from "../../foundation/Icon/Generated/IconCaretDown.es.js";
 import "../../foundation/Icon/Generated/IconCaretDown12.es.js";
 import "../../foundation/Icon/Generated/IconCaretDown16.es.js";
 import "../../foundation/Icon/Generated/IconCaretDown20.es.js";
@@ -1661,29 +1661,30 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import t, { forwardRef as f } from "react";
 import "../../foundation/Icon/IconsMap.es.js";
-import { IconSize as o } from "../../foundation/Icon/IconSize.es.js";
-import { merge as w } from "../../utilities/merge.es.js";
-const g = f(({ value: r, onClick: i, isClearable: m, placeHolder: p, isCalendarOpen: e }, a) => /* @__PURE__ */ t.createElement("div", {
-  onClick: i,
+import { IconSize as i } from "../../foundation/Icon/IconSize.es.js";
+import { merge as s } from "../../utilities/merge.es.js";
+const w = f(({ value: r, onClick: o, isClearable: m, placeHolder: p, isCalendarOpen: e }, a) => /* @__PURE__ */ t.createElement("div", {
+  onClick: o,
   ref: a,
   "aria-hidden": "true"
 }, /* @__PURE__ */ t.createElement("div", {
-  className: w([
-    "tw-absolute tw-top-2 tw-text-black-60 tw-right-8 tw-z-10",
-    r === "" ? "tw-right-4" : "tw-right-8"
+  className: s([
+    "tw-absolute tw-top-2 tw-text-black-60 tw-z-10",
+    r === "" || !m ? "tw-right-4" : "tw-right-8"
   ])
 }, e ? /* @__PURE__ */ t.createElement(d, {
-  size: o.Size20
-}) : /* @__PURE__ */ t.createElement(n, {
-  size: o.Size20
+  size: i.Size20
+}) : /* @__PURE__ */ t.createElement(l, {
+  size: i.Size20
 })), /* @__PURE__ */ t.createElement(c, {
-  decorator: /* @__PURE__ */ t.createElement(l, null),
+  decorator: /* @__PURE__ */ t.createElement(n, null),
   placeholder: p,
   value: r,
-  clearable: m
+  clearable: m,
+  onEnterPressed: o
 })));
-g.displayName = "DatePickerTrigger";
+w.displayName = "DatePickerTrigger";
 export {
-  g as DatePickerTrigger
+  w as DatePickerTrigger
 };
 //# sourceMappingURL=DatePickerTrigger.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["import { TextInput } from '@components/TextInput';\nimport IconCalendar from '@foundation/Icon/Generated/IconCalendar';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\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}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    ({ value, onClick, isClearable, placeHolder, isCalendarOpen }, ref) => (\n        <div onClick={onClick} ref={ref} aria-hidden=\"true\">\n            <div\n                className={merge([\n                    'tw-absolute tw-top-2 tw-text-black-60 tw-right-8 tw-z-10',\n                    value === '' ? 'tw-right-4' : 'tw-right-8',\n                ])}\n            >\n                {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n            </div>\n            <TextInput decorator={<IconCalendar />} placeholder={placeHolder} value={value} clearable={isClearable} />\n        </div>\n    ),\n);\n\nDatePickerTrigger.displayName = 'DatePickerTrigger';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,IAAoB,EAC7B,CAAC,EAAE,UAAO,YAAS,gBAAa,gBAAa,qBAAkB,MAC1D,kBAAA,cAAA,OAAA;AAAA,EAAI;AAAA,EAAkB;AAAA,EAAU,eAAY;AAAA,GACxC,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,MAAU,KAAK,eAAe;AAAA,EAAA,CACjC;AAAA,GAEA,IAAkB,kBAAA,cAAA,GAAA;AAAA,EAAY,MAAM,EAAS;AAAA,CAAQ,IAAM,kBAAA,cAAA,GAAA;AAAA,EAAc,MAAM,EAAS;AAAA,CAAQ,CACrG,GACC,kBAAA,cAAA,GAAA;AAAA,EAAU,2CAAY,GAAa,IAAA;AAAA,EAAI,aAAa;AAAA,EAAa;AAAA,EAAc,WAAW;AAAA,CAAa,CAC5G,CAER;AAEA,EAAkB,cAAc;"}
+{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["import { TextInput } from '@components/TextInput';\nimport IconCalendar from '@foundation/Icon/Generated/IconCalendar';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\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}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    ({ value, onClick, isClearable, placeHolder, isCalendarOpen }, ref) => (\n        <div onClick={onClick} ref={ref} aria-hidden=\"true\">\n            <div\n                className={merge([\n                    'tw-absolute tw-top-2 tw-text-black-60 tw-z-10',\n                    value === '' || !isClearable ? 'tw-right-4' : 'tw-right-8',\n                ])}\n            >\n                {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n            </div>\n            <TextInput\n                decorator={<IconCalendar />}\n                placeholder={placeHolder}\n                value={value}\n                clearable={isClearable}\n                onEnterPressed={onClick}\n            />\n        </div>\n    ),\n);\n\nDatePickerTrigger.displayName = 'DatePickerTrigger';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,IAAoB,EAC7B,CAAC,EAAE,UAAO,YAAS,gBAAa,gBAAa,qBAAkB,MAC1D,kBAAA,cAAA,OAAA;AAAA,EAAI;AAAA,EAAkB;AAAA,EAAU,eAAY;AAAA,GACxC,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,MAAU,MAAM,CAAC,IAAc,eAAe;AAAA,EAAA,CACjD;AAAA,GAEA,IAAkB,kBAAA,cAAA,GAAA;AAAA,EAAY,MAAM,EAAS;AAAA,CAAQ,IAAM,kBAAA,cAAA,GAAA;AAAA,EAAc,MAAM,EAAS;AAAA,CAAQ,CACrG,GACC,kBAAA,cAAA,GAAA;AAAA,EACG,2CAAY,GAAa,IAAA;AAAA,EACzB,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,CACpB,CACJ,CAER;AAEA,EAAkB,cAAc;"}

package/dist/components/Dropdown/Dropdown.es.js

@@ -6,56 +6,56 @@ import { Trigger as I, TriggerSize as M } from "../Trigger/Trigger.es.js";
 import { useMemoizedId as tt } from "../../hooks/useMemoizedId.es.js";
 import { useButton as et } from "@react-aria/button";
 import { useFocusRing as ot, FocusScope as rt } from "@react-aria/focus";
-import { useOverlay as nt, DismissButton as L } from "@react-aria/overlays";
-import { useSelect as st, HiddenSelect as lt } from "@react-aria/select";
+import { useOverlay as st, DismissButton as L } from "@react-aria/overlays";
+import { useSelect as nt, HiddenSelect as lt } from "@react-aria/select";
 import { mergeProps as at } from "@react-aria/utils";
 import { useSelectState as it } from "@react-stately/select";
 import { merge as mt } from "../../utilities/merge.es.js";
-import { AnimatePresence as pt, motion as ct } from "framer-motion";
-import e, { useRef as d, useEffect as ut } from "react";
+import { AnimatePresence as pt, motion as ut } from "framer-motion";
+import e, { useRef as d, useEffect as ct } from "react";
 import { useDropdownAutoHeight as ft, DEFAULT_DROPDOWN_MAX_HEIGHT as dt } from "./useDropdownAutoHeight.es.js";
 import { Validation as F } from "../../utilities/validation.es.js";
 import { LoadingCircle as wt, LoadingCircleSize as gt } from "../LoadingCircle/LoadingCircle.es.js";
 import { createPortal as St } from "react-dom";
 import { usePopper as ht } from "react-popper";
-var yt = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(yt || {}), Et = /* @__PURE__ */ ((t) => (t.Start = "Start", t.End = "End", t))(Et || {}), bt = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Bottom = "Bottom", t))(bt || {});
-const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat().find(({ id: r }) => r.toString() === (s == null ? void 0 : s.toString())) || null, Gt = ({
+var bt = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(bt || {}), yt = /* @__PURE__ */ ((t) => (t.Start = "Start", t.End = "End", t))(yt || {}), Et = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Bottom = "Bottom", t))(Et || {});
+const xt = (t, n) => K(A(t)).has(n) ? null : t.map(({ menuItems: s }) => s).flat().find(({ id: s }) => s.toString() === (n == null ? void 0 : n.toString())) || null, Ut = ({
   id: t,
-  menuBlocks: s,
+  menuBlocks: n,
   onChange: w,
-  activeItemId: r,
+  activeItemId: s,
   placeholder: B = "Select item",
   size: p = "Small",
   disabled: a = !1,
   clearable: N = !1,
   ariaLabel: R = "Dropdown",
-  decorator: c,
-  autoResize: u = !0,
+  decorator: u,
+  autoResize: c = !0,
   validation: g = F.Default,
   alignment: H = "Start",
   position: O = "Bottom"
 }) => {
   var D;
-  const n = r ? xt(s, r) : null, S = J(R, s), o = it({
+  const o = s ? xt(n, s) : null, S = J(R, n), r = it({
     ...S,
-    defaultSelectedKey: r,
+    defaultSelectedKey: s,
     onSelectionChange: (m) => w(m),
-    disabledKeys: K(A(s))
-  }), l = d(null), { triggerProps: z, valueProps: V, menuProps: _ } = st({ ...S, isDisabled: a }, o, l), { buttonProps: h } = et({ ...z, isDisabled: a }, l), { isOpen: i } = o, { isFocusVisible: v, focusProps: W } = ot(), y = d(null), { overlayProps: $ } = nt({ isOpen: i, onClose: () => o.close(), shouldCloseOnBlur: !0, isDismissable: !0 }, y);
-  ut(() => {
-    o.disabledKeys.has(r) || o.setSelectedKey(r);
-  }, [r, o]);
-  const { maxHeight: E } = ft(l, { isOpen: i, autoResize: u }), G = !u || E !== dt, U = n ? f.Active : f.Default, X = a ? f.Disabled : U, j = n ? Y[n.style || Z.Primary][X] : "tw-text-black-60", b = N ? () => {
-    o.setSelectedKey("");
-    const m = o.collection.getFirstKey();
-    m && o.selectionManager.setFocusedKey(m);
-  } : void 0, x = !!n && !!b, C = d(null), q = {
+    disabledKeys: K(A(n))
+  }), l = d(null), { triggerProps: z, valueProps: V, menuProps: _ } = nt({ ...S, isDisabled: a }, r, l), { buttonProps: h } = et({ ...z, isDisabled: a }, l), { isOpen: i } = r, { isFocusVisible: W, focusProps: $ } = ot(), b = d(null), { overlayProps: G } = st({ isOpen: i, onClose: () => r.close(), shouldCloseOnBlur: !0, isDismissable: !0 }, b);
+  ct(() => {
+    r.disabledKeys.has(s) || r.setSelectedKey(s);
+  }, [s, r]);
+  const { maxHeight: y } = ft(l, { isOpen: i, autoResize: c }), U = !c || y !== dt, X = o ? f.Active : f.Default, j = a ? f.Disabled : X, q = o ? Y[o.style || Z.Primary][j] : "tw-text-black-60", E = N ? () => {
+    r.setSelectedKey("");
+    const m = r.collection.getFirstKey();
+    m && r.selectionManager.setFocusedKey(m);
+  } : void 0, x = !!o && !!E, C = d(null), v = {
     ["Top-Start"]: "top-start",
     ["Top-End"]: "top-end",
     ["Bottom-Start"]: "bottom-start",
     ["Bottom-End"]: "bottom-end"
   }, P = ht(l == null ? void 0 : l.current, C.current, {
-    placement: q[`${O}-${H}`],
+    placement: v[`${O}-${H}`],
     strategy: "fixed",
     modifiers: [
       {
@@ -75,17 +75,17 @@ const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat
   }, /* @__PURE__ */ e.createElement(I, {
     disabled: a,
     buttonProps: h,
-    isFocusVisible: !a && v,
+    isFocusVisible: !a && W,
     isOpen: i,
     size: p === "Large" ? M.Large : M.Small,
-    onClear: b,
+    onClear: E,
     showClear: x,
     validation: g
   }, /* @__PURE__ */ e.createElement(lt, {
-    state: o,
+    state: r,
     triggerRef: l
   }), /* @__PURE__ */ e.createElement("button", {
-    ...at(h, W),
+    ...at(h, $),
     id: tt(t),
     ref: l,
     "data-test-id": "dropdown-trigger",
@@ -93,14 +93,15 @@ const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat
       "tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none",
       p === "Small" ? "tw-py-2 tw-pl-3 tw-min-h-[34px]" : "tw-pl-5 tw-py-4 tw-min-h-[60px]",
       x ? "tw-pr-11" : "tw-pr-7",
-      j
+      q
     ])
   }, /* @__PURE__ */ e.createElement(k, {
     ariaProps: V,
-    title: (n == null ? void 0 : n.title) || B,
-    decorator: c != null ? c : n == null ? void 0 : n.decorator,
+    title: (o == null ? void 0 : o.title) || B,
+    decorator: u != null ? u : o == null ? void 0 : o.decorator,
+    subtitle: o == null ? void 0 : o.subtitle,
     size: p === "Small" ? T.Small : T.Large
-  }))), St(/* @__PURE__ */ e.createElement(pt, null, !a && i && G && /* @__PURE__ */ e.createElement(ct.div, {
+  }))), St(/* @__PURE__ */ e.createElement(pt, null, !a && i && U && /* @__PURE__ */ e.createElement(ut.div, {
     ref: C,
     style: {
       ...P.styles.popper,
@@ -116,9 +117,9 @@ const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat
   }, /* @__PURE__ */ e.createElement(rt, {
     restoreFocus: !0
   }, /* @__PURE__ */ e.createElement("div", {
-    ...$,
-    ref: y,
-    style: u ? { maxHeight: E } : {},
+    ...G,
+    ref: b,
+    style: c ? { maxHeight: y } : {},
     className: "tw-flex tw-flex-col",
     "data-test-id": "dropdown-menu",
     role: "dialog"
@@ -126,8 +127,8 @@ const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat
     onDismiss: () => close()
   }), /* @__PURE__ */ e.createElement(Q, {
     ariaProps: _,
-    state: o,
-    menuBlocks: s,
+    state: r,
+    menuBlocks: n,
     scrollable: !0
   }), /* @__PURE__ */ e.createElement(L, {
     onDismiss: () => close()
@@ -138,9 +139,9 @@ const xt = (t, s) => K(A(t)).has(s) ? null : t.map(({ menuItems: r }) => r).flat
   })));
 };
 export {
-  Gt as Dropdown,
-  Et as DropdownAlignment,
-  bt as DropdownPosition,
-  yt as DropdownSize
+  Ut as Dropdown,
+  yt as DropdownAlignment,
+  Et as DropdownPosition,
+  bt as DropdownSize
 };
 //# sourceMappingURL=Dropdown.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { MenuItemStyle, MenuItemTextColorState, menuItemTextColorRecord } from '@components/MenuItem';\nimport { MenuItemContent, MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { Trigger, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, ReactElement, useEffect, useRef } from 'react';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from './useDropdownAutoHeight';\nimport { Validation } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { VariationPlacement } from '@popperjs/core';\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\n};\n\nexport const Dropdown: FC<DropdownProps> = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n}) => {\n    const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        state.setSelectedKey(activeItemId as string);\n    }, [activeItemId, state]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-black-60';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        ['Top-Start']: 'top-start',\n        ['Top-End']: 'top-end',\n        ['Bottom-Start']: 'bottom-start',\n        ['Bottom-End']: 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: false,\n            },\n        ],\n    });\n\n    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\">\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id=\"dropdown-trigger\"\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-11' : 'tw-pr-7',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {createPortal(\n                <AnimatePresence>\n                    {!disabled && isOpen && heightIsReady && (\n                        <motion.div\n                            ref={dropdownRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: triggerRef.current?.getBoundingClientRect().width,\n                                minWidth: 'fit-content',\n                            }}\n                            {...popperInstance.attributes.popper}\n                            className=\"tw-absolute tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                            key=\"content\"\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <FocusScope restoreFocus>\n                                <div\n                                    {...overlayProps}\n                                    ref={overlayRef}\n                                    style={autoResize ? { maxHeight } : {}}\n                                    className=\"tw-flex tw-flex-col\"\n                                    data-test-id=\"dropdown-menu\"\n                                    role=\"dialog\"\n                                >\n                                    <DismissButton onDismiss={() => close()} />\n                                    <SelectMenu\n                                        ariaProps={menuProps}\n                                        state={state}\n                                        menuBlocks={menuBlocks}\n                                        scrollable\n                                    />\n                                    <DismissButton onDismiss={() => close()} />\n                                </div>\n                            </FocusScope>\n                        </motion.div>\n                    )}\n                </AnimatePresence>,\n                document.body,\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        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { MenuItemStyle, MenuItemTextColorState, menuItemTextColorRecord } from '@components/MenuItem';\nimport { MenuItemContent, MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { Trigger, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, ReactElement, useEffect, useRef } from 'react';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from './useDropdownAutoHeight';\nimport { Validation } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { VariationPlacement } from '@popperjs/core';\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\n};\n\nexport const Dropdown: FC<DropdownProps> = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n}) => {\n    const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        state.setSelectedKey(activeItemId as string);\n    }, [activeItemId, state]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-black-60';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        ['Top-Start']: 'top-start',\n        ['Top-End']: 'top-end',\n        ['Bottom-Start']: 'bottom-start',\n        ['Bottom-End']: 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: false,\n            },\n        ],\n    });\n\n    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\">\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id=\"dropdown-trigger\"\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-11' : 'tw-pr-7',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        subtitle={activeItem?.subtitle}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {createPortal(\n                <AnimatePresence>\n                    {!disabled && isOpen && heightIsReady && (\n                        <motion.div\n                            ref={dropdownRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: triggerRef.current?.getBoundingClientRect().width,\n                                minWidth: 'fit-content',\n                            }}\n                            {...popperInstance.attributes.popper}\n                            className=\"tw-absolute tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                            key=\"content\"\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <FocusScope restoreFocus>\n                                <div\n                                    {...overlayProps}\n                                    ref={overlayRef}\n                                    style={autoResize ? { maxHeight } : {}}\n                                    className=\"tw-flex tw-flex-col\"\n                                    data-test-id=\"dropdown-menu\"\n                                    role=\"dialog\"\n                                >\n                                    <DismissButton onDismiss={() => close()} />\n                                    <SelectMenu\n                                        ariaProps={menuProps}\n                                        state={state}\n                                        menuBlocks={menuBlocks}\n                                        scrollable\n                                    />\n                                    <DismissButton onDismiss={() => close()} />\n                                </div>\n                            </FocusScope>\n                        </motion.div>\n                    )}\n                </AnimatePresence>,\n                document.body,\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        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LoadingBar/LoadingBar.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare enum LoadingBarSize {
+    Small = "Small",
+    Medium = "Medium",
+    Large = "Large",
+    XLarge = "XLarge"
+}
+export declare enum LoadingBarState {
+    'Progress' = "Progress",
+    'Success' = "Success",
+    'Error' = "Error"
+}
+export declare type LoadingBarProps = {
+    percentage?: number;
+    size?: LoadingBarSize;
+    state?: LoadingBarState;
+    rounded?: boolean;
+};
+export declare const loadingBarSizeClasses: Record<LoadingBarSize, string>;
+export declare const loadingBarStateClasses: Record<LoadingBarState, {
+    outer: string;
+    inner: string;
+}>;
+export declare const LoadingBar: ({ percentage, size, state, rounded, }: LoadingBarProps) => JSX.Element;

package/dist/components/LoadingBar/LoadingBar.es.js

@@ -0,0 +1,50 @@
+import r from "react";
+import { merge as s } from "../../utilities/merge.es.js";
+var l = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e.Large = "Large", e.XLarge = "XLarge", e))(l || {}), n = /* @__PURE__ */ ((e) => (e.Progress = "Progress", e.Success = "Success", e.Error = "Error", e))(n || {});
+const w = {
+  Small: "tw-h-1",
+  Medium: "tw-h-2",
+  Large: "tw-h-3",
+  XLarge: "tw-h-4"
+}, o = {
+  Error: {
+    outer: "tw-bg-box-negative",
+    inner: "tw-bg-text-negative"
+  },
+  Success: {
+    outer: "tw-bg-box-positive",
+    inner: "tw-bg-text-positive"
+  },
+  Progress: {
+    outer: "tw-bg-box-selected",
+    inner: "tw-bg-text-interactive"
+  }
+}, d = ({
+  percentage: e = 0,
+  size: a = "Medium",
+  state: t = "Progress",
+  rounded: i = !1
+}) => /* @__PURE__ */ r.createElement("div", {
+  className: s([
+    "tw-overflow-hidden tw-w-full tw-relative",
+    w[a],
+    i && "tw-rounded",
+    o[t].outer
+  ]),
+  "data-test-id": "loading-bar-outer"
+}, /* @__PURE__ */ r.createElement("div", {
+  className: s([
+    "tw-left-0 tw-top-0 tw-h-full tw-absolute tw-transition-width",
+    o[t].inner
+  ]),
+  style: { width: `${e}%` },
+  "data-test-id": "loading-bar-inner"
+}));
+export {
+  d as LoadingBar,
+  l as LoadingBarSize,
+  n as LoadingBarState,
+  w as loadingBarSizeClasses,
+  o as loadingBarStateClasses
+};
+//# sourceMappingURL=LoadingBar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.es.js","sources":["../../../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { merge } from '@utilities/merge';\n\nexport enum LoadingBarSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\nexport enum LoadingBarState {\n    'Progress' = 'Progress',\n    'Success' = 'Success',\n    'Error' = 'Error',\n}\n\nexport type LoadingBarProps = {\n    percentage?: number;\n    size?: LoadingBarSize;\n    state?: LoadingBarState;\n    rounded?: boolean;\n};\n\nexport const loadingBarSizeClasses: Record<LoadingBarSize, string> = {\n    [LoadingBarSize.Small]: 'tw-h-1',\n    [LoadingBarSize.Medium]: 'tw-h-2',\n    [LoadingBarSize.Large]: 'tw-h-3',\n    [LoadingBarSize.XLarge]: 'tw-h-4',\n};\n\nexport const loadingBarStateClasses: Record<LoadingBarState, { outer: string; inner: string }> = {\n    [LoadingBarState.Error]: {\n        outer: 'tw-bg-box-negative',\n        inner: 'tw-bg-text-negative',\n    },\n    [LoadingBarState.Success]: {\n        outer: 'tw-bg-box-positive',\n        inner: 'tw-bg-text-positive',\n    },\n    [LoadingBarState.Progress]: {\n        outer: 'tw-bg-box-selected',\n        inner: 'tw-bg-text-interactive',\n    },\n};\n\nexport const LoadingBar = ({\n    percentage = 0,\n    size = LoadingBarSize.Medium,\n    state = LoadingBarState.Progress,\n    rounded = false,\n}: LoadingBarProps) => (\n    <div\n        className={merge([\n            'tw-overflow-hidden tw-w-full tw-relative',\n            loadingBarSizeClasses[size],\n            rounded && 'tw-rounded',\n            loadingBarStateClasses[state].outer,\n        ])}\n        data-test-id=\"loading-bar-outer\"\n    >\n        <div\n            className={merge([\n                'tw-left-0 tw-top-0 tw-h-full tw-absolute tw-transition-width',\n                loadingBarStateClasses[state].inner,\n            ])}\n            style={{ width: `${percentage}%` }}\n            data-test-id=\"loading-bar-inner\"\n        />\n    </div>\n);\n"],"names":[],"mappings":";;AAKY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SACC,EAAA,SAAA,UAJD,IAAA,KAAA,CAAA,CAAA,GAOA,sBAAA,MACK,GAAA,WAAA,YACD,EAAA,UAAA,WACF,EAAA,QAAA,SAHF,IAAA,KAAA,CAAA,CAAA;AAaL,MAAM,IAAwD;AAAA,EACjE,AAAC,OAAuB;AAAA,EACxB,AAAC,QAAwB;AAAA,EACzB,AAAC,OAAuB;AAAA,EACxB,AAAC,QAAwB;AAC7B,GAEa,IAAoF;AAAA,EAC7F,AAAC,OAAwB;AAAA,IACrB,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AAAA,EACA,AAAC,SAA0B;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AAAA,EACA,AAAC,UAA2B;AAAA,IACxB,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AACJ,GAEa,IAAa,CAAC;AAAA,EACvB,gBAAa;AAAA,EACb,UAAO;AAAA,EACP,WAAQ;AAAA,EACR,aAAU;AAAA,MAET,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,EAAsB;AAAA,IACtB,KAAW;AAAA,IACX,EAAuB,GAAO;AAAA,EAAA,CACjC;AAAA,EACD,gBAAa;AAAA,GAEZ,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,EAAuB,GAAO;AAAA,EAAA,CACjC;AAAA,EACD,OAAO,EAAE,OAAO,GAAG,KAAc;AAAA,EACjC,gBAAa;AAAA,CACjB,CACJ;"}

package/dist/components/LoadingBar/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingBar';

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OverflowMenuItemProps } from './OverflowMenuItem';
+export interface OverflowMenuProps {
+    items: OverflowMenuItemProps[];
+}
+export declare const OverflowMenu: ({ items }: OverflowMenuProps) => JSX.Element;