@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/radiobutton/RadioCardGroup.js

@@ -0,0 +1,110 @@
+import { jsx as d, jsxs as b } from "react/jsx-runtime";
+import { createContext as P, useState as x, Children as j, isValidElement as v, cloneElement as B, useContext as L } from "react";
+import c from "../../utils/classNames.js";
+import S from "./RadioButton.js";
+const V = P(void 0), A = (o, t, l, s) => {
+  if (s === "stacked") {
+    const n = t === 0, a = t === l - 1;
+    return c(
+      "padding-15 border",
+      n && "rounded-top-left rounded-top-right",
+      !n && "margin-top--1",
+      a && "rounded-bottom-left rounded-bottom-right",
+      o && "border-color-highlight bg-highlight-decent z-index-1"
+    );
+  }
+  if (s === "stacked-horizontal") {
+    const n = t === 0, a = t === l - 1;
+    return c(
+      "padding-15 border",
+      n && "rounded-top-left rounded-bottom-left",
+      !n && "margin-left--1",
+      a && "rounded-top-right rounded-bottom-right",
+      o && "border-color-highlight bg-highlight-decent z-index-1"
+    );
+  }
+  return c("padding-15 border rounded", o && "border-color-highlight");
+}, N = (o) => {
+  const { value: t, disabled: l = !1, className: s, children: n, _itemIndex: a = 0, _itemsCount: u = 1, ...h } = o, r = L(V);
+  if (!r)
+    throw new Error("RadioCardItem must be used inside RadioCardGroup.");
+  const m = r.selectedValue === t;
+  return /* @__PURE__ */ d(
+    S,
+    {
+      ...h,
+      name: r.name,
+      value: t,
+      custom: !0,
+      checked: m,
+      onChange: (g) => r.onSelect(t, g),
+      disabled: l,
+      className: c(
+        A(m, a, u, r.variant),
+        r.focusedValue === t && !m && "border-color-gray",
+        r.cardClassName,
+        s
+      ),
+      onFocus: () => r.setFocusedValue(t),
+      onBlur: () => r.setFocusedValue(void 0),
+      children: /* @__PURE__ */ d("div", { className: "radio-text-wrapper display-flex", children: n })
+    }
+  );
+}, O = ({ className: o, ...t }) => /* @__PURE__ */ d("span", { className: c("radio-text", o), ...t }), K = (o) => {
+  const {
+    name: t,
+    options: l = [],
+    value: s,
+    defaultValue: n,
+    variant: a = "inline",
+    gap: u = "gap-15",
+    onChange: h,
+    className: r,
+    cardClassName: m,
+    children: g,
+    ...y
+  } = o, p = s != null, [I, R] = x(n), [k, F] = x(), _ = p ? s : I, z = (e) => (i) => {
+    p || R(e), h?.(e, i);
+  }, w = c(
+    a === "stacked" && "display-flex flex-column",
+    a === "stacked-horizontal" && "display-flex",
+    a === "inline" && "display-flex",
+    a === "inline" && u,
+    r
+  ), E = {
+    name: t,
+    selectedValue: _,
+    variant: a,
+    cardClassName: m,
+    focusedValue: k,
+    setFocusedValue: F,
+    onSelect: (e, i) => z(e)(i)
+  }, f = j.toArray(g).filter((e) => v(e)), C = f.map((e, i) => !v(e) || e.type !== N ? e : B(e, {
+    _itemIndex: i,
+    _itemsCount: f.length
+  })), G = l.map((e, i) => /* @__PURE__ */ b(
+    N,
+    {
+      value: e.value,
+      disabled: e.disabled,
+      className: e.className,
+      _itemIndex: i,
+      _itemsCount: l.length,
+      children: [
+        /* @__PURE__ */ d(O, {}),
+        /* @__PURE__ */ b("div", { className: "margin-left-5 margin-right-5", children: [
+          /* @__PURE__ */ d("div", { className: "text-medium", children: e.label }),
+          e.description && /* @__PURE__ */ d("div", { className: "text-color-dark", children: e.description })
+        ] })
+      ]
+    },
+    e.value
+  ));
+  return /* @__PURE__ */ d(V.Provider, { value: E, children: /* @__PURE__ */ d("div", { className: w, ...y, children: C.length > 0 ? C : G }) });
+};
+export {
+  O as RadioCardIndicator,
+  N as RadioCardItem,
+  K as default
+};
+//# sourceMappingURL=RadioCardGroup.js.map

package/components/radiobutton/RadioCardGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radiobutton/RadioCardGroup.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    createContext,\n    type ChangeEvent,\n    type HTMLProps,\n    isValidElement,\n    type ReactNode,\n    useContext,\n    useState,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\nimport RadioButton from './RadioButton';\n\nexport type RadioCardOption = {\n    /**\n     * Value passed to the underlying input element.\n     */\n    value: string;\n\n    /**\n     * Card headline content.\n     */\n    label: string | ReactNode;\n\n    /**\n     * Optional description shown below the card headline.\n     */\n    description?: string | ReactNode;\n\n    /**\n     * Disables the option.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to apply to a single card.\n     */\n    className?: string;\n};\n\nexport type RadioCardGroupProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /**\n     * Name used for all radios in this group.\n     */\n    name: string;\n\n    /**\n     * List of selectable options.\n     */\n    options?: RadioCardOption[];\n\n    /**\n     * Selected value (controlled usage).\n     */\n    value?: string;\n\n    /**\n     * Initially selected value (uncontrolled usage).\n     */\n    defaultValue?: string;\n\n    /**\n     * Card layout variant.\n     *\n     * Possible values are: `'inline'`, `'stacked'` or `'stacked-horizontal'`.\n     *\n     * @default 'inline'\n     */\n    variant?: 'inline' | 'stacked' | 'stacked-horizontal';\n\n    /**\n     * Gap utility class used for the inline layout.\n     *\n     * @default 'gap-15'\n     */\n    gap?: string;\n\n    /**\n     * Callback invoked when selection changes.\n     */\n    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Additional classes applied to each card.\n     */\n    cardClassName?: string;\n};\n\ntype RadioCardGroupContextValue = {\n    name: string;\n    selectedValue?: string;\n    variant: 'inline' | 'stacked' | 'stacked-horizontal';\n    cardClassName?: string;\n    focusedValue?: string;\n    setFocusedValue: (value?: string) => void;\n    onSelect: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst RadioCardGroupContext = createContext<RadioCardGroupContextValue | undefined>(undefined);\n\nconst getCardClassName = (\n    isSelected: boolean,\n    index: number,\n    optionsCount: number,\n    variant: 'inline' | 'stacked' | 'stacked-horizontal'\n) => {\n    if (variant === 'stacked') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-top-right',\n            !isFirst && 'margin-top--1',\n            isLast && 'rounded-bottom-left rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    if (variant === 'stacked-horizontal') {\n        const isFirst = index === 0;\n        const isLast = index === optionsCount - 1;\n\n        return classNames(\n            'padding-15 border',\n            isFirst && 'rounded-top-left rounded-bottom-left',\n            !isFirst && 'margin-left--1',\n            isLast && 'rounded-top-right rounded-bottom-right',\n            isSelected && 'border-color-highlight bg-highlight-decent z-index-1'\n        );\n    }\n\n    return classNames('padding-15 border rounded', isSelected && 'border-color-highlight');\n};\n\ntype RadioCardItemProps = Omit<HTMLProps<HTMLLabelElement>, 'onClick' | 'onChange' | 'onBlur' | 'onFocus'> & {\n    /**\n     * Value passed to the underlying radio input.\n     */\n    value: string;\n\n    /**\n     * Disables this radio card.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n};\n\ntype InternalRadioCardItemProps = {\n    _itemIndex?: number;\n    _itemsCount?: number;\n};\n\nexport const RadioCardItem = (props: RadioCardItemProps & InternalRadioCardItemProps) => {\n    const { value, disabled = false, className, children, _itemIndex = 0, _itemsCount = 1, ...remainingProps } = props;\n\n    const context = useContext(RadioCardGroupContext);\n\n    if (!context) {\n        throw new Error('RadioCardItem must be used inside RadioCardGroup.');\n    }\n\n    const isSelected = context.selectedValue === value;\n\n    return (\n        <RadioButton\n            {...remainingProps}\n            name={context.name}\n            value={value}\n            custom\n            checked={isSelected}\n            onChange={event => context.onSelect(value, event as ChangeEvent<HTMLInputElement>)}\n            disabled={disabled}\n            className={classNames(\n                getCardClassName(isSelected, _itemIndex, _itemsCount, context.variant),\n                context.focusedValue === value && !isSelected && 'border-color-gray',\n                context.cardClassName,\n                className\n            )}\n            onFocus={() => context.setFocusedValue(value)}\n            onBlur={() => context.setFocusedValue(undefined)}\n        >\n            <div className='radio-text-wrapper display-flex'>{children}</div>\n        </RadioButton>\n    );\n};\n\ntype RadioCardIndicatorProps = Omit<HTMLProps<HTMLSpanElement>, 'children'>;\n\nexport const RadioCardIndicator = ({ className, ...remainingProps }: RadioCardIndicatorProps) => (\n    <span className={classNames('radio-text', className)} {...remainingProps} />\n);\n\nconst RadioCardGroup = (props: RadioCardGroupProps) => {\n    const {\n        name,\n        options = [],\n        value,\n        defaultValue,\n        variant = 'inline',\n        gap = 'gap-15',\n        onChange,\n        className,\n        cardClassName,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = value !== null && value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [focusedValue, setFocusedValue] = useState<string>();\n\n    const selectedValue = isControlled ? value : internalValue;\n\n    const handleChange = (nextValue: string) => (event: ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) {\n            setInternalValue(nextValue);\n        }\n\n        onChange?.(nextValue, event);\n    };\n\n    const groupClassName = classNames(\n        variant === 'stacked' && 'display-flex flex-column',\n        variant === 'stacked-horizontal' && 'display-flex',\n        variant === 'inline' && 'display-flex',\n        variant === 'inline' && gap,\n        className\n    );\n\n    const contextValue: RadioCardGroupContextValue = {\n        name,\n        selectedValue,\n        variant,\n        cardClassName,\n        focusedValue,\n        setFocusedValue,\n        onSelect: (nextValue, event) => handleChange(nextValue)(event),\n    };\n\n    const itemChildren = Children.toArray(children).filter(child => isValidElement(child));\n    const mappedChildren = itemChildren.map((child, index) => {\n        if (!isValidElement(child) || child.type !== RadioCardItem) {\n            return child;\n        }\n\n        return cloneElement(child, {\n            _itemIndex: index,\n            _itemsCount: itemChildren.length,\n        });\n    });\n\n    const mappedOptions = options.map((option, index) => (\n        <RadioCardItem\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            className={option.className}\n            _itemIndex={index}\n            _itemsCount={options.length}\n        >\n            <RadioCardIndicator />\n            <div className='margin-left-5 margin-right-5'>\n                <div className='text-medium'>{option.label}</div>\n                {option.description && <div className='text-color-dark'>{option.description}</div>}\n            </div>\n        </RadioCardItem>\n    ));\n\n    return (\n        <RadioCardGroupContext.Provider value={contextValue}>\n            <div className={groupClassName} {...remainingProps}>\n                {mappedChildren.length > 0 ? mappedChildren : mappedOptions}\n            </div>\n        </RadioCardGroupContext.Provider>\n    );\n};\n\nexport default RadioCardGroup;\n"],"names":["RadioCardGroupContext","createContext","getCardClassName","isSelected","index","optionsCount","variant","isFirst","isLast","classNames","RadioCardItem","props","value","disabled","className","children","_itemIndex","_itemsCount","remainingProps","context","useContext","jsx","RadioButton","event","RadioCardIndicator","RadioCardGroup","name","options","defaultValue","gap","onChange","cardClassName","isControlled","internalValue","setInternalValue","useState","focusedValue","setFocusedValue","selectedValue","handleChange","nextValue","groupClassName","contextValue","itemChildren","Children","child","isValidElement","mappedChildren","cloneElement","mappedOptions","option","jsxs"],"mappings":"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"}

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -18,8 +18,6 @@ export type ReleaseNotesProps = {
      * Translated release notes of the following shape:
      *
      * @example
-     *
-     * ```tsx
      * {
      *     "0.1.2": {
      *         date: '23.07.2018',
@@ -32,7 +30,6 @@ export type ReleaseNotesProps = {
      *         ),
      *     }
      * }
-     * ```
      */
     releaseNotes: ReleaseNotesData;
 };

package/components/releaseNotes/ReleaseNotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     *\n     * ```tsx\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     * ```\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GAiCMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}
+{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GA8BMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}

package/components/resizer/Resizer.d.ts

@@ -10,19 +10,31 @@ export type ResizerProps = {
      * Defines where the resize handle is positioned relative to the element to resize.
      *
      * Possible values are:
-     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or
-     * `left`, `right`, `top`, `bottom`.
+     *
+     * - `Resizer.LEFT`,
+     * - `Resizer.RIGHT`,
+     * - `Resizer.TOP`,
+     * - `Resizer.BOTTOM`
+     * - `'left`',
+     * - `'right`',
+     * - `'top`',
+     * - `'bottom'`
      */
     position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
     /**
      * Defines on which axis to resize.
      *
      * Possible values are:
-     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.
+     *
+     * - `Resizer.HORIZONTAL`
+     * - `Resizer.VERTICAL`
+     * - `'x'`
+     * - `'y'`
      */
     direction?: typeof HORIZONTAL | typeof VERTICAL;
     /**
      * Callback when the resize starts, means when the handle is pressed. It returns the respective event.
+     *
      * @param event
      * @returns
      */
@@ -31,12 +43,14 @@ export type ResizerProps = {
      * Callback when the resize handle is moved. The function returns the distant between the last
      * position and the mouse movement. Means you can either subtract or add this diff to the elements
      * width you want to change.
+     *
      * @param diff
      * @returns
      */
     onResize?: (diff: number) => void;
     /**
      * Callback when the resize ends, means when the handle is released. It returns the respective event.
+     *
      * @param event
      * @returns
      */

package/components/resizer/Resizer.js

@@ -1,7 +1,7 @@
 import { jsx as N } from "react/jsx-runtime";
 import { useRef as m, useEffect as X } from "react";
-import Y from "classnames";
 import { noop as h } from "es-toolkit/function";
+import Y from "../../utils/classNames.js";
 const z = "x", D = "y", M = "left", O = "right", P = "top", S = "bottom", w = (i, s, n) => {
   if (!i)
     return;

package/components/resizer/Resizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or\n     * `left`, `right`, `top`, `bottom`.\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return () => {\n            removeListeners();\n        };\n    }, []);\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":"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"}
+{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.LEFT`,\n     * - `Resizer.RIGHT`,\n     * - `Resizer.TOP`,\n     * - `Resizer.BOTTOM`\n     * - `'left`',\n     * - `'right`',\n     * - `'top`',\n     * - `'bottom'`\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.HORIZONTAL`\n     * - `Resizer.VERTICAL`\n     * - `'x'`\n     * - `'y'`\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     *\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return () => {\n            removeListeners();\n        };\n    }, []);\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":"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"}

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as S } from "react/jsx-runtime";
 import { forwardRef as re, useState as c, useRef as ie, useEffect as le, Children as ce, cloneElement as me } from "react";
-import m from "classnames";
 import { noop as M, chunk as W, findIndex as ue } from "es-toolkit/compat";
 import { AnimatePresence as pe, motion as de } from "motion/react";
+import m from "../../utils/classNames.js";
 import ge from "../../hooks/useAfterMount.js";
 import fe from "../../hooks/useElementSize.js";
 import Ce from "../../hooks/usePrevious.js";

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveColumnStripe.js","sources":["../../../src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    forwardRef,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactHTML,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { chunk, findIndex, noop } from 'es-toolkit/compat';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\n\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\n\nconst MIN_WITH_THRESHOLD = 10;\n\nconst DEFAULT_TRANSITION = { duration: 0.2 };\n\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst COLUMN_ITEM_CLASSNAME = 'ColumnItem';\n\nconst variants: Variants = {\n    pageEnter: pageDirection => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getFirstColumnItem = (node: Element): HTMLElement => {\n    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {\n        return node as HTMLElement;\n    }\n    return getFirstColumnItem(node.children[0] as HTMLElement);\n};\n\nexport type ResponsiveColumnStripeProps = {\n    /**\n     * The minimum width in pixel of a single column.\n     *\n     * This value determines how many columns are shown per page depending on the parent width.\n     *\n     * @default 300\n     */\n    minColumnWith?: number;\n\n    /**\n     * The minimum amount of columns that should be shown per page.\n     *\n     * @default 1\n     */\n    minColumns?: number;\n\n    /**\n     * The maximum amount of columns that should be shown per page.\n     *\n     * @default 5\n     */\n    maxColumns?: number;\n\n    /**\n     * Defines whether the items on the last page are stretched out to fill the space.\n     *\n     * @default false\n     */\n    stretchLastItems?: boolean;\n\n    /**\n     * The page that shall be shown.\n     *\n     * This can be used to control the pages from outside.\n     *\n     * @default 0\n     */\n    activePage?: number;\n\n    /**\n     * The DOM element type of the wrapping column element.\n     *\n     * If you need a list, this might be set to \"ul\".\n     *\n     * @default 'div'\n     */\n    asType?: keyof ReactHTML;\n\n    /**\n     * Set to true to skip animating pages.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Callback function for when the previous page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Callback function for when the next page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the component wrapper element.\n     */\n    columnsWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the column wrapper element.\n     */\n    className?: string;\n};\n\nconst ResponsiveColumnStripe = forwardRef<HTMLDivElement, PropsWithChildren<ResponsiveColumnStripeProps>>(\n    (props, ref) => {\n        const {\n            minColumnWith = 300,\n            minColumns = 1,\n            maxColumns = 5,\n            stretchLastItems = true,\n            activePage = 0,\n            asType: ComponentType = 'div',\n            onPreviousClick = noop,\n            onNextClick = noop,\n            buttonClassName = '',\n            columnsWrapperClassName = '',\n            className = '',\n            disableAnimation = false,\n            children,\n            ...remainingProps\n        } = props;\n\n        const [currentPage, setCurrentPage] = useState(activePage);\n        const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);\n        const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n        const [isResizePage, setIsResizePage] = useState(false);\n\n        // The base for reacting on changing width of the wrapping element.\n        // It uses a ResizeObserver under the hood.\n        const columnWrapperRef = useRef<HTMLDivElement>(null);\n        const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n        const previousPage = usePrevious(currentPage);\n        const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;\n\n        useAfterMount(() => {\n            setEnableInitialAnimation(true);\n        });\n\n        // Update active page from outside to be used as controlled component\n        const [previousActivePage, setPreviousActivePage] = useState(activePage);\n        if (Number.isFinite(activePage) && activePage !== previousActivePage) {\n            setCurrentPage(activePage);\n            setPreviousActivePage(activePage);\n        }\n\n        const updatePageOnColumnsSizeChange = (firstItem: HTMLElement, perPage: number) => {\n            // Split children in page chunks\n            const pages = chunk(children as ReactElement[], perPage);\n\n            // find the currently rendered first item inside the chunks.\n            // The found chunk index is the new page to render.\n            // example of chunks => [['a', 'b', 'c'], ['d']]\n            const targetPage = findIndex(pages, (page: ReactElement[]) =>\n                page.some(pageItem => pageItem.key === firstItem.dataset['key'])\n            );\n\n            if (targetPage !== currentPage) {\n                setCurrentPage(targetPage);\n            }\n        };\n\n        // When the container size changes, adapt the amount of columns to be rendered according\n        // to the given min width of a single item. The new amount of columns also has to respect\n        // the lower and upper limit. When updating the amount, the current page hse to be updated as well.\n        useEffect(() => {\n            if (!columnWrapperRef.current) {\n                return;\n            }\n\n            const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n            if (!firstItem) {\n                return;\n            }\n\n            // Get the width of the first column to calculate how many columns fit in one page\n            // according to the given minWidth per column\n            const columnWidth = firstItem.getBoundingClientRect().width;\n\n            // Limit columns per page for given min and max values\n            const allowForLessColumns = columnsPerPage - 1 >= minColumns;\n            const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;\n\n            // The threshold is required to avoid jumping between bigger and smaller after the columns per page\n            // has changed, and it continues to resize\n            const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;\n            const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth!;\n\n            // During resizing, we don't want any animation\n            setIsResizePage(true);\n\n            if (goBigger) {\n                const newValue = columnsPerPage + 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n\n            if (goSmaller) {\n                const newValue = columnsPerPage - 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n        }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);\n\n        const handlePrevClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage - 1;\n            setCurrentPage(pageNumber);\n            onPreviousClick(pageNumber, columnsPerPage);\n        };\n\n        const handleNextClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage + 1;\n            setCurrentPage(pageNumber);\n            onNextClick(pageNumber, columnsPerPage);\n        };\n\n        if (!children) {\n            return null;\n        }\n\n        // Split the children/columns in chunks according to the current columns per page size\n        // and get the current page chunk for rendering\n        const columnsToDisplay = chunk(children as ReactElement[], columnsPerPage)[currentPage];\n\n        const showPageButtons = minColumns < (children as ReactElement[]).length;\n\n        const disablePreviousPage = currentPage === 0;\n        const disableNextPage = currentPage === Math.ceil((children as ReactElement[]).length / columnsPerPage) - 1;\n\n        const wrapperClassName = classNames(\n            'ResponsiveColumnStripe',\n            'display-flex align-items-center',\n            'overflow-hidden',\n            className\n        );\n\n        const baseButtonClassName = classNames(\n            'align-items-center',\n            'align-self-stretch',\n            'display-flex',\n            'hover-scale-105',\n            'hover-text-color-darkest',\n            'padding-10',\n            'cursor-pointer',\n            'text-color-darker',\n            'text-size-12'\n        );\n\n        const disabledButtonClassName = 'pointer-events-none opacity-30';\n\n        const previousButtonClassName = classNames(\n            'PreviousButton',\n            baseButtonClassName,\n            disablePreviousPage && disabledButtonClassName\n        );\n\n        const nextButtonClassName = classNames(\n            'NextButton',\n            baseButtonClassName,\n            disableNextPage && disabledButtonClassName\n        );\n\n        const mergedColumnsWrapperClassName = classNames(\n            'ColumnWrapper',\n            'flex-1-1',\n            'display-flex',\n            columnsWrapperClassName\n        );\n\n        const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';\n\n        // Use the given custom component type \"div\" or any other. Clone the children to inject certain\n        // properties that are required to stretch the items and deal with their size.\n        const columns = (\n            <ComponentType className={mergedColumnsWrapperClassName}>\n                {Children.map(columnsToDisplay, column =>\n                    cloneElement(column, {\n                        className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,\n                        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },\n                        'data-key': column.key,\n                    })\n                )}\n            </ComponentType>\n        );\n\n        return (\n            <div {...remainingProps} ref={ref} className={wrapperClassName}>\n                {showPageButtons && (\n                    <div className={previousButtonClassName} onClick={handlePrevClick}>\n                        <span className='rioglyph rioglyph-chevron-left' />\n                    </div>\n                )}\n                <div className='ColumnsArea flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                    {disableAnimation || isResizePage ? columns : null}\n                    {!disableAnimation && !isResizePage && (\n                        <AnimatePresence mode='wait' custom={animationDirection}>\n                            <motion.div\n                                key={currentPage}\n                                variants={variants}\n                                initial={enableInitialAnimation ? 'pageEnter' : false}\n                                animate='pageCenter'\n                                custom={animationDirection}\n                                transition={DEFAULT_TRANSITION}\n                            >\n                                {columns}\n                            </motion.div>\n                        </AnimatePresence>\n                    )}\n                </div>\n                {showPageButtons && (\n                    <div className={nextButtonClassName} onClick={handleNextClick}>\n                        <span className='rioglyph rioglyph-chevron-right' />\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nexport default ResponsiveColumnStripe;\n"],"names":["MIN_WITH_THRESHOLD","DEFAULT_TRANSITION","ANIMATION_NEXT","ANIMATION_BACK","COLUMN_ITEM_CLASSNAME","variants","pageDirection","getFirstColumnItem","node","ResponsiveColumnStripe","forwardRef","props","ref","minColumnWith","minColumns","maxColumns","stretchLastItems","activePage","ComponentType","onPreviousClick","noop","onNextClick","buttonClassName","columnsWrapperClassName","className","disableAnimation","children","remainingProps","currentPage","setCurrentPage","useState","columnsPerPage","setColumnsPerPage","enableInitialAnimation","setEnableInitialAnimation","isResizePage","setIsResizePage","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previousPage","usePrevious","animationDirection","useAfterMount","previousActivePage","setPreviousActivePage","updatePageOnColumnsSizeChange","firstItem","perPage","pages","chunk","targetPage","findIndex","page","pageItem","useEffect","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","goBigger","newValue","handlePrevClick","pageNumber","handleNextClick","columnsToDisplay","showPageButtons","disablePreviousPage","disableNextPage","wrapperClassName","classNames","baseButtonClassName","disabledButtonClassName","previousButtonClassName","nextButtonClassName","mergedColumnsWrapperClassName","columnClassName","columns","jsx","Children","column","cloneElement","jsxs","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"ResponsiveColumnStripe.js","sources":["../../../src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    forwardRef,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactHTML,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { chunk, findIndex, noop } from 'es-toolkit/compat';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\n\nconst MIN_WITH_THRESHOLD = 10;\n\nconst DEFAULT_TRANSITION = { duration: 0.2 };\n\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst COLUMN_ITEM_CLASSNAME = 'ColumnItem';\n\nconst variants: Variants = {\n    pageEnter: pageDirection => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getFirstColumnItem = (node: Element): HTMLElement => {\n    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {\n        return node as HTMLElement;\n    }\n    return getFirstColumnItem(node.children[0] as HTMLElement);\n};\n\nexport type ResponsiveColumnStripeProps = {\n    /**\n     * The minimum width in pixel of a single column.\n     *\n     * This value determines how many columns are shown per page depending on the parent width.\n     *\n     * @default 300\n     */\n    minColumnWith?: number;\n\n    /**\n     * The minimum amount of columns that should be shown per page.\n     *\n     * @default 1\n     */\n    minColumns?: number;\n\n    /**\n     * The maximum amount of columns that should be shown per page.\n     *\n     * @default 5\n     */\n    maxColumns?: number;\n\n    /**\n     * Defines whether the items on the last page are stretched out to fill the space.\n     *\n     * @default false\n     */\n    stretchLastItems?: boolean;\n\n    /**\n     * The page that shall be shown.\n     *\n     * This can be used to control the pages from outside.\n     *\n     * @default 0\n     */\n    activePage?: number;\n\n    /**\n     * The DOM element type of the wrapping column element.\n     *\n     * If you need a list, this might be set to \"ul\".\n     *\n     * @default 'div'\n     */\n    asType?: keyof ReactHTML;\n\n    /**\n     * Set to true to skip animating pages.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Callback function for when the previous page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Callback function for when the next page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the component wrapper element.\n     */\n    columnsWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the column wrapper element.\n     */\n    className?: string;\n};\n\nconst ResponsiveColumnStripe = forwardRef<HTMLDivElement, PropsWithChildren<ResponsiveColumnStripeProps>>(\n    (props, ref) => {\n        const {\n            minColumnWith = 300,\n            minColumns = 1,\n            maxColumns = 5,\n            stretchLastItems = true,\n            activePage = 0,\n            asType: ComponentType = 'div',\n            onPreviousClick = noop,\n            onNextClick = noop,\n            buttonClassName = '',\n            columnsWrapperClassName = '',\n            className = '',\n            disableAnimation = false,\n            children,\n            ...remainingProps\n        } = props;\n\n        const [currentPage, setCurrentPage] = useState(activePage);\n        const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);\n        const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n        const [isResizePage, setIsResizePage] = useState(false);\n\n        // The base for reacting on changing width of the wrapping element.\n        // It uses a ResizeObserver under the hood.\n        const columnWrapperRef = useRef<HTMLDivElement>(null);\n        const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n        const previousPage = usePrevious(currentPage);\n        const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;\n\n        useAfterMount(() => {\n            setEnableInitialAnimation(true);\n        });\n\n        // Update active page from outside to be used as controlled component\n        const [previousActivePage, setPreviousActivePage] = useState(activePage);\n        if (Number.isFinite(activePage) && activePage !== previousActivePage) {\n            setCurrentPage(activePage);\n            setPreviousActivePage(activePage);\n        }\n\n        const updatePageOnColumnsSizeChange = (firstItem: HTMLElement, perPage: number) => {\n            // Split children in page chunks\n            const pages = chunk(children as ReactElement[], perPage);\n\n            // find the currently rendered first item inside the chunks.\n            // The found chunk index is the new page to render.\n            // example of chunks => [['a', 'b', 'c'], ['d']]\n            const targetPage = findIndex(pages, (page: ReactElement[]) =>\n                page.some(pageItem => pageItem.key === firstItem.dataset.key)\n            );\n\n            if (targetPage !== currentPage) {\n                setCurrentPage(targetPage);\n            }\n        };\n\n        // When the container size changes, adapt the amount of columns to be rendered according\n        // to the given min width of a single item. The new amount of columns also has to respect\n        // the lower and upper limit. When updating the amount, the current page hse to be updated as well.\n        useEffect(() => {\n            if (!columnWrapperRef.current) {\n                return;\n            }\n\n            const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n            if (!firstItem) {\n                return;\n            }\n\n            // Get the width of the first column to calculate how many columns fit in one page\n            // according to the given minWidth per column\n            const columnWidth = firstItem.getBoundingClientRect().width;\n\n            // Limit columns per page for given min and max values\n            const allowForLessColumns = columnsPerPage - 1 >= minColumns;\n            const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;\n\n            // The threshold is required to avoid jumping between bigger and smaller after the columns per page\n            // has changed, and it continues to resize\n            const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;\n            const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth!;\n\n            // During resizing, we don't want any animation\n            setIsResizePage(true);\n\n            if (goBigger) {\n                const newValue = columnsPerPage + 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n\n            if (goSmaller) {\n                const newValue = columnsPerPage - 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n        }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);\n\n        const handlePrevClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage - 1;\n            setCurrentPage(pageNumber);\n            onPreviousClick(pageNumber, columnsPerPage);\n        };\n\n        const handleNextClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage + 1;\n            setCurrentPage(pageNumber);\n            onNextClick(pageNumber, columnsPerPage);\n        };\n\n        if (!children) {\n            return null;\n        }\n\n        // Split the children/columns in chunks according to the current columns per page size\n        // and get the current page chunk for rendering\n        const columnsToDisplay = chunk(children as ReactElement[], columnsPerPage)[currentPage];\n\n        const showPageButtons = minColumns < (children as ReactElement[]).length;\n\n        const disablePreviousPage = currentPage === 0;\n        const disableNextPage = currentPage === Math.ceil((children as ReactElement[]).length / columnsPerPage) - 1;\n\n        const wrapperClassName = classNames(\n            'ResponsiveColumnStripe',\n            'display-flex align-items-center',\n            'overflow-hidden',\n            className\n        );\n\n        const baseButtonClassName = classNames(\n            'align-items-center',\n            'align-self-stretch',\n            'display-flex',\n            'hover-scale-105',\n            'hover-text-color-darkest',\n            'padding-10',\n            'cursor-pointer',\n            'text-color-darker',\n            'text-size-12'\n        );\n\n        const disabledButtonClassName = 'pointer-events-none opacity-30';\n\n        const previousButtonClassName = classNames(\n            'PreviousButton',\n            baseButtonClassName,\n            disablePreviousPage && disabledButtonClassName\n        );\n\n        const nextButtonClassName = classNames(\n            'NextButton',\n            baseButtonClassName,\n            disableNextPage && disabledButtonClassName\n        );\n\n        const mergedColumnsWrapperClassName = classNames(\n            'ColumnWrapper',\n            'flex-1-1',\n            'display-flex',\n            columnsWrapperClassName\n        );\n\n        const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';\n\n        // Use the given custom component type \"div\" or any other. Clone the children to inject certain\n        // properties that are required to stretch the items and deal with their size.\n        const columns = (\n            <ComponentType className={mergedColumnsWrapperClassName}>\n                {Children.map(columnsToDisplay, column =>\n                    cloneElement(column, {\n                        className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,\n                        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },\n                        'data-key': column.key,\n                    })\n                )}\n            </ComponentType>\n        );\n\n        return (\n            <div {...remainingProps} ref={ref} className={wrapperClassName}>\n                {showPageButtons && (\n                    <div className={previousButtonClassName} onClick={handlePrevClick}>\n                        <span className='rioglyph rioglyph-chevron-left' />\n                    </div>\n                )}\n                <div className='ColumnsArea flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                    {disableAnimation || isResizePage ? columns : null}\n                    {!disableAnimation && !isResizePage && (\n                        <AnimatePresence mode='wait' custom={animationDirection}>\n                            <motion.div\n                                key={currentPage}\n                                variants={variants}\n                                initial={enableInitialAnimation ? 'pageEnter' : false}\n                                animate='pageCenter'\n                                custom={animationDirection}\n                                transition={DEFAULT_TRANSITION}\n                            >\n                                {columns}\n                            </motion.div>\n                        </AnimatePresence>\n                    )}\n                </div>\n                {showPageButtons && (\n                    <div className={nextButtonClassName} onClick={handleNextClick}>\n                        <span className='rioglyph rioglyph-chevron-right' />\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nexport default ResponsiveColumnStripe;\n"],"names":["MIN_WITH_THRESHOLD","DEFAULT_TRANSITION","ANIMATION_NEXT","ANIMATION_BACK","COLUMN_ITEM_CLASSNAME","variants","pageDirection","getFirstColumnItem","node","ResponsiveColumnStripe","forwardRef","props","ref","minColumnWith","minColumns","maxColumns","stretchLastItems","activePage","ComponentType","onPreviousClick","noop","onNextClick","buttonClassName","columnsWrapperClassName","className","disableAnimation","children","remainingProps","currentPage","setCurrentPage","useState","columnsPerPage","setColumnsPerPage","enableInitialAnimation","setEnableInitialAnimation","isResizePage","setIsResizePage","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previousPage","usePrevious","animationDirection","useAfterMount","previousActivePage","setPreviousActivePage","updatePageOnColumnsSizeChange","firstItem","perPage","pages","chunk","targetPage","findIndex","page","pageItem","useEffect","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","goBigger","newValue","handlePrevClick","pageNumber","handleNextClick","columnsToDisplay","showPageButtons","disablePreviousPage","disableNextPage","wrapperClassName","classNames","baseButtonClassName","disabledButtonClassName","previousButtonClassName","nextButtonClassName","mergedColumnsWrapperClassName","columnClassName","columns","jsx","Children","column","cloneElement","jsxs","AnimatePresence","motion"],"mappings":"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"}

package/components/rioglyph/Rioglyph.d.ts

@@ -2,7 +2,7 @@ import { RioglyphIconType } from './RioglyphIconType';
 export type IconType = RioglyphIconType;
 export type RioglyphProps = {
     /**
-     * The icon class to display.
+     * The rioglyph icon string OR an external .svg link
      */
     icon: IconType | string;
     /**
@@ -14,31 +14,43 @@ export type RioglyphProps = {
      */
     size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';
     /**
-     * Spinning animation
+     * Spinning animation.
+     *
+     * @default false
      */
     spinning?: boolean;
     /**
-     * Pulsing animation
+     * Pulsing animation.
+     *
+     * @default false
      */
     pulsing?: boolean;
     /**
-     * Filled style
+     * Filled style.
+     *
+     * @default false
      */
     filled?: boolean;
     /**
-     * Pulsing animation
+     * Add a disabled line
+     *
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Pulsing animation
+     * Recolor the disabled line to the danger color.
+     *
+     * @default false
      */
     disabledDanger?: boolean;
     /**
-     * Pulsing animation
+     * Flip the disabled line.
+     *
+     * @default false
      */
     disabledInverse?: boolean;
     /**
-     * The icon class to display as a pair (optional).
+     * The rioglyph icon string OR an external .svg link.
      */
     pairIcon?: IconType | string;
     /**

package/components/rioglyph/Rioglyph.js

@@ -1,5 +1,5 @@
 import { jsxs as j, jsx as n } from "react/jsx-runtime";
-import i from "classnames";
+import i from "../../utils/classNames.js";
 const w = (p) => {
   const {
     icon: s,

package/components/rioglyph/Rioglyph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rioglyph.js","sources":["../../../src/components/rioglyph/Rioglyph.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { RioglyphIconType } from './RioglyphIconType';\n\nexport type IconType = RioglyphIconType;\n\nexport type RioglyphProps = {\n    /**\n     * The icon class to display.\n     */\n    icon: IconType | string;\n\n    /**\n     * Additional classes set to the icon span.\n     */\n    iconClassName?: string;\n\n    /**\n     * The size (text-size) of the icon\n     */\n    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';\n\n    /**\n     * Spinning animation\n     */\n    spinning?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    pulsing?: boolean;\n\n    /**\n     * Filled style\n     */\n    filled?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabled?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabledDanger?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabledInverse?: boolean;\n\n    /**\n     * The icon class to display as a pair (optional).\n     */\n    pairIcon?: IconType | string;\n\n    /**\n     * Additional classes set to the pairIcon span.\n     */\n    pairIconClassName?: string;\n};\n\nconst Rioglyph = (props: RioglyphProps) => {\n    const {\n        icon,\n        iconClassName = '',\n        pairIcon,\n        pairIconClassName = '',\n        size,\n        spinning = false,\n        pulsing = false,\n        filled = false,\n        disabled = false,\n        disabledDanger = false,\n        disabledInverse = false,\n    } = props;\n\n    const spinningClass = spinning ? 'spinning' : '';\n    const pulsingClass = pulsing ? 'pulsing' : '';\n    const filledClass = filled ? 'rioglyph-filled' : '';\n    const disabledClass = disabled ? 'rioglyph-disabled' : '';\n    const disabledDangerClass = disabledDanger ? 'rioglyph-disabled rioglyph-disabled-danger' : '';\n    const disabledInverseClass = disabledInverse ? 'rioglyph-disabled rioglyph-disabled-inverse' : '';\n\n    let iconStyle: React.CSSProperties | undefined;\n    if (icon.includes('.svg')) {\n        iconStyle = { '--i': `url(${icon})` } as React.CSSProperties;\n    }\n\n    if (pairIcon) {\n        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);\n        const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, iconClassName);\n        const pairIconClasses = classNames(\n            'rioglyph',\n            !pairIcon.includes('.svg') && pairIcon,\n            pairIconClassName,\n            spinningClass,\n            pulsingClass\n        );\n\n        let pairIconStyle: React.CSSProperties | undefined;\n        if (pairIcon?.includes('.svg')) {\n            pairIconStyle = { '--i': `url(${pairIcon})` } as React.CSSProperties;\n        }\n\n        return (\n            <span className={wrapperClasses}>\n                <span className={iconClasses} style={iconStyle} />\n                <span className={pairIconClasses} style={pairIconStyle} />\n            </span>\n        );\n    }\n\n    const iconClasses = classNames(\n        'rioglyph',\n        !icon.includes('.svg') && icon,\n        size && `text-size-${size}`,\n        disabledClass,\n        disabledDangerClass,\n        disabledInverseClass,\n        iconClassName,\n        spinningClass,\n        pulsingClass,\n        filledClass\n    );\n\n    return <span className={iconClasses} style={iconStyle} />;\n};\n\nexport default Rioglyph;\n"],"names":["Rioglyph","props","icon","iconClassName","pairIcon","pairIconClassName","size","spinning","pulsing","filled","disabled","disabledDanger","disabledInverse","spinningClass","pulsingClass","filledClass","disabledClass","disabledDangerClass","disabledInverseClass","iconStyle","wrapperClasses","classNames","iconClasses","pairIconClasses","pairIconStyle","jsxs","jsx"],"mappings":";;AA+DA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,EAAA,IAClBX,GAEEY,IAAgBN,IAAW,aAAa,IACxCO,IAAeN,IAAU,YAAY,IACrCO,IAAcN,IAAS,oBAAoB,IAC3CO,IAAgBN,IAAW,sBAAsB,IACjDO,IAAsBN,IAAiB,+CAA+C,IACtFO,IAAuBN,IAAkB,gDAAgD;AAE/F,MAAIO;AAKJ,MAJIjB,EAAK,SAAS,MAAM,MACpBiB,IAAY,EAAE,OAAO,OAAOjB,CAAI,IAAA,IAGhCE,GAAU;AACV,UAAMgB,IAAiBC,EAAW,sBAAsBf,KAAQ,aAAaA,CAAI,EAAE,GAC7EgB,IAAcD,EAAW,YAAY,CAACnB,EAAK,SAAS,MAAM,KAAKA,GAAMC,CAAa,GAClFoB,IAAkBF;AAAA,MACpB;AAAA,MACA,CAACjB,EAAS,SAAS,MAAM,KAAKA;AAAA,MAC9BC;AAAA,MACAQ;AAAA,MACAC;AAAA,IAAA;AAGJ,QAAIU;AACJ,WAAIpB,GAAU,SAAS,MAAM,MACzBoB,IAAgB,EAAE,OAAO,OAAOpB,CAAQ,IAAA,IAIxC,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,GACb,UAAA;AAAA,MAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAAA,MAChD,gBAAAO,EAAC,QAAA,EAAK,WAAWH,GAAiB,OAAOC,EAAA,CAAe;AAAA,IAAA,GAC5D;AAAA,EAER;AAEA,QAAMF,IAAcD;AAAA,IAChB;AAAA,IACA,CAACnB,EAAK,SAAS,MAAM,KAAKA;AAAA,IAC1BI,KAAQ,aAAaA,CAAI;AAAA,IACzBU;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,IACAU;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAGJ,SAAO,gBAAAW,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAC3D;"}
+{"version":3,"file":"Rioglyph.js","sources":["../../../src/components/rioglyph/Rioglyph.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport type { RioglyphIconType } from './RioglyphIconType';\n\nexport type IconType = RioglyphIconType;\n\nexport type RioglyphProps = {\n    /**\n     * The rioglyph icon string OR an external .svg link\n     */\n    icon: IconType | string;\n\n    /**\n     * Additional classes set to the icon span.\n     */\n    iconClassName?: string;\n\n    /**\n     * The size (text-size) of the icon\n     */\n    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';\n\n    /**\n     * Spinning animation.\n     * \n     * @default false\n     */\n    spinning?: boolean;\n\n    /**\n     * Pulsing animation.\n     * \n     * @default false\n     */\n    pulsing?: boolean;\n\n    /**\n     * Filled style.\n     * \n     * @default false\n     */\n    filled?: boolean;\n\n    /**\n     * Add a disabled line\n     * \n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Recolor the disabled line to the danger color.\n     * \n     * @default false\n     */\n    disabledDanger?: boolean;\n\n    /**\n     * Flip the disabled line.\n     * \n     * @default false\n     */\n    disabledInverse?: boolean;\n\n    /**\n     * The rioglyph icon string OR an external .svg link.\n     */\n    pairIcon?: IconType | string;\n\n    /**\n     * Additional classes set to the pairIcon span.\n     */\n    pairIconClassName?: string;\n};\n\nconst Rioglyph = (props: RioglyphProps) => {\n    const {\n        icon,\n        iconClassName = '',\n        pairIcon,\n        pairIconClassName = '',\n        size,\n        spinning = false,\n        pulsing = false,\n        filled = false,\n        disabled = false,\n        disabledDanger = false,\n        disabledInverse = false,\n    } = props;\n\n    const spinningClass = spinning ? 'spinning' : '';\n    const pulsingClass = pulsing ? 'pulsing' : '';\n    const filledClass = filled ? 'rioglyph-filled' : '';\n    const disabledClass = disabled ? 'rioglyph-disabled' : '';\n    const disabledDangerClass = disabledDanger ? 'rioglyph-disabled rioglyph-disabled-danger' : '';\n    const disabledInverseClass = disabledInverse ? 'rioglyph-disabled rioglyph-disabled-inverse' : '';\n\n    let iconStyle: React.CSSProperties | undefined;\n    if (icon.includes('.svg')) {\n        iconStyle = { '--i': `url(${icon})` } as React.CSSProperties;\n    }\n\n    if (pairIcon) {\n        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);\n        const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, iconClassName);\n        const pairIconClasses = classNames(\n            'rioglyph',\n            !pairIcon.includes('.svg') && pairIcon,\n            pairIconClassName,\n            spinningClass,\n            pulsingClass\n        );\n\n        let pairIconStyle: React.CSSProperties | undefined;\n        if (pairIcon?.includes('.svg')) {\n            pairIconStyle = { '--i': `url(${pairIcon})` } as React.CSSProperties;\n        }\n\n        return (\n            <span className={wrapperClasses}>\n                <span className={iconClasses} style={iconStyle} />\n                <span className={pairIconClasses} style={pairIconStyle} />\n            </span>\n        );\n    }\n\n    const iconClasses = classNames(\n        'rioglyph',\n        !icon.includes('.svg') && icon,\n        size && `text-size-${size}`,\n        disabledClass,\n        disabledDangerClass,\n        disabledInverseClass,\n        iconClassName,\n        spinningClass,\n        pulsingClass,\n        filledClass\n    );\n\n    return <span className={iconClasses} style={iconStyle} />;\n};\n\nexport default Rioglyph;\n"],"names":["Rioglyph","props","icon","iconClassName","pairIcon","pairIconClassName","size","spinning","pulsing","filled","disabled","disabledDanger","disabledInverse","spinningClass","pulsingClass","filledClass","disabledClass","disabledDangerClass","disabledInverseClass","iconStyle","wrapperClasses","classNames","iconClasses","pairIconClasses","pairIconStyle","jsxs","jsx"],"mappings":";;AA0EA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,EAAA,IAClBX,GAEEY,IAAgBN,IAAW,aAAa,IACxCO,IAAeN,IAAU,YAAY,IACrCO,IAAcN,IAAS,oBAAoB,IAC3CO,IAAgBN,IAAW,sBAAsB,IACjDO,IAAsBN,IAAiB,+CAA+C,IACtFO,IAAuBN,IAAkB,gDAAgD;AAE/F,MAAIO;AAKJ,MAJIjB,EAAK,SAAS,MAAM,MACpBiB,IAAY,EAAE,OAAO,OAAOjB,CAAI,IAAA,IAGhCE,GAAU;AACV,UAAMgB,IAAiBC,EAAW,sBAAsBf,KAAQ,aAAaA,CAAI,EAAE,GAC7EgB,IAAcD,EAAW,YAAY,CAACnB,EAAK,SAAS,MAAM,KAAKA,GAAMC,CAAa,GAClFoB,IAAkBF;AAAA,MACpB;AAAA,MACA,CAACjB,EAAS,SAAS,MAAM,KAAKA;AAAA,MAC9BC;AAAA,MACAQ;AAAA,MACAC;AAAA,IAAA;AAGJ,QAAIU;AACJ,WAAIpB,GAAU,SAAS,MAAM,MACzBoB,IAAgB,EAAE,OAAO,OAAOpB,CAAQ,IAAA,IAIxC,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,GACb,UAAA;AAAA,MAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAAA,MAChD,gBAAAO,EAAC,QAAA,EAAK,WAAWH,GAAiB,OAAOC,EAAA,CAAe;AAAA,IAAA,GAC5D;AAAA,EAER;AAEA,QAAMF,IAAcD;AAAA,IAChB;AAAA,IACA,CAACnB,EAAK,SAAS,MAAM,KAAKA;AAAA,IAC1BI,KAAQ,aAAaA,CAAI;AAAA,IACzBU;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,IACAU;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAGJ,SAAO,gBAAAW,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAC3D;"}

package/components/rioglyph/RioglyphIconType.d.ts

@@ -1 +1 @@
-export type RioglyphIconType = 'rioglyph-academic-cap' | 'rioglyph-addressbook' | 'rioglyph-ai' | 'rioglyph-air-pay' | 'rioglyph-am' | 'rioglyph-angle-double-down' | 'rioglyph-angle-double-left' | 'rioglyph-angle-double-right' | 'rioglyph-angle-double-up' | 'rioglyph-antenna' | 'rioglyph-api' | 'rioglyph-archive' | 'rioglyph-area-chart' | 'rioglyph-area-in' | 'rioglyph-area-out' | 'rioglyph-arrow-down' | 'rioglyph-arrow-left' | 'rioglyph-arrow-right' | 'rioglyph-arrow-up' | 'rioglyph-arrows-collapse' | 'rioglyph-arrows-combine' | 'rioglyph-arrows-expand' | 'rioglyph-arrows-horizontal' | 'rioglyph-arrows-split' | 'rioglyph-assigned' | 'rioglyph-axis-x' | 'rioglyph-axis-y' | 'rioglyph-axis-z' | 'rioglyph-axle' | 'rioglyph-ban-circle' | 'rioglyph-bar-chart-box' | 'rioglyph-battery-charging' | 'rioglyph-battery-level-empty' | 'rioglyph-battery-level-full' | 'rioglyph-battery-level-low' | 'rioglyph-beacon' | 'rioglyph-book' | 'rioglyph-bookable-poi' | 'rioglyph-bookmark-square' | 'rioglyph-bookmark' | 'rioglyph-border-crossing' | 'rioglyph-brain' | 'rioglyph-brake' | 'rioglyph-branch-horizontal' | 'rioglyph-branch-remove' | 'rioglyph-branch-vertical' | 'rioglyph-broadcast' | 'rioglyph-building' | 'rioglyph-bulb' | 'rioglyph-bus-baseline' | 'rioglyph-bus-breakdown' | 'rioglyph-bus' | 'rioglyph-businessman' | 'rioglyph-calendar-parking' | 'rioglyph-calendar-plus' | 'rioglyph-calendar-today' | 'rioglyph-calendar' | 'rioglyph-camera' | 'rioglyph-car-baseline' | 'rioglyph-car-wash' | 'rioglyph-car' | 'rioglyph-card-hotel' | 'rioglyph-card-reader' | 'rioglyph-cards-add' | 'rioglyph-cards-grid' | 'rioglyph-cards-list' | 'rioglyph-cards-table' | 'rioglyph-cargo' | 'rioglyph-carrier' | 'rioglyph-chat' | 'rioglyph-check-badge' | 'rioglyph-check-shield' | 'rioglyph-checkbox-checked' | 'rioglyph-checkbox' | 'rioglyph-checkboxes' | 'rioglyph-chevron-down' | 'rioglyph-chevron-left' | 'rioglyph-chevron-right' | 'rioglyph-chevron-up' | 'rioglyph-chip' | 'rioglyph-circle-dashed' | 'rioglyph-circle-stack' | 'rioglyph-click' | 'rioglyph-climate-control' | 'rioglyph-clipboard' | 'rioglyph-cloud-download' | 'rioglyph-cloud-not-saved' | 'rioglyph-cloud-progress' | 'rioglyph-cloud-upload' | 'rioglyph-cloud' | 'rioglyph-coasting' | 'rioglyph-code-braces' | 'rioglyph-code-brackets' | 'rioglyph-coffee' | 'rioglyph-cog' | 'rioglyph-color-swatch' | 'rioglyph-comment' | 'rioglyph-compare' | 'rioglyph-compass' | 'rioglyph-component-custom-recurrent' | 'rioglyph-component-custom' | 'rioglyph-component' | 'rioglyph-construction' | 'rioglyph-convert' | 'rioglyph-conveyor-belt' | 'rioglyph-cookie' | 'rioglyph-cooling' | 'rioglyph-cost-efficency' | 'rioglyph-cost-efficiency' | 'rioglyph-crown' | 'rioglyph-cruise-control' | 'rioglyph-csv' | 'rioglyph-cube-dashed' | 'rioglyph-cube' | 'rioglyph-currency-euro' | 'rioglyph-damages' | 'rioglyph-dangerousgoods' | 'rioglyph-dashboard-view' | 'rioglyph-dashboard' | 'rioglyph-delivery-completed' | 'rioglyph-delivery-error' | 'rioglyph-delivery-late' | 'rioglyph-delivery-on-track' | 'rioglyph-delivery-warning' | 'rioglyph-delivery' | 'rioglyph-design' | 'rioglyph-desktop' | 'rioglyph-detail-view-info' | 'rioglyph-detail-view' | 'rioglyph-direction' | 'rioglyph-discount-badge' | 'rioglyph-document-out' | 'rioglyph-document' | 'rioglyph-download' | 'rioglyph-drag-n-drop' | 'rioglyph-drive-history' | 'rioglyph-driver-card' | 'rioglyph-driver-off' | 'rioglyph-driver' | 'rioglyph-drivercard-in' | 'rioglyph-drivercard-out' | 'rioglyph-duplicate' | 'rioglyph-earphone' | 'rioglyph-emergency-stop' | 'rioglyph-empty' | 'rioglyph-engine' | 'rioglyph-envelope-indicator' | 'rioglyph-envelope-open' | 'rioglyph-envelope' | 'rioglyph-erase' | 'rioglyph-error-sign' | 'rioglyph-euro-note' | 'rioglyph-exclamation-sign' | 'rioglyph-exclamation' | 'rioglyph-eye-close' | 'rioglyph-eye-closed' | 'rioglyph-eye-open' | 'rioglyph-eye-option' | 'rioglyph-face-frown' | 'rioglyph-face-neutral' | 'rioglyph-face-smile' | 'rioglyph-facetime-video' | 'rioglyph-factory' | 'rioglyph-file-signature' | 'rioglyph-files' | 'rioglyph-fill' | 'rioglyph-filling-e-station' | 'rioglyph-filling-station' | 'rioglyph-filter-active' | 'rioglyph-filter-reset' | 'rioglyph-filter' | 'rioglyph-fingerprint' | 'rioglyph-finish' | 'rioglyph-fire' | 'rioglyph-flag' | 'rioglyph-flash' | 'rioglyph-folder-closed' | 'rioglyph-folder-open' | 'rioglyph-fuel-diesel' | 'rioglyph-fuel-electric' | 'rioglyph-fuel-gas' | 'rioglyph-fuel-hydrogen' | 'rioglyph-fuel-liquid' | 'rioglyph-fuel-mix' | 'rioglyph-fullscreen' | 'rioglyph-geofence' | 'rioglyph-get' | 'rioglyph-give' | 'rioglyph-globe-alt' | 'rioglyph-globe' | 'rioglyph-group-blocks' | 'rioglyph-group' | 'rioglyph-hand-down' | 'rioglyph-hand-left' | 'rioglyph-hand-right' | 'rioglyph-hand-up' | 'rioglyph-handshake' | 'rioglyph-hash' | 'rioglyph-heart' | 'rioglyph-heating' | 'rioglyph-hierarchy' | 'rioglyph-history' | 'rioglyph-home-sign' | 'rioglyph-home' | 'rioglyph-hour-glass' | 'rioglyph-id' | 'rioglyph-inbox-in' | 'rioglyph-inbox-out' | 'rioglyph-inbox-stack' | 'rioglyph-inbox' | 'rioglyph-info-sign' | 'rioglyph-info' | 'rioglyph-insert' | 'rioglyph-issue-tracking' | 'rioglyph-key' | 'rioglyph-kickdown' | 'rioglyph-language' | 'rioglyph-layer-pois' | 'rioglyph-layer' | 'rioglyph-leafs' | 'rioglyph-light-bulb' | 'rioglyph-line-chart' | 'rioglyph-link' | 'rioglyph-load-unload' | 'rioglyph-load' | 'rioglyph-location-arrow' | 'rioglyph-lock-open' | 'rioglyph-lock' | 'rioglyph-log-in' | 'rioglyph-logout' | 'rioglyph-looking-glass-man' | 'rioglyph-looking-glass' | 'rioglyph-magic-wand' | 'rioglyph-maintenance-components' | 'rioglyph-map-location' | 'rioglyph-map-marker' | 'rioglyph-map' | 'rioglyph-megaphone' | 'rioglyph-menu-hamburger' | 'rioglyph-merge' | 'rioglyph-migrate' | 'rioglyph-milage' | 'rioglyph-minus-light' | 'rioglyph-minus-sign' | 'rioglyph-minus' | 'rioglyph-missing' | 'rioglyph-mode-dark-light' | 'rioglyph-more' | 'rioglyph-new-window' | 'rioglyph-newspaper' | 'rioglyph-note' | 'rioglyph-notification' | 'rioglyph-number-1' | 'rioglyph-number-2' | 'rioglyph-number-3' | 'rioglyph-off' | 'rioglyph-oil-can' | 'rioglyph-ok-circle' | 'rioglyph-ok-dashed' | 'rioglyph-ok-sign' | 'rioglyph-ok' | 'rioglyph-onboarding' | 'rioglyph-ongoing' | 'rioglyph-option-horizontal' | 'rioglyph-option-vertical' | 'rioglyph-order' | 'rioglyph-palette-broken' | 'rioglyph-palette' | 'rioglyph-paper-clip' | 'rioglyph-parcel-broken' | 'rioglyph-parcel' | 'rioglyph-parking' | 'rioglyph-pause-circle' | 'rioglyph-pause' | 'rioglyph-pdf-file' | 'rioglyph-pencil-square' | 'rioglyph-pencil' | 'rioglyph-phone' | 'rioglyph-pictures' | 'rioglyph-pin-range' | 'rioglyph-pin' | 'rioglyph-play-circle' | 'rioglyph-play' | 'rioglyph-plugged-off' | 'rioglyph-plugged-on' | 'rioglyph-plus-light' | 'rioglyph-plus-sign' | 'rioglyph-plus' | 'rioglyph-pm' | 'rioglyph-poi' | 'rioglyph-polygon' | 'rioglyph-position' | 'rioglyph-print' | 'rioglyph-progress-ongoing' | 'rioglyph-progress-remaining' | 'rioglyph-progression' | 'rioglyph-prompt' | 'rioglyph-pto-off' | 'rioglyph-pto-on' | 'rioglyph-pushpin' | 'rioglyph-puzzle' | 'rioglyph-pylon' | 'rioglyph-qr-code' | 'rioglyph-question-sign' | 'rioglyph-question' | 'rioglyph-record' | 'rioglyph-recycle' | 'rioglyph-refresh' | 'rioglyph-remove-circle' | 'rioglyph-remove-sign' | 'rioglyph-remove' | 'rioglyph-repeat-square' | 'rioglyph-repeat' | 'rioglyph-resize-full' | 'rioglyph-resize-horizontal' | 'rioglyph-resize-small' | 'rioglyph-resize-vertical' | 'rioglyph-retrofit' | 'rioglyph-retweet' | 'rioglyph-revert' | 'rioglyph-rio-marker' | 'rioglyph-rio' | 'rioglyph-road-restrictions' | 'rioglyph-road' | 'rioglyph-robot' | 'rioglyph-rocket' | 'rioglyph-role-management' | 'rioglyph-route-option' | 'rioglyph-route-view' | 'rioglyph-route' | 'rioglyph-ruler' | 'rioglyph-satellite-radar' | 'rioglyph-save' | 'rioglyph-scale' | 'rioglyph-scan' | 'rioglyph-scissors' | 'rioglyph-search-list' | 'rioglyph-search-truck' | 'rioglyph-search' | 'rioglyph-send' | 'rioglyph-series' | 'rioglyph-server-stack' | 'rioglyph-settings' | 'rioglyph-share-alt' | 'rioglyph-share-nodes' | 'rioglyph-share' | 'rioglyph-shelve' | 'rioglyph-ship' | 'rioglyph-shopping-bag' | 'rioglyph-shopping-cart' | 'rioglyph-signature' | 'rioglyph-slope-down-max' | 'rioglyph-slope-down-min' | 'rioglyph-slope-up-max' | 'rioglyph-slope-up-min' | 'rioglyph-sort-by-attributes-alt' | 'rioglyph-sort-by-attributes' | 'rioglyph-sort' | 'rioglyph-sparkles' | 'rioglyph-speed' | 'rioglyph-sphere' | 'rioglyph-spinner' | 'rioglyph-split-view' | 'rioglyph-square-dashed' | 'rioglyph-stack-add' | 'rioglyph-stack-iso' | 'rioglyph-stack' | 'rioglyph-star-empty' | 'rioglyph-star' | 'rioglyph-stars' | 'rioglyph-start' | 'rioglyph-stats-high' | 'rioglyph-stats-line-dots' | 'rioglyph-stats-low' | 'rioglyph-stats-medium' | 'rioglyph-stats' | 'rioglyph-status-available' | 'rioglyph-status-change-horizontal' | 'rioglyph-status-change' | 'rioglyph-status-driving' | 'rioglyph-status-resting' | 'rioglyph-status-working' | 'rioglyph-steering-wheel' | 'rioglyph-stopover' | 'rioglyph-support' | 'rioglyph-table-view' | 'rioglyph-tachograph-download' | 'rioglyph-tachograph' | 'rioglyph-tag' | 'rioglyph-tasks' | 'rioglyph-temperature' | 'rioglyph-th-list' | 'rioglyph-thumbs-down' | 'rioglyph-thumbs-up' | 'rioglyph-tickets' | 'rioglyph-time-alt' | 'rioglyph-time-cancle' | 'rioglyph-time-incomplete' | 'rioglyph-time' | 'rioglyph-tire' | 'rioglyph-tms' | 'rioglyph-to-bottom' | 'rioglyph-to-left' | 'rioglyph-to-right' | 'rioglyph-to-top' | 'rioglyph-tracking-package' | 'rioglyph-traffic-lights' | 'rioglyph-trailer-baseline' | 'rioglyph-trailer' | 'rioglyph-trailerposition' | 'rioglyph-train' | 'rioglyph-transfer' | 'rioglyph-transition-push-right' | 'rioglyph-transition-right' | 'rioglyph-trash' | 'rioglyph-triangle-bottom' | 'rioglyph-triangle-left' | 'rioglyph-triangle-right' | 'rioglyph-triangle-top' | 'rioglyph-trophy' | 'rioglyph-truck-baseline' | 'rioglyph-truck-breakdown' | 'rioglyph-truck-unit' | 'rioglyph-truck' | 'rioglyph-unassigned' | 'rioglyph-unavailable' | 'rioglyph-unlink' | 'rioglyph-upload' | 'rioglyph-user-add' | 'rioglyph-user-group' | 'rioglyph-user-ok' | 'rioglyph-user-remove' | 'rioglyph-user-sign-off' | 'rioglyph-user-sign' | 'rioglyph-user' | 'rioglyph-van-baseline' | 'rioglyph-van' | 'rioglyph-variable' | 'rioglyph-video-off' | 'rioglyph-video' | 'rioglyph-volume' | 'rioglyph-wallet' | 'rioglyph-warehouse' | 'rioglyph-warning-sign' | 'rioglyph-weather-cloudy' | 'rioglyph-weather-icy' | 'rioglyph-weather-overcast' | 'rioglyph-weather-raining' | 'rioglyph-weather-snowing' | 'rioglyph-weather-stormy' | 'rioglyph-weather-sunny' | 'rioglyph-weather-thundering' | 'rioglyph-weather-windy' | 'rioglyph-weight' | 'rioglyph-width' | 'rioglyph-wifi-off' | 'rioglyph-wifi' | 'rioglyph-window' | 'rioglyph-workflow-step' | 'rioglyph-workflow' | 'rioglyph-workshop' | 'rioglyph-wrench' | 'rioglyph-xmas-raindeer' | 'rioglyph-xmas-santa';
+export type RioglyphIconType = 'rioglyph-academic-cap' | 'rioglyph-addressbook' | 'rioglyph-ai' | 'rioglyph-air-pay' | 'rioglyph-am' | 'rioglyph-angle-double-down' | 'rioglyph-angle-double-left' | 'rioglyph-angle-double-right' | 'rioglyph-angle-double-up' | 'rioglyph-antenna' | 'rioglyph-api' | 'rioglyph-archive' | 'rioglyph-area-chart' | 'rioglyph-area-in' | 'rioglyph-area-out' | 'rioglyph-arrow-down' | 'rioglyph-arrow-left' | 'rioglyph-arrow-right' | 'rioglyph-arrow-up' | 'rioglyph-arrows-collapse' | 'rioglyph-arrows-combine' | 'rioglyph-arrows-expand' | 'rioglyph-arrows-horizontal' | 'rioglyph-arrows-split' | 'rioglyph-assigned' | 'rioglyph-axis-x' | 'rioglyph-axis-y' | 'rioglyph-axis-z' | 'rioglyph-axle' | 'rioglyph-ban-circle' | 'rioglyph-bar-chart-box' | 'rioglyph-battery-charging' | 'rioglyph-battery-level-empty' | 'rioglyph-battery-level-full' | 'rioglyph-battery-level-low' | 'rioglyph-beacon' | 'rioglyph-book' | 'rioglyph-bookable-poi' | 'rioglyph-bookmark-square' | 'rioglyph-bookmark' | 'rioglyph-border-crossing' | 'rioglyph-box-open' | 'rioglyph-box' | 'rioglyph-brain' | 'rioglyph-brake' | 'rioglyph-branch-horizontal' | 'rioglyph-branch-remove' | 'rioglyph-branch-vertical' | 'rioglyph-broadcast' | 'rioglyph-building' | 'rioglyph-bulb' | 'rioglyph-bus-baseline' | 'rioglyph-bus-breakdown' | 'rioglyph-bus' | 'rioglyph-businessman' | 'rioglyph-calendar-parking' | 'rioglyph-calendar-plus' | 'rioglyph-calendar-today' | 'rioglyph-calendar' | 'rioglyph-camera' | 'rioglyph-car-baseline' | 'rioglyph-car-wash' | 'rioglyph-car' | 'rioglyph-card-hotel' | 'rioglyph-card-reader' | 'rioglyph-cards-add' | 'rioglyph-cards-grid' | 'rioglyph-cards-list' | 'rioglyph-cards-table' | 'rioglyph-cargo' | 'rioglyph-carrier' | 'rioglyph-chat' | 'rioglyph-check-badge' | 'rioglyph-check-shield' | 'rioglyph-checkbox-checked' | 'rioglyph-checkbox' | 'rioglyph-checkboxes' | 'rioglyph-chevron-down' | 'rioglyph-chevron-left' | 'rioglyph-chevron-right' | 'rioglyph-chevron-up' | 'rioglyph-chip' | 'rioglyph-circle-dashed' | 'rioglyph-circle-stack' | 'rioglyph-click' | 'rioglyph-climate-control' | 'rioglyph-clipboard' | 'rioglyph-cloud-download' | 'rioglyph-cloud-not-saved' | 'rioglyph-cloud-progress' | 'rioglyph-cloud-upload' | 'rioglyph-cloud' | 'rioglyph-coasting' | 'rioglyph-code-braces' | 'rioglyph-code-brackets' | 'rioglyph-coffee' | 'rioglyph-cog' | 'rioglyph-color-swatch' | 'rioglyph-comment' | 'rioglyph-compare' | 'rioglyph-compass' | 'rioglyph-component-custom-recurrent' | 'rioglyph-component-custom' | 'rioglyph-component' | 'rioglyph-construction' | 'rioglyph-convert' | 'rioglyph-conveyor-belt' | 'rioglyph-cookie' | 'rioglyph-cooling' | 'rioglyph-cost-efficency' | 'rioglyph-cost-efficiency' | 'rioglyph-crown' | 'rioglyph-cruise-control' | 'rioglyph-csv' | 'rioglyph-cube-dashed' | 'rioglyph-cube' | 'rioglyph-currency-euro' | 'rioglyph-damages' | 'rioglyph-dangerousgoods' | 'rioglyph-dashboard-view' | 'rioglyph-dashboard' | 'rioglyph-delivery-completed' | 'rioglyph-delivery-error' | 'rioglyph-delivery-late' | 'rioglyph-delivery-on-track' | 'rioglyph-delivery-warning' | 'rioglyph-delivery' | 'rioglyph-design' | 'rioglyph-desktop' | 'rioglyph-detail-view-info' | 'rioglyph-detail-view' | 'rioglyph-direction' | 'rioglyph-discount-badge' | 'rioglyph-document-out' | 'rioglyph-document' | 'rioglyph-download' | 'rioglyph-drag-n-drop' | 'rioglyph-drive-history' | 'rioglyph-driver-card' | 'rioglyph-driver-off' | 'rioglyph-driver' | 'rioglyph-drivercard-in' | 'rioglyph-drivercard-out' | 'rioglyph-duplicate' | 'rioglyph-earphone' | 'rioglyph-emergency-stop' | 'rioglyph-empty' | 'rioglyph-engine' | 'rioglyph-envelope-indicator' | 'rioglyph-envelope-open' | 'rioglyph-envelope' | 'rioglyph-erase' | 'rioglyph-error-sign' | 'rioglyph-euro-note' | 'rioglyph-exclamation-sign' | 'rioglyph-exclamation' | 'rioglyph-eye-close' | 'rioglyph-eye-closed' | 'rioglyph-eye-open' | 'rioglyph-eye-option' | 'rioglyph-face-frown' | 'rioglyph-face-neutral' | 'rioglyph-face-smile' | 'rioglyph-facetime-video' | 'rioglyph-factory' | 'rioglyph-file-signature' | 'rioglyph-files' | 'rioglyph-fill' | 'rioglyph-filling-e-station' | 'rioglyph-filling-station' | 'rioglyph-filter-active' | 'rioglyph-filter-reset' | 'rioglyph-filter' | 'rioglyph-fingerprint' | 'rioglyph-finish' | 'rioglyph-fire' | 'rioglyph-flag' | 'rioglyph-flash' | 'rioglyph-folder-closed' | 'rioglyph-folder-open' | 'rioglyph-fuel-diesel' | 'rioglyph-fuel-electric' | 'rioglyph-fuel-gas' | 'rioglyph-fuel-hydrogen' | 'rioglyph-fuel-liquid' | 'rioglyph-fuel-mix' | 'rioglyph-fullscreen' | 'rioglyph-geofence' | 'rioglyph-get' | 'rioglyph-give' | 'rioglyph-globe-alt' | 'rioglyph-globe' | 'rioglyph-group-blocks' | 'rioglyph-group' | 'rioglyph-hand-down' | 'rioglyph-hand-left' | 'rioglyph-hand-right' | 'rioglyph-hand-up' | 'rioglyph-handshake' | 'rioglyph-hash' | 'rioglyph-heart' | 'rioglyph-heating' | 'rioglyph-hierarchy' | 'rioglyph-history' | 'rioglyph-home-sign' | 'rioglyph-home' | 'rioglyph-hour-glass' | 'rioglyph-id' | 'rioglyph-inbox-in' | 'rioglyph-inbox-out' | 'rioglyph-inbox-stack' | 'rioglyph-inbox' | 'rioglyph-info-sign' | 'rioglyph-info' | 'rioglyph-insert' | 'rioglyph-issue-tracking' | 'rioglyph-key' | 'rioglyph-kickdown' | 'rioglyph-language' | 'rioglyph-layer-pois' | 'rioglyph-layer' | 'rioglyph-leafs' | 'rioglyph-light-bulb' | 'rioglyph-line-chart' | 'rioglyph-link' | 'rioglyph-load-unload' | 'rioglyph-load' | 'rioglyph-location-arrow' | 'rioglyph-lock-open' | 'rioglyph-lock' | 'rioglyph-log-in' | 'rioglyph-logout' | 'rioglyph-looking-glass-man' | 'rioglyph-looking-glass' | 'rioglyph-magic-wand' | 'rioglyph-maintenance-components' | 'rioglyph-map-location' | 'rioglyph-map-marker' | 'rioglyph-map' | 'rioglyph-megaphone' | 'rioglyph-menu-hamburger' | 'rioglyph-merge' | 'rioglyph-mesh-box' | 'rioglyph-migrate' | 'rioglyph-milage' | 'rioglyph-minus-light' | 'rioglyph-minus-sign' | 'rioglyph-minus' | 'rioglyph-missing' | 'rioglyph-mode-dark-light' | 'rioglyph-more' | 'rioglyph-new-window' | 'rioglyph-newspaper' | 'rioglyph-note' | 'rioglyph-notification' | 'rioglyph-number-1' | 'rioglyph-number-2' | 'rioglyph-number-3' | 'rioglyph-off' | 'rioglyph-oil-can' | 'rioglyph-ok-circle' | 'rioglyph-ok-dashed' | 'rioglyph-ok-sign' | 'rioglyph-ok' | 'rioglyph-onboarding' | 'rioglyph-ongoing' | 'rioglyph-option-horizontal' | 'rioglyph-option-vertical' | 'rioglyph-order' | 'rioglyph-palette-broken' | 'rioglyph-palette-empty' | 'rioglyph-palette' | 'rioglyph-paper-clip' | 'rioglyph-parcel-broken' | 'rioglyph-parcel' | 'rioglyph-parking' | 'rioglyph-pause-circle' | 'rioglyph-pause' | 'rioglyph-pdf-file' | 'rioglyph-pencil-square' | 'rioglyph-pencil' | 'rioglyph-phone' | 'rioglyph-pictures' | 'rioglyph-pin-range' | 'rioglyph-pin' | 'rioglyph-play-circle' | 'rioglyph-play' | 'rioglyph-plugged-off' | 'rioglyph-plugged-on' | 'rioglyph-plus-light' | 'rioglyph-plus-sign' | 'rioglyph-plus' | 'rioglyph-pm' | 'rioglyph-poi' | 'rioglyph-polygon' | 'rioglyph-position' | 'rioglyph-print' | 'rioglyph-progress-ongoing' | 'rioglyph-progress-remaining' | 'rioglyph-progression' | 'rioglyph-prompt' | 'rioglyph-pto-off' | 'rioglyph-pto-on' | 'rioglyph-pushpin' | 'rioglyph-puzzle' | 'rioglyph-pylon' | 'rioglyph-qr-code' | 'rioglyph-question-sign' | 'rioglyph-question' | 'rioglyph-record' | 'rioglyph-recycle' | 'rioglyph-refresh' | 'rioglyph-remove-circle' | 'rioglyph-remove-sign' | 'rioglyph-remove' | 'rioglyph-repeat-square' | 'rioglyph-repeat' | 'rioglyph-resize-full' | 'rioglyph-resize-horizontal' | 'rioglyph-resize-small' | 'rioglyph-resize-vertical' | 'rioglyph-retrofit' | 'rioglyph-retweet' | 'rioglyph-revert' | 'rioglyph-rio-marker' | 'rioglyph-rio' | 'rioglyph-road-restrictions' | 'rioglyph-road' | 'rioglyph-robot' | 'rioglyph-rocket' | 'rioglyph-role-management' | 'rioglyph-route-option' | 'rioglyph-route-view' | 'rioglyph-route' | 'rioglyph-ruler' | 'rioglyph-satellite-radar' | 'rioglyph-save' | 'rioglyph-scale' | 'rioglyph-scan' | 'rioglyph-scissors' | 'rioglyph-search-list' | 'rioglyph-search-truck' | 'rioglyph-search' | 'rioglyph-send' | 'rioglyph-series' | 'rioglyph-server-stack' | 'rioglyph-settings' | 'rioglyph-share-alt' | 'rioglyph-share-nodes' | 'rioglyph-share' | 'rioglyph-shelve' | 'rioglyph-ship' | 'rioglyph-shopping-bag' | 'rioglyph-shopping-cart' | 'rioglyph-signature' | 'rioglyph-slope-down-max' | 'rioglyph-slope-down-min' | 'rioglyph-slope-up-max' | 'rioglyph-slope-up-min' | 'rioglyph-sort-by-attributes-alt' | 'rioglyph-sort-by-attributes' | 'rioglyph-sort' | 'rioglyph-sparkles' | 'rioglyph-speed' | 'rioglyph-sphere' | 'rioglyph-spinner' | 'rioglyph-split-view' | 'rioglyph-square-dashed' | 'rioglyph-stack-add' | 'rioglyph-stack-iso' | 'rioglyph-stack' | 'rioglyph-star-empty' | 'rioglyph-star' | 'rioglyph-stars' | 'rioglyph-start' | 'rioglyph-stats-high' | 'rioglyph-stats-line-dots' | 'rioglyph-stats-low' | 'rioglyph-stats-medium' | 'rioglyph-stats' | 'rioglyph-status-available' | 'rioglyph-status-change-horizontal' | 'rioglyph-status-change' | 'rioglyph-status-driving' | 'rioglyph-status-resting' | 'rioglyph-status-working' | 'rioglyph-steering-wheel' | 'rioglyph-stopover' | 'rioglyph-support' | 'rioglyph-table-view' | 'rioglyph-tachograph-download' | 'rioglyph-tachograph' | 'rioglyph-tag' | 'rioglyph-tasks' | 'rioglyph-temperature' | 'rioglyph-th-list' | 'rioglyph-thumbs-down' | 'rioglyph-thumbs-up' | 'rioglyph-tickets' | 'rioglyph-time-alt' | 'rioglyph-time-cancle' | 'rioglyph-time-incomplete' | 'rioglyph-time' | 'rioglyph-tire' | 'rioglyph-tms' | 'rioglyph-to-bottom' | 'rioglyph-to-left' | 'rioglyph-to-right' | 'rioglyph-to-top' | 'rioglyph-tracking-package' | 'rioglyph-traffic-lights' | 'rioglyph-trailer-baseline' | 'rioglyph-trailer-liquid' | 'rioglyph-trailer-standard' | 'rioglyph-trailer-tipping' | 'rioglyph-trailer' | 'rioglyph-trailerposition' | 'rioglyph-train' | 'rioglyph-transfer' | 'rioglyph-transition-push-right' | 'rioglyph-transition-right' | 'rioglyph-trash' | 'rioglyph-triangle-bottom' | 'rioglyph-triangle-left' | 'rioglyph-triangle-right' | 'rioglyph-triangle-top' | 'rioglyph-trophy' | 'rioglyph-truck-baseline' | 'rioglyph-truck-breakdown' | 'rioglyph-truck-unit' | 'rioglyph-truck' | 'rioglyph-unassigned' | 'rioglyph-unavailable' | 'rioglyph-unlink' | 'rioglyph-upload' | 'rioglyph-user-add' | 'rioglyph-user-group' | 'rioglyph-user-ok' | 'rioglyph-user-remove' | 'rioglyph-user-sign-off' | 'rioglyph-user-sign' | 'rioglyph-user' | 'rioglyph-van-baseline' | 'rioglyph-van' | 'rioglyph-variable' | 'rioglyph-video-off' | 'rioglyph-video' | 'rioglyph-volume' | 'rioglyph-wallet' | 'rioglyph-warehouse' | 'rioglyph-warning-sign' | 'rioglyph-weather-cloudy' | 'rioglyph-weather-icy' | 'rioglyph-weather-overcast' | 'rioglyph-weather-raining' | 'rioglyph-weather-snowing' | 'rioglyph-weather-stormy' | 'rioglyph-weather-sunny' | 'rioglyph-weather-thundering' | 'rioglyph-weather-windy' | 'rioglyph-weight' | 'rioglyph-width' | 'rioglyph-wifi-off' | 'rioglyph-wifi' | 'rioglyph-window' | 'rioglyph-workflow-step' | 'rioglyph-workflow' | 'rioglyph-workshop' | 'rioglyph-wrench' | 'rioglyph-xmas-raindeer' | 'rioglyph-xmas-santa';

package/components/rules/RuleConnector.js

@@ -1,5 +1,5 @@
 import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import e from "classnames";
+import e from "../../utils/classNames.js";
 const y = (n) => n.replace("bg", "border-color"), l = e(
   "width-20",
   "height-20",