@rio-cloud/rio-uikit 2.1.0 → 2.2.0

package/components/statusBar/StatusBar.js

@@ -1,5 +1,5 @@
 import { jsxs as A, jsx as s } from "react/jsx-runtime";
-import t from "classnames";
+import t from "../../utils/classNames.js";
 import { SMALL as B, LARGE as z, LEFT as I, BOLD as F, RIGHT as y, TOP as H } from "./StatusBarConstants.js";
 import { StatusBarProgressBar as M } from "./StatusBarProgressBar.js";
 import k from "./StatusBarIcon.js";
@@ -11,22 +11,29 @@ const J = { name: "", alignment: I }, K = { value: "", alignment: y, weight: F }
     "display-flex",
     f ? "align-items-end" : "align-items-center",
     S
-  ), j = t("display-flex", "flex-1-0", {
-    "flex-order-1 flex-column margin-bottom-10": f,
-    "flex-order-1 align-items-center": b || h || T,
-    "flex-order-2 align-items-center": L || p || D,
-    "align-items-center": x || u
-  }), w = t({
-    "display-flex justify-content-center": f,
-    "flex-order-1 margin-right-10": L || h || x,
-    "flex-order-2 margin-left-10": b || p || u
-  }), P = t("display-flex", "flex-1-0", {
-    "flex-order-2": L || h || x,
-    "flex-order-1": b || p || u
-  }), E = t("progress", "margin-0", "flex-1-0", {
-    "height-5": n === B,
-    "height-10": n === z
-  });
+  ), j = t(
+    "display-flex",
+    "flex-1-0",
+    f && "flex-order-1 flex-column margin-bottom-10",
+    (b || h || T) && "flex-order-1 align-items-center",
+    (L || p || D) && "flex-order-2 align-items-center",
+    (x || u) && "align-items-center"
+  ), w = t(
+    f && "display-flex justify-content-center",
+    (L || h || x) && "flex-order-1 margin-right-10",
+    (b || p || u) && "flex-order-2 margin-left-10"
+  ), P = t(
+    "display-flex",
+    "flex-1-0",
+    (L || h || x) && "flex-order-2",
+    (b || p || u) && "flex-order-1"
+  ), E = t(
+    "progress",
+    "margin-0",
+    "flex-1-0",
+    n === B && "height-5",
+    n === z && "height-10"
+  );
   return /* @__PURE__ */ A("div", { className: W, children: [
     /* @__PURE__ */ s(k, { icon: a, size: n }),
     /* @__PURE__ */ A("div", { className: j, children: [

package/components/statusBar/StatusBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sources":["../../../src/components/statusBar/StatusBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';\nimport StatusBarProgressBar from './StatusBarProgressBar';\nimport type { StatusBarProps, IconWithDefaults, LabelWithDefaults } from './StatusBarProps';\nimport StatusBarIcon from './StatusBarIcon';\nimport StatusBarLabel from './StatusBarLabel';\n\nexport type { StatusBarProps };\n\nconst iconDefaults: IconWithDefaults = { name: '', alignment: LEFT };\nconst labelDefaults: LabelWithDefaults = { value: '', alignment: RIGHT, weight: BOLD };\n\nconst StatusBar = (props: StatusBarProps) => {\n    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;\n\n    // deep destructuring with merging default props don't work\n    const icon: IconWithDefaults = { ...iconDefaults, ...props.icon };\n    const label: LabelWithDefaults = { ...labelDefaults, ...props.label };\n\n    const hasIcon = !!icon.name;\n    const iconIsLeft = icon.alignment === LEFT;\n    const iconIsRight = icon.alignment === RIGHT;\n\n    const hasLabel = !!label.value;\n    const labelIsLeft = label.alignment === LEFT;\n    const labelIsTop = label.alignment === TOP;\n    const labelIsRight = label.alignment === RIGHT;\n\n    const hasOnlyIcon = hasIcon && !hasLabel;\n    const hasOnlyLabel = !hasIcon && hasLabel;\n    const hasIconAndLabel = hasIcon && hasLabel;\n\n    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;\n    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;\n    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;\n    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;\n\n    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;\n    const isIconOnlyRight = hasOnlyIcon && iconIsRight;\n\n    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;\n    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;\n\n    const wrapperClasses = classNames(\n        'StatusBar',\n        'width-100pct',\n        'display-flex',\n        labelIsTop ? 'align-items-end' : 'align-items-center',\n        className\n    );\n\n    const progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-1 flex-column margin-bottom-10': labelIsTop,\n        'flex-order-1 align-items-center': isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight,\n        'flex-order-2 align-items-center': isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft,\n        'align-items-center': isLabelOnlyLeft || isLabelOnlyRight,\n    });\n\n    const labelWrapperClasses = classNames({\n        'display-flex justify-content-center': labelIsTop,\n        'flex-order-1 margin-right-10': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-2 margin-left-10': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', {\n        'flex-order-2': isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft,\n        'flex-order-1': isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight,\n    });\n\n    const progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', {\n        'height-5': size === SMALL,\n        'height-10': size === LARGE,\n    });\n\n    return (\n        <div className={wrapperClasses}>\n            <StatusBarIcon icon={icon} size={size} />\n\n            <div className={progressLabelWrapperClasses}>\n                <StatusBarLabel label={label} size={size} className={labelWrapperClasses} />\n\n                <div className={progressOuterWrapperClasses}>\n                    <div className={progressWrapperClasses}>\n                        {progress.map((item, index) => (\n                            <StatusBarProgressBar\n                                key={index}\n                                progress={item}\n                                index={index}\n                                useProgressDivider={useProgressDivider}\n                            />\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default StatusBar;\n"],"names":["iconDefaults","LEFT","labelDefaults","RIGHT","BOLD","StatusBar","props","progress","size","SMALL","className","useProgressDivider","icon","label","hasIcon","iconIsLeft","iconIsRight","hasLabel","labelIsLeft","labelIsTop","TOP","labelIsRight","hasOnlyIcon","hasOnlyLabel","hasIconAndLabel","isIconLeftAndLabelRight","isIconRightAndLabelLeft","isIconAndLabelLeft","isIconAndLabelRight","isIconOnlyLeft","isIconOnlyRight","isLabelOnlyLeft","isLabelOnlyRight","wrapperClasses","classNames","progressLabelWrapperClasses","labelWrapperClasses","progressOuterWrapperClasses","progressWrapperClasses","LARGE","jsxs","jsx","StatusBarIcon","StatusBarLabel","item","index","StatusBarProgressBar"],"mappings":";;;;;;AAUA,MAAMA,IAAiC,EAAE,MAAM,IAAI,WAAWC,EAAA,GACxDC,IAAmC,EAAE,OAAO,IAAI,WAAWC,GAAO,QAAQC,EAAA,GAE1EC,IAAY,CAACC,MAA0B;AACzC,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,IAAOC,GAAO,WAAAC,IAAY,IAAI,oBAAAC,IAAqB,GAAA,IAASL,GAG7EM,IAAyB,EAAE,GAAGZ,GAAc,GAAGM,EAAM,KAAA,GACrDO,IAA2B,EAAE,GAAGX,GAAe,GAAGI,EAAM,MAAA,GAExDQ,IAAU,CAAC,CAACF,EAAK,MACjBG,IAAaH,EAAK,cAAcX,GAChCe,IAAcJ,EAAK,cAAcT,GAEjCc,IAAW,CAAC,CAACJ,EAAM,OACnBK,IAAcL,EAAM,cAAcZ,GAClCkB,IAAaN,EAAM,cAAcO,GACjCC,IAAeR,EAAM,cAAcV,GAEnCmB,IAAcR,KAAW,CAACG,GAC1BM,IAAe,CAACT,KAAWG,GAC3BO,IAAkBV,KAAWG,GAE7BQ,IAA0BD,KAAmBT,KAAcM,GAC3DK,IAA0BF,KAAmBR,KAAeE,GAC5DS,IAAqBH,KAAmBT,KAAcG,GACtDU,IAAsBJ,KAAmBR,KAAeK,GAExDQ,IAAiBP,KAAeP,GAChCe,IAAkBR,KAAeN,GAEjCe,IAAkBR,KAAgBL,GAClCc,IAAmBT,KAAgBF,GAEnCY,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAf,IAAa,oBAAoB;AAAA,IACjCT;AAAA,EAAA,GAGEyB,IAA8BD,EAAW,gBAAgB,YAAY;AAAA,IACvE,6CAA6Cf;AAAA,IAC7C,mCAAmCS,KAAuBF,KAA2BI;AAAA,IACrF,mCAAmCH,KAAsBF,KAA2BI;AAAA,IACpF,sBAAsBE,KAAmBC;AAAA,EAAA,CAC5C,GAEKI,IAAsBF,EAAW;AAAA,IACnC,uCAAuCf;AAAA,IACvC,gCAAgCQ,KAAsBD,KAA2BK;AAAA,IACjF,+BAA+BH,KAAuBH,KAA2BO;AAAA,EAAA,CACpF,GAEKK,IAA8BH,EAAW,gBAAgB,YAAY;AAAA,IACvE,gBAAgBP,KAAsBD,KAA2BK;AAAA,IACjE,gBAAgBH,KAAuBH,KAA2BO;AAAA,EAAA,CACrE,GAEKM,IAAyBJ,EAAW,YAAY,YAAY,YAAY;AAAA,IAC1E,YAAY1B,MAASC;AAAA,IACrB,aAAaD,MAAS+B;AAAA,EAAA,CACzB;AAED,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWP,GACZ,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAc,MAAA9B,GAAY,MAAAJ,EAAA,CAAY;AAAA,IAEvC,gBAAAgC,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA;AAAA,MAAA,gBAAAM,EAACE,GAAA,EAAe,OAAA9B,GAAc,MAAAL,GAAY,WAAW4B,GAAqB;AAAA,MAE1E,gBAAAK,EAAC,OAAA,EAAI,WAAWJ,GACZ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA/B,EAAS,IAAI,CAACqC,GAAMC,MACjB,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEG,UAAUF;AAAA,UACV,OAAAC;AAAA,UACA,oBAAAlC;AAAA,QAAA;AAAA,QAHKkC;AAAA,MAAA,CAKZ,GACL,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"StatusBar.js","sources":["../../../src/components/statusBar/StatusBar.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport { BOLD, LARGE, LEFT, RIGHT, SMALL, TOP } from './StatusBarConstants';\nimport StatusBarProgressBar from './StatusBarProgressBar';\n// import type { StatusBarProps, IconWithDefaults, LabelWithDefaults } from './StatusBarProps';\nimport StatusBarIconComponent from './StatusBarIcon';\nimport StatusBarLabelComponent from './StatusBarLabel';\n\nexport type StatusBarIcon = {\n    /**\n     * The class name of the icon i.e. \"rioglyph-cruise-control\".\n     */\n    name: string;\n\n    /**\n     * The position of the icon.\n     *\n     * @default 'left'\n     */\n    alignment?: 'left' | 'right';\n\n    /**\n     * The text color class name for the icon.\n     *\n     * @default 'text-color-gray'\n     */\n    color?: string;\n\n    /**\n     * Optional class names for the icon.\n     */\n    className?: string;\n};\n\nexport type StatusBarLabel = {\n    /**\n     * The label content.\n     */\n    value: string | React.ReactNode;\n\n    /**\n     * The position of the icon.\n     *\n     * @default 'right'\n     */\n    alignment?: 'left' | 'top' | 'right';\n\n    /**\n     * The text weight of the label.\n     *\n     * @default 'bold'\n     */\n    weight?: 'light' | 'bold';\n\n    /**\n     * The text color class name for the label.\n     *\n     * @default 'text-color-gray'\n     */\n    color?: string;\n\n    /**\n     * Optional class names for the label.\n     */\n    className?: string;\n};\n\nexport type StatusBarProgress = {\n    /**\n     * The percentage of the progress.\n     *\n     * @default 0\n     */\n    percentage?: number;\n\n    /**\n     * The color class name for the label.\n     *\n     * @default 'progress-bar-info'\n     */\n    color?: string;\n\n    /**\n     * Optional tooltip content to be shown for the progress bar.\n     */\n    tooltip?: string | React.ReactNode;\n\n    /**\n     * The position of the tooltip for the progress bar.\n     *\n     * @default 'top'\n     */\n    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';\n\n    /**\n     * The delay in milliseconds for when the tooltip is shown when hovering the progress bar.\n     *\n     * @default 50\n     */\n    tooltipDelay?: number;\n\n    /**\n     * Optional class names for the progress bar.\n     */\n    className?: string;\n};\n\nexport type StatusBarProps = {\n    /**\n     * The icon to be shown next to the progress bar.\n     */\n    icon?: StatusBarIcon;\n\n    /**\n     * The label to be shown for the progress bar.\n     */\n    label?: StatusBarLabel;\n\n    /**\n     * List of progress bars which will be stacked in given order if there are multiple.\n     */\n    progress?: StatusBarProgress[];\n\n    /**\n     * The size of the icon and progress bar.\n     *\n     * Possible values are:\n     *\n     * - `'small'`\n     * - `'large'`\n     *\n     * @default 'small'\n     */\n    size?: 'small' | 'large';\n\n    /**\n     * Uses a divider for multiple progress bars when defined.\n     *\n     * @default true\n     */\n    useProgressDivider?: boolean;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nexport type IconWithDefaults = StatusBarIcon & { alignment: 'left' | 'right' };\nexport type LabelWithDefaults = StatusBarLabel & { alignment: 'left' | 'top' | 'right'; weight: 'light' | 'bold' };\n\nconst iconDefaults: IconWithDefaults = { name: '', alignment: LEFT };\nconst labelDefaults: LabelWithDefaults = { value: '', alignment: RIGHT, weight: BOLD };\n\nconst StatusBar = (props: StatusBarProps) => {\n    const { progress = [], size = SMALL, className = '', useProgressDivider = true } = props;\n\n    // deep destructuring with merging default props don't work\n    const icon: IconWithDefaults = { ...iconDefaults, ...props.icon };\n    const label: LabelWithDefaults = { ...labelDefaults, ...props.label };\n\n    const hasIcon = !!icon.name;\n    const iconIsLeft = icon.alignment === LEFT;\n    const iconIsRight = icon.alignment === RIGHT;\n\n    const hasLabel = !!label.value;\n    const labelIsLeft = label.alignment === LEFT;\n    const labelIsTop = label.alignment === TOP;\n    const labelIsRight = label.alignment === RIGHT;\n\n    const hasOnlyIcon = hasIcon && !hasLabel;\n    const hasOnlyLabel = !hasIcon && hasLabel;\n    const hasIconAndLabel = hasIcon && hasLabel;\n\n    const isIconLeftAndLabelRight = hasIconAndLabel && iconIsLeft && labelIsRight;\n    const isIconRightAndLabelLeft = hasIconAndLabel && iconIsRight && labelIsLeft;\n    const isIconAndLabelLeft = hasIconAndLabel && iconIsLeft && labelIsLeft;\n    const isIconAndLabelRight = hasIconAndLabel && iconIsRight && labelIsRight;\n\n    const isIconOnlyLeft = hasOnlyIcon && iconIsLeft;\n    const isIconOnlyRight = hasOnlyIcon && iconIsRight;\n\n    const isLabelOnlyLeft = hasOnlyLabel && labelIsLeft;\n    const isLabelOnlyRight = hasOnlyLabel && labelIsRight;\n\n    const wrapperClasses = classNames(\n        'StatusBar',\n        'width-100pct',\n        'display-flex',\n        labelIsTop ? 'align-items-end' : 'align-items-center',\n        className\n    );\n\n    const progressLabelWrapperClasses = classNames(\n        'display-flex',\n        'flex-1-0',\n        labelIsTop && 'flex-order-1 flex-column margin-bottom-10',\n        (isIconAndLabelRight || isIconRightAndLabelLeft || isIconOnlyRight) && 'flex-order-1 align-items-center',\n        (isIconAndLabelLeft || isIconLeftAndLabelRight || isIconOnlyLeft) && 'flex-order-2 align-items-center',\n        (isLabelOnlyLeft || isLabelOnlyRight) && 'align-items-center'\n    );\n\n    const labelWrapperClasses = classNames(\n        labelIsTop && 'display-flex justify-content-center',\n        (isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft) && 'flex-order-1 margin-right-10',\n        (isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight) && 'flex-order-2 margin-left-10'\n    );\n\n    const progressOuterWrapperClasses = classNames(\n        'display-flex',\n        'flex-1-0',\n        (isIconAndLabelLeft || isIconRightAndLabelLeft || isLabelOnlyLeft) && 'flex-order-2',\n        (isIconAndLabelRight || isIconLeftAndLabelRight || isLabelOnlyRight) && 'flex-order-1'\n    );\n\n    const progressWrapperClasses = classNames(\n        'progress',\n        'margin-0',\n        'flex-1-0',\n        size === SMALL && 'height-5',\n        size === LARGE && 'height-10'\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <StatusBarIconComponent icon={icon} size={size} />\n\n            <div className={progressLabelWrapperClasses}>\n                <StatusBarLabelComponent label={label} size={size} className={labelWrapperClasses} />\n\n                <div className={progressOuterWrapperClasses}>\n                    <div className={progressWrapperClasses}>\n                        {progress.map((item, index) => (\n                            <StatusBarProgressBar\n                                key={index}\n                                progress={item}\n                                index={index}\n                                useProgressDivider={useProgressDivider}\n                            />\n                        ))}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default StatusBar;\n"],"names":["iconDefaults","LEFT","labelDefaults","RIGHT","BOLD","StatusBar","props","progress","size","SMALL","className","useProgressDivider","icon","label","hasIcon","iconIsLeft","iconIsRight","hasLabel","labelIsLeft","labelIsTop","TOP","labelIsRight","hasOnlyIcon","hasOnlyLabel","hasIconAndLabel","isIconLeftAndLabelRight","isIconRightAndLabelLeft","isIconAndLabelLeft","isIconAndLabelRight","isIconOnlyLeft","isIconOnlyRight","isLabelOnlyLeft","isLabelOnlyRight","wrapperClasses","classNames","progressLabelWrapperClasses","labelWrapperClasses","progressOuterWrapperClasses","progressWrapperClasses","LARGE","jsxs","jsx","StatusBarIconComponent","StatusBarLabelComponent","item","index","StatusBarProgressBar"],"mappings":";;;;;;AAsJA,MAAMA,IAAiC,EAAE,MAAM,IAAI,WAAWC,EAAA,GACxDC,IAAmC,EAAE,OAAO,IAAI,WAAWC,GAAO,QAAQC,EAAA,GAE1EC,IAAY,CAACC,MAA0B;AACzC,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,IAAOC,GAAO,WAAAC,IAAY,IAAI,oBAAAC,IAAqB,GAAA,IAASL,GAG7EM,IAAyB,EAAE,GAAGZ,GAAc,GAAGM,EAAM,KAAA,GACrDO,IAA2B,EAAE,GAAGX,GAAe,GAAGI,EAAM,MAAA,GAExDQ,IAAU,CAAC,CAACF,EAAK,MACjBG,IAAaH,EAAK,cAAcX,GAChCe,IAAcJ,EAAK,cAAcT,GAEjCc,IAAW,CAAC,CAACJ,EAAM,OACnBK,IAAcL,EAAM,cAAcZ,GAClCkB,IAAaN,EAAM,cAAcO,GACjCC,IAAeR,EAAM,cAAcV,GAEnCmB,IAAcR,KAAW,CAACG,GAC1BM,IAAe,CAACT,KAAWG,GAC3BO,IAAkBV,KAAWG,GAE7BQ,IAA0BD,KAAmBT,KAAcM,GAC3DK,IAA0BF,KAAmBR,KAAeE,GAC5DS,IAAqBH,KAAmBT,KAAcG,GACtDU,IAAsBJ,KAAmBR,KAAeK,GAExDQ,IAAiBP,KAAeP,GAChCe,IAAkBR,KAAeN,GAEjCe,IAAkBR,KAAgBL,GAClCc,IAAmBT,KAAgBF,GAEnCY,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAf,IAAa,oBAAoB;AAAA,IACjCT;AAAA,EAAA,GAGEyB,IAA8BD;AAAA,IAChC;AAAA,IACA;AAAA,IACAf,KAAc;AAAA,KACbS,KAAuBF,KAA2BI,MAAoB;AAAA,KACtEH,KAAsBF,KAA2BI,MAAmB;AAAA,KACpEE,KAAmBC,MAAqB;AAAA,EAAA,GAGvCI,IAAsBF;AAAA,IACxBf,KAAc;AAAA,KACbQ,KAAsBD,KAA2BK,MAAoB;AAAA,KACrEH,KAAuBH,KAA2BO,MAAqB;AAAA,EAAA,GAGtEK,IAA8BH;AAAA,IAChC;AAAA,IACA;AAAA,KACCP,KAAsBD,KAA2BK,MAAoB;AAAA,KACrEH,KAAuBH,KAA2BO,MAAqB;AAAA,EAAA,GAGtEM,IAAyBJ;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA1B,MAASC,KAAS;AAAA,IAClBD,MAAS+B,KAAS;AAAA,EAAA;AAGtB,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWP,GACZ,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAuB,MAAA9B,GAAY,MAAAJ,EAAA,CAAY;AAAA,IAEhD,gBAAAgC,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA;AAAA,MAAA,gBAAAM,EAACE,GAAA,EAAwB,OAAA9B,GAAc,MAAAL,GAAY,WAAW4B,GAAqB;AAAA,MAEnF,gBAAAK,EAAC,OAAA,EAAI,WAAWJ,GACZ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA/B,EAAS,IAAI,CAACqC,GAAMC,MACjB,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEG,UAAUF;AAAA,UACV,OAAAC;AAAA,UACA,oBAAAlC;AAAA,QAAA;AAAA,QAHKkC;AAAA,MAAA,CAKZ,GACL,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/components/statusBar/StatusBarIcon.d.ts

@@ -1,4 +1,4 @@
-import { StatusBarIcon as StatusBarIconIcon } from './StatusBarProps';
+import { StatusBarIcon as StatusBarIconIcon } from './StatusBar';
 type StatusBarIconProps = {
     icon: StatusBarIconIcon;
     size: 'small' | 'large';

package/components/statusBar/StatusBarIcon.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import n from "classnames";
-import { LEFT as l, SMALL as i, LARGE as m } from "./StatusBarConstants.js";
+import n from "../../utils/classNames.js";
+import { LEFT as l, LARGE as i, SMALL as m } from "./StatusBarConstants.js";
 const x = (a) => {
   const { icon: e, size: r } = a;
   if (!e.name)
@@ -9,8 +9,8 @@ const x = (a) => {
     "rioglyph",
     e.name,
     e.color ?? "text-color-gray",
-    r === i && "text-size-h3",
-    r === m && "text-size-h2",
+    r === m && "text-size-h3",
+    r === i && "text-size-h2",
     e.className
   );
   return /* @__PURE__ */ s("div", { className: t, children: /* @__PURE__ */ s("span", { className: o }) });

package/components/statusBar/StatusBarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarIcon.js","sources":["../../../src/components/statusBar/StatusBarIcon.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarIcon as StatusBarIconIcon } from './StatusBarProps';\nimport { LARGE, LEFT, SMALL } from './StatusBarConstants';\n\ntype StatusBarIconProps = {\n    icon: StatusBarIconIcon;\n    size: 'small' | 'large';\n};\n\nconst StatusBarIcon = (props: StatusBarIconProps) => {\n    const { icon, size } = props;\n\n    if (!icon.name) {\n        return null;\n    }\n\n    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';\n\n    const iconClasses = classNames(\n        'rioglyph',\n        icon.name,\n        icon.color ?? 'text-color-gray',\n        size === SMALL && 'text-size-h3',\n        size === LARGE && 'text-size-h2',\n        icon.className\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <span className={iconClasses} />\n        </div>\n    );\n};\n\nexport default StatusBarIcon;\n"],"names":["StatusBarIcon","props","icon","size","wrapperClasses","LEFT","iconClasses","classNames","SMALL","LARGE","jsx"],"mappings":";;;AAUA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,MAAAC,GAAM,MAAAC,EAAA,IAASF;AAEvB,MAAI,CAACC,EAAK;AACN,WAAO;AAGX,QAAME,IAAiBF,EAAK,cAAcG,IAAO,gCAAgC,8BAE3EC,IAAcC;AAAA,IAChB;AAAA,IACAL,EAAK;AAAA,IACLA,EAAK,SAAS;AAAA,IACdC,MAASK,KAAS;AAAA,IAClBL,MAASM,KAAS;AAAA,IAClBP,EAAK;AAAA,EAAA;AAGT,SACI,gBAAAQ,EAAC,SAAI,WAAWN,GACZ,4BAAC,QAAA,EAAK,WAAWE,GAAa,EAAA,CAClC;AAER;"}
+{"version":3,"file":"StatusBarIcon.js","sources":["../../../src/components/statusBar/StatusBarIcon.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport type { StatusBarIcon as StatusBarIconIcon } from './StatusBar';\nimport { LARGE, LEFT, SMALL } from './StatusBarConstants';\n\ntype StatusBarIconProps = {\n    icon: StatusBarIconIcon;\n    size: 'small' | 'large';\n};\n\nconst StatusBarIcon = (props: StatusBarIconProps) => {\n    const { icon, size } = props;\n\n    if (!icon.name) {\n        return null;\n    }\n\n    const wrapperClasses = icon.alignment === LEFT ? 'flex-order-1 margin-right-5' : 'flex-order-2 margin-left-5';\n\n    const iconClasses = classNames(\n        'rioglyph',\n        icon.name,\n        icon.color ?? 'text-color-gray',\n        size === SMALL && 'text-size-h3',\n        size === LARGE && 'text-size-h2',\n        icon.className\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <span className={iconClasses} />\n        </div>\n    );\n};\n\nexport default StatusBarIcon;\n"],"names":["StatusBarIcon","props","icon","size","wrapperClasses","LEFT","iconClasses","classNames","SMALL","LARGE","jsx"],"mappings":";;;AASA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,MAAAC,GAAM,MAAAC,EAAA,IAASF;AAEvB,MAAI,CAACC,EAAK;AACN,WAAO;AAGX,QAAME,IAAiBF,EAAK,cAAcG,IAAO,gCAAgC,8BAE3EC,IAAcC;AAAA,IAChB;AAAA,IACAL,EAAK;AAAA,IACLA,EAAK,SAAS;AAAA,IACdC,MAASK,KAAS;AAAA,IAClBL,MAASM,KAAS;AAAA,IAClBP,EAAK;AAAA,EAAA;AAGT,SACI,gBAAAQ,EAAC,SAAI,WAAWN,GACZ,4BAAC,QAAA,EAAK,WAAWE,GAAa,EAAA,CAClC;AAER;"}

package/components/statusBar/StatusBarLabel.d.ts

@@ -1,4 +1,4 @@
-import { StatusBarLabel as StatusBarLabelLabel } from './StatusBarProps';
+import { StatusBarLabel as StatusBarLabelLabel } from './StatusBar';
 type StatusBarLabelProps = {
     label: StatusBarLabelLabel;
     size: 'small' | 'large';

package/components/statusBar/StatusBarLabel.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 import { LIGHT as o, LARGE as n, SMALL as c, TOP as m } from "./StatusBarConstants.js";
 const x = (s) => {
   const { label: e, size: t, className: a = "" } = s;
@@ -11,12 +11,10 @@ const x = (s) => {
     "flex-1-0",
     "justify-content-center",
     e.color ?? "text-color-dark",
-    {
-      "width-0": e.alignment === m,
-      "text-size-16": t === c,
-      "text-size-h3": t === n,
-      "text-bold": e.weight !== o
-    },
+    e.alignment === m && "width-0",
+    t === c && "text-size-16",
+    t === n && "text-size-h3",
+    e.weight !== o && "text-bold",
     e.className
   );
   return /* @__PURE__ */ l("div", { className: a, children: /* @__PURE__ */ l("span", { className: r, children: e.value }) });

package/components/statusBar/StatusBarLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarLabel.js","sources":["../../../src/components/statusBar/StatusBarLabel.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { StatusBarLabel as StatusBarLabelLabel } from './StatusBarProps';\nimport { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';\n\ntype StatusBarLabelProps = {\n    label: StatusBarLabelLabel;\n    size: 'small' | 'large';\n    className?: string;\n};\n\nconst StatusBarLabel = (props: StatusBarLabelProps) => {\n    const { label, size, className = '' } = props;\n\n    if (!label.value) {\n        return null;\n    }\n\n    const labelClasses = classNames(\n        'display-flex',\n        'ellipsis-1',\n        'flex-1-0',\n        'justify-content-center',\n        label.color ?? 'text-color-dark',\n        {\n            'width-0': label.alignment === TOP,\n            'text-size-16': size === SMALL,\n            'text-size-h3': size === LARGE,\n            'text-bold': label.weight !== LIGHT,\n        },\n        label.className\n    );\n\n    return (\n        <div className={className}>\n            <span className={labelClasses}>{label.value}</span>\n        </div>\n    );\n};\n\nexport default StatusBarLabel;\n"],"names":["StatusBarLabel","props","label","size","className","labelClasses","classNames","TOP","SMALL","LARGE","LIGHT","jsx"],"mappings":";;;AAWA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,WAAAC,IAAY,OAAOH;AAExC,MAAI,CAACC,EAAM;AACP,WAAO;AAGX,QAAMG,IAAeC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ,EAAM,SAAS;AAAA,IACf;AAAA,MACI,WAAWA,EAAM,cAAcK;AAAA,MAC/B,gBAAgBJ,MAASK;AAAA,MACzB,gBAAgBL,MAASM;AAAA,MACzB,aAAaP,EAAM,WAAWQ;AAAA,IAAA;AAAA,IAElCR,EAAM;AAAA,EAAA;AAGV,SACI,gBAAAS,EAAC,SAAI,WAAAP,GACD,UAAA,gBAAAO,EAAC,UAAK,WAAWN,GAAe,UAAAH,EAAM,MAAA,CAAM,EAAA,CAChD;AAER;"}
+{"version":3,"file":"StatusBarLabel.js","sources":["../../../src/components/statusBar/StatusBarLabel.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport type { StatusBarLabel as StatusBarLabelLabel } from './StatusBar';\nimport { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';\n\ntype StatusBarLabelProps = {\n    label: StatusBarLabelLabel;\n    size: 'small' | 'large';\n    className?: string;\n};\n\nconst StatusBarLabel = (props: StatusBarLabelProps) => {\n    const { label, size, className = '' } = props;\n\n    if (!label.value) {\n        return null;\n    }\n\n    const labelClasses = classNames(\n        'display-flex',\n        'ellipsis-1',\n        'flex-1-0',\n        'justify-content-center',\n        label.color ?? 'text-color-dark',\n        label.alignment === TOP && 'width-0',\n        size === SMALL && 'text-size-16',\n        size === LARGE && 'text-size-h3',\n        label.weight !== LIGHT && 'text-bold',\n        label.className\n    );\n\n    return (\n        <div className={className}>\n            <span className={labelClasses}>{label.value}</span>\n        </div>\n    );\n};\n\nexport default StatusBarLabel;\n"],"names":["StatusBarLabel","props","label","size","className","labelClasses","classNames","TOP","SMALL","LARGE","LIGHT","jsx"],"mappings":";;;AAUA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,WAAAC,IAAY,OAAOH;AAExC,MAAI,CAACC,EAAM;AACP,WAAO;AAGX,QAAMG,IAAeC;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ,EAAM,SAAS;AAAA,IACfA,EAAM,cAAcK,KAAO;AAAA,IAC3BJ,MAASK,KAAS;AAAA,IAClBL,MAASM,KAAS;AAAA,IAClBP,EAAM,WAAWQ,KAAS;AAAA,IAC1BR,EAAM;AAAA,EAAA;AAGV,SACI,gBAAAS,EAAC,SAAI,WAAAP,GACD,UAAA,gBAAAO,EAAC,UAAK,WAAWN,GAAe,UAAAH,EAAM,MAAA,CAAM,EAAA,CAChD;AAER;"}

package/components/statusBar/StatusBarProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { StatusBarProgress } from './StatusBarProps';
+import { StatusBarProgress } from './StatusBar';
 type StatusBarProgressBarProps = {
     index: number;
     progress: StatusBarProgress;

package/components/statusBar/StatusBarProgressBar.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 import g from "../tooltip/Tooltip.js";
 import f from "../overlay/OverlayTrigger.js";
 import { TOP as u } from "./StatusBarConstants.js";

package/components/statusBar/StatusBarProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarProgressBar.js","sources":["../../../src/components/statusBar/StatusBarProgressBar.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport Tooltip from '../tooltip/Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport type { StatusBarProgress } from './StatusBarProps';\nimport { TOP } from './StatusBarConstants';\n\ntype StatusBarProgressBarProps = {\n    index: number;\n    progress: StatusBarProgress;\n    useProgressDivider: boolean;\n};\n\nexport const StatusBarProgressBar = (props: StatusBarProgressBarProps) => {\n    const {\n        index,\n        progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP },\n        useProgressDivider,\n    } = props;\n\n    const progressBarClasses = classNames(\n        'progress-bar',\n        color ?? 'progress-bar-info',\n        useProgressDivider && 'progress-divider',\n        className\n    );\n\n    const progressBar = <div className={progressBarClasses} style={{ width: `${percentage}%` }} />;\n\n    if (!tooltip) {\n        return progressBar;\n    }\n\n    return (\n        <OverlayTrigger\n            placement={tooltipPosition}\n            overlay={\n                <Tooltip id={`tooltip-${index}`} width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n            delay={tooltipDelay}\n        >\n            {progressBar}\n        </OverlayTrigger>\n    );\n};\n\nexport default StatusBarProgressBar;\n"],"names":["StatusBarProgressBar","props","index","className","color","percentage","tooltip","tooltipDelay","tooltipPosition","TOP","useProgressDivider","progressBarClasses","classNames","progressBar","jsx","OverlayTrigger","Tooltip"],"mappings":";;;;;AAaO,MAAMA,IAAuB,CAACC,MAAqC;AACtE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,UAAU,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,IAAa,GAAG,SAAAC,GAAS,cAAAC,IAAe,IAAI,iBAAAC,IAAkBC,EAAA;AAAA,IAC5F,oBAAAC;AAAA,EAAA,IACAT,GAEEU,IAAqBC;AAAA,IACvB;AAAA,IACAR,KAAS;AAAA,IACTM,KAAsB;AAAA,IACtBP;AAAA,EAAA,GAGEU,IAAc,gBAAAC,EAAC,OAAA,EAAI,WAAWH,GAAoB,OAAO,EAAE,OAAO,GAAGN,CAAU,IAAA,EAAI,CAAG;AAE5F,SAAKC,IAKD,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWP;AAAA,MACX,2BACKQ,GAAA,EAAQ,IAAI,WAAWd,CAAK,IAAI,OAAM,QAClC,UAAAI,EAAA,CACL;AAAA,MAEJ,OAAOC;AAAA,MAEN,UAAAM;AAAA,IAAA;AAAA,EAAA,IAbEA;AAgBf;"}
+{"version":3,"file":"StatusBarProgressBar.js","sources":["../../../src/components/statusBar/StatusBarProgressBar.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport Tooltip from '../tooltip/Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport type { StatusBarProgress } from './StatusBar';\nimport { TOP } from './StatusBarConstants';\n\ntype StatusBarProgressBarProps = {\n    index: number;\n    progress: StatusBarProgress;\n    useProgressDivider: boolean;\n};\n\nexport const StatusBarProgressBar = (props: StatusBarProgressBarProps) => {\n    const {\n        index,\n        progress: { className, color, percentage = 0, tooltip, tooltipDelay = 50, tooltipPosition = TOP },\n        useProgressDivider,\n    } = props;\n\n    const progressBarClasses = classNames(\n        'progress-bar',\n        color ?? 'progress-bar-info',\n        useProgressDivider && 'progress-divider',\n        className\n    );\n\n    const progressBar = <div className={progressBarClasses} style={{ width: `${percentage}%` }} />;\n\n    if (!tooltip) {\n        return progressBar;\n    }\n\n    return (\n        <OverlayTrigger\n            placement={tooltipPosition}\n            overlay={\n                <Tooltip id={`tooltip-${index}`} width='auto'>\n                    {tooltip}\n                </Tooltip>\n            }\n            delay={tooltipDelay}\n        >\n            {progressBar}\n        </OverlayTrigger>\n    );\n};\n\nexport default StatusBarProgressBar;\n"],"names":["StatusBarProgressBar","props","index","className","color","percentage","tooltip","tooltipDelay","tooltipPosition","TOP","useProgressDivider","progressBarClasses","classNames","progressBar","jsx","OverlayTrigger","Tooltip"],"mappings":";;;;;AAYO,MAAMA,IAAuB,CAACC,MAAqC;AACtE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,UAAU,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,IAAa,GAAG,SAAAC,GAAS,cAAAC,IAAe,IAAI,iBAAAC,IAAkBC,EAAA;AAAA,IAC5F,oBAAAC;AAAA,EAAA,IACAT,GAEEU,IAAqBC;AAAA,IACvB;AAAA,IACAR,KAAS;AAAA,IACTM,KAAsB;AAAA,IACtBP;AAAA,EAAA,GAGEU,IAAc,gBAAAC,EAAC,OAAA,EAAI,WAAWH,GAAoB,OAAO,EAAE,OAAO,GAAGN,CAAU,IAAA,EAAI,CAAG;AAE5F,SAAKC,IAKD,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWP;AAAA,MACX,2BACKQ,GAAA,EAAQ,IAAI,WAAWd,CAAK,IAAI,OAAM,QAClC,UAAAI,EAAA,CACL;AAAA,MAEJ,OAAOC;AAAA,MAEN,UAAAM;AAAA,IAAA;AAAA,EAAA,IAbEA;AAgBf;"}

package/components/steppedProgressBar/SteppedProgressBar.js

@@ -1,7 +1,7 @@
 import { jsx as l, jsxs as v } from "react/jsx-runtime";
 import { useState as S, useEffect as h } from "react";
 import { Nav as m } from "react-bootstrap";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 const o = (p) => {
   const {
     labels: N,

package/components/steppedProgressBar/SteppedProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedProgressBar.js","sources":["../../../src/components/steppedProgressBar/SteppedProgressBar.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { Nav } from 'react-bootstrap';\nimport classNames from 'classnames';\n\nexport type SteppedProgressBarLabel = {\n    /**\n     * The element shown in the step element.\n     *\n     * This can be a single step number or an icon element.\n     */\n    icon?: string | ReactNode;\n\n    /**\n     * The label shown below the step element.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional classes to be set on the label wrapping element.\n     */\n    labelWrapperClassName?: string;\n};\n\nexport type SteppedProgressBarProps = {\n    /**\n     * Objects to defining the icon and the label of the navigation items.\n     *\n     * The icon can be a string or an icon.\n     */\n    labels: SteppedProgressBarLabel[];\n\n    /**\n     * Index of the selected navigation item.\n     */\n    selectedStepNumber: number;\n\n    /**\n     * Called with the new selected index after the user clicked a nav item.\n     */\n    onSelectedChanged: (selectedKey: number) => void;\n\n    /**\n     * The SteppedProgressBar Variant.\n     *\n     * One of `circle`, `rectangle` or `roadsign`.\n     *\n     * @default 'circle'\n     */\n    variant?: 'circle' | 'rectangle' | 'roadsign';\n\n    /**\n     * All navigation items with a higher index than this will be disabled.\n     */\n    disableFollowingPages?: number;\n\n    /**\n     * Deactivating the wrapping of bubbles on mobile.\n     *\n     * @default true\n     */\n    mobileBreakpoint?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst SteppedProgressBar = (props: SteppedProgressBarProps) => {\n    const {\n        labels,\n        selectedStepNumber,\n        onSelectedChanged,\n        variant = 'circle',\n        disableFollowingPages: disableFollowingPageIndex,\n        mobileBreakpoint = true,\n        className = '',\n    } = props;\n\n    const [disableFollowingPages, setDisableFollowingPages] = useState(\n        disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber\n    );\n\n    useEffect(() => {\n        if (disableFollowingPageIndex !== undefined) {\n            if (disableFollowingPageIndex < selectedStepNumber) {\n                console.warn(\n                    'Invalid component state detected in SteppedProgressBar: can not disable following ' +\n                        `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`\n                );\n                return;\n            }\n\n            setDisableFollowingPages(disableFollowingPageIndex);\n        } else if (selectedStepNumber > disableFollowingPages) {\n            setDisableFollowingPages(selectedStepNumber);\n        }\n    }, [disableFollowingPageIndex, selectedStepNumber]);\n\n    const wrapperClasses = classNames(\n        'stepped-progress-bar',\n        variant && `variant-${variant}`,\n        mobileBreakpoint && 'mobile-breakpoint',\n        className && className\n    );\n\n    const handleSelect = (selectedKey: string | null) => onSelectedChanged(Number(selectedKey));\n\n    return (\n        <Nav className={wrapperClasses} activeKey={selectedStepNumber} onSelect={handleSelect}>\n            {labels.map((labelObject, index) => (\n                <Nav.Link\n                    key={index}\n                    eventKey={index}\n                    disabled={index > disableFollowingPages}\n                    as='a'\n                    className={classNames('step-tab', labelObject.labelWrapperClassName)}\n                >\n                    <div className='step-tab-content'>\n                        <div className='item-icon'>{labelObject.icon}</div>\n                        <div className={classNames('item-label', labelObject.labelClassName)}>{labelObject.label}</div>\n                    </div>\n                </Nav.Link>\n            ))}\n        </Nav>\n    );\n};\n\nSteppedProgressBar.VARIANT_CIRCLE = 'circle' as const;\nSteppedProgressBar.VARIANT_RECTANGLE = 'rectangle' as const;\nSteppedProgressBar.VARIANT_ROADSIGN = 'roadsign' as const;\n\nexport default SteppedProgressBar;\n"],"names":["SteppedProgressBar","props","labels","selectedStepNumber","onSelectedChanged","variant","disableFollowingPageIndex","mobileBreakpoint","className","disableFollowingPages","setDisableFollowingPages","useState","useEffect","wrapperClasses","classNames","jsx","Nav","selectedKey","labelObject","index","jsxs"],"mappings":";;;;AAyEA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,uBAAuBC;AAAA,IACvB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,EAAA,IACZP,GAEE,CAACQ,GAAuBC,CAAwB,IAAIC;AAAA,IACtDL,KAAwDH;AAAA,EAAA;AAG5D,EAAAS,EAAU,MAAM;AACZ,QAAIN,MAA8B,QAAW;AACzC,UAAIA,IAA4BH,GAAoB;AAChD,gBAAQ;AAAA,UACJ,2FACaG,CAAyB,yBAAyBH,CAAkB;AAAA,QAAA;AAErF;AAAA,MACJ;AAEA,MAAAO,EAAyBJ,CAAyB;AAAA,IACtD,MAAA,CAAWH,IAAqBM,KAC5BC,EAAyBP,CAAkB;AAAA,EAEnD,GAAG,CAACG,GAA2BH,CAAkB,CAAC;AAElD,QAAMU,IAAiBC;AAAA,IACnB;AAAA,IACAT,KAAW,WAAWA,CAAO;AAAA,IAC7BE,KAAoB;AAAA,IACpBC,KAAaA;AAAA,EAAA;AAKjB,SACI,gBAAAO,EAACC,GAAA,EAAI,WAAWH,GAAgB,WAAWV,GAAoB,UAH9C,CAACc,MAA+Bb,EAAkB,OAAOa,CAAW,CAAC,GAIjF,UAAAf,EAAO,IAAI,CAACgB,GAAaC,MACtB,gBAAAJ;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MAEG,UAAUG;AAAA,MACV,UAAUA,IAAQV;AAAA,MAClB,IAAG;AAAA,MACH,WAAWK,EAAW,YAAYI,EAAY,qBAAqB;AAAA,MAEnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAG,EAAY,MAAK;AAAA,QAC7C,gBAAAH,EAAC,SAAI,WAAWD,EAAW,cAAcI,EAAY,cAAc,GAAI,UAAAA,EAAY,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA;AAAA,IATKC;AAAA,EAAA,CAWZ,GACL;AAER;AAEAnB,EAAmB,iBAAiB;AACpCA,EAAmB,oBAAoB;AACvCA,EAAmB,mBAAmB;"}
+{"version":3,"file":"SteppedProgressBar.js","sources":["../../../src/components/steppedProgressBar/SteppedProgressBar.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useState } from 'react';\nimport { Nav } from 'react-bootstrap';\n\nimport classNames from '../../utils/classNames';\n\nexport type SteppedProgressBarLabel = {\n    /**\n     * The element shown in the step element.\n     *\n     * This can be a single step number or an icon element.\n     */\n    icon?: string | ReactNode;\n\n    /**\n     * The label shown below the step element.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional classes to be set on the label wrapping element.\n     */\n    labelWrapperClassName?: string;\n};\n\nexport type SteppedProgressBarProps = {\n    /**\n     * Objects to defining the icon and the label of the navigation items.\n     *\n     * The icon can be a string or an icon.\n     */\n    labels: SteppedProgressBarLabel[];\n\n    /**\n     * Index of the selected navigation item.\n     */\n    selectedStepNumber: number;\n\n    /**\n     * Called with the new selected index after the user clicked a nav item.\n     */\n    onSelectedChanged: (selectedKey: number) => void;\n\n    /**\n     * The SteppedProgressBar Variant.\n     *\n     * One of `circle`, `rectangle` or `roadsign`.\n     *\n     * @default 'circle'\n     */\n    variant?: 'circle' | 'rectangle' | 'roadsign';\n\n    /**\n     * All navigation items with a higher index than this will be disabled.\n     */\n    disableFollowingPages?: number;\n\n    /**\n     * Deactivating the wrapping of bubbles on mobile.\n     *\n     * @default true\n     */\n    mobileBreakpoint?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst SteppedProgressBar = (props: SteppedProgressBarProps) => {\n    const {\n        labels,\n        selectedStepNumber,\n        onSelectedChanged,\n        variant = 'circle',\n        disableFollowingPages: disableFollowingPageIndex,\n        mobileBreakpoint = true,\n        className = '',\n    } = props;\n\n    const [disableFollowingPages, setDisableFollowingPages] = useState(\n        disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber\n    );\n\n    useEffect(() => {\n        if (disableFollowingPageIndex !== undefined) {\n            if (disableFollowingPageIndex < selectedStepNumber) {\n                console.warn(\n                    'Invalid component state detected in SteppedProgressBar: can not disable following ' +\n                        `pages ${disableFollowingPageIndex} when selectedStep is ${selectedStepNumber}!`\n                );\n                return;\n            }\n\n            setDisableFollowingPages(disableFollowingPageIndex);\n        } else if (selectedStepNumber > disableFollowingPages) {\n            setDisableFollowingPages(selectedStepNumber);\n        }\n    }, [disableFollowingPageIndex, selectedStepNumber]);\n\n    const wrapperClasses = classNames(\n        'stepped-progress-bar',\n        variant && `variant-${variant}`,\n        mobileBreakpoint && 'mobile-breakpoint',\n        className && className\n    );\n\n    const handleSelect = (selectedKey: string | null) => onSelectedChanged(Number(selectedKey));\n\n    return (\n        <Nav className={wrapperClasses} activeKey={selectedStepNumber} onSelect={handleSelect}>\n            {labels.map((labelObject, index) => (\n                <Nav.Link\n                    key={index}\n                    eventKey={index}\n                    disabled={index > disableFollowingPages}\n                    as='a'\n                    className={classNames('step-tab', labelObject.labelWrapperClassName)}\n                >\n                    <div className='step-tab-content'>\n                        <div className='item-icon'>{labelObject.icon}</div>\n                        <div className={classNames('item-label', labelObject.labelClassName)}>{labelObject.label}</div>\n                    </div>\n                </Nav.Link>\n            ))}\n        </Nav>\n    );\n};\n\nSteppedProgressBar.VARIANT_CIRCLE = 'circle' as const;\nSteppedProgressBar.VARIANT_RECTANGLE = 'rectangle' as const;\nSteppedProgressBar.VARIANT_ROADSIGN = 'roadsign' as const;\n\nexport default SteppedProgressBar;\n"],"names":["SteppedProgressBar","props","labels","selectedStepNumber","onSelectedChanged","variant","disableFollowingPageIndex","mobileBreakpoint","className","disableFollowingPages","setDisableFollowingPages","useState","useEffect","wrapperClasses","classNames","jsx","Nav","selectedKey","labelObject","index","jsxs"],"mappings":";;;;AA0EA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,uBAAuBC;AAAA,IACvB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,EAAA,IACZP,GAEE,CAACQ,GAAuBC,CAAwB,IAAIC;AAAA,IACtDL,KAAwDH;AAAA,EAAA;AAG5D,EAAAS,EAAU,MAAM;AACZ,QAAIN,MAA8B,QAAW;AACzC,UAAIA,IAA4BH,GAAoB;AAChD,gBAAQ;AAAA,UACJ,2FACaG,CAAyB,yBAAyBH,CAAkB;AAAA,QAAA;AAErF;AAAA,MACJ;AAEA,MAAAO,EAAyBJ,CAAyB;AAAA,IACtD,MAAA,CAAWH,IAAqBM,KAC5BC,EAAyBP,CAAkB;AAAA,EAEnD,GAAG,CAACG,GAA2BH,CAAkB,CAAC;AAElD,QAAMU,IAAiBC;AAAA,IACnB;AAAA,IACAT,KAAW,WAAWA,CAAO;AAAA,IAC7BE,KAAoB;AAAA,IACpBC,KAAaA;AAAA,EAAA;AAKjB,SACI,gBAAAO,EAACC,GAAA,EAAI,WAAWH,GAAgB,WAAWV,GAAoB,UAH9C,CAACc,MAA+Bb,EAAkB,OAAOa,CAAW,CAAC,GAIjF,UAAAf,EAAO,IAAI,CAACgB,GAAaC,MACtB,gBAAAJ;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MAEG,UAAUG;AAAA,MACV,UAAUA,IAAQV;AAAA,MAClB,IAAG;AAAA,MACH,WAAWK,EAAW,YAAYI,EAAY,qBAAqB;AAAA,MAEnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,QAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAG,EAAY,MAAK;AAAA,QAC7C,gBAAAH,EAAC,SAAI,WAAWD,EAAW,cAAcI,EAAY,cAAc,GAAI,UAAAA,EAAY,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA;AAAA,IATKC;AAAA,EAAA,CAWZ,GACL;AAER;AAEAnB,EAAmB,iBAAiB;AACpCA,EAAmB,oBAAoB;AACvCA,EAAmB,mBAAmB;"}

package/components/switch/Switch.d.ts

@@ -33,9 +33,16 @@ export type SwitchProps = {
     /**
      * The min-width of the switch.
      *
-     * @default 40
+     * If not set, the default min-width is `40`.
      */
     minWidth?: number;
+    /**
+     * Controls automatic text-based min-width behavior when `minWidth` is not set.
+     * Set to `true` to keep the width at the longer one of `enabledText` and `disabledText`.
+     *
+     * @default false
+     */
+    autoMinWidth?: boolean;
     /**
      * Disables the component.
      *
@@ -55,8 +62,16 @@ export type SwitchProps = {
      * Defaults to `'right'` when children are present.
      *
      * Possible values are `'left'` and `'right'`.
+     *
+     * @default 'right'
      */
     labelPosition?: 'left' | 'right';
+    /**
+     * Use this flag if you want to have custom text styles.
+     *
+     * @default false
+     */
+    customTextStyle?: boolean;
     /**
      * Additional class names added to the SVG element.
      */

package/components/switch/Switch.js

@@ -1,52 +1,94 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
-import o from "classnames";
-import { noop as y } from "es-toolkit/function";
-import { getCurrentBackgroundColor as B } from "../../utils/currentColors.js";
-const r = I((d, h) => {
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as S, useRef as E, useState as O, useLayoutEffect as R } from "react";
+import { noop as P } from "es-toolkit/function";
+import m from "../../utils/classNames.js";
+import { getCurrentBackgroundColor as D } from "../../utils/currentColors.js";
+const f = 40, H = 28, U = ({ enabledText: d, disabledText: h, minWidth: n, autoMinWidth: x }) => {
+  const t = E(null), [p, u] = O(f), c = n !== void 0, e = [d, h].filter((s) => !!s).reduce(
+    (s, i) => i.length > s.length ? i : s,
+    ""
+  ), l = !!(d || h), a = !c && x, r = c ? n : a ? p : l ? void 0 : f;
+  return R(() => {
+    if (!a)
+      return;
+    if (!e) {
+      u(f);
+      return;
+    }
+    const s = t.current?.offsetWidth ?? 0, i = Math.ceil(s) + H;
+    u(Math.max(f, i));
+  }, [e, a]), { computedMinWidth: r, longestText: e, shouldUseAutoTextWidth: a, textMeasureRef: t };
+}, M = S((d, h) => {
   const {
-    keyName: i,
-    checked: m = !1,
-    enabledText: s,
-    minWidth: f = 40,
+    keyName: n,
+    checked: x = !1,
+    enabledText: t,
+    minWidth: p,
+    autoMinWidth: u = !1,
     disabled: c = !1,
-    color: p = "primary",
+    color: T = "primary",
     disabledText: e,
-    children: a,
-    className: w = "",
-    labelPosition: l = a ? "right" : void 0,
-    onChange: N = y,
-    ...g
-  } = d, u = (L) => {
-    N(L.target.checked);
-  }, x = s && e, C = s && !e, b = o("uikit-switch", w), T = o(
+    children: l,
+    className: a = "",
+    labelPosition: r = l ? "right" : void 0,
+    onChange: s = P,
+    customTextStyle: i = !1,
+    ...W
+  } = d, { computedMinWidth: C, longestText: g, shouldUseAutoTextWidth: v, textMeasureRef: A } = U({
+    enabledText: t,
+    disabledText: e,
+    minWidth: p,
+    autoMinWidth: u
+  }), I = (k) => {
+    s(k.target.checked);
+  }, L = !!(t && e), y = !!(t && !e), w = m("uikit-switch", a), B = m(
     "switch-label",
+    w,
     c && "cursor-not-allowed",
-    l && `label-position-${l}`
-  ), k = o("switch-content"), v = B(p);
-  return /* @__PURE__ */ t("div", { ref: h, ...g, className: b, children: /* @__PURE__ */ n("label", { className: T, children: [
-    /* @__PURE__ */ t(
+    r && `label-position-${r}`,
+    r === "left" && "display-inline-flex height-20"
+  ), _ = m("switch-content"), b = D(T);
+  return /* @__PURE__ */ o("div", { ref: h, ...W, className: w, children: /* @__PURE__ */ N("label", { className: B, children: [
+    v && g && /* @__PURE__ */ o("span", { ref: A, className: "switch-text-measure", "aria-hidden": "true", children: g }),
+    /* @__PURE__ */ o(
       "input",
       {
-        onChange: u,
-        checked: m,
+        onChange: I,
+        checked: x,
         type: "checkbox",
-        id: i,
+        id: n,
         className: "switch-input",
         disabled: c
       },
-      i
+      n
+    ),
+    /* @__PURE__ */ N(
+      "div",
+      {
+        className: _,
+        style: { color: b, minWidth: C },
+        children: [
+          L ? /* @__PURE__ */ o("div", { className: "switch-text", "data-on": t, "data-off": e }) : y && /* @__PURE__ */ o("div", { className: "switch-text", "data-on": t, "data-off": t }),
+          /* @__PURE__ */ o("div", { className: "switch-handle" })
+        ]
+      }
     ),
-    /* @__PURE__ */ n("div", { className: k, style: { color: v, minWidth: f }, children: [
-      x ? /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": e }) : C && /* @__PURE__ */ t("div", { className: "switch-text", "data-on": s, "data-off": s }),
-      /* @__PURE__ */ t("div", { className: "switch-handle" })
-    ] }),
-    a && a
+    l && /* @__PURE__ */ o(
+      "div",
+      {
+        className: m(
+          "switch-text-wrapper",
+          "user-select-none",
+          i ? "" : "padding-top-1"
+        ),
+        children: l
+      }
+    )
   ] }) });
 });
-r.LABEL_POSITION_LEFT = "left";
-r.LABEL_POSITION_RIGHT = "right";
+M.LABEL_POSITION_LEFT = "left";
+M.LABEL_POSITION_RIGHT = "right";
 export {
-  r as default
+  M as default
 };
 //# sourceMappingURL=Switch.js.map

package/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, type ChangeEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nexport type SwitchProps = {\n    /**\n     * Optional key that is used as key and as the id on the internal input.\n     */\n    keyName?: string;\n\n    /**\n     * Callback function triggered when clicking the button.\n     */\n    onChange?: (toggleState: boolean) => void;\n\n    /**\n     * Set active / inactive state.\n     *\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Defines the color of the switch.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * The min-width of the switch.\n     *\n     * @default 40\n     */\n    minWidth?: number;\n\n    /**\n     * Disables the component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The text used for the ON state.\n     */\n    enabledText?: string;\n\n    /**\n     * The text used for the OFF state.\n     */\n    disabledText?: string;\n\n    /**\n     * Defines the position of the switch label.\n     * Defaults to `'right'` when children are present.\n     *\n     * Possible values are `'left'` and `'right'`.\n     */\n    labelPosition?: 'left' | 'right';\n\n    /**\n     * Additional class names added to the SVG element.\n     */\n    className?: string;\n};\n\nconst Switch = forwardRef((props: PropsWithChildren<SwitchProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        keyName,\n        checked = false,\n        enabledText,\n        minWidth = 40,\n        disabled = false,\n        color = 'primary',\n        disabledText,\n        children,\n        className = '',\n        labelPosition = children ? 'right' : undefined,\n        onChange = noop,\n        ...remainingProps\n    } = props;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange(event.target.checked);\n    };\n\n    const hasMultipleText = enabledText && disabledText;\n    const hasSingleText = enabledText && !disabledText;\n\n    const switchClasses = classNames('uikit-switch', className);\n\n    const switchLabelClasses = classNames(\n        'switch-label',\n        disabled && 'cursor-not-allowed',\n        labelPosition && `label-position-${labelPosition}`\n    );\n\n    const switchContentClasses = classNames('switch-content');\n\n    const switchBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div ref={ref} {...remainingProps} className={switchClasses}>\n            <label className={switchLabelClasses}>\n                <input\n                    onChange={handleChange}\n                    checked={checked}\n                    type='checkbox'\n                    id={keyName}\n                    key={keyName}\n                    className='switch-input'\n                    disabled={disabled}\n                />\n                <div className={switchContentClasses} style={{ color: switchBackgroundColor, minWidth }}>\n                    {hasMultipleText ? (\n                        <div className='switch-text' data-on={enabledText} data-off={disabledText} />\n                    ) : (\n                        hasSingleText && <div className='switch-text' data-on={enabledText} data-off={enabledText} />\n                    )}\n                    <div className='switch-handle' />\n                </div>\n\n                {children && children}\n            </label>\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {\n    LABEL_POSITION_LEFT: 'left';\n    LABEL_POSITION_RIGHT: 'right';\n};\n\nSwitch.LABEL_POSITION_LEFT = 'left' as const;\nSwitch.LABEL_POSITION_RIGHT = 'right' as const;\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","ref","keyName","checked","enabledText","minWidth","disabled","color","disabledText","children","className","labelPosition","onChange","noop","remainingProps","handleChange","event","hasMultipleText","hasSingleText","switchClasses","classNames","switchLabelClasses","switchContentClasses","switchBackgroundColor","getCurrentBackgroundColor","jsx","jsxs"],"mappings":";;;;;AA8EA,MAAMA,IAASC,EAAW,CAACC,GAAuCC,MAAmC;AACjG,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgBF,IAAW,UAAU;AAAA,IACrC,UAAAG,IAAWC;AAAA,IACX,GAAGC;AAAA,EAAA,IACHd,GAEEe,IAAe,CAACC,MAAyC;AAC3D,IAAAJ,EAASI,EAAM,OAAO,OAAO;AAAA,EACjC,GAEMC,IAAkBb,KAAeI,GACjCU,IAAgBd,KAAe,CAACI,GAEhCW,IAAgBC,EAAW,gBAAgBV,CAAS,GAEpDW,IAAqBD;AAAA,IACvB;AAAA,IACAd,KAAY;AAAA,IACZK,KAAiB,kBAAkBA,CAAa;AAAA,EAAA,GAG9CW,IAAuBF,EAAW,gBAAgB,GAElDG,IAAwBC,EAA0BjB,CAAK;AAE7D,SACI,gBAAAkB,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGa,GAAgB,WAAWK,GAC1C,UAAA,gBAAAO,EAAC,SAAA,EAAM,WAAWL,GACd,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAUV;AAAA,QACV,SAAAZ;AAAA,QACA,MAAK;AAAA,QACL,IAAID;AAAA,QAEJ,WAAU;AAAA,QACV,UAAAI;AAAA,MAAA;AAAA,MAFKJ;AAAA,IAAA;AAAA,IAIT,gBAAAwB,EAAC,SAAI,WAAWJ,GAAsB,OAAO,EAAE,OAAOC,GAAuB,UAAAlB,EAAA,GACxE,UAAA;AAAA,MAAAY,sBACI,OAAA,EAAI,WAAU,eAAc,WAASb,GAAa,YAAUI,EAAA,CAAc,IAE3EU,uBAAkB,OAAA,EAAI,WAAU,eAAc,WAASd,GAAa,YAAUA,GAAa;AAAA,MAE/F,gBAAAqB,EAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,IAAA,GACnC;AAAA,IAEChB,KAAYA;AAAA,EAAA,EAAA,CACjB,EAAA,CACJ;AAER,CAAC;AAKDX,EAAO,sBAAsB;AAC7BA,EAAO,uBAAuB;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState, type ChangeEvent, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { getCurrentBackgroundColor, type CurrentColor } from '../../utils/currentColors';\n\nconst DEFAULT_MIN_WIDTH = 40;\nconst TEXT_HORIZONTAL_PADDING = 28;\n\ntype UseAutoMinWidthParams = {\n    enabledText?: string;\n    disabledText?: string;\n    minWidth?: number;\n    autoMinWidth: boolean;\n};\n\nconst useAutoMinWidth = ({ enabledText, disabledText, minWidth, autoMinWidth }: UseAutoMinWidthParams) => {\n    const textMeasureRef = useRef<HTMLSpanElement>(null);\n    const [measuredMinWidth, setMeasuredMinWidth] = useState<number>(DEFAULT_MIN_WIDTH);\n\n    const isMinWidthSet = minWidth !== undefined;\n    const textsToMeasure = [enabledText, disabledText].filter((text): text is string => Boolean(text));\n    const longestText = textsToMeasure.reduce(\n        (previous, current) => (current.length > previous.length ? current : previous),\n        ''\n    );\n    const hasAnyText = Boolean(enabledText || disabledText);\n    const shouldUseAutoTextWidth = !isMinWidthSet && autoMinWidth;\n\n    const computedMinWidth = isMinWidthSet\n        ? minWidth\n        : shouldUseAutoTextWidth\n          ? measuredMinWidth\n          : hasAnyText\n            ? undefined\n            : DEFAULT_MIN_WIDTH;\n\n    useLayoutEffect(() => {\n        if (!shouldUseAutoTextWidth) {\n            return;\n        }\n\n        if (!longestText) {\n            setMeasuredMinWidth(DEFAULT_MIN_WIDTH);\n            return;\n        }\n\n        const measuredTextWidth = textMeasureRef.current?.offsetWidth ?? 0;\n        const derivedWidth = Math.ceil(measuredTextWidth) + TEXT_HORIZONTAL_PADDING;\n        setMeasuredMinWidth(Math.max(DEFAULT_MIN_WIDTH, derivedWidth));\n    }, [longestText, shouldUseAutoTextWidth]);\n\n    return { computedMinWidth, longestText, shouldUseAutoTextWidth, textMeasureRef };\n};\n\nexport type SwitchProps = {\n    /**\n     * Optional key that is used as key and as the id on the internal input.\n     */\n    keyName?: string;\n\n    /**\n     * Callback function triggered when clicking the button.\n     */\n    onChange?: (toggleState: boolean) => void;\n\n    /**\n     * Set active / inactive state.\n     *\n     * @default false\n     */\n    checked?: boolean;\n\n    /**\n     * Defines the color of the switch.\n     *\n     * Possible values are:\n     *\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     *\n     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * The min-width of the switch.\n     *\n     * If not set, the default min-width is `40`.\n     */\n    minWidth?: number;\n\n    /**\n     * Controls automatic text-based min-width behavior when `minWidth` is not set.\n     * Set to `true` to keep the width at the longer one of `enabledText` and `disabledText`.\n     *\n     * @default false\n     */\n    autoMinWidth?: boolean;\n\n    /**\n     * Disables the component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The text used for the ON state.\n     */\n    enabledText?: string;\n\n    /**\n     * The text used for the OFF state.\n     */\n    disabledText?: string;\n\n    /**\n     * Defines the position of the switch label.\n     * Defaults to `'right'` when children are present.\n     *\n     * Possible values are `'left'` and `'right'`.\n     *\n     * @default 'right'\n     */\n    labelPosition?: 'left' | 'right';\n\n    /**\n     * Use this flag if you want to have custom text styles.\n     *\n     * @default false\n     */\n    customTextStyle?: boolean;\n\n    /**\n     * Additional class names added to the SVG element.\n     */\n    className?: string;\n};\n\nconst Switch = forwardRef((props: PropsWithChildren<SwitchProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        keyName,\n        checked = false,\n        enabledText,\n        minWidth,\n        autoMinWidth = false,\n        disabled = false,\n        color = 'primary',\n        disabledText,\n        children,\n        className = '',\n        labelPosition = children ? 'right' : undefined,\n        onChange = noop,\n        customTextStyle = false,\n        ...remainingProps\n    } = props;\n\n    const { computedMinWidth, longestText, shouldUseAutoTextWidth, textMeasureRef } = useAutoMinWidth({\n        enabledText,\n        disabledText,\n        minWidth,\n        autoMinWidth,\n    });\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange(event.target.checked);\n    };\n\n    const hasMultipleText = Boolean(enabledText && disabledText);\n    const hasSingleText = Boolean(enabledText && !disabledText);\n\n    const switchClasses = classNames('uikit-switch', className);\n\n    const switchLabelClasses = classNames(\n        'switch-label',\n        switchClasses,\n        disabled && 'cursor-not-allowed',\n        labelPosition && `label-position-${labelPosition}`,\n        labelPosition === 'left' && 'display-inline-flex height-20'\n    );\n\n    const switchContentClasses = classNames('switch-content');\n\n    const switchBackgroundColor = getCurrentBackgroundColor(color);\n\n    return (\n        <div ref={ref} {...remainingProps} className={switchClasses}>\n            <label className={switchLabelClasses}>\n                {shouldUseAutoTextWidth && longestText && (\n                    <span ref={textMeasureRef} className='switch-text-measure' aria-hidden='true'>\n                        {longestText}\n                    </span>\n                )}\n                <input\n                    onChange={handleChange}\n                    checked={checked}\n                    type='checkbox'\n                    id={keyName}\n                    key={keyName}\n                    className='switch-input'\n                    disabled={disabled}\n                />\n                <div\n                    className={switchContentClasses}\n                    style={{ color: switchBackgroundColor, minWidth: computedMinWidth }}\n                >\n                    {hasMultipleText ? (\n                        <div className='switch-text' data-on={enabledText} data-off={disabledText} />\n                    ) : (\n                        hasSingleText && <div className='switch-text' data-on={enabledText} data-off={enabledText} />\n                    )}\n                    <div className='switch-handle' />\n                </div>\n\n                {children && (\n                    <div\n                        className={classNames(\n                            'switch-text-wrapper',\n                            'user-select-none',\n                            customTextStyle ? '' : 'padding-top-1'\n                        )}\n                    >\n                        {children}\n                    </div>\n                )}\n            </label>\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {\n    LABEL_POSITION_LEFT: 'left';\n    LABEL_POSITION_RIGHT: 'right';\n};\n\nSwitch.LABEL_POSITION_LEFT = 'left' as const;\nSwitch.LABEL_POSITION_RIGHT = 'right' as const;\n\nexport default Switch;\n"],"names":["DEFAULT_MIN_WIDTH","TEXT_HORIZONTAL_PADDING","useAutoMinWidth","enabledText","disabledText","minWidth","autoMinWidth","textMeasureRef","useRef","measuredMinWidth","setMeasuredMinWidth","useState","isMinWidthSet","longestText","text","previous","current","hasAnyText","shouldUseAutoTextWidth","computedMinWidth","useLayoutEffect","measuredTextWidth","derivedWidth","Switch","forwardRef","props","ref","keyName","checked","disabled","color","children","className","labelPosition","onChange","noop","customTextStyle","remainingProps","handleChange","event","hasMultipleText","hasSingleText","switchClasses","classNames","switchLabelClasses","switchContentClasses","switchBackgroundColor","getCurrentBackgroundColor","jsx","jsxs"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IACpBC,IAA0B,IAS1BC,IAAkB,CAAC,EAAE,aAAAC,GAAa,cAAAC,GAAc,UAAAC,GAAU,cAAAC,QAA0C;AACtG,QAAMC,IAAiBC,EAAwB,IAAI,GAC7C,CAACC,GAAkBC,CAAmB,IAAIC,EAAiBX,CAAiB,GAE5EY,IAAgBP,MAAa,QAE7BQ,IADiB,CAACV,GAAaC,CAAY,EAAE,OAAO,CAACU,MAAyB,EAAQA,CAAK,EAC9D;AAAA,IAC/B,CAACC,GAAUC,MAAaA,EAAQ,SAASD,EAAS,SAASC,IAAUD;AAAA,IACrE;AAAA,EAAA,GAEEE,IAAa,GAAQd,KAAeC,IACpCc,IAAyB,CAACN,KAAiBN,GAE3Ca,IAAmBP,IACnBP,IACAa,IACET,IACAQ,IACE,SACAjB;AAEV,SAAAoB,EAAgB,MAAM;AAClB,QAAI,CAACF;AACD;AAGJ,QAAI,CAACL,GAAa;AACd,MAAAH,EAAoBV,CAAiB;AACrC;AAAA,IACJ;AAEA,UAAMqB,IAAoBd,EAAe,SAAS,eAAe,GAC3De,IAAe,KAAK,KAAKD,CAAiB,IAAIpB;AACpD,IAAAS,EAAoB,KAAK,IAAIV,GAAmBsB,CAAY,CAAC;AAAA,EACjE,GAAG,CAACT,GAAaK,CAAsB,CAAC,GAEjC,EAAE,kBAAAC,GAAkB,aAAAN,GAAa,wBAAAK,GAAwB,gBAAAX,EAAA;AACpE,GA2FMgB,IAASC,EAAW,CAACC,GAAuCC,MAAmC;AACjG,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,aAAAzB;AAAA,IACA,UAAAE;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,UAAAuB,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,cAAA1B;AAAA,IACA,UAAA2B;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgBF,IAAW,UAAU;AAAA,IACrC,UAAAG,IAAWC;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,GAAGC;AAAA,EAAA,IACHZ,GAEE,EAAE,kBAAAN,GAAkB,aAAAN,GAAa,wBAAAK,GAAwB,gBAAAX,EAAA,IAAmBL,EAAgB;AAAA,IAC9F,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,CACH,GAEKgC,IAAe,CAACC,MAAyC;AAC3D,IAAAL,EAASK,EAAM,OAAO,OAAO;AAAA,EACjC,GAEMC,IAAkB,GAAQrC,KAAeC,IACzCqC,IAAgB,GAAQtC,KAAe,CAACC,IAExCsC,IAAgBC,EAAW,gBAAgBX,CAAS,GAEpDY,IAAqBD;AAAA,IACvB;AAAA,IACAD;AAAA,IACAb,KAAY;AAAA,IACZI,KAAiB,kBAAkBA,CAAa;AAAA,IAChDA,MAAkB,UAAU;AAAA,EAAA,GAG1BY,IAAuBF,EAAW,gBAAgB,GAElDG,IAAwBC,EAA0BjB,CAAK;AAE7D,SACI,gBAAAkB,EAAC,OAAA,EAAI,KAAAtB,GAAW,GAAGW,GAAgB,WAAWK,GAC1C,UAAA,gBAAAO,EAAC,SAAA,EAAM,WAAWL,GACb,UAAA;AAAA,IAAA1B,KAA0BL,uBACtB,QAAA,EAAK,KAAKN,GAAgB,WAAU,uBAAsB,eAAY,QAClE,UAAAM,EAAA,CACL;AAAA,IAEJ,gBAAAmC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAUV;AAAA,QACV,SAAAV;AAAA,QACA,MAAK;AAAA,QACL,IAAID;AAAA,QAEJ,WAAU;AAAA,QACV,UAAAE;AAAA,MAAA;AAAA,MAFKF;AAAA,IAAA;AAAA,IAIT,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWJ;AAAA,QACX,OAAO,EAAE,OAAOC,GAAuB,UAAU3B,EAAA;AAAA,QAEhD,UAAA;AAAA,UAAAqB,sBACI,OAAA,EAAI,WAAU,eAAc,WAASrC,GAAa,YAAUC,EAAA,CAAc,IAE3EqC,uBAAkB,OAAA,EAAI,WAAU,eAAc,WAAStC,GAAa,YAAUA,GAAa;AAAA,UAE/F,gBAAA6C,EAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGlCjB,KACG,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWL;AAAA,UACP;AAAA,UACA;AAAA,UACAP,IAAkB,KAAK;AAAA,QAAA;AAAA,QAG1B,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CAER,EAAA,CACJ;AAER,CAAC;AAKDR,EAAO,sBAAsB;AAC7BA,EAAO,uBAAuB;"}

package/components/table/TableCardsSorting.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { useState as c } from "react";
-import f from "classnames";
-import { noop as y } from "es-toolkit/compat";
+import { noop as f } from "es-toolkit/compat";
+import y from "../../utils/classNames.js";
 import S from "../selects/Select.js";
 import i from "../button/ToggleButton.js";
 const T = (m) => {
@@ -9,13 +9,13 @@ const T = (m) => {
     sortName: d,
     sortOrder: p = "asc",
     selectOptions: s,
-    onSortChange: a = y,
+    onSortChange: a = f,
     className: e
   } = m, [g, N] = c(d), [r, b] = c(p), l = (o) => {
     b(o), a(g, o);
   }, h = (o) => {
     N(o), a(o, r);
-  }, u = f("table-toolbar-cards-sorting", "btn-toolbar", e && e);
+  }, u = y("table-toolbar-cards-sorting", "btn-toolbar", e && e);
   return /* @__PURE__ */ n("div", { className: u, children: [
     /* @__PURE__ */ n("div", { className: "btn-group margin-left-0", children: [
       /* @__PURE__ */ t(

package/components/table/TableCardsSorting.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const {\n        sortName: controlledSortName,\n        sortOrder: controlledSortOrder = 'asc',\n        selectOptions,\n        onSortChange = noop,\n        className,\n    } = props;\n\n    const [sortName, setSortName] = useState(controlledSortName);\n    const [sortOrder, setSortOrder] = useState(controlledSortOrder);\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        setSortOrder(newSortOrder);\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        setSortName(newSortName);\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","controlledSortName","controlledSortOrder","selectOptions","onSortChange","noop","className","sortName","setSortName","useState","sortOrder","setSortOrder","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;;AA8DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAUC;AAAA,IACV,WAAWC,IAAsB;AAAA,IACjC,eAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,WAAAC;AAAA,EAAA,IACAN,GAEE,CAACO,GAAUC,CAAW,IAAIC,EAASR,CAAkB,GACrD,CAACS,GAAWC,CAAY,IAAIF,EAASP,CAAmB,GAExDU,IAAkB,CAACC,MAAiC;AACtD,IAAAF,EAAaE,CAAY,GACzBT,EAAaG,GAAUM,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAP,EAAYO,CAAW,GACvBX,EAAaW,GAAaL,CAAS;AAAA,EACvC,GAEMM,IAAoBC,EAAW,+BAA+B,eAAeX,KAAaA,CAAS;AAEzG,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAEChB,EAAc,UACX,gBAAAgB,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASlB,GAAe,UAAU,CAAAmB,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"TableCardsSorting.js","sources":["../../../src/components/table/TableCardsSorting.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport Select from '../selects/Select';\nimport ToggleButton from '../button/ToggleButton';\n\ntype TableCardsSortingOption = {\n    /**\n     * ID to use for the select option.\n     */\n    id: string;\n\n    /**\n     * Translated column label to be shown in the select.\n     */\n    label: string | React.ReactNode;\n\n    /**\n     * Defines the column which is currently sorted by.\n     */\n    selected?: boolean;\n\n    /**\n     * Defines if the column can be sorted.\n     *\n     * Hence, it will be disabled in the select.\n     */\n    disabled?: boolean;\n};\n\nexport type TableCardsSortingProps = {\n    /**\n     * \"Name\", \"Key\", or \"Id\" of the current sorted column.\n     */\n    sortName: string;\n\n    /**\n     * Defines the sort direction.\n     *\n     * @default 'asc'\n     */\n    sortOrder: 'asc' | 'desc';\n\n    /**\n     * List of objects for the column name select component.\n     */\n    selectOptions: TableCardsSortingOption[];\n\n    /**\n     * Function that is called when the sort key or direction changes.\n     *\n     * @default noop\n     */\n    onSortChange?: (name: string, order: 'asc' | 'desc') => void;\n\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableCardsSorting = (props: TableCardsSortingProps) => {\n    const {\n        sortName: controlledSortName,\n        sortOrder: controlledSortOrder = 'asc',\n        selectOptions,\n        onSortChange = noop,\n        className,\n    } = props;\n\n    const [sortName, setSortName] = useState(controlledSortName);\n    const [sortOrder, setSortOrder] = useState(controlledSortOrder);\n\n    const updateSortOrder = (newSortOrder: 'asc' | 'desc') => {\n        setSortOrder(newSortOrder);\n        onSortChange(sortName, newSortOrder);\n    };\n\n    const updateSortName = (newSortName: string) => {\n        setSortName(newSortName);\n        onSortChange(newSortName, sortOrder);\n    };\n\n    const wrapperClassNames = classNames('table-toolbar-cards-sorting', 'btn-toolbar', className && className);\n\n    return (\n        <div className={wrapperClassNames}>\n            <div className='btn-group margin-left-0'>\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'asc'}\n                    onClick={() => updateSortOrder('asc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes-alt' />\n                </ToggleButton>\n\n                <ToggleButton\n                    className='btn-icon-only'\n                    active={sortOrder === 'desc'}\n                    onClick={() => updateSortOrder('desc')}\n                >\n                    <span className='rioglyph rioglyph-sort-by-attributes' />\n                </ToggleButton>\n            </div>\n\n            {selectOptions.length && (\n                <div className='btn-group'>\n                    <Select options={selectOptions} onChange={item => item && updateSortName(item.id)} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TableCardsSorting;\n"],"names":["TableCardsSorting","props","controlledSortName","controlledSortOrder","selectOptions","onSortChange","noop","className","sortName","setSortName","useState","sortOrder","setSortOrder","updateSortOrder","newSortOrder","updateSortName","newSortName","wrapperClassNames","classNames","jsxs","jsx","ToggleButton","Select","item"],"mappings":";;;;;;AA8DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,UAAUC;AAAA,IACV,WAAWC,IAAsB;AAAA,IACjC,eAAAC;AAAA,IACA,cAAAC,IAAeC;AAAA,IACf,WAAAC;AAAA,EAAA,IACAN,GAEE,CAACO,GAAUC,CAAW,IAAIC,EAASR,CAAkB,GACrD,CAACS,GAAWC,CAAY,IAAIF,EAASP,CAAmB,GAExDU,IAAkB,CAACC,MAAiC;AACtD,IAAAF,EAAaE,CAAY,GACzBT,EAAaG,GAAUM,CAAY;AAAA,EACvC,GAEMC,IAAiB,CAACC,MAAwB;AAC5C,IAAAP,EAAYO,CAAW,GACvBX,EAAaW,GAAaL,CAAS;AAAA,EACvC,GAEMM,IAAoBC,EAAW,+BAA+B,eAAeX,KAAaA,CAAS;AAEzG,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWF,GACZ,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,KAAK;AAAA,UAEpC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,2CAAA,CAA2C;AAAA,QAAA;AAAA,MAAA;AAAA,MAG/D,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,QAAQV,MAAc;AAAA,UACtB,SAAS,MAAME,EAAgB,MAAM;AAAA,UAErC,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,uCAAA,CAAuC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3D,GACJ;AAAA,IAEChB,EAAc,UACX,gBAAAgB,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAACE,GAAA,EAAO,SAASlB,GAAe,UAAU,CAAAmB,MAAQA,KAAQR,EAAeQ,EAAK,EAAE,GAAG,EAAA,CACvF;AAAA,EAAA,GAER;AAER;"}

package/components/table/TableHead.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import b from "classnames";
+import b from "../../utils/classNames.js";
 import l from "./SortArrows.js";
 const y = (o) => {
   const {

package/components/table/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../../src/components/table/TableHead.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport SortArrows from './SortArrows';\n\ntype TableHeadProps = {\n    /**\n     * The unique name of the column used as identifier\n     */\n    column?: string;\n\n    /**\n     * The label that shall be rendered in the table head next to the sorting icons.\n     */\n    label?: string | React.ReactElement;\n\n    /**\n     * The string title of a column used as native title attribute on the th tag.\n     */\n    title?: string;\n\n    /**\n     * The sorting key stored as data attribute for later usage for click events.\n     */\n    sortBy?: string;\n\n    /**\n     * The column sorting direction.\n     */\n    sortDir?: string;\n\n    /**\n     * The click handler for the th tag.\n     */\n    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;\n\n    /**\n     * Additional class names assigned to the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableHead = (props: PropsWithChildren<TableHeadProps>) => {\n    const {\n        column,\n        title,\n        label,\n        sortBy,\n        sortDir,\n        onClick = () => {},\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);\n\n    const labelString = typeof label === 'string' ? (label as string) : '';\n    const thTitle = title ?? labelString;\n\n    return (\n        <th\n            {...remainingProps}\n            className={tableHeadClassNames}\n            onClick={onClick}\n            data-field={column}\n            data-sortby={column}\n            title={thTitle}\n        >\n            {label && (\n                <span>\n                    {column !== undefined && sortBy === column ? <SortArrows direction={sortDir} /> : <SortArrows />}\n                    <span>{label}</span>\n                </span>\n            )}\n            {children}\n        </th>\n    );\n};\n\nexport default TableHead;\n"],"names":["TableHead","props","column","title","label","sortBy","sortDir","onClick","className","children","remainingProps","tableHeadClassNames","classNames","jsxs","jsx","SortArrows"],"mappings":";;;AA0CA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAsBC,EAAW,oBAAoB,eAAeJ,CAAS;AAKnF,SACI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGH;AAAA,MACJ,WAAWC;AAAA,MACX,SAAAJ;AAAA,MACA,cAAYL;AAAA,MACZ,eAAaA;AAAA,MACb,OATQC,MADI,OAAOC,KAAU,WAAYA,IAAmB;AAAA,MAY3D,UAAA;AAAA,QAAAA,uBACI,QAAA,EACI,UAAA;AAAA,UAAAF,MAAW,UAAaG,MAAWH,IAAS,gBAAAY,EAACC,KAAW,WAAWT,EAAA,CAAS,IAAK,gBAAAQ,EAACC,GAAA,CAAA,CAAW;AAAA,UAC9F,gBAAAD,EAAC,UAAM,UAAAV,EAAA,CAAM;AAAA,QAAA,GACjB;AAAA,QAEHK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TableHead.js","sources":["../../../src/components/table/TableHead.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SortArrows from './SortArrows';\n\ntype TableHeadProps = {\n    /**\n     * The unique name of the column used as identifier\n     */\n    column?: string;\n\n    /**\n     * The label that shall be rendered in the table head next to the sorting icons.\n     */\n    label?: string | React.ReactElement;\n\n    /**\n     * The string title of a column used as native title attribute on the th tag.\n     */\n    title?: string;\n\n    /**\n     * The sorting key stored as data attribute for later usage for click events.\n     */\n    sortBy?: string;\n\n    /**\n     * The column sorting direction.\n     */\n    sortDir?: string;\n\n    /**\n     * The click handler for the th tag.\n     */\n    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;\n\n    /**\n     * Additional class names assigned to the wrapper element.\n     */\n    className?: string;\n};\n\nconst TableHead = (props: PropsWithChildren<TableHeadProps>) => {\n    const {\n        column,\n        title,\n        label,\n        sortBy,\n        sortDir,\n        onClick = () => {},\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);\n\n    const labelString = typeof label === 'string' ? (label as string) : '';\n    const thTitle = title ?? labelString;\n\n    return (\n        <th\n            {...remainingProps}\n            className={tableHeadClassNames}\n            onClick={onClick}\n            data-field={column}\n            data-sortby={column}\n            title={thTitle}\n        >\n            {label && (\n                <span>\n                    {column !== undefined && sortBy === column ? <SortArrows direction={sortDir} /> : <SortArrows />}\n                    <span>{label}</span>\n                </span>\n            )}\n            {children}\n        </th>\n    );\n};\n\nexport default TableHead;\n"],"names":["TableHead","props","column","title","label","sortBy","sortDir","onClick","className","children","remainingProps","tableHeadClassNames","classNames","jsxs","jsx","SortArrows"],"mappings":";;;AA0CA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAsBC,EAAW,oBAAoB,eAAeJ,CAAS;AAKnF,SACI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGH;AAAA,MACJ,WAAWC;AAAA,MACX,SAAAJ;AAAA,MACA,cAAYL;AAAA,MACZ,eAAaA;AAAA,MACb,OATQC,MADI,OAAOC,KAAU,WAAYA,IAAmB;AAAA,MAY3D,UAAA;AAAA,QAAAA,uBACI,QAAA,EACI,UAAA;AAAA,UAAAF,MAAW,UAAaG,MAAWH,IAAS,gBAAAY,EAACC,KAAW,WAAWT,EAAA,CAAS,IAAK,gBAAAQ,EAACC,GAAA,CAAA,CAAW;AAAA,UAC9F,gBAAAD,EAAC,UAAM,UAAAV,EAAA,CAAM;AAAA,QAAA,GACjB;AAAA,QAEHK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/table/TableSearch.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import l from "classnames";
+import l from "../../utils/classNames.js";
 import p from "../clearableInput/ClearableInput.js";
 const i = (r) => {
   const { className: s, ...e } = r;

package/components/table/TableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.js","sources":["../../../src/components/table/TableSearch.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type TableSearchProps = Omit<ClearableInputProps, 'className'> & {\n    /**\n     * Optional class names for the wrapper.\n     */\n    className?: string;\n};\n\nconst TableSearch = (props: TableSearchProps) => {\n    const { className, ...remainingProps } = props;\n\n    return (\n        <div className={classNames('table-toolbar-search', 'input-group', className)}>\n            <span className='input-group-addon'>\n                <span className='rioglyph rioglyph-search' />\n            </span>\n            <ClearableInput {...remainingProps} />\n        </div>\n    );\n};\n\nexport default TableSearch;\n"],"names":["TableSearch","props","className","remainingProps","classNames","jsx","ClearableInput"],"mappings":";;;AAWA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF;AAEzC,2BACK,OAAA,EAAI,WAAWG,EAAW,wBAAwB,eAAeF,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAG,EAAC,UAAK,WAAU,qBACZ,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAgB,GAAGH,EAAA,CAAgB;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"TableSearch.js","sources":["../../../src/components/table/TableSearch.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport ClearableInput, { type ClearableInputProps } from '../clearableInput/ClearableInput';\n\nexport type TableSearchProps = Omit<ClearableInputProps, 'className'> & {\n    /**\n     * Optional class names for the wrapper.\n     */\n    className?: string;\n};\n\nconst TableSearch = (props: TableSearchProps) => {\n    const { className, ...remainingProps } = props;\n\n    return (\n        <div className={classNames('table-toolbar-search', 'input-group', className)}>\n            <span className='input-group-addon'>\n                <span className='rioglyph rioglyph-search' />\n            </span>\n            <ClearableInput {...remainingProps} />\n        </div>\n    );\n};\n\nexport default TableSearch;\n"],"names":["TableSearch","props","className","remainingProps","classNames","jsx","ClearableInput"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF;AAEzC,2BACK,OAAA,EAAI,WAAWG,EAAW,wBAAwB,eAAeF,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAG,EAAC,UAAK,WAAU,qBACZ,4BAAC,QAAA,EAAK,WAAU,4BAA2B,EAAA,CAC/C;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAgB,GAAGH,EAAA,CAAgB;AAAA,EAAA,GACxC;AAER;"}

package/components/table/TableSettingsColumnButtons.d.ts

@@ -1,4 +1,4 @@
-import { TableColumnDetails } from './TableSettingsDialog.types';
+import { TableColumnDetails } from './TableSettingsDialog';
 export type TableSettingsColumnButtonsProps = {
     column: string;
     index: number;

package/components/table/TableSettingsColumnButtons.js

@@ -1,6 +1,6 @@
 import { jsxs as C, jsx as o } from "react/jsx-runtime";
-import e from "classnames";
 import { noop as r } from "es-toolkit/compat";
+import e from "../../utils/classNames.js";
 const D = (c) => {
   const {
     column: n = "",