@macive/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxWrapper = exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const debounce_1 = require("../../../../utilities/debounce");
+const i18n_1 = require("../../../../utilities/i18n");
+const index_provider_1 = require("../../../../utilities/index-provider");
+const index_table_1 = require("../../../../utilities/index-table");
+const set_root_property_1 = require("../../../../utilities/set-root-property");
+const Checkbox_1 = require("../../../Checkbox");
+const IndexTable_classnames_1 = __importDefault(require("../../IndexTable.classnames"));
+const Checkbox_styles_1 = __importDefault(require("./Checkbox.styles"));
+exports.Checkbox = (0, react_1.memo)(function Checkbox() {
+    const i18n = (0, i18n_1.useI18n)();
+    const { resourceName, condensed } = (0, index_provider_1.useIndexValue)();
+    const { itemId, selected, disabled, onInteraction } = (0, react_1.useContext)(index_table_1.RowContext);
+    const wrapperClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Wrapper, condensed ? Checkbox_styles_1.default.condensed : Checkbox_styles_1.default.expanded);
+    const Wrapper = condensed ? react_1.Fragment : CheckboxWrapper;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: Checkbox_styles_1.default.TableCellContentContainer, children: (0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, onClick: onInteraction, onKeyUp: noop, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { id: itemId, label: i18n.translate('Polaris.IndexTable.selectItem', {
+                        resourceName: resourceName.singular,
+                    }), labelHidden: true, checked: selected, disabled: disabled }) }) }) }));
+});
+function CheckboxWrapper({ children }) {
+    const { position } = (0, react_1.useContext)(index_table_1.RowContext);
+    const checkboxNode = (0, react_1.useRef)(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleResize = (0, react_1.useCallback)((0, debounce_1.debounce)(() => {
+        if (position !== 0 || !checkboxNode.current)
+            return;
+        const { width } = checkboxNode.current.getBoundingClientRect();
+        (0, set_root_property_1.setRootProperty)('--pc-checkbox-offset', `${width}px`);
+    }), [position]);
+    (0, react_1.useEffect)(() => {
+        handleResize();
+    }, [handleResize]);
+    (0, react_1.useEffect)(() => {
+        if (!checkboxNode.current)
+            return;
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    const checkboxClassName = (0, css_1.classNames)(IndexTable_classnames_1.default.TableCell, IndexTable_classnames_1.default['TableCell-first']);
+    return ((0, jsx_runtime_1.jsx)("td", { className: checkboxClassName, ref: checkboxNode, children: children }));
+}
+exports.CheckboxWrapper = CheckboxWrapper;
+function noop() { }

package/dist/src/components/IndexTable/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    TableCellContentContainer: 'CB_TableCellContentContainer',
+    Wrapper: 'CB_Wrapper',
+    expanded: 'CB_expanded',
+    condensed: 'CB_condensed',
+};
+exports.default = styles;

package/dist/src/components/IndexTable/components/Checkbox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Checkbox"), exports);

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

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const index_provider_1 = require("../../../../utilities/index-provider");
+const index_table_1 = require("../../../../utilities/index-table");
+const use_toggle_1 = require("../../../../utilities/use-toggle");
+const IndexTable_classnames_1 = __importDefault(require("../../IndexTable.classnames"));
+const Checkbox_1 = require("../Checkbox");
+exports.Row = (0, react_1.memo)(function Row({ children, selected, id, position, subdued, status, disabled, onNavigation, onClick, }) {
+    const { selectable, selectMode, condensed } = (0, index_provider_1.useIndexRow)();
+    const onSelectionChange = (0, index_provider_1.useIndexSelectionChange)();
+    const { value: hovered, setTrue: setHoverIn, setFalse: setHoverOut } = (0, use_toggle_1.useToggle)(false);
+    const handleInteraction = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (('key' in event && event.key !== ' ') || !onSelectionChange)
+            return;
+        const selectionType = event.nativeEvent.shiftKey ? index_provider_1.SelectionType.Multi : index_provider_1.SelectionType.Single;
+        onSelectionChange(selectionType, !selected, id, position);
+    }, [id, onSelectionChange, position, selected]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        itemId: id,
+        selected,
+        position,
+        onInteraction: handleInteraction,
+        disabled,
+    }), [id, selected, disabled, position, handleInteraction]);
+    const primaryLinkElement = (0, react_1.useRef)(null);
+    const isNavigating = (0, react_1.useRef)(false);
+    const tableRowRef = (0, react_1.useRef)(null);
+    const tableRowCallbackRef = (0, react_1.useCallback)((node) => {
+        tableRowRef.current = node;
+        const el = node === null || node === void 0 ? void 0 : node.querySelector('[data-primary-link]');
+        if (el) {
+            primaryLinkElement.current = el;
+        }
+    }, []);
+    const rowClassName = (0, css_1.classNames)(IndexTable_classnames_1.default.TableRow, selectable && condensed && IndexTable_classnames_1.default.condensedRow, selected && IndexTable_classnames_1.default['TableRow-selected'], subdued && IndexTable_classnames_1.default['TableRow-subdued'], hovered && !condensed && IndexTable_classnames_1.default['TableRow-hovered'], disabled && IndexTable_classnames_1.default['TableRow-disabled'], status && (status == 'subdued' ? IndexTable_classnames_1.default['TableRow-subdued'] : IndexTable_classnames_1.default['statusSuccess']), 
+    // status && styles[variationName('status', status)],
+    !selectable && !primaryLinkElement.current && IndexTable_classnames_1.default['TableRow-unclickable']);
+    let handleRowClick;
+    if ((!disabled && selectable) || primaryLinkElement.current) {
+        handleRowClick = (event) => {
+            if (!tableRowRef.current || isNavigating.current) {
+                return;
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            if (onClick) {
+                onClick();
+                return;
+            }
+            if (primaryLinkElement.current && !selectMode) {
+                isNavigating.current = true;
+                const { ctrlKey, metaKey } = event.nativeEvent;
+                if (onNavigation) {
+                    onNavigation(id);
+                }
+                if ((ctrlKey || metaKey) && primaryLinkElement.current instanceof HTMLAnchorElement) {
+                    isNavigating.current = false;
+                    window.open(primaryLinkElement.current.href, '_blank');
+                    return;
+                }
+                primaryLinkElement.current.dispatchEvent(new MouseEvent(event.type, event.nativeEvent));
+            }
+            else {
+                isNavigating.current = false;
+                handleInteraction(event);
+            }
+        };
+    }
+    const RowWrapper = condensed ? 'li' : 'tr';
+    const checkboxMarkup = selectable ? (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, {}) : null;
+    return ((0, jsx_runtime_1.jsx)(index_table_1.RowContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(index_table_1.RowHoveredContext.Provider, { value: hovered, children: (0, jsx_runtime_1.jsxs)(RowWrapper, { className: rowClassName, onMouseEnter: setHoverIn, onMouseLeave: setHoverOut, onClick: handleRowClick, ref: tableRowCallbackRef, children: [checkboxMarkup, children] }, id) }) }));
+});

package/dist/src/components/IndexTable/components/Row/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Row"), exports);

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScrollContainerClassnames = {
+    "ScrollContainer": "ScrollContainer-ScrollContainer",
+    "ScrollContainer::-webkit-scrollbar": "ScrollContainer-ScrollContainer::-webkit-scrollbar"
+};
+exports.default = ScrollContainerClassnames;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const debounce_1 = require("../../../../utilities/debounce");
+const index_table_1 = require("../../../../utilities/index-table");
+const ScrollContainer_classnames_1 = __importDefault(require("./ScrollContainer.classnames"));
+function ScrollContainer({ children, scrollableContainerRef, onScroll, }) {
+    (0, react_1.useEffect)(() => {
+        if (!scrollableContainerRef.current)
+            return;
+        scrollableContainerRef.current.dispatchEvent(new Event('scroll'));
+    }, [scrollableContainerRef]);
+    const [containerScroll, setContainerScroll] = (0, react_1.useState)(index_table_1.scrollDefaultContext);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleScroll = (0, react_1.useCallback)((0, debounce_1.debounce)(() => {
+        if (!scrollableContainerRef.current) {
+            return;
+        }
+        const availableScrollAmount = scrollableContainerRef.current.scrollWidth - scrollableContainerRef.current.offsetWidth;
+        const canScrollLeft = scrollableContainerRef.current.scrollLeft > 0;
+        const canScrollRight = scrollableContainerRef.current.scrollLeft < availableScrollAmount;
+        onScroll(canScrollLeft, canScrollRight);
+        setContainerScroll({
+            scrollableContainer: scrollableContainerRef.current,
+            canScrollLeft,
+            canScrollRight,
+        });
+    }, 40, { trailing: true, leading: true, maxWait: 40 }), [onScroll, scrollableContainerRef]);
+    return ((0, jsx_runtime_1.jsx)(index_table_1.ScrollContext.Provider, { value: containerScroll, children: (0, jsx_runtime_1.jsx)("div", { className: ScrollContainer_classnames_1.default.ScrollContainer, ref: scrollableContainerRef, onScroll: handleScroll, children: children }) }));
+}
+exports.ScrollContainer = ScrollContainer;

package/dist/src/components/IndexTable/components/ScrollContainer/ScrollContainer.styles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    ScrollContainer: 'CELL_ScrollContainer',
+};
+exports.default = styles;

package/dist/src/components/IndexTable/components/ScrollContainer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ScrollContainer"), exports);

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

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Cell"), exports);
+__exportStar(require("./Row"), exports);
+__exportStar(require("./Checkbox"), exports);
+__exportStar(require("./ScrollContainer"), exports);

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./IndexTable"), exports);

package/dist/src/components/IndexTable/utilities/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableHeadingsBySelector = void 0;
+var utilities_1 = require("./utilities");
+Object.defineProperty(exports, "getTableHeadingsBySelector", { enumerable: true, get: function () { return utilities_1.getTableHeadingsBySelector; } });

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableHeadingsBySelector = void 0;
+function getTableHeadingsBySelector(wrapperElement, selector) {
+    return wrapperElement
+        ? Array.from(wrapperElement.querySelectorAll(selector))
+        : [];
+}
+exports.getTableHeadingsBySelector = getTableHeadingsBySelector;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IndicatorClassnames = {
+    "Indicator": "Indicator-Indicator",
+    "pulseIndicator": "Indicator-pulseIndicator",
+    "pulseIndicator::before": "Indicator-pulseIndicator::before",
+    "pulseIndicator::after": "Indicator-pulseIndicator::after"
+};
+exports.default = IndicatorClassnames;

package/dist/src/components/Indicator/Indicator.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Indicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const Indicator_classnames_1 = __importDefault(require("./Indicator.classnames"));
+function Indicator({ pulse = true }) {
+    const className = (0, css_1.classNames)(Indicator_classnames_1.default.Indicator, pulse && Indicator_classnames_1.default.pulseIndicator);
+    return (0, jsx_runtime_1.jsx)("span", { className: className });
+}
+exports.Indicator = Indicator;

package/dist/src/components/Indicator/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Indicator"), exports);

package/dist/src/components/InlineError/InlineError.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorTextID = exports.InlineError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("../Icons");
+const Icon_1 = require("../Icon");
+const InlineError_styles_1 = __importDefault(require("./InlineError.styles"));
+function InlineError({ message, fieldID }) {
+    if (!message) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { id: errorTextID(fieldID), className: InlineError_styles_1.default.InlineError, children: [(0, jsx_runtime_1.jsx)("div", { className: InlineError_styles_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { theme: 'filled', color: 'critical', source: Icons_1.MaExclamationCircle }) }), (0, jsx_runtime_1.jsxs)("span", { className: 'capitalize-first', children: [" ", message] })] }));
+}
+exports.InlineError = InlineError;
+function errorTextID(id) {
+    return `${id}Error`;
+}
+exports.errorTextID = errorTextID;

package/dist/src/components/InlineError/InlineError.styles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    InlineError: 'flex text-danger items-center pt-1  text-msm ',
+    Icon: ' text-danger   mr-2',
+};
+exports.default = styles;

package/dist/src/components/InlineError/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InlineError"), exports);

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+/**
+ * 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.jsx)("style", { jsx: 'true', children: `
+          .input-prefix {
+            margin-left: 0.75rem;
+            margin-right: 0.5rem;
+          }
+          .input-prefix,
+          .input-suffix {
+            color: black;
+            flex: 0 0 auto;
+            position: relative;
+            -webkit-user-select: none;
+            user-select: none;
+            z-index: 10;
+          }
+
+          .input-field {
+            -webkit-appearance: none;
+            appearance: none;
+            background: none;
+            display: block;
+            flex: 1 1;
+            letter-spacing: normal;
+            margin: 0;
+            min-height: 2.25rem;
+            min-width: 0;
+            padding: calc((2.25rem - 1.5rem - 0.125rem/2) 0.75rem;
+            position: relative;
+            text-transform: none;
+            width: 100%;
+            z-index: var(--pc-text-field-contents);
+        }
+        
+        input:focus { outline: none; }
+        ` }), (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-prefix md:text-msm text-base !leading-6  !text-gray-700', children: preffix })), (0, jsx_runtime_1.jsx)("input", { ref: ref, className: (0, css_1.classNames)('input-field md:text-msm border-0 text-[16px] !leading-5 placeholder:text-sm focus:ring-0 focus:ring-offset-0', '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-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, " "] })] }));
+});
+exports.Input.displayName = 'Input';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const KeyboardKeyClassnames = {
+    "KeyboardKey": "KeyboardKey-KeyboardKey",
+    "small": "KeyboardKey-small"
+};
+exports.default = KeyboardKeyClassnames;

package/dist/src/components/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardKey = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const KeyboardKey_styles_1 = __importDefault(require("./KeyboardKey.styles"));
+function KeyboardKey({ children = '', size }) {
+    const key = !size && children.length > 1
+        ? children.toLowerCase()
+        : children.toUpperCase();
+    const className = (0, css_1.classNames)(KeyboardKey_styles_1.default.KeyboardKey, size && KeyboardKey_styles_1.default[size]);
+    return (0, jsx_runtime_1.jsx)("kbd", { className: className, children: key });
+}
+exports.KeyboardKey = KeyboardKey;

package/dist/src/components/KeyboardKey/KeyboardKey.styles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    KeyboardKey: 'bg-purple-300 dark:bg-gray-600 inline-flex mx-1 my-2 py-0.5 px-1  rounded-md shadow text-msm text-center select-none',
+    small: 'bg-purple-300 dark:bg-gray-600 py-1 px-1 shadow rounded-md ',
+};
+exports.default = styles;

package/dist/src/components/KeyboardKey/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./KeyboardKey"), exports);

package/dist/src/components/KeypressListener/KeypressListener.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeypressListener = void 0;
+const react_1 = require("react");
+const use_isomorphic_layout_effect_1 = require("../../utilities/use-isomorphic-layout-effect");
+function KeypressListener({ keyCode, handler, keyEvent = 'keyup', options, useCapture, }) {
+    const tracked = (0, react_1.useRef)({ handler, keyCode });
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
+        tracked.current = { handler, keyCode };
+    }, [handler, keyCode]);
+    const handleKeyEvent = (0, react_1.useCallback)((event) => {
+        const { handler, keyCode } = tracked.current;
+        if (event.keyCode === keyCode) {
+            handler(event);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener(keyEvent, handleKeyEvent, useCapture || options);
+        return () => {
+            document.removeEventListener(keyEvent, handleKeyEvent, useCapture || options);
+        };
+    }, [keyEvent, handleKeyEvent, useCapture, options]);
+    return null;
+}
+exports.KeypressListener = KeypressListener;

package/dist/src/components/KeypressListener/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./KeypressListener"), exports);

package/dist/src/components/Label/Label.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.labelID = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utilities/css");
+const Label_styles_1 = __importDefault(require("./Label.styles"));
+function labelID(id) {
+    return `${id}Label`;
+}
+exports.labelID = labelID;
+function Label({ children, id, hidden, requiredIndicator }) {
+    const className = (0, css_1.classNames)(Label_styles_1.default.Label, hidden && Label_styles_1.default.hidden);
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)("label", { id: labelID(id), htmlFor: id, className: (0, css_1.classNames)(Label_styles_1.default.Text, requiredIndicator && Label_styles_1.default.RequiredIndicator), children: children }) }));
+}
+exports.Label = Label;

package/dist/src/components/Label/Label.styles.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Label: 'transparent',
+    hidden: 'hidden',
+    Text: 'flex flex-basis color-inherit',
+    RequiredIndicator: "conten:'*' color-red ml-2",
+};
+exports.default = styles;

package/dist/src/components/Label/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Label"), exports);