@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/statsWidget/StatsWidgetNumber.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import n from "classnames";
+import n from "../../utils/classNames.js";
 const b = (l) => {
   const { value: r = 0, total: e, label: a, className: i, clickable: c = !1, onClick: m = () => {
-  }, ...d } = l, o = n("StatsWidgetNumber", { "cursor-pointer": c }, i);
+  }, ...d } = l, o = n("StatsWidgetNumber", c && "cursor-pointer", i);
   return /* @__PURE__ */ t("div", { ...d, onClick: m, className: o, children: [
     /* @__PURE__ */ t("div", { className: "StatsWidgetNumber-counter", children: [
       /* @__PURE__ */ s("div", { className: "StatsWidgetNumber-value", children: r }),

package/components/statsWidget/StatsWidgetNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown below the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const { value = 0, total, label, className, clickable = false, onClick = () => {}, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            <div className='StatsWidgetNumber-counter'>\n                <div className='StatsWidgetNumber-value'>{value}</div>\n                {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n            </div>\n            {label && <div className='StatsWidgetNumber-label'>{label}</div>}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","className","clickable","onClick","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAqCA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,OAAAC,IAAQ,GAAG,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,IAAY,IAAO,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,GAAGC,EAAA,IAAmBP,GAEnGQ,IAAiBC,EAAW,qBAAqB,EAAE,kBAAkBJ,EAAA,GAAaD,CAAS;AAEjG,2BACK,OAAA,EAAK,GAAGG,GAAgB,SAAAD,GAAkB,WAAWE,GAClD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,OAC9CC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,IAAA,GAC/E;AAAA,IACCC,KAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAR,EAAA,CAAM;AAAA,EAAA,GAC9D;AAER;"}
+{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     *\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown below the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const { value = 0, total, label, className, clickable = false, onClick = () => {}, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidgetNumber', clickable && 'cursor-pointer', className);\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            <div className='StatsWidgetNumber-counter'>\n                <div className='StatsWidgetNumber-value'>{value}</div>\n                {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n            </div>\n            {label && <div className='StatsWidgetNumber-label'>{label}</div>}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","className","clickable","onClick","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAwCA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,OAAAC,IAAQ,GAAG,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,IAAY,IAAO,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,GAAGC,EAAA,IAAmBP,GAEnGQ,IAAiBC,EAAW,qBAAqBJ,KAAa,kBAAkBD,CAAS;AAE/F,2BACK,OAAA,EAAK,GAAGG,GAAgB,SAAAD,GAAkB,WAAWE,GAClD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,OAC9CC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,IAAA,GAC/E;AAAA,IACCC,KAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAR,EAAA,CAAM;AAAA,EAAA,GAC9D;AAER;"}

package/components/statsWidget/StatsWidgetSpacer.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import o from "classnames";
+import o from "../../utils/classNames.js";
 const p = (s) => {
   const { className: a, ...t } = s, e = o("StatsWidget-body-column-spacer", a);
   return /* @__PURE__ */ r("div", { ...t, className: e });

package/components/statsWidget/StatsWidgetSpacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetSpacer.js","sources":["../../../src/components/statsWidget/StatsWidgetSpacer.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nexport type StatsWidgetSpacerProps = {\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetSpacer = (props: StatsWidgetSpacerProps) => {\n    const { className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body-column-spacer', className);\n\n    return <div {...remainingProps} className={wrapperClasses} />;\n};\n\nexport default StatsWidgetSpacer;\n"],"names":["StatsWidgetSpacer","props","className","remainingProps","wrapperClasses","classNames","jsx"],"mappings":";;AASA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF,GAEnCG,IAAiBC,EAAW,kCAAkCH,CAAS;AAE7E,SAAO,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAAgB;AAC/D;"}
+{"version":3,"file":"StatsWidgetSpacer.js","sources":["../../../src/components/statsWidget/StatsWidgetSpacer.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\n\nexport type StatsWidgetSpacerProps = {\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetSpacer = (props: StatsWidgetSpacerProps) => {\n    const { className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body-column-spacer', className);\n\n    return <div {...remainingProps} className={wrapperClasses} />;\n};\n\nexport default StatsWidgetSpacer;\n"],"names":["StatsWidgetSpacer","props","className","remainingProps","wrapperClasses","classNames","jsx"],"mappings":";;AASA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAmBF,GAEnCG,IAAiBC,EAAW,kCAAkCH,CAAS;AAE7E,SAAO,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAAgB;AAC/D;"}

package/components/statsWidget/StatsWidgets.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 const c = (s) => {
   const { children: a, className: r, ...t } = s, e = i("StatsWidget-wrapper", r);
   return /* @__PURE__ */ o("div", { ...t, className: e, children: a });

package/components/statsWidget/StatsWidgets.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgets.js","sources":["../../../src/components/statsWidget/StatsWidgets.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetsProps = ComponentProps<'div'> & {\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgets = (props: PropsWithChildren<StatsWidgetsProps>) => {\n    const { children, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-wrapper', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {children}\n        </div>\n    );\n};\n\nexport default StatsWidgets;\n"],"names":["StatsWidgets","props","children","className","remainingProps","wrapperClasses","classNames"],"mappings":";;AAUA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAAmBH,GAE7CI,IAAiBC,EAAW,uBAAuBH,CAAS;AAElE,2BACK,OAAA,EAAK,GAAGC,GAAgB,WAAWC,GAC/B,UAAAH,GACL;AAER;"}
+{"version":3,"file":"StatsWidgets.js","sources":["../../../src/components/statsWidget/StatsWidgets.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type StatsWidgetsProps = ComponentProps<'div'> & {\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgets = (props: PropsWithChildren<StatsWidgetsProps>) => {\n    const { children, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-wrapper', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {children}\n        </div>\n    );\n};\n\nexport default StatsWidgets;\n"],"names":["StatsWidgets","props","children","className","remainingProps","wrapperClasses","classNames"],"mappings":";;AAWA,MAAMA,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAAmBH,GAE7CI,IAAiBC,EAAW,uBAAuBH,CAAS;AAElE,2BACK,OAAA,EAAK,GAAGC,GAAgB,WAAWC,GAC/B,UAAAH,GACL;AAER;"}

package/components/statusBar/StatusBar.d.ts

@@ -1,13 +1,96 @@
-import { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';
+export type StatusBarIcon = {
+    /**
+     * The class name of the icon i.e. "rioglyph-cruise-control".
+     */
+    name: string;
+    /**
+     * The position of the icon.
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * The text color class name for the icon.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the icon.
+     */
+    className?: string;
+};
+export type StatusBarLabel = {
+    /**
+     * The label content.
+     */
+    value: string | React.ReactNode;
+    /**
+     * The position of the icon.
+     *
+     * @default 'right'
+     */
+    alignment?: 'left' | 'top' | 'right';
+    /**
+     * The text weight of the label.
+     *
+     * @default 'bold'
+     */
+    weight?: 'light' | 'bold';
+    /**
+     * The text color class name for the label.
+     *
+     * @default 'text-color-gray'
+     */
+    color?: string;
+    /**
+     * Optional class names for the label.
+     */
+    className?: string;
+};
+export type StatusBarProgress = {
+    /**
+     * The percentage of the progress.
+     *
+     * @default 0
+     */
+    percentage?: number;
+    /**
+     * The color class name for the label.
+     *
+     * @default 'progress-bar-info'
+     */
+    color?: string;
+    /**
+     * Optional tooltip content to be shown for the progress bar.
+     */
+    tooltip?: string | React.ReactNode;
+    /**
+     * The position of the tooltip for the progress bar.
+     *
+     * @default 'top'
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The delay in milliseconds for when the tooltip is shown when hovering the progress bar.
+     *
+     * @default 50
+     */
+    tooltipDelay?: number;
+    /**
+     * Optional class names for the progress bar.
+     */
+    className?: string;
+};
 export type StatusBarProps = {
     /**
      * The icon to be shown next to the progress bar.
      */
-    icon?: StatusBarIconSpec;
+    icon?: StatusBarIcon;
     /**
      * The label to be shown for the progress bar.
      */
-    label?: StatusBarLabelSpec;
+    label?: StatusBarLabel;
     /**
      * List of progress bars which will be stacked in given order if there are multiple.
      */
@@ -15,6 +98,11 @@ export type StatusBarProps = {
     /**
      * The size of the icon and progress bar.
      *
+     * Possible values are:
+     *
+     * - `'small'`
+     * - `'large'`
+     *
      * @default 'small'
      */
     size?: 'small' | 'large';
@@ -29,5 +117,12 @@ export type StatusBarProps = {
      */
     className?: string;
 };
+export type IconWithDefaults = StatusBarIcon & {
+    alignment: 'left' | 'right';
+};
+export type LabelWithDefaults = StatusBarLabel & {
+    alignment: 'left' | 'top' | 'right';
+    weight: 'light' | 'bold';
+};
 declare const StatusBar: (props: StatusBarProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusBar;

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 { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';\nimport StatusBarIcon from './StatusBarIcon';\nimport StatusBarLabel from './StatusBarLabel';\n\nexport type StatusBarProps = {\n    /**\n     * The icon to be shown next to the progress bar.\n     */\n    icon?: StatusBarIconSpec;\n\n    /**\n     * The label to be shown for the progress bar.\n     */\n    label?: StatusBarLabelSpec;\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     * @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\ntype IconSpecWithDefaults = StatusBarIconSpec & { alignment: 'left' | 'right' };\ntype LabelSpecWithDefaults = StatusBarLabelSpec & { alignment: 'left' | 'top' | 'right'; weight: 'light' | 'bold' };\n\nconst iconDefaults: IconSpecWithDefaults = { name: '', alignment: LEFT };\nconst labelDefaults: LabelSpecWithDefaults = { 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: IconSpecWithDefaults = { ...iconDefaults, ...props.icon };\n    const label: LabelSpecWithDefaults = { ...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":";;;;;;AA+CA,MAAMA,IAAqC,EAAE,MAAM,IAAI,WAAWC,EAAA,GAC5DC,IAAuC,EAAE,OAAO,IAAI,WAAWC,GAAO,QAAQC,EAAA,GAE9EC,IAAY,CAACC,MAA0B;AACzC,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,MAAAC,IAAOC,GAAO,WAAAC,IAAY,IAAI,oBAAAC,IAAqB,GAAA,IAASL,GAG7EM,IAA6B,EAAE,GAAGZ,GAAc,GAAGM,EAAM,KAAA,GACzDO,IAA+B,EAAE,GAAGX,GAAe,GAAGI,EAAM,MAAA,GAE5DQ,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,6 +1,6 @@
-import { StatusBarIconSpec } from './StatusBar.types';
+import { StatusBarIcon as StatusBarIconIcon } from './StatusBar';
 type StatusBarIconProps = {
-    icon: StatusBarIconSpec;
+    icon: StatusBarIconIcon;
     size: 'small' | 'large';
 };
 declare const StatusBarIcon: (props: StatusBarIconProps) => import("react/jsx-runtime").JSX.Element | null;

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 { StatusBarIconSpec } from './StatusBar.types';\nimport { LARGE, LEFT, SMALL } from './StatusBarConstants';\n\ntype StatusBarIconProps = {\n    icon: StatusBarIconSpec;\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,6 +1,6 @@
-import { StatusBarLabelSpec } from './StatusBar.types';
+import { StatusBarLabel as StatusBarLabelLabel } from './StatusBar';
 type StatusBarLabelProps = {
-    label: StatusBarLabelSpec;
+    label: StatusBarLabelLabel;
     size: 'small' | 'large';
     className?: string;
 };

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 { StatusBarLabelSpec } from './StatusBar.types';\nimport { LARGE, LIGHT, SMALL, TOP } from './StatusBarConstants';\n\ntype StatusBarLabelProps = {\n    label: StatusBarLabelSpec;\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 './StatusBar.types';
+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 './StatusBar.types';\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.d.ts

@@ -37,7 +37,7 @@ export type SteppedProgressBarProps = {
     /**
      * The SteppedProgressBar Variant.
      *
-     * One of "circle", "rectangle" or "roadsign".
+     * One of `circle`, `rectangle` or `roadsign`.
      *
      * @default 'circle'
      */

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

@@ -18,13 +18,31 @@ export type SwitchProps = {
     /**
      * Defines the color of the switch.
      *
+     * Possible values are:
+     *
+     * - `'primary'`
+     * - `'secondary'`
+     * - `'info'`
+     * - `'success'`
+     * - `'warning'`
+     * - `'danger'`
+     *
      * @default 'primary'
      */
     color?: CurrentColor;
     /**
      * The min-width of the switch.
+     *
+     * 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.
      *
@@ -41,10 +59,19 @@ export type SwitchProps = {
     disabledText?: string;
     /**
      * Defines the position of the switch label.
+     * Defaults to `'right'` when children are present.
+     *
+     * Possible values are `'left'` and `'right'`.
      *
-     * 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.
      */