@rio-cloud/rio-uikit 2.0.1 → 2.1.0

package/components/spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export interface SpinnerProps {
+export type SpinnerProps = {
     /**
      * Defines whether the spinner is shown on bright or dark background.
      *
@@ -35,7 +35,7 @@ export interface SpinnerProps {
     /**
      * Flag to control the visibility of the spinner.
      *
-     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.
+     * Only relevant in combination with `isFullSized` or `isFullScreen`.
      *
      * @default false
      */
@@ -44,6 +44,6 @@ export interface SpinnerProps {
      * The text shown next to the spinner icon.
      */
     text?: string | React.ReactNode;
-}
+};
 declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport Fade from '../fade/Fade';\n\ntype BaseSpinnerProps = {\n    isInverse?: boolean;\n    isDoubleSized?: boolean;\n};\n\nconst BaseSpinner = (props: BaseSpinnerProps) => {\n    const { isInverse, isDoubleSized, ...remainingProps } = props;\n    const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });\n    return (\n        <div {...remainingProps} className={className}>\n            <div />\n            <div />\n            <div />\n            <div />\n        </div>\n    );\n};\n\nexport interface SpinnerProps {\n    /**\n     * Defines whether the spinner is shown on bright or dark background.\n     *\n     * @default false\n     */\n    isInverse?: boolean;\n\n    /**\n     * If set to \"true\" the spinner will be rendered twice as big.\n     *\n     * @default false\n     */\n    isDoubleSized?: boolean;\n\n    /**\n     * Renders the spinner as overlay in full-size mode.\n     *\n     * This will be relative to the parent container. Set the parent element to \"position-relative\" in this case.\n     *\n     * @default false\n     */\n    isFullSized?: boolean;\n\n    /**\n     * Renders the spinner in fullscreen mode, relative to the body.\n     *\n     * @default false\n     */\n    isFullScreen?: boolean;\n\n    /**\n     * Renders the spinner without centered wrapper.\n     *\n     * @default false\n     */\n    isInline?: boolean;\n\n    /**\n     * Flag to control the visibility of the spinner.\n     *\n     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.\n     *\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The text shown next to the spinner icon.\n     */\n    text?: string | React.ReactNode;\n}\n\nconst Spinner = (props: SpinnerProps) => {\n    const {\n        isInverse = false,\n        isFullSized = false,\n        isFullScreen = false,\n        isDoubleSized = false,\n        isInline = false,\n        show = false,\n        text,\n        ...remainingProps\n    } = props;\n\n    const baseSpinner = <BaseSpinner isDoubleSized={isDoubleSized} isInverse={isInverse} {...remainingProps} />;\n\n    if (isInline) {\n        return baseSpinner;\n    }\n\n    const classes = classNames(\n        ['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'],\n        { fullsized: isFullSized, fullscreen: isFullScreen }\n    );\n\n    const wrappedSpinner = (\n        <div className={classes}>\n            {baseSpinner}\n            {text && <div className='spinnerText'>{text}</div>}\n        </div>\n    );\n\n    if (isFullScreen || isFullSized) {\n        return (\n            <Fade show={show} duration={0.1}>\n                {wrappedSpinner}\n            </Fade>\n        );\n    }\n\n    return wrappedSpinner;\n};\n\nexport default Spinner;\n"],"names":["BaseSpinner","props","isInverse","isDoubleSized","remainingProps","className","classNames","jsxs","jsx","Spinner","isFullSized","isFullScreen","isInline","show","text","baseSpinner","classes","wrappedSpinner","Fade"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,eAAAC,GAAe,GAAGC,MAAmBH,GAClDI,IAAYC,EAAW,WAAW,EAAE,SAASJ,GAAW,QAAQC,GAAe;AACrF,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,CAAA,CAAI;AAAA,EAAA,GACT;AAER,GAuDMC,IAAU,CAACR,MAAwB;AACrC,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAQ,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,eAAAR,IAAgB;AAAA,IAChB,UAAAS,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,IACHH,GAEEc,IAAc,gBAAAP,EAACR,GAAA,EAAY,eAAAG,GAA8B,WAAAD,GAAuB,GAAGE,GAAgB;AAEzG,MAAIQ;AACA,WAAOG;AAGX,QAAMC,IAAUV;AAAA,IACZ,CAAC,kBAAkB,gBAAgB,0BAA0B,sBAAsB,eAAe;AAAA,IAClG,EAAE,WAAWI,GAAa,YAAYC,EAAA;AAAA,EAAa,GAGjDM,IACF,gBAAAV,EAAC,OAAA,EAAI,WAAWS,GACX,UAAA;AAAA,IAAAD;AAAA,IACAD,KAAQ,gBAAAN,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAM,EAAA,CAAK;AAAA,EAAA,GAChD;AAGJ,SAAIH,KAAgBD,IAEZ,gBAAAF,EAACU,GAAA,EAAK,MAAAL,GAAY,UAAU,KACvB,UAAAI,GACL,IAIDA;AACX;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\n\nimport Fade from '../fade/Fade';\n\ntype BaseSpinnerProps = {\n    isInverse?: boolean;\n    isDoubleSized?: boolean;\n};\n\nconst BaseSpinner = (props: BaseSpinnerProps) => {\n    const { isInverse, isDoubleSized, ...remainingProps } = props;\n    const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });\n    return (\n        <div {...remainingProps} className={className}>\n            <div />\n            <div />\n            <div />\n            <div />\n        </div>\n    );\n};\n\nexport type SpinnerProps = {\n    /**\n     * Defines whether the spinner is shown on bright or dark background.\n     *\n     * @default false\n     */\n    isInverse?: boolean;\n\n    /**\n     * If set to \"true\" the spinner will be rendered twice as big.\n     *\n     * @default false\n     */\n    isDoubleSized?: boolean;\n\n    /**\n     * Renders the spinner as overlay in full-size mode.\n     *\n     * This will be relative to the parent container. Set the parent element to \"position-relative\" in this case.\n     *\n     * @default false\n     */\n    isFullSized?: boolean;\n\n    /**\n     * Renders the spinner in fullscreen mode, relative to the body.\n     *\n     * @default false\n     */\n    isFullScreen?: boolean;\n\n    /**\n     * Renders the spinner without centered wrapper.\n     *\n     * @default false\n     */\n    isInline?: boolean;\n\n    /**\n     * Flag to control the visibility of the spinner.\n     *\n     * Only relevant in combination with `isFullSized` or `isFullScreen`.\n     *\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The text shown next to the spinner icon.\n     */\n    text?: string | React.ReactNode;\n};\n\nconst Spinner = (props: SpinnerProps) => {\n    const {\n        isInverse = false,\n        isFullSized = false,\n        isFullScreen = false,\n        isDoubleSized = false,\n        isInline = false,\n        show = false,\n        text,\n        ...remainingProps\n    } = props;\n\n    const baseSpinner = <BaseSpinner isDoubleSized={isDoubleSized} isInverse={isInverse} {...remainingProps} />;\n\n    if (isInline) {\n        return baseSpinner;\n    }\n\n    const classes = classNames(\n        ['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'],\n        { fullsized: isFullSized, fullscreen: isFullScreen }\n    );\n\n    const wrappedSpinner = (\n        <div className={classes}>\n            {baseSpinner}\n            {text && <div className='spinnerText'>{text}</div>}\n        </div>\n    );\n\n    if (isFullScreen || isFullSized) {\n        return (\n            <Fade show={show} duration={0.1}>\n                {wrappedSpinner}\n            </Fade>\n        );\n    }\n\n    return wrappedSpinner;\n};\n\nexport default Spinner;\n"],"names":["BaseSpinner","props","isInverse","isDoubleSized","remainingProps","className","classNames","jsxs","jsx","Spinner","isFullSized","isFullScreen","isInline","show","text","baseSpinner","classes","wrappedSpinner","Fade"],"mappings":";;;AAUA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,WAAAC,GAAW,eAAAC,GAAe,GAAGC,MAAmBH,GAClDI,IAAYC,EAAW,WAAW,EAAE,SAASJ,GAAW,QAAQC,GAAe;AACrF,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAAC,GACrB,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,EAAI;AAAA,sBACJ,OAAA,CAAA,CAAI;AAAA,EAAA,GACT;AAER,GAuDMC,IAAU,CAACR,MAAwB;AACrC,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAQ,IAAc;AAAA,IACd,cAAAC,IAAe;AAAA,IACf,eAAAR,IAAgB;AAAA,IAChB,UAAAS,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,IACHH,GAEEc,IAAc,gBAAAP,EAACR,GAAA,EAAY,eAAAG,GAA8B,WAAAD,GAAuB,GAAGE,GAAgB;AAEzG,MAAIQ;AACA,WAAOG;AAGX,QAAMC,IAAUV;AAAA,IACZ,CAAC,kBAAkB,gBAAgB,0BAA0B,sBAAsB,eAAe;AAAA,IAClG,EAAE,WAAWI,GAAa,YAAYC,EAAA;AAAA,EAAa,GAGjDM,IACF,gBAAAV,EAAC,OAAA,EAAI,WAAWS,GACX,UAAA;AAAA,IAAAD;AAAA,IACAD,KAAQ,gBAAAN,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAM,EAAA,CAAK;AAAA,EAAA,GAChD;AAGJ,SAAIH,KAAgBD,IAEZ,gBAAAF,EAACU,GAAA,EAAK,MAAAL,GAAY,UAAU,KACvB,UAAAI,GACL,IAIDA;AACX;"}

package/components/states/BaseStateProps.d.ts

@@ -36,7 +36,7 @@ export type BaseStateProps = {
     /**
      * Defines whether to use 100% width or default width.
      *
-     * Note: Only to be used for special cases on the CustomState component.
+     * __Note:__ Only to be used for special cases on the CustomState component.
      *
      * @default false
      */
@@ -50,7 +50,11 @@ export type BaseStateProps = {
     /**
      * Defines where the panel is aligned.
      *
-     * Possible values are: 'left', 'center' and 'right'.
+     * Possible values are:
+     *
+     * - `'left'`
+     * - `'center'`
+     * - `'right'`
      *
      * @default 'center'
      */

package/components/states/StateIcon.d.ts

@@ -1,6 +1,19 @@
 export type StateIconProps = {
-    name?: string;
+    /**
+     * The name of the icon
+     */
+    name: string;
+    /**
+     * Optional class names for this icon.
+     *
+     * @default 'text-size-300pct'
+     */
     className?: string;
+    /**
+     * Optional color class name for the icon.
+     *
+     * @default 'text-color-light'
+     */
     color?: string;
 };
 declare const StateIcon: ({ name, color, className }: StateIconProps) => import("react/jsx-runtime").JSX.Element;

package/components/states/StateIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StateIcon.js","sources":["../../../src/components/states/StateIcon.tsx"],"sourcesContent":["export type StateIconProps = {\n    name?: string;\n    className?: string;\n    color?: string;\n};\n\nconst StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }: StateIconProps) => (\n    <span className={`rioglyph ${name} ${color} ${className}`} />\n);\n\nexport default StateIcon;\n"],"names":["StateIcon","name","color","className","jsx"],"mappings":";AAMA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,oBAAoB,WAAAC,IAAY,mBAAA,MAC/D,gBAAAC,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAI,IAAIC,CAAK,IAAIC,CAAS,GAAA,CAAI;"}
+{"version":3,"file":"StateIcon.js","sources":["../../../src/components/states/StateIcon.tsx"],"sourcesContent":["export type StateIconProps = {\n    /**\n     * The name of the icon\n     */\n    name: string;\n\n    /**\n     * Optional class names for this icon.\n     *\n     * @default 'text-size-300pct'\n     */\n    className?: string;\n\n    /**\n     * Optional color class name for the icon.\n     *\n     * @default 'text-color-light'\n     */\n    color?: string;\n};\n\nconst StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }: StateIconProps) => (\n    <span className={`rioglyph ${name} ${color} ${className}`} />\n);\n\nexport default StateIcon;\n"],"names":["StateIcon","name","color","className","jsx"],"mappings":";AAqBA,MAAMA,IAAY,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,oBAAoB,WAAAC,IAAY,mBAAA,MAC/D,gBAAAC,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAI,IAAIC,CAAK,IAAIC,CAAS,GAAA,CAAI;"}

package/components/statsWidget/StatsWidget.d.ts

@@ -9,6 +9,8 @@ export type StatsWidgetProps = ComponentProps<'div'> & {
     onFilterReset?: MouseEventHandler;
     /**
      * Defines whether a filter is active for this widget.
+     *
+     * @default false
      */
     hasFilter?: boolean;
     /**

package/components/statsWidget/StatsWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidget.js","sources":["../../../src/components/statsWidget/StatsWidget.tsx"],"sourcesContent":["import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport StatsWidgetHeader, { type StatsWidgetHeaderProps } from './StatsWidgetHeader';\nimport StatsWidgetBody, { type StatsWidgetBodyProps } from './StatsWidgetBody';\nimport StatsWidgetFooter, { type StatsWidgetFooterProps } from './StatsWidgetFooter';\n\nexport type StatsWidgetProps = ComponentProps<'div'> & {\n    /**\n     * Callback to reset the filter.\n     */\n    onFilterReset?: MouseEventHandler;\n\n    /**\n     * Defines whether a filter is active for this widget.\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\n// re-export these because they're not exposed on root directly\nexport type { StatsWidgetHeaderProps, StatsWidgetBodyProps, StatsWidgetFooterProps };\n\nconst StatsWidget = (props: PropsWithChildren<StatsWidgetProps>) => {\n    const { children, hasFilter = false, onFilterReset = () => {}, className, ...remainingProps } = props;\n    const wrapperClasses = classNames('StatsWidget', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {hasFilter && (\n                <span\n                    className={\n                        'bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2' +\n                        ' rounded-circle position-absolute top-15 right-15 display-block height-20 width-20' +\n                        ' cursor-pointer'\n                    }\n                    onClick={onFilterReset}\n                >\n                    <span className='rioglyph rioglyph-revert text-color-white text-size-12' />\n                </span>\n            )}\n            {children}\n        </div>\n    );\n};\n\nStatsWidget.Header = StatsWidgetHeader;\nStatsWidget.Body = StatsWidgetBody;\nStatsWidget.Footer = StatsWidgetFooter;\n\nexport default StatsWidget;\n"],"names":["StatsWidget","props","children","hasFilter","onFilterReset","className","remainingProps","wrapperClasses","classNames","jsxs","jsx","StatsWidgetHeader","StatsWidgetBody","StatsWidgetFooter"],"mappings":";;;;;AA2BA,MAAMA,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,eAAAC,IAAgB,MAAM;AAAA,EAAC,GAAG,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAC1FM,IAAiBC,EAAW,eAAeH,CAAS;AAE1D,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAJ,KACG,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAIJ,SAASN;AAAA,QAET,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhFR;AAAA,EAAA,GACL;AAER;AAEAF,EAAY,SAASW;AACrBX,EAAY,OAAOY;AACnBZ,EAAY,SAASa;"}
+{"version":3,"file":"StatsWidget.js","sources":["../../../src/components/statsWidget/StatsWidget.tsx"],"sourcesContent":["import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport StatsWidgetHeader, { type StatsWidgetHeaderProps } from './StatsWidgetHeader';\nimport StatsWidgetBody, { type StatsWidgetBodyProps } from './StatsWidgetBody';\nimport StatsWidgetFooter, { type StatsWidgetFooterProps } from './StatsWidgetFooter';\n\nexport type StatsWidgetProps = ComponentProps<'div'> & {\n    /**\n     * Callback to reset the filter.\n     */\n    onFilterReset?: MouseEventHandler;\n\n    /**\n     * Defines whether a filter is active for this widget.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\n// re-export these because they're not exposed on root directly\nexport type { StatsWidgetHeaderProps, StatsWidgetBodyProps, StatsWidgetFooterProps };\n\nconst StatsWidget = (props: PropsWithChildren<StatsWidgetProps>) => {\n    const { children, hasFilter = false, onFilterReset = () => {}, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {hasFilter && (\n                <span\n                    className={\n                        'bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2' +\n                        ' rounded-circle position-absolute top-15 right-15 display-block height-20 width-20' +\n                        ' cursor-pointer'\n                    }\n                    onClick={onFilterReset}\n                >\n                    <span className='rioglyph rioglyph-revert text-color-white text-size-12' />\n                </span>\n            )}\n            {children}\n        </div>\n    );\n};\n\nStatsWidget.Header = StatsWidgetHeader;\nStatsWidget.Body = StatsWidgetBody;\nStatsWidget.Footer = StatsWidgetFooter;\n\nexport default StatsWidget;\n"],"names":["StatsWidget","props","children","hasFilter","onFilterReset","className","remainingProps","wrapperClasses","classNames","jsxs","jsx","StatsWidgetHeader","StatsWidgetBody","StatsWidgetFooter"],"mappings":";;;;;AA6BA,MAAMA,IAAc,CAACC,MAA+C;AAChE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,eAAAC,IAAgB,MAAM;AAAA,EAAC,GAAG,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAE1FM,IAAiBC,EAAW,eAAeH,CAAS;AAE1D,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAJ,KACG,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAIJ,SAASN;AAAA,QAET,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhFR;AAAA,EAAA,GACL;AAER;AAEAF,EAAY,SAASW;AACrBX,EAAY,OAAOY;AACnBZ,EAAY,SAASa;"}

package/components/statsWidget/StatsWidgetBody.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 export type StatsWidgetBodyProps = {
     /**
      * Whether to use flex space-between for StatsWidgetNumbers.
+     *
      * @default false
      */
     fullWidth?: boolean;

package/components/statsWidget/StatsWidgetBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetBody.js","sources":["../../../src/components/statsWidget/StatsWidgetBody.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetBodyProps = {\n    /**\n     * Whether to use flex space-between for StatsWidgetNumbers.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetBody = (props: PropsWithChildren<StatsWidgetBodyProps>) => {\n    const { children, fullWidth = false, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body', fullWidth && 'full-width', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n            {children}\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n        </div>\n    );\n};\n\nexport default StatsWidgetBody;\n"],"names":["StatsWidgetBody","props","children","fullWidth","className","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAgBA,MAAMA,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAAmBJ,GAEhEK,IAAiBC,EAAW,oBAAoBJ,KAAa,cAAcC,CAAS;AAE1F,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAH,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,IACvEP;AAAA,IACAC,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,EAAA,GAC5E;AAER;"}
+{"version":3,"file":"StatsWidgetBody.js","sources":["../../../src/components/statsWidget/StatsWidgetBody.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type StatsWidgetBodyProps = {\n    /**\n     * Whether to use flex space-between for StatsWidgetNumbers.\n     *\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetBody = (props: PropsWithChildren<StatsWidgetBodyProps>) => {\n    const { children, fullWidth = false, className, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidget-body', fullWidth && 'full-width', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n            {children}\n            {fullWidth && <div className='StatsWidget-body-column-spacer invisible' />}\n        </div>\n    );\n};\n\nexport default StatsWidgetBody;\n"],"names":["StatsWidgetBody","props","children","fullWidth","className","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAiBA,MAAMA,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAAmBJ,GAEhEK,IAAiBC,EAAW,oBAAoBJ,KAAa,cAAcC,CAAS;AAE1F,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGH,GAAgB,WAAWC,GAC/B,UAAA;AAAA,IAAAH,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,IACvEP;AAAA,IACAC,KAAa,gBAAAM,EAAC,OAAA,EAAI,WAAU,2CAAA,CAA2C;AAAA,EAAA,GAC5E;AAER;"}

package/components/statsWidget/StatsWidgetNumber.d.ts

@@ -2,6 +2,7 @@ import { ReactNode, MouseEventHandler } from 'react';
 export type StatsWidgetNumberProps = {
     /**
      * The value to be shown.
+     *
      * @default 0
      */
     value: string | number | ReactNode;
@@ -15,6 +16,7 @@ export type StatsWidgetNumberProps = {
     label?: string | ReactNode;
     /**
      * Defines whether the number is clickable i.e. in combination with a filter.
+     *
      * @default false
      */
     clickable?: boolean;

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';\nimport classNames from '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', { '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":";;AAuCA,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;"}

package/components/statusBar/StatusBar.d.ts

@@ -1,33 +1,4 @@
-import { StatusBarIconSpec, StatusBarLabelSpec, StatusBarProgress } from './StatusBar.types';
-export type StatusBarProps = {
-    /**
-     * The icon to be shown next to the progress bar.
-     */
-    icon?: StatusBarIconSpec;
-    /**
-     * The label to be shown for the progress bar.
-     */
-    label?: StatusBarLabelSpec;
-    /**
-     * List of progress bars which will be stacked in given order if there are multiple.
-     */
-    progress?: StatusBarProgress[];
-    /**
-     * The size of the icon and progress bar.
-     *
-     * @default 'small'
-     */
-    size?: 'small' | 'large';
-    /**
-     * Uses a divider for multiple progress bars when defined.
-     *
-     * @default true
-     */
-    useProgressDivider?: boolean;
-    /**
-     * Optional class names for the wrapper element.
-     */
-    className?: string;
-};
+import { StatusBarProps } from './StatusBarProps';
+export type { StatusBarProps };
 declare const StatusBar: (props: StatusBarProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusBar;

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 '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;"}

package/components/statusBar/StatusBarIcon.d.ts

@@ -1,6 +1,6 @@
-import { StatusBarIconSpec } from './StatusBar.types';
+import { StatusBarIcon as StatusBarIconIcon } from './StatusBarProps';
 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.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 '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;"}

package/components/statusBar/StatusBarLabel.d.ts

@@ -1,6 +1,6 @@
-import { StatusBarLabelSpec } from './StatusBar.types';
+import { StatusBarLabel as StatusBarLabelLabel } from './StatusBarProps';
 type StatusBarLabelProps = {
-    label: StatusBarLabelSpec;
+    label: StatusBarLabelLabel;
     size: 'small' | 'large';
     className?: string;
 };

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 '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;"}

package/components/statusBar/StatusBarProgressBar.d.ts

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

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 '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;"}

package/components/statusBar/{StatusBar.types.d.ts → StatusBarProps.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type StatusBarIconSpec = {
+export type StatusBarIcon = {
     /**
      * The class name of the icon i.e. "rioglyph-cruise-control".
      */
@@ -21,7 +21,7 @@ export type StatusBarIconSpec = {
      */
     className?: string;
 };
-export type StatusBarLabelSpec = {
+export type StatusBarLabel = {
     /**
      * The label content.
      */
@@ -83,3 +83,45 @@ export type StatusBarProgress = {
      */
     className?: string;
 };
+export type StatusBarProps = {
+    /**
+     * The icon to be shown next to the progress bar.
+     */
+    icon?: StatusBarIcon;
+    /**
+     * The label to be shown for the progress bar.
+     */
+    label?: StatusBarLabel;
+    /**
+     * List of progress bars which will be stacked in given order if there are multiple.
+     */
+    progress?: StatusBarProgress[];
+    /**
+     * The size of the icon and progress bar.
+     *
+     * Possible values are:
+     *
+     * - `'small'`
+     * - `'large'`
+     *
+     * @default 'small'
+     */
+    size?: 'small' | 'large';
+    /**
+     * Uses a divider for multiple progress bars when defined.
+     *
+     * @default true
+     */
+    useProgressDivider?: boolean;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+export type IconWithDefaults = StatusBarIcon & {
+    alignment: 'left' | 'right';
+};
+export type LabelWithDefaults = StatusBarLabel & {
+    alignment: 'left' | 'top' | 'right';
+    weight: 'light' | 'bold';
+};

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.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';\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;"}

package/components/switch/Switch.d.ts

@@ -18,11 +18,22 @@ 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.
+     *
+     * @default 40
      */
     minWidth?: number;
     /**
@@ -41,8 +52,9 @@ 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'`.
      */
     labelPosition?: 'left' | 'right';
     /**

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     * @default 'primary'\n     */\n    color?: CurrentColor;\n\n    /**\n     * The min-width of the switch.\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     *\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":";;;;;AAkEA,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, 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;"}

package/components/table/SortArrowDown.d.ts

@@ -1,3 +1,3 @@
-export type SortArrowDownProps = {};
+export type SortArrowDownProps = Record<string, never>;
 declare const SortArrowDown: () => import("react/jsx-runtime").JSX.Element;
 export default SortArrowDown;

package/components/table/SortArrowDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortArrowDown.js","sources":["../../../src/components/table/SortArrowDown.tsx"],"sourcesContent":["export type SortArrowDownProps = {};\n\nconst SortArrowDown = () => <span className='sort-icon sort-desc' />;\n\nexport default SortArrowDown;\n"],"names":["SortArrowDown","jsx"],"mappings":";AAEA,MAAMA,IAAgB,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;"}
+{"version":3,"file":"SortArrowDown.js","sources":["../../../src/components/table/SortArrowDown.tsx"],"sourcesContent":["export type SortArrowDownProps = Record<string, never>;\n\nconst SortArrowDown = () => <span className='sort-icon sort-desc' />;\n\nexport default SortArrowDown;\n"],"names":["SortArrowDown","jsx"],"mappings":";AAEA,MAAMA,IAAgB,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;"}

package/components/table/SortArrowUp.d.ts

@@ -1,3 +1,3 @@
-export type SortArrowUpProps = {};
+export type SortArrowUpProps = Record<string, never>;
 declare const SortArrowUp: () => import("react/jsx-runtime").JSX.Element;
 export default SortArrowUp;

package/components/table/SortArrowUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortArrowUp.js","sources":["../../../src/components/table/SortArrowUp.tsx"],"sourcesContent":["export type SortArrowUpProps = {};\n\nconst SortArrowUp = () => <span className='sort-icon sort-asc' />;\n\nexport default SortArrowUp;\n"],"names":["SortArrowUp","jsx"],"mappings":";AAEA,MAAMA,IAAc,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;"}
+{"version":3,"file":"SortArrowUp.js","sources":["../../../src/components/table/SortArrowUp.tsx"],"sourcesContent":["export type SortArrowUpProps = Record<string, never>;\n\nconst SortArrowUp = () => <span className='sort-icon sort-asc' />;\n\nexport default SortArrowUp;\n"],"names":["SortArrowUp","jsx"],"mappings":";AAEA,MAAMA,IAAc,MAAM,gBAAAC,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;"}

package/components/table/TableSettingsDialog.d.ts

@@ -64,6 +64,11 @@ type TableSettingsDialogProps = {
      * The keys of this object are the column names / keys you use to identify a column.
      */
     columnsDetails?: TableColumnDetailsMap;
+    /**
+     * The label shown when the column width is unset, which means "auto".
+     *
+     * @default ''
+     */
     autoLabel?: string | React.ReactNode;
     /**
      * Text for the "apply" button. This button will not be shown when