@macive/ui 0.0.12 → 0.0.14

package/dist/src/components/Image/Image.js

@@ -1,29 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fallbackImageSVG = exports.Image = void 0;
+exports.Image = exports.fallbackImageSVG = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @next/next/no-img-element */
 const react_1 = require("react");
-const utils_1 = require("../../utils");
-function Image({ alt, sourceSet, source, crossOrigin, onLoad, className, rounded, ...rest }) {
-    const [imageSource, setImageSource] = (0, react_1.useState)(source);
-    const finalSourceSet = sourceSet
-        ? sourceSet.map(({ source: subSource, descriptor }) => `${subSource} ${descriptor}`).join(',')
-        : null;
-    const handleLoad = (0, react_1.useCallback)(() => {
-        if (onLoad)
-            onLoad();
-    }, [onLoad]);
-    const handleError = () => {
-        // Handle image load error by setting the image source to the fallback SVG
-        const fallbackImageSource = `data:image/svg+xml;base64,${btoa(exports.fallbackImageSVG)}`;
-        setImageSource(fallbackImageSource);
-    };
-    return ((0, jsx_runtime_1.jsx)("img", { alt: alt, src: imageSource || baseImage, crossOrigin: crossOrigin, className: (0, utils_1.cn)(className, rounded && 'rounded-lg'), onLoad: handleLoad, ...(finalSourceSet ? { srcSet: finalSourceSet } : {}), ...rest, onError: handleError }));
-}
-exports.Image = Image;
-const ErrorSVG = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: '#FF0000', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [(0, jsx_runtime_1.jsx)("circle", { cx: '12', cy: '12', r: '10' }), (0, jsx_runtime_1.jsx)("line", { x1: '12', y1: '8', x2: '12', y2: '12' }), (0, jsx_runtime_1.jsx)("line", { x1: '12', y1: '16', x2: '12', y2: '16' })] }));
+// Fallback SVG as a data URL
 exports.fallbackImageSVG = `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#ccc">
+    <rect width="100" height="100" />
+    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#000" font-size="12">Image not available</text>
+  </svg>
+`;
+const fallbackSVG = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="#eae6e6" width="32" height="32" viewBox="0 0 32 32" stroke="#eae6e6">
   <path d="M30 3.4141L28.5859 2 2 28.5859 3.4141 30l2-2H26a2.0027 2.0027 0 0 0 2-2V5.4141ZM26 26H7.4141l7.7929-7.793 2.3788 2.3787a2 2 0 0 0 2.8284 0L22 19l4 3.9973ZM26 20.1682l-2.5858-2.5859a2 2 0 0 0-2.8284 0L19 19.1682l-2.377-2.3771L26 7.4141Z"/>
   <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
@@ -35,4 +22,84 @@ const errorkSVG = `
   <path d="M6 22V19l5-4.9966 1.3733 1.3733 1.4159-1.416-1.375-1.375a2 2 0 0 0-2.8284 0L6 16.1716V6H22V4H6A2.002 2.002 0 0 0 4 6V22Z"/>
 </svg>
 `;
-const baseImage = 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZWFlNmU2IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3Ryb2tlPSIjZWFlNmU2Ij4KICA8cGF0aCBkPSJNMzAgMy40MTQxTDI4LjU4NTkgMiAyIDI4LjU4NTkgMy40MTQxIDMwbDItMkgyNmEyLjAwMjcgMi4wMDI3IDAgMCAwIDItMlY1LjQxNDFaTTI2IDI2SDcuNDE0MWw3Ljc5MjktNy43OTMgMi4zNzg4IDIuMzc4N2EyIDIgMCAwIDAgMi44Mjg0IDBMMjIgMTlsNCAzLjk5NzNaTTI2IDIwLjE2ODJsLTIuNTg1OC0yLjU4NTlhMiAyIDAgMCAwLTIuODI4NCAwTDE5IDE5LjE2ODJsLTIuMzc3LTIuMzc3MUwyNiA3LjQxNDFaIi8+CiAgPHBhdGggZD0iTTYgMjJWMTlsNS00Ljk5NjYgMS4zNzMzIDEuMzczMyAxLjQxNTktMS40MTYtMS4zNzUtMS4zNzVhMiAyIDAgMCAwLTIuODI4NCAwTDYgMTYuMTcxNlY2SDIyVjRINkEyLjAwMiAyLjAwMiAwIDAgMCA0IDZWMjJaIi8+Cjwvc3ZnPgo=';
+const fallbackImageURL = `data:image/svg+xml;utf8,${encodeURIComponent(fallbackSVG)}`;
+function Image({ alt, sourceSet, source, crossOrigin, onLoad, onError, className, rounded, lazy = true, // Default to false
+style, ...rest }) {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(lazy ? '' : source); // Start with empty src if lazy
+    const [isInView, setIsInView] = (0, react_1.useState)(!lazy); // Assume visible if not lazy
+    const imgRef = (0, react_1.useRef)(null);
+    // Intersection Observer for lazy loading
+    (0, react_1.useEffect)(() => {
+        if (!lazy)
+            return;
+        // Store the current ref value in a variable
+        const currentImgRef = imgRef.current;
+        if (!currentImgRef)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setIsInView(true);
+                    observer.unobserve(entry.target); // Stop observing once the image is in view
+                }
+            });
+        }, {
+            rootMargin: '0px',
+            threshold: 0.1, // Trigger when 10% of the image is visible
+        });
+        observer.observe(currentImgRef);
+        return () => {
+            if (currentImgRef) {
+                observer.unobserve(currentImgRef);
+            }
+        };
+    }, [lazy]);
+    // Load image when in view
+    (0, react_1.useEffect)(() => {
+        if (!isInView)
+            return;
+        const loadImage = async () => {
+            try {
+                const img = new window.Image();
+                img.src = source;
+                img.crossOrigin = crossOrigin || null;
+                if (sourceSet) {
+                    const sourceSetString = sourceSet
+                        .map(({ source, descriptor }) => `${source} ${descriptor || ''}`)
+                        .join(', ');
+                    img.srcset = sourceSetString;
+                }
+                img.onload = () => {
+                    setImgSrc(source);
+                    setIsLoading(false);
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                };
+                img.onerror = () => {
+                    setImgSrc(fallbackImageURL); // Set fallback SVG on error
+                    setIsLoading(false);
+                    onError === null || onError === void 0 ? void 0 : onError();
+                };
+            }
+            catch (error) {
+                setImgSrc(fallbackImageURL); // Set fallback SVG on error
+                setIsLoading(false);
+                onError === null || onError === void 0 ? void 0 : onError();
+            }
+        };
+        loadImage();
+    }, [source, sourceSet, crossOrigin, onLoad, onError, isInView]);
+    // Combine styles for rounded corners
+    const combinedStyle = {
+        ...(rounded ? { borderRadius: 'var(--p-border-radius-3)' } : {}),
+        ...style,
+    };
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    (0, jsx_runtime_1.jsx)("img", { ...rest, ref: imgRef, alt: alt, src: imgSrc, style: combinedStyle, crossOrigin: crossOrigin, srcSet: sourceSet === null || sourceSet === void 0 ? void 0 : sourceSet.map(({ source, descriptor }) => `${source} ${descriptor || ''}`).join(', '), className: className, loading: lazy ? 'lazy' : 'eager', onError: (e) => {
+            e.currentTarget.src = fallbackImageURL; // Set fallback SVG on error
+            setIsLoading(false);
+            onError === null || onError === void 0 ? void 0 : onError();
+        } }));
+}
+exports.Image = Image;

package/dist/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.classnames.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const DirectionButtonClassnames = {
     "DirectionButton": "DirectionButton-DirectionButton",
-    "DirectionButton-active": "DirectionButton-active",
+    "DirectionButton-active": "DirectionButton-DirectionButton-active",
     "Label": "DirectionButton-Label"
 };
 exports.default = DirectionButtonClassnames;

package/dist/src/components/IndexTable/IndexTable.classnames.js

@@ -5,70 +5,70 @@ const IndexTableClassnames = {
     "IndexTable": "IndexTable-IndexTable",
     "IndexTableWrapper": "IndexTable-IndexTableWrapper",
     "IndexTableWrapperWithBulkActions": "IndexTable-IndexTableWrapperWithBulkActions",
-    "LoadingContainer-enter": "IndexTable-enter",
-    "LoadingContainer-enter-active": "IndexTable-enter-active",
-    "LoadingContainer-exit": "IndexTable-exit",
-    "LoadingContainer-exit-active": "IndexTable-exit-active",
+    "LoadingContainer-enter": "IndexTable-LoadingContainer-enter",
+    "LoadingContainer-enter-active": "IndexTable-LoadingContainer-enter-active",
+    "LoadingContainer-exit": "IndexTable-LoadingContainer-exit",
+    "LoadingContainer-exit-active": "IndexTable-LoadingContainer-exit-active",
     "LoadingPanel": "IndexTable-LoadingPanel",
     "LoadingPanelRow": "IndexTable-LoadingPanelRow",
     "LoadingPanelText": "IndexTable-LoadingPanelText",
     "Table": "IndexTable-Table",
-    "Table-scrolling": "IndexTable-scrolling",
-    "TableCell-first": "IndexTable-first",
+    "Table-scrolling": "IndexTable-Table-scrolling",
+    "TableCell-first": "IndexTable-TableCell-first",
     "TableCell": "IndexTable-TableCell",
-    "TableHeading-first": "IndexTable-first",
-    "TableHeading-second": "IndexTable-second",
-    "Table-sticky": "IndexTable-sticky",
-    "Table-unselectable": "IndexTable-unselectable",
+    "TableHeading-first": "IndexTable-TableHeading-first",
+    "TableHeading-second": "IndexTable-TableHeading-second",
+    "Table-sticky": "IndexTable-Table-sticky",
+    "Table-unselectable": "IndexTable-Table-unselectable",
     "TableRow": "IndexTable-TableRow",
-    "TableRow-unclickable": "IndexTable-unclickable",
+    "TableRow-unclickable": "IndexTable-TableRow-unclickable",
     "statusSuccess": "IndexTable-statusSuccess",
     "statusSubdued": "IndexTable-statusSubdued",
-    "TableRow-hovered": "IndexTable-hovered",
-    "TableRow-selected": "IndexTable-selected",
-    "TableRow-subdued": "IndexTable-subdued",
-    "TableRow-disabled": "IndexTable-disabled",
+    "TableRow-hovered": "IndexTable-TableRow-hovered",
+    "TableRow-selected": "IndexTable-TableRow-selected",
+    "TableRow-subdued": "IndexTable-TableRow-subdued",
+    "TableRow-disabled": "IndexTable-TableRow-disabled",
     "ZebraStriping": "IndexTable-ZebraStriping",
     "TableHeading": "IndexTable-TableHeading",
-    "TableHeading-align-center": "IndexTable-align-center",
-    "TableHeading-align-end": "IndexTable-align-end",
-    "TableHeading-sortable": "IndexTable-sortable",
-    "TableHeading-flush": "IndexTable-flush",
+    "TableHeading-align-center": "IndexTable-TableHeading-align-center",
+    "TableHeading-align-end": "IndexTable-TableHeading-align-end",
+    "TableHeading-sortable": "IndexTable-TableHeading-sortable",
+    "TableHeading-flush": "IndexTable-TableHeading-flush",
     "TableHeadingSortButton": "IndexTable-TableHeadingSortButton",
     "TableHeadingSortIcon": "IndexTable-TableHeadingSortIcon",
-    "TableHeadingSortButton-heading-align-end": "IndexTable-heading-align-end",
-    "TableHeadingSortButton-heading-align-end-currently-sorted": "IndexTable-heading-align-end-currently-sorted",
-    "TableHeadingSortIcon-heading-align-end": "IndexTable-heading-align-end",
-    "TableHeadingSortButton-heading-align-end-previously-sorted": "IndexTable-heading-align-end-previously-sorted",
+    "TableHeadingSortButton-heading-align-end": "IndexTable-TableHeadingSortButton-heading-align-end",
+    "TableHeadingSortButton-heading-align-end-currently-sorted": "IndexTable-TableHeadingSortButton-heading-align-end-currently-sorted",
+    "TableHeadingSortIcon-heading-align-end": "IndexTable-TableHeadingSortIcon-heading-align-end",
+    "TableHeadingSortButton-heading-align-end-previously-sorted": "IndexTable-TableHeadingSortButton-heading-align-end-previously-sorted",
     "TableHeadingUnderline": "IndexTable-TableHeadingUnderline",
     "TableHeadingTooltipUnderlinePlaceholder": "IndexTable-TableHeadingTooltipUnderlinePlaceholder",
-    "TableHeadingSortIcon-visible": "IndexTable-visible",
+    "TableHeadingSortIcon-visible": "IndexTable-TableHeadingSortIcon-visible",
     "TableHeadingSortSvg": "IndexTable-TableHeadingSortSvg",
     "SortableTableHeadingWithCustomMarkup": "IndexTable-SortableTableHeadingWithCustomMarkup",
     "SortableTableHeaderWrapper": "IndexTable-SortableTableHeaderWrapper",
     "ColumnHeaderCheckboxWrapper": "IndexTable-ColumnHeaderCheckboxWrapper",
     "FirstStickyHeaderElement": "IndexTable-FirstStickyHeaderElement",
-    "TableHeading-unselectable": "IndexTable-unselectable",
-    "TableCell-flush": "IndexTable-flush",
-    "Table-sticky-scrolling": "IndexTable-sticky-scrolling",
-    "TableHeading-last": "IndexTable-last",
-    "Table-sticky-last": "IndexTable-sticky-last",
-    "Table-sortable": "IndexTable-sortable",
+    "TableHeading-unselectable": "IndexTable-TableHeading-unselectable",
+    "TableCell-flush": "IndexTable-TableCell-flush",
+    "Table-sticky-scrolling": "IndexTable-Table-sticky-scrolling",
+    "TableHeading-last": "IndexTable-TableHeading-last",
+    "Table-sticky-last": "IndexTable-Table-sticky-last",
+    "Table-sortable": "IndexTable-Table-sortable",
     "StickyTable": "IndexTable-StickyTable",
     "StickyTableHeader": "IndexTable-StickyTableHeader",
-    "StickyTableHeader-isSticky": "IndexTable-isSticky",
+    "StickyTableHeader-isSticky": "IndexTable-StickyTableHeader-isSticky",
     "StickyTableColumnHeader": "IndexTable-StickyTableColumnHeader",
     "StickyTableHeadings": "IndexTable-StickyTableHeadings",
-    "StickyTableHeading-second": "IndexTable-second",
+    "StickyTableHeading-second": "IndexTable-StickyTableHeading-second",
     "unselectable": "IndexTable-unselectable",
-    "StickyTableHeading-second-scrolling": "IndexTable-second-scrolling",
+    "StickyTableHeading-second-scrolling": "IndexTable-StickyTableHeading-second-scrolling",
     "ScrollLeft": "IndexTable-ScrollLeft",
     "ScrollRight": "IndexTable-ScrollRight",
-    "ScrollRight-onboarding": "IndexTable-onboarding",
+    "ScrollRight-onboarding": "IndexTable-ScrollRight-onboarding",
     "BulkActionsWrapper": "IndexTable-BulkActionsWrapper",
     "BulkActionsWrapperSticky": "IndexTable-BulkActionsWrapperSticky",
     "SelectAllActionsWrapper": "IndexTable-SelectAllActionsWrapper",
-    "StickyTableHeader-condensed": "IndexTable-condensed",
+    "StickyTableHeader-condensed": "IndexTable-StickyTableHeader-condensed",
     "ScrollBarContainer": "IndexTable-ScrollBarContainer",
     "scrollBarContainerCondensed": "IndexTable-scrollBarContainerCondensed",
     "scrollBarContainerHidden": "IndexTable-scrollBarContainerHidden",
@@ -79,7 +79,7 @@ const IndexTableClassnames = {
     "condensedRow": "IndexTable-condensedRow",
     "CondensedList": "IndexTable-CondensedList",
     "HeaderWrapper": "IndexTable-HeaderWrapper",
-    "StickyTable-condensed": "IndexTable-condensed",
+    "StickyTable-condensed": "IndexTable-StickyTable-condensed",
     "ScrollBarContent": "IndexTable-ScrollBarContent"
 };
 exports.default = IndexTableClassnames;

package/dist/src/components/Input/Input.classnames.js

@@ -1,8 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const InputClassnames = {
-    "input-prefix": "Input-prefix",
-    "input-suffix": "Input-suffix",
-    "input-field": "Input-field"
+    "Backdrop-connectedLeft": "Input-Backdrop-connectedLeft",
+    "Backdrop-connectedRight": "Input-Backdrop-connectedRight",
+    "TextField": "Input-TextField",
+    "ClearButton": "Input-ClearButton",
+    "multiline": "Input-multiline",
+    "Input": "Input-Input",
+    "hasValue": "Input-hasValue",
+    "focus": "Input-focus",
+    "VerticalContent": "Input-VerticalContent",
+    "Backdrop": "Input-Backdrop",
+    "error": "Input-error",
+    "readOnly": "Input-readOnly",
+    "disabled": "Input-disabled",
+    "Prefix": "Input-Prefix",
+    "suggestion": "Input-suggestion",
+    "borderless": "Input-borderless",
+    "Input-hasClearButton": "Input-Input-hasClearButton",
+    "Input-suffixed": "Input-Input-suffixed",
+    "Input-alignRight": "Input-Input-alignRight",
+    "Input-alignLeft": "Input-Input-alignLeft",
+    "Input-alignCenter": "Input-Input-alignCenter",
+    "Suffix": "Input-Suffix",
+    "CharacterCount": "Input-CharacterCount",
+    "AlignFieldBottom": "Input-AlignFieldBottom",
+    "Spinner": "Input-Spinner",
+    "SpinnerIcon": "Input-SpinnerIcon",
+    "Resizer": "Input-Resizer",
+    "DummyInput": "Input-DummyInput",
+    "Segment": "Input-Segment",
+    "monospaced": "Input-monospaced"
 };
 exports.default = InputClassnames;

package/dist/src/components/Input/Input.js

@@ -6,19 +6,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const css_1 = require("../../utils/css");
-const Label_1 = require("../Label");
-const Text_1 = require("../Text");
+const css_1 = require("../../utilities/css");
+const unique_id_1 = require("../../utilities/unique-id");
+const Connected_1 = require("../Connected");
+const Labelled_1 = require("../Labelled");
 const Input_classnames_1 = __importDefault(require("./Input.classnames"));
-/**
- * A simple input component.
- *
- * @param props InputProps for the component.
- * @returns A React functional component.
- */
-// const Input: React.FC<InputProps> = (props) => {
 exports.Input = react_1.default.forwardRef((props, ref) => {
-    const { className, gap, suffix, preffix, invalid, error, label, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(gap == 'none' && 'mt-4', className), children: [(0, jsx_runtime_1.jsx)("div", { className: 'mb-2', children: (0, jsx_runtime_1.jsx)(Label_1.Label, { id: rest === null || rest === void 0 ? void 0 : rest.name, children: label }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.classNames)(' focus-within:border-accent group relative  flex  w-full items-center rounded border-[0.5px]  border-gray-400  focus-within:ring focus-within:ring-gray-200  focus-within:ring-opacity-50 group-hover:!border-red-700 dark:bg-gray-600 dark:text-white md:text-sm ', error && '!border-danger'), children: [preffix && (0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default['input-prefix'], children: preffix }), (0, jsx_runtime_1.jsx)("input", { ref: ref, className: (0, css_1.classNames)(Input_classnames_1.default['input-field'], 'focus:shadow-outline ring-ring-brand-yellow focus:ring-brand-yellow focus:border-brand-yellow border-brand-yellow border border-none shadow-none outline-none focus:outline-none focus:ring', invalid ? 'border-red-500' : '', error ? 'border-red-500' : '', suffix ? 'dpr-10 ' : 'pr-4', preffix ? 'pl-1  placeholder:pl-0' : 'pl-4'), ...rest }), suffix && (0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default['input-suffix'], children: suffix })] }), error && (0, jsx_runtime_1.jsx)("p", { className: 'capitalize-first text-sm italic !text-red-500', children: error }), (props === null || props === void 0 ? void 0 : props.info) && (0, jsx_runtime_1.jsxs)(Text_1.Text, { color: 'subdued', children: [props === null || props === void 0 ? void 0 : props.info, " "] })] }));
+    var _a;
+    const { prefix, suffix, verticalContent, placeholder, 
+    // value = '',
+    helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, autoComplete, max, maxLength, min, showCharacterCount, requiredIndicator, monospaced, suggestion, onClearButtonClick, borderless, align, step, ...rest } = props;
+    const id = (0, unique_id_1.useUniqueId)('TextField', idProp);
+    const className = (0, css_1.classNames)(Input_classnames_1.default.TextField, 
+    // Boolean(normalizedValue) && styles.hasValue,
+    disabled && Input_classnames_1.default.disabled, readOnly && Input_classnames_1.default.readOnly, error && Input_classnames_1.default.error, borderless && Input_classnames_1.default.borderless);
+    const inputClassName = (0, css_1.classNames)(Input_classnames_1.default.Input, suffix && Input_classnames_1.default['Input'], clearButton && Input_classnames_1.default['Input-hasClearButton'], monospaced && Input_classnames_1.default.monospaced, suggestion && Input_classnames_1.default.suggestion, 
+    //@ts-expect-error
+    align && Input_classnames_1.default[variationName('Input-align', align)]);
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [prefix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Prefix, id: `${id}-Prefix`, children: prefix })) : null, (0, jsx_runtime_1.jsx)("input", { ...{
+                            name,
+                            id,
+                            disabled,
+                            readOnly,
+                            role,
+                            autoFocus,
+                            placeholder,
+                            autoComplete,
+                            className: inputClassName,
+                            min,
+                            max,
+                            type,
+                            step,
+                            ...rest,
+                        }, ref: (_a = rest.ref) !== null && _a !== void 0 ? _a : ref }), suffix ? ((0, jsx_runtime_1.jsx)("div", { className: Input_classnames_1.default.Suffix, id: `${id}-Suffix`, children: suffix })) : null, showCharacterCount ? ((0, jsx_runtime_1.jsx)("div", { id: `${id}-CharacterCounter`, className: Input_classnames_1.default.CharacterCount, "aria-atomic": 'true', children: rest.value })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(Input_classnames_1.default.Backdrop, connectedLeft && Input_classnames_1.default['Backdrop-connectedLeft'], connectedRight && Input_classnames_1.default['Backdrop-connectedRight']) })] }) }) }));
 });
 exports.Input.displayName = 'Input';

package/dist/src/components/Labelled/Labelled.classnames.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const LabelledClassnames = {
+    "Label": "Labelled-Label",
     "hidden": "Labelled-hidden",
     "LabelWrapper": "Labelled-LabelWrapper",
     "HelpText": "Labelled-HelpText",

package/dist/src/components/Labelled/Labelled.js

@@ -13,8 +13,7 @@ Object.defineProperty(exports, "labelID", { enumerable: true, get: function () {
 const Text_1 = require("../Text");
 const Labelled_classnames_1 = __importDefault(require("./Labelled.classnames"));
 function Labelled({ id, label, error, action, helpText, children, labelHidden, requiredIndicator, ...rest }) {
-    // const className = classNames(labelHidden && styles.hidden)
-    const className = 'Labelled-w-full w-full';
+    const className = (0, css_1.classNames)(labelHidden && Labelled_classnames_1.default.hidden, Labelled_classnames_1.default.Label);
     const actionMarkup = action ? ((0, jsx_runtime_1.jsx)("div", { className: Labelled_classnames_1.default.Action, children: (0, Button_1.buttonFrom)(action, { plain: true }) })) : null;
     const helpTextMarkup = helpText ? ((0, jsx_runtime_1.jsx)("div", { className: Labelled_classnames_1.default.HelpText, id: helpTextID(id), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', color: 'subdued', breakWord: true, children: helpText }) })) : null;
     const errorMarkup = error && typeof error !== 'boolean' && ((0, jsx_runtime_1.jsx)("div", { className: Labelled_classnames_1.default.Error, children: (0, jsx_runtime_1.jsx)(InlineError_1.InlineError, { message: error, fieldID: id }) }));

package/dist/src/components/Layout/Layout.classnames.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const LayoutClassnames = {
     "Layout": "Layout-Layout",
     "Section": "Layout-Section",
-    "Section-secondary": "Layout-secondary",
-    "Section-fullWidth": "Layout-fullWidth",
-    "Section-oneHalf": "Layout-oneHalf",
-    "Section-oneThird": "Layout-oneThird",
+    "Section-secondary": "Layout-Section-secondary",
+    "Section-fullWidth": "Layout-Section-fullWidth",
+    "Section-oneHalf": "Layout-Section-oneHalf",
+    "Section-oneThird": "Layout-Section-oneThird",
     "AnnotatedSection": "Layout-AnnotatedSection",
     "AnnotationWrapper": "Layout-AnnotationWrapper",
     "AnnotationContent": "Layout-AnnotationContent",

package/dist/src/components/LegacyCard/LegacyCard.classnames.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const LegacyCardClassnames = {
     "LegacyCard": "LegacyCard-LegacyCard",
     "subdued": "LegacyCard-subdued",
-    "Section-hideOnPrint": "LegacyCard-hideOnPrint",
+    "Section-hideOnPrint": "LegacyCard-Section-hideOnPrint",
     "hideOnPrint": "LegacyCard-hideOnPrint",
     "Header": "LegacyCard-Header",
     "Section": "LegacyCard-Section",
-    "Section-fullWidth": "LegacyCard-fullWidth",
-    "Section-flush": "LegacyCard-flush",
-    "Section-subdued": "LegacyCard-subdued",
+    "Section-fullWidth": "LegacyCard-Section-fullWidth",
+    "Section-flush": "LegacyCard-Section-flush",
+    "Section-subdued": "LegacyCard-Section-subdued",
     "SectionHeader": "LegacyCard-SectionHeader",
     "Subsection": "LegacyCard-Subsection",
     "Footer": "LegacyCard-Footer",

package/dist/src/components/LegacyStack/LegacyStack.classnames.js

@@ -22,6 +22,6 @@ const LegacyStackClassnames = {
     "alignmentFill": "LegacyStack-alignmentFill",
     "alignmentBaseline": "LegacyStack-alignmentBaseline",
     "vertical": "LegacyStack-vertical",
-    "Item-fill": "LegacyStack-fill"
+    "Item-fill": "LegacyStack-Item-fill"
 };
 exports.default = LegacyStackClassnames;

package/dist/src/components/Navigation/Navigation.classnames.js

@@ -10,32 +10,32 @@ const NavigationClassnames = {
     "Logo": "Navigation-Logo",
     "LogoLink": "Navigation-LogoLink",
     "Item": "Navigation-Item",
-    "Icon-resized": "Navigation-resized",
+    "Icon-resized": "Navigation-Icon-resized",
     "ItemInnerWrapper": "Navigation-ItemInnerWrapper",
-    "Item-selected": "Navigation-selected",
-    "Item-disabled": "Navigation-disabled",
+    "Item-selected": "Navigation-Item-selected",
+    "Item-disabled": "Navigation-Item-disabled",
     "Icon": "Navigation-Icon",
     "Badge": "Navigation-Badge",
-    "ListItem-hasAction": "Navigation-hasAction",
+    "ListItem-hasAction": "Navigation-ListItem-hasAction",
     "subNavigationActive": "Navigation-subNavigationActive",
-    "Item-child-active": "Navigation-child-active",
+    "Item-child-active": "Navigation-Item-child-active",
     "ListItem": "Navigation-ListItem",
     "RollupSection": "Navigation-RollupSection",
     "SecondaryNavigation": "Navigation-SecondaryNavigation",
     "ItemWrapper": "Navigation-ItemWrapper",
     "ItemInnerDisabled": "Navigation-ItemInnerDisabled",
-    "ItemInnerWrapper-selected": "Navigation-selected",
+    "ItemInnerWrapper-selected": "Navigation-ItemInnerWrapper-selected",
     "Text": "Navigation-Text",
-    "Text-truncated": "Navigation-truncated",
+    "Text-truncated": "Navigation-Text-truncated",
     "SecondaryActions": "Navigation-SecondaryActions",
     "ItemWithFloatingActions": "Navigation-ItemWithFloatingActions",
-    "ItemInnerWrapper-display-actions-on-hover": "Navigation-display-actions-on-hover",
+    "ItemInnerWrapper-display-actions-on-hover": "Navigation-ItemInnerWrapper-display-actions-on-hover",
     "SecondaryAction": "Navigation-SecondaryAction",
     "List": "Navigation-List",
-    "SecondaryNavigation-noIcon": "Navigation-noIcon",
+    "SecondaryNavigation-noIcon": "Navigation-SecondaryNavigation-noIcon",
     "Section": "Navigation-Section",
-    "Section-fill": "Navigation-fill",
-    "Section-withSeparator": "Navigation-withSeparator",
+    "Section-fill": "Navigation-Section-fill",
+    "Section-withSeparator": "Navigation-Section-withSeparator",
     "SectionHeading": "Navigation-SectionHeading",
     "Action": "Navigation-Action",
     "RollupToggle": "Navigation-RollupToggle",

package/dist/src/components/OptionList/components/Checkbox/Checkbox.classnames.js

@@ -5,7 +5,7 @@ const CheckboxClassnames = {
     "active": "Checkbox-active",
     "Backdrop": "Checkbox-Backdrop",
     "Input": "Checkbox-Input",
-    "Input-indeterminate": "Checkbox-indeterminate",
+    "Input-indeterminate": "Checkbox-Input-indeterminate",
     "Icon": "Checkbox-Icon",
     "hover": "Checkbox-hover"
 };

package/dist/src/components/PageActions/PageActions.js

@@ -4,6 +4,7 @@ exports.PageActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const is_interface_1 = require("../../utils/is-interface");
 const is_react_element_1 = require("../../utils/is-react-element");
+const Box_1 = require("../Box");
 const Button_1 = require("../Button");
 const ButtonGroup_1 = require("../ButtonGroup");
 const LegacyStack_1 = require("../LegacyStack");
@@ -22,6 +23,6 @@ function PageActions({ primaryAction, secondaryActions }) {
     else if ((0, is_react_element_1.isReactElement)(secondaryActions)) {
         secondaryActionsMarkup = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: secondaryActions });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: 'solid m-auto mt-4 border-t p-4 md:mt-8', children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { distribution: 'trailing', spacing: 'tight', children: [secondaryActionsMarkup, primaryActionMarkup] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '4', children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { distribution: 'trailing', spacing: 'tight', children: [secondaryActionsMarkup, primaryActionMarkup] }) }));
 }
 exports.PageActions = PageActions;

package/dist/src/components/Pagination/V1/Page.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaginationA = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../utils");
+const PaginationV1_classnames_1 = __importDefault(require("./PaginationV1.classnames"));
 class Page extends react_1.Component {
     constructor() {
         super(...arguments);
@@ -39,6 +43,7 @@ Page.defaultProps = {
     href: '#',
 };
 const PaginationA = ({ onClick, css, href, isActive, ariaLabel, pageText, }) => {
-    return ((0, jsx_runtime_1.jsx)("li", { className: (0, utils_1.cn)('hover:bg-active rounded-lg px-4 py-2     hover:cursor-pointer  hover:text-white hover:opacity-80', isActive ? 'bg-active   text-white' : 'bg-gray-300  text-gray-700'), onClick: onClick, children: (0, jsx_runtime_1.jsx)("a", { className: css, href: href, "aria-label": ariaLabel, children: pageText }) }));
+    return ((0, jsx_runtime_1.jsx)("li", { className: (0, utils_1.cn)(PaginationV1_classnames_1.default.paginationItem, // Base styles
+        isActive ? PaginationV1_classnames_1.default.active : PaginationV1_classnames_1.default.inactive), onClick: onClick, children: (0, jsx_runtime_1.jsx)("a", { className: css, href: href, "aria-label": ariaLabel, children: pageText }) }));
 };
 exports.PaginationA = PaginationA;

package/dist/src/components/Pagination/V1/PaginationV1.classnames.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PaginationV1Classnames = {
+    "paginationContainer": "PaginationV1-paginationContainer",
+    "disabled": "PaginationV1-disabled",
+    "loading": "PaginationV1-loading",
+    "hidden": "PaginationV1-hidden",
+    "paginationItem": "PaginationV1-paginationItem",
+    "active": "PaginationV1-active",
+    "inactive": "PaginationV1-inactive"
+};
+exports.default = PaginationV1Classnames;

package/dist/src/components/Pagination/V1/pagination.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const Page_1 = __importDefault(require("./Page"));
+const PaginationV1_classnames_1 = __importDefault(require("./PaginationV1.classnames"));
 const paginator_1 = __importDefault(require("./paginator"));
 class Pagination extends react_1.Component {
     isFirstPageVisible(has_previous_page) {
@@ -79,7 +80,12 @@ class Pagination extends react_1.Component {
     }
     render() {
         const pages = this.buildPages();
-        return ((0, jsx_runtime_1.jsx)("ul", { className: (0, utils_1.cn)('max-w-screen flex flex-row items-center justify-center space-x-2 py-4', this.props.disabled && '!pointer-events-none cursor-not-allowed', this.props.loading && 'opacity-40', this.props.hidden && 'hidden'), children: pages }));
+        const { disabled, loading, hidden, } = this.props;
+        return ((0, jsx_runtime_1.jsx)("ul", { className: (0, utils_1.cn)(PaginationV1_classnames_1.default.paginationContainer, // Base styles
+            disabled && PaginationV1_classnames_1.default.disabled, // Disabled state
+            loading && PaginationV1_classnames_1.default.loading, // Loading state
+            hidden && PaginationV1_classnames_1.default.hidden // Hidden state
+            ), children: pages }));
     }
 }
 Pagination.defaultProps = {

package/dist/src/components/Popover/Popover.classnames.js

@@ -3,20 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const PopoverClassnames = {
     "Popover": "Popover-Popover",
     "PopoverOverlay": "Popover-PopoverOverlay",
-    "PopoverOverlay-entering": "Popover-entering",
-    "PopoverOverlay-open": "Popover-open",
+    "PopoverOverlay-entering": "Popover-PopoverOverlay-entering",
+    "PopoverOverlay-open": "Popover-PopoverOverlay-open",
     "measuring": "Popover-measuring",
-    "PopoverOverlay-exiting": "Popover-exiting",
+    "PopoverOverlay-exiting": "Popover-PopoverOverlay-exiting",
     "fullWidth": "Popover-fullWidth",
     "Content": "Popover-Content",
     "positionedAbove": "Popover-positionedAbove",
-    "Content-fullHeight": "Popover-fullHeight",
-    "Content-fluidContent": "Popover-fluidContent",
+    "Content-fullHeight": "Popover-Content-fullHeight",
+    "Content-fluidContent": "Popover-Content-fluidContent",
     "Pane": "Popover-Pane",
-    "Pane-fixed": "Popover-fixed",
-    "Pane-captureOverscroll": "Popover-captureOverscroll",
+    "Pane-fixed": "Popover-Pane-fixed",
+    "Pane-captureOverscroll": "Popover-Pane-captureOverscroll",
     "Section": "Popover-Section",
     "FocusTracker": "Popover-FocusTracker",
-    "PopoverOverlay-hideOnPrint": "Popover-hideOnPrint"
+    "PopoverOverlay-hideOnPrint": "Popover-PopoverOverlay-hideOnPrint"
 };
 exports.default = PopoverClassnames;

package/dist/src/components/Popover/components/PopoverOverlay/PopoverOverlay.js

@@ -112,9 +112,7 @@ class PopoverOverlay extends react_1.PureComponent {
                 this.clearTransitionTimeout();
                 this.enteringTimer = window.setTimeout(() => {
                     this.setState({ transitionStatus: TransitionStatus.Entered });
-                }, 
-                //@ts-expect-error Argument of type 'MetadataProperties' is not assignable to parameter of type 'string'
-                parseInt(motion_1.motion['duration-100'], 10));
+                }, parseInt(motion_1.motion['duration-100'].value, 10));
             });
         }
         if (!this.props.active && oldProps.active) {

package/dist/src/components/RangeSlider/components/DualThumb/DualThumb.classnames.js

@@ -11,7 +11,7 @@ const DualThumbClassnames = {
     "disabled": "DualThumb-disabled",
     "Track": "DualThumb-Track",
     "error": "DualThumb-error",
-    "Track--dashed": "DualThumb--dashed",
+    "Track--dashed": "DualThumb-Track--dashed",
     "Thumbs": "DualThumb-Thumbs",
     "Prefix": "DualThumb-Prefix",
     "Suffix": "DualThumb-Suffix",