@macive/ui 0.0.10 → 0.0.11

package/dist/src/components/Button/Button.js

@@ -29,9 +29,7 @@ function Button({ id, children, url, disabled, external, download, target, submi
     //@ts-expect-error
     Button_classnames_1.default[(0, css_1.variationName)('size', size)], 
     //@ts-expect-error
-    Button_classnames_1.default[(0, css_1.variationName)('textAlign', textAlign)], fullWidth && Button_classnames_1.default.fullWidth, disclosure && Button_classnames_1.default.disclosure, 
-    //@ts-expect-error
-    icon && children && Button_classnames_1.default.iconWithText, icon && children == null && Button_classnames_1.default.iconOnly, isDisabled && Button_classnames_1.default.disabled, loading && Button_classnames_1.default.loading, pressed && !disabled && !url && Button_classnames_1.default.pressed, removeUnderline && Button_classnames_1.default.removeUnderline, 
+    Button_classnames_1.default[(0, css_1.variationName)('textAlign', textAlign)], fullWidth && Button_classnames_1.default.fullWidth, disclosure && Button_classnames_1.default.disclosure, icon && children && Button_classnames_1.default.iconWithText, icon && children == null && Button_classnames_1.default.iconOnly, isDisabled && Button_classnames_1.default.disabled, loading && Button_classnames_1.default.loading, pressed && !disabled && !url && Button_classnames_1.default.pressed, removeUnderline && Button_classnames_1.default.removeUnderline, 
     //@ts-expect-error
     tone && Button_classnames_1.default[(0, css_1.variationName)('tone', tone)], 
     //window
@@ -44,7 +42,7 @@ function Button({ id, children, url, disabled, external, download, target, submi
     const handleClick = (0, use_disable_interaction_1.useDisableClick)(disabled, toggleDisclosureActive);
     let connectedDisclosureMarkup;
     if (connectedDisclosure) {
-        const defaultLabel = i18n.translate('Polaris.Button.connectedDisclosureAccessibilityLabel');
+        const defaultLabel = i18n.translate('Macive.Button.connectedDisclosureAccessibilityLabel');
         const { disabled, accessibilityLabel: disclosureLabel = defaultLabel } = connectedDisclosure;
         const connectedDisclosureActivator = ((0, jsx_runtime_1.jsx)("span", { "aria-disabled": disabled, "aria-label": disclosureLabel, "aria-describedby": ariaDescribedBy, "aria-checked": ariaChecked, 
             // onClick={handleClick}
@@ -66,7 +64,7 @@ function Button({ id, children, url, disabled, external, download, target, submi
         textVariant = 'bodyMd';
     }
     const childMarkup = children ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', variant: textVariant, fontWeight: textFontWeight, children: children }, disabled ? 'text-disabled' : 'text')) : null;
-    const spinnerSVGMarkup = loading ? ((0, jsx_runtime_1.jsx)("span", { className: Button_classnames_1.default.Spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small', accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel') }) })) : null;
+    const spinnerSVGMarkup = loading ? ((0, jsx_runtime_1.jsx)("span", { className: Button_classnames_1.default.Spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small', accessibilityLabel: i18n.translate('Macive.Button.spinnerAccessibilityLabel') }) })) : null;
     const commonProps = {
         id,
         className,

package/dist/src/components/Button/Buttoncopy.classnames.js

@@ -1,45 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const ButtoncopyClassnames = {
-    "DisclosureIcon": "Buttoncopy-DisclosureIcon",
-    "removeUnderline": "Buttoncopy-removeUnderline",
     "Button": "Buttoncopy-Button",
+    "pressed": "Buttoncopy-pressed",
     "disabled": "Buttoncopy-disabled",
     "connectedDisclosure": "Buttoncopy-connectedDisclosure",
     "Content": "Buttoncopy-Content",
+    "plain": "Buttoncopy-plain",
     "textAlignLeft": "Buttoncopy-textAlignLeft",
     "textAlignStart": "Buttoncopy-textAlignStart",
     "textAlignCenter": "Buttoncopy-textAlignCenter",
     "textAlignRight": "Buttoncopy-textAlignRight",
     "textAlignEnd": "Buttoncopy-textAlignEnd",
     "Icon": "Buttoncopy-Icon",
-    "Icon)": "Buttoncopy-Icon)",
+    "fullWidth": "Buttoncopy-fullWidth",
     "hidden": "Buttoncopy-hidden",
     "Spinner": "Buttoncopy-Spinner",
-    "primaryPlain": "Buttoncopy-primaryPlain",
-    "pressed": "Buttoncopy-pressed",
     "primary": "Buttoncopy-primary",
     "destructive": "Buttoncopy-destructive",
+    "primaryPlain": "Buttoncopy-primaryPlain",
     "outline": "Buttoncopy-outline",
     "loading": "Buttoncopy-loading",
-    "plain": "Buttoncopy-plain",
-    "disabled)": "Buttoncopy-disabled)",
-    "removeUnderline)": "Buttoncopy-removeUnderline)",
-    "pressed:not(.iconOnly)>.Content": "Buttoncopy-pressed:not(.iconOnly)>.Content",
-    "fullWidth": "Buttoncopy-fullWidth",
+    "removeUnderline": "Buttoncopy-removeUnderline",
+    "iconOnly": "Buttoncopy-iconOnly",
     "sizeSlim": "Buttoncopy-sizeSlim",
     "sizeLarge": "Buttoncopy-sizeLarge",
-    "iconOnly": "Buttoncopy-iconOnly",
-    "destructive.iconOnly": "Buttoncopy-destructive.iconOnly",
-    "Icon:first-child": "Buttoncopy-Icon:first-child",
-    "Icon:last-child": "Buttoncopy-Icon:last-child",
-    "Icon:only-child": "Buttoncopy-Icon:only-child",
     "sizeMicro": "Buttoncopy-sizeMicro",
     "monochrome": "Buttoncopy-monochrome",
     "Text": "Buttoncopy-Text",
-    "Text:not(.removeUnderline)": "Buttoncopy-Text:not(.removeUnderline)",
     "ConnectedDisclosureWrapper": "Buttoncopy-ConnectedDisclosureWrapper",
-    "ConnectedDisclosure": "Buttoncopy-ConnectedDisclosure",
-    "Button::after": "Buttoncopy-Button::after"
+    "ConnectedDisclosure": "Buttoncopy-ConnectedDisclosure"
 };
 exports.default = ButtoncopyClassnames;

package/dist/src/components/Button copy/Button.js

@@ -48,26 +48,6 @@ function Button({ as = 'button', className = '', variant = 'outline', width = 'a
     const Component = href || (url && !rest.disabled)
         ? ({ children: child, ...rest }) => ((0, jsx_runtime_1.jsx)(Link_1.Link, { url: href || url, external: external, target: target, children: (0, jsx_runtime_1.jsxs)("span", { ...rest, children: [child, " "] }) }))
         : as;
-    return ((0, jsx_runtime_1.jsxs)(Component, { className: styles, type: type, ...rest, children: [(0, jsx_runtime_1.jsxs)("span", { "aria-label": accessibilityLabel, className: (0, utils_1.cn)(sizeClasses[size], rootClassName, 'flex items-center space-x-2  whitespace-nowrap'), children: [rest.children && (0, jsx_runtime_1.jsxs)("span", { children: [" ", rest.children] }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: icon, size: 20 }), disclosure && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDown, size: 20 })] }), loading && (0, jsx_runtime_1.jsx)(InlineSpin, {}), connectedDisclosure && ((0, jsx_runtime_1.jsx)(Disclosure_1.ConnectedDisclosureButton, { connectedDisclosure: connectedDisclosure }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: styles, type: type, ...rest, children: [(0, jsx_runtime_1.jsxs)("span", { "aria-label": accessibilityLabel, className: (0, utils_1.cn)(sizeClasses[size], rootClassName, 'flex items-center space-x-2  whitespace-nowrap'), children: [rest.children && (0, jsx_runtime_1.jsxs)("span", { children: [" ", rest.children] }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: icon, size: 20 }), disclosure && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDown, size: 20 })] }), connectedDisclosure && ((0, jsx_runtime_1.jsx)(Disclosure_1.ConnectedDisclosureButton, { connectedDisclosure: connectedDisclosure }))] }));
 }
 exports.Button = Button;
-const InlineSpin = () => {
-    return ((0, jsx_runtime_1.jsxs)("span", { className: 'flex items-center justify-center', children: [(0, jsx_runtime_1.jsx)("span", { className: 'loadingspinner mr-2' }), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
-          .loadingspinner {
-            pointer-events: none;
-            width: 2em;
-            height: 2em;
-            border: 0.4em solid transparent;
-            border-color: #eee;
-            border-top-color: #3e67ec;
-            border-radius: 50%;
-            animation: loadingspin 0.5s linear infinite;
-          }
-
-          @keyframes loadingspin {
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-        ` })] }));
-};

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ButtonGroupClassnames = {
     "ButtonGroup": "ButtonGroup-ButtonGroup",
     "Item": "ButtonGroup-Item",
-    "Item-plain": "ButtonGroup-Item-plain",
+    "Item-plain": "ButtonGroup-plain",
     "segmented": "ButtonGroup-segmented",
-    "Item-focused": "ButtonGroup-Item-focused",
+    "Item-focused": "ButtonGroup-focused",
     "fullWidth": "ButtonGroup-fullWidth",
     "extraTight": "ButtonGroup-extraTight",
     "tight": "ButtonGroup-tight",

package/dist/src/components/Caption/Caption.js

@@ -9,7 +9,7 @@ const Caption_classnames_1 = __importDefault(require("./Caption.classnames"));
 /**
  * @deprecated The Caption component will be removed in the next
  * major version. Use the Text component instead. See the
- * Polaris component guide on how to use Text.
+ * Macive component guide on how to use Text.
  *
  * https://dev.airsoko.com/components/text
  */

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

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const CheckboxClassnames = {
     "Checkbox": "Checkbox-Checkbox",
+    "ChoiceLabel": "Checkbox-ChoiceLabel",
     "Backdrop": "Checkbox-Backdrop",
     "Input": "Checkbox-Input",
-    "Input-indeterminate": "Checkbox-Input-indeterminate",
+    "Input-indeterminate": "Checkbox-indeterminate",
     "Icon": "Checkbox-Icon",
     "animated": "Checkbox-animated",
     "toneMagic": "Checkbox-toneMagic",
     "error": "Checkbox-error",
-    "Input.Input-indeterminate": "Checkbox-Input.Input-indeterminate",
-    "Input:active": "Checkbox-Input:active",
-    "Input:focus-visible+.Backdrop": "Checkbox-Input:focus-visible+.Backdrop",
-    "checked": "Checkbox-checked"
+    "checked": "Checkbox-checked",
+    "hover": "Checkbox-hover"
 };
 exports.default = CheckboxClassnames;

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

@@ -12,9 +12,9 @@ const unique_id_1 = require("../../utilities/unique-id");
 const use_toggle_1 = require("../../utilities/use-toggle");
 const Choice_1 = require("../Choice");
 const InlineError_1 = require("../InlineError");
-const utils_1 = require("../../utils");
+const Icon_1 = require("../Icon");
 const Icons_1 = require("../Icons");
-const Checkbox_styles_1 = __importDefault(require("./Checkbox.styles"));
+const Checkbox_classnames_1 = __importDefault(require("./Checkbox.classnames"));
 exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ariaDescribedBy: ariaDescribedByProp, label, labelHidden, checked = false, helpText, disabled, id: idProp, name, value, error, onChange, onFocus, onBlur, legacy, }, ref) {
     const inputNode = (0, react_1.useRef)(null);
     const id = (0, unique_id_1.useUniqueId)('Checkbox', idProp);
@@ -49,15 +49,15 @@ exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ari
         describedBy.push(ariaDescribedByProp);
     }
     const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
-    const wrapperClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Checkbox, error && Checkbox_styles_1.default.error);
-    const backdropClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Backdrop, mouseOver && Checkbox_styles_1.default.hover);
+    const wrapperClassName = (0, css_1.classNames)(Checkbox_classnames_1.default.Checkbox, error && Checkbox_classnames_1.default.error);
+    const backdropClassName = (0, css_1.classNames)(Checkbox_classnames_1.default.Backdrop, mouseOver && Checkbox_classnames_1.default.hover);
     const isIndeterminate = checked === 'indeterminate';
     const isChecked = !isIndeterminate && Boolean(checked);
     const indeterminateAttributes = isIndeterminate
         ? { indeterminate: 'true', 'aria-checked': 'mixed' }
         : { 'aria-checked': isChecked };
     const iconSource = isIndeterminate ? Icons_1.MaMinus : Icons_1.MaCheck;
-    const inputClassName = (0, css_1.classNames)(Checkbox_styles_1.default.Input, isIndeterminate && Checkbox_styles_1.default['Input-indeterminate']);
+    const inputClassName = (0, css_1.classNames)(Checkbox_classnames_1.default.Input, isIndeterminate && Checkbox_classnames_1.default['Input-indeterminate']);
     const legacyProps = legacy
         ? {
             ref: ref,
@@ -69,15 +69,7 @@ exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ari
             checked: isChecked,
             ref: inputNode,
         };
-    return ((0, jsx_runtime_1.jsx)(Choice_1.Choice, { id: id, label: label, labelHidden: labelHidden, helpText: helpText, error: error, disabled: disabled, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, children: (0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, value: value, type: 'checkbox', disabled: disabled, className: inputClassName, onBlur: handleBlur, ...legacyProps, onFocus: onFocus, "aria-invalid": error != null, "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, hidden: true, role: isWithinListbox ? 'presentation' : 'checkbox', ...indeterminateAttributes }), isIndeterminate && ((0, jsx_runtime_1.jsx)("div", { onClick: stopPropagation, onKeyUp: stopPropagation, className: (0, utils_1.cn)('dmr-2 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2  border-blue-500 bg-white  focus-within:border-blue-500 group-hover:cursor-pointer'), children: (0, jsx_runtime_1.jsx)(MinusSquareIcon, { className: 'pointer-events-none  h-4 w-4 fill-current  text-blue-500' }) })), !isIndeterminate && ((0, jsx_runtime_1.jsxs)("div", { onClick: stopPropagation, onKeyUp: stopPropagation, className: (0, utils_1.cn)('dmr-2 flex  h-5 w-5 flex-shrink-0 items-center justify-center rounded  border-2  focus-within:border-blue-500 group-hover:cursor-pointer'), children: [isIndeterminate && ((0, jsx_runtime_1.jsx)(MinusSquareIcon, { className: 'pointer-events-none hidden h-4 w-4 fill-current text-white  ' })), (0, jsx_runtime_1.jsx)(TickIcon, { className: 'pointer-events-none hidden h-5 w-5 fill-current ' })] })), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
-            input:checked + div {
-              border-color: #2c6ecb;
-              background-color: #2c6ecb;
-            }
-            input:checked + div svg {
-              display: block;
-            }
-          ` })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Choice_1.Choice, { id: id, label: label, labelHidden: labelHidden, helpText: helpText, error: error, disabled: disabled, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, children: (0, jsx_runtime_1.jsxs)("div", { className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, value: value, type: 'checkbox', disabled: disabled, className: inputClassName, onBlur: handleBlur, ...legacyProps, onFocus: onFocus, "aria-invalid": error != null, "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, hidden: true, role: isWithinListbox ? 'presentation' : 'checkbox', ...indeterminateAttributes }), (0, jsx_runtime_1.jsx)("span", { className: backdropClassName, onClick: stopPropagation, onKeyUp: stopPropagation }), (0, jsx_runtime_1.jsx)("span", { className: Checkbox_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: iconSource }) })] }) }));
 });
 function noop() { }
 function stopPropagation(event) {

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ColorPickerClassnames = {
     "ColorPicker": "ColorPicker-ColorPicker",
     "MainColor": "ColorPicker-MainColor",
+    "fullWidth": "ColorPicker-fullWidth",
     "Dragger": "ColorPicker-Dragger",
     "ColorLayer": "ColorPicker-ColorLayer",
-    "AlphaPicker": "ColorPicker-AlphaPicker",
     "HuePicker": "ColorPicker-HuePicker",
+    "AlphaPicker": "ColorPicker-AlphaPicker",
     "Slidable": "ColorPicker-Slidable"
 };
 exports.default = ColorPickerClassnames;

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -12,7 +12,7 @@ const css_1 = require("../../utilities/css");
 const debounce_1 = require("../../utilities/debounce");
 // eslint-disable-next-line import/no-deprecated
 const EventListener_1 = require("../EventListener");
-const ColorPicker_styles_1 = __importDefault(require("./ColorPicker.styles"));
+const ColorPicker_classnames_1 = __importDefault(require("./ColorPicker.classnames"));
 const components_1 = require("./components");
 const RESIZE_DEBOUNCE_TIME_MS = 200;
 class ColorPicker extends react_1.PureComponent {
@@ -92,8 +92,8 @@ class ColorPicker extends react_1.PureComponent {
         const draggerX = (0, clamp_1.clamp)(saturation * pickerSize.width, 0, pickerSize.width);
         const draggerY = (0, clamp_1.clamp)(pickerSize.height - brightness * pickerSize.height, 0, pickerSize.height);
         const alphaSliderMarkup = allowAlpha ? ((0, jsx_runtime_1.jsx)(components_1.AlphaPicker, { alpha: alpha, color: color, onChange: this.handleAlphaChange })) : null;
-        const className = (0, css_1.classNames)(ColorPicker_styles_1.default.ColorPicker, fullWidth && ColorPicker_styles_1.default.fullWidth);
-        return ((0, jsx_runtime_1.jsxs)("div", { className: className, id: id, onMouseDown: this.handlePickerDrag, children: [(0, jsx_runtime_1.jsxs)("div", { ref: this.setColorNode, className: ColorPicker_styles_1.default.MainColor, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.ColorLayer, style: { backgroundColor: colorString } }), (0, jsx_runtime_1.jsx)(components_1.Slidable, { onChange: this.handleDraggerMove, draggerX: draggerX, draggerY: draggerY })] }), (0, jsx_runtime_1.jsx)(components_1.HuePicker, { hue: hue, onChange: this.handleHueChange }), alphaSliderMarkup, (0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: this.handleResize })] }));
+        const className = (0, css_1.classNames)(ColorPicker_classnames_1.default.ColorPicker, fullWidth && ColorPicker_classnames_1.default.fullWidth);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: className, id: id, onMouseDown: this.handlePickerDrag, children: [(0, jsx_runtime_1.jsxs)("div", { ref: this.setColorNode, className: ColorPicker_classnames_1.default.MainColor, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_classnames_1.default.ColorLayer, style: { backgroundColor: colorString } }), (0, jsx_runtime_1.jsx)(components_1.Slidable, { onChange: this.handleDraggerMove, draggerX: draggerX, draggerY: draggerY })] }), (0, jsx_runtime_1.jsx)(components_1.HuePicker, { hue: hue, onChange: this.handleHueChange }), alphaSliderMarkup, (0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: this.handleResize })] }));
     }
 }
 exports.ColorPicker = ColorPicker;

package/dist/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.js

@@ -7,7 +7,7 @@ exports.AlphaPicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_transformers_1 = require("../../../../utilities/color-transformers");
-const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+const ColorPicker_classnames_1 = __importDefault(require("../../ColorPicker.classnames"));
 const Slidable_1 = require("../Slidable");
 const utilities_1 = require("./utilities");
 class AlphaPicker extends react_1.PureComponent {
@@ -45,7 +45,7 @@ class AlphaPicker extends react_1.PureComponent {
         const { sliderHeight, draggerHeight } = this.state;
         const draggerY = (0, utilities_1.calculateDraggerY)(alpha, sliderHeight, draggerHeight);
         const background = alphaGradientForColor(color);
-        return ((0, jsx_runtime_1.jsxs)("div", { className: ColorPicker_styles_1.default.AlphaPicker, ref: this.setSliderHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.ColorLayer, style: { background } }), (0, jsx_runtime_1.jsx)(Slidable_1.Slidable, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: ColorPicker_classnames_1.default.AlphaPicker, ref: this.setSliderHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_classnames_1.default.ColorLayer, style: { background } }), (0, jsx_runtime_1.jsx)(Slidable_1.Slidable, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight })] }));
     }
 }
 exports.AlphaPicker = AlphaPicker;

package/dist/src/components/ColorPicker/components/HuePicker/HuePicker.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HuePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+const ColorPicker_classnames_1 = __importDefault(require("../../ColorPicker.classnames"));
 const Slidable_1 = require("../Slidable");
 const utilities_1 = require("./utilities");
 class HuePicker extends react_1.PureComponent {
@@ -43,7 +43,7 @@ class HuePicker extends react_1.PureComponent {
         const { hue } = this.props;
         const { sliderHeight, draggerHeight } = this.state;
         const draggerY = (0, utilities_1.calculateDraggerY)(hue, sliderHeight, draggerHeight);
-        return ((0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.HuePicker, ref: this.setSliderHeight, style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: ColorPicker_classnames_1.default.HuePicker, ref: this.setSliderHeight, style: {
                 backgroundImage: `linear-gradient(
           to bottom,
           yellow,

package/dist/src/components/ColorPicker/components/Slidable/Slidable.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const target_1 = require("../../../../utilities/target");
 // eslint-disable-next-line import/no-deprecated
 const EventListener_1 = require("../../../EventListener");
-const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+const ColorPicker_classnames_1 = __importDefault(require("../../ColorPicker.classnames"));
 let isDragging = false;
 // Required to solve a bug causing the underlying page/container to scroll
 // while trying to drag the ColorPicker controls.
@@ -99,7 +99,7 @@ class Slidable extends react_1.PureComponent {
         const endDragListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'mouseup', handler: this.handleDragEnd })) : null;
         const touchEndListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'touchend', handler: this.handleDragEnd })) : null;
         const touchCancelListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'touchcancel', handler: this.handleDragEnd })) : null;
-        return ((0, jsx_runtime_1.jsxs)("div", { ref: this.setNode, className: ColorPicker_styles_1.default.Slidable, onMouseDown: this.startDrag, onTouchStart: this.startDrag, children: [endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, (0, jsx_runtime_1.jsx)("div", { style: draggerPositioning, className: ColorPicker_styles_1.default.Dragger, ref: this.setDraggerNode })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: this.setNode, className: ColorPicker_classnames_1.default.Slidable, onMouseDown: this.startDrag, onTouchStart: this.startDrag, children: [endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, (0, jsx_runtime_1.jsx)("div", { style: draggerPositioning, className: ColorPicker_classnames_1.default.Dragger, ref: this.setDraggerNode })] }));
     }
 }
 exports.Slidable = Slidable;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ComboboxClassnames = {
+    "Listbox": "Combobox-Listbox"
+};
+exports.default = ComboboxClassnames;

package/dist/src/components/Combobox/Combobox.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const combobox_1 = require("../../utilities/combobox");
 const Popover_1 = require("../Popover");
-const Combobox_styles_1 = __importDefault(require("./Combobox.styles"));
+const Combobox_classnames_1 = __importDefault(require("./Combobox.classnames"));
 const components_1 = require("./components");
 function Combobox({ activator, allowMultiple, children, preferredPosition = 'below', willLoadMoreOptions, height, onScrolledToBottom, onClose, }) {
     const [popoverActive, setPopoverActive] = (0, react_1.useState)(false);
@@ -92,7 +92,7 @@ function Combobox({ activator, allowMultiple, children, preferredPosition = 'bel
         setListboxId,
         onScrolledToBottom,
     ]);
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { ref: ref, active: popoverActive, activator: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTextFieldContext.Provider, { value: textFieldContextValue, children: activator }), autofocusTarget: 'none', preventFocusOnClose: true, fullWidth: true, preferInputActivator: false, preferredPosition: preferredPosition, onClose: handleClose, children: react_1.Children.count(children) > 0 ? ((0, jsx_runtime_1.jsx)(Popover_1.Popover.Pane, { onScrolledToBottom: onScrolledToBottom, height: height, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxListboxContext.Provider, { value: listboxContextValue, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxListboxOptionContext.Provider, { value: listboxOptionContextValue, children: (0, jsx_runtime_1.jsx)("div", { className: Combobox_styles_1.default.Listbox, "aria-label": 'combobox-text-field', children: children }) }) }) })) : null }));
+    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { ref: ref, active: popoverActive, activator: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTextFieldContext.Provider, { value: textFieldContextValue, children: activator }), autofocusTarget: 'none', preventFocusOnClose: true, fullWidth: true, preferInputActivator: false, preferredPosition: preferredPosition, onClose: handleClose, children: react_1.Children.count(children) > 0 ? ((0, jsx_runtime_1.jsx)(Popover_1.Popover.Pane, { onScrolledToBottom: onScrolledToBottom, height: height, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxListboxContext.Provider, { value: listboxContextValue, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxListboxOptionContext.Provider, { value: listboxOptionContextValue, children: (0, jsx_runtime_1.jsx)("div", { className: Combobox_classnames_1.default.Listbox, "aria-label": 'combobox-text-field', children: children }) }) }) })) : null }));
 }
 exports.Combobox = Combobox;
 Combobox.TextField = components_1.TextField;

package/dist/src/components/Combobox/components/TextField/TextField.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Label_1 = require("../../../Label");
+const combobox_1 = require("../../../../utilities/combobox");
 const unique_id_1 = require("../../../../utilities/unique-id");
+const Label_1 = require("../../../Label");
 const TextField_1 = require("../../../TextField");
-const combobox_1 = require("../../../../utilities/combobox");
 function TextField({ value, id: idProp, type = 'text', ariaAutocomplete = 'list', onFocus, onBlur, onChange, ...rest }) {
     const comboboxTextFieldContext = (0, combobox_1.useComboboxTextField)();
     const { activeOptionId, listboxId, expanded, setTextFieldFocused, setTextFieldLabelId, onTextFieldFocus, onTextFieldChange, onTextFieldBlur, } = comboboxTextFieldContext;
@@ -39,6 +39,6 @@ function TextField({ value, id: idProp, type = 'text', ariaAutocomplete = 'list'
         if (onTextFieldChange)
             onTextFieldChange(value);
     }, [onChange, onTextFieldChange]);
-    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...rest, value: value, id: textFieldId, type: type, ariaAutocomplete: ariaAutocomplete, "aria-haspopup": "listbox", ariaActiveDescendant: activeOptionId, ariaControls: listboxId, role: "combobox", ariaExpanded: expanded, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ...rest, value: value, id: textFieldId, type: type, ariaAutocomplete: ariaAutocomplete, "aria-haspopup": 'listbox', ariaActiveDescendant: activeOptionId, ariaControls: listboxId, role: 'combobox', ariaExpanded: expanded, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }));
 }
 exports.TextField = TextField;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ConnectedClassnames = {
+    "Connected": "Connected-Connected",
+    "Item": "Connected-Item",
+    "Item-primary": "Connected-primary",
+    "Item-focused": "Connected-focused",
+    "Item-left": "Connected-left",
+    "Item-right": "Connected-right",
+    "Item-connection": "Connected-connection"
+};
+exports.default = ConnectedClassnames;

package/dist/src/components/Connected/Connected.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Connected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const components_1 = require("./components");
-const Connected_styles_1 = __importDefault(require("./Connected.styles"));
+const Connected_classnames_1 = __importDefault(require("./Connected.classnames"));
 function Connected({ children, left, right }) {
     const leftConnectionMarkup = left ? (0, jsx_runtime_1.jsx)(components_1.Item, { position: 'left', children: left }) : null;
     const rightConnectionMarkup = right ? (0, jsx_runtime_1.jsx)(components_1.Item, { position: 'right', children: right }) : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `${Connected_styles_1.default.Connected} w-full`, children: [leftConnectionMarkup, (0, jsx_runtime_1.jsx)(components_1.Item, { position: 'primary', children: children }), rightConnectionMarkup] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${Connected_classnames_1.default.Connected} w-full`, children: [leftConnectionMarkup, (0, jsx_runtime_1.jsx)(components_1.Item, { position: 'primary', children: children }), rightConnectionMarkup] }));
 }
 exports.Connected = Connected;

package/dist/src/components/Connected/components/Item/Item.js

@@ -7,10 +7,10 @@ exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("../../../../utilities/css");
 const use_toggle_1 = require("../../../../utilities/use-toggle");
-const Connected_styles_1 = __importDefault(require("../../Connected.styles"));
+const Connected_classnames_1 = __importDefault(require("../../Connected.classnames"));
 function Item({ children, position }) {
     const { value: focused, setTrue: forceTrueFocused, setFalse: forceFalseFocused, } = (0, use_toggle_1.useToggle)(false);
-    const className = (0, css_1.classNames)(Connected_styles_1.default.Item, focused && Connected_styles_1.default['Item-focused'], position === 'primary' ? Connected_styles_1.default['Item-primary'] : Connected_styles_1.default['Item-connection'], position === 'left' && Connected_styles_1.default['Item-left'], position === 'right' && Connected_styles_1.default['Item-right']);
+    const className = (0, css_1.classNames)(Connected_classnames_1.default.Item, focused && Connected_classnames_1.default['Item-focused'], position === 'primary' ? Connected_classnames_1.default['Item-primary'] : Connected_classnames_1.default['Item-connection'], position === 'left' && Connected_classnames_1.default['Item-left'], position === 'right' && Connected_classnames_1.default['Item-right']);
     return ((0, jsx_runtime_1.jsx)("div", { onBlur: forceFalseFocused, onFocus: forceTrueFocused, className: className, children: children }));
 }
 exports.Item = Item;

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

@@ -2,52 +2,48 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const DataTableClassnames = {
     "TableWrapper": "DataTable-TableWrapper",
-    "IncreasedTableDensity": "DataTable-IncreasedTableDensity",
-    "ShowTotalsInFooter": "DataTable-ShowTotalsInFooter",
-    "RowCountIsEven": "DataTable-RowCountIsEven",
     "separate": "DataTable-separate",
-    "TableRow": "DataTable-TableRow",
-    "ShowTotals": "DataTable-ShowTotals",
     "StickyHeaderCell": "DataTable-StickyHeaderCell",
-    "Cell-separate": "DataTable-Cell-separate",
+    "Cell-separate": "DataTable-separate",
     "DataTable": "DataTable-DataTable",
     "condensed": "DataTable-condensed",
     "Navigation": "DataTable-Navigation",
+    "IncreasedTableDensity": "DataTable-IncreasedTableDensity",
     "Pip": "DataTable-Pip",
-    "Pip-visible": "DataTable-Pip-visible",
+    "Pip-visible": "DataTable-visible",
     "ScrollContainer": "DataTable-ScrollContainer",
     "Table": "DataTable-Table",
-    "TableRow+.TableRow": "DataTable-TableRow+.TableRow",
+    "TableRow": "DataTable-TableRow",
     "Cell": "DataTable-Cell",
     "ZebraStripingOnData": "DataTable-ZebraStripingOnData",
-    "Cell-separate::after": "DataTable-Cell-separate::after",
-    "Cell-firstColumn": "DataTable-Cell-firstColumn",
-    "Cell-numeric": "DataTable-Cell-numeric",
-    "Cell-truncated": "DataTable-Cell-truncated",
-    "Cell-header": "DataTable-Cell-header",
-    "Cell-sortable": "DataTable-Cell-sortable",
-    "Heading-left": "DataTable-Heading-left",
-    "Cell-verticalAlignTop": "DataTable-Cell-verticalAlignTop",
-    "Cell-verticalAlignBottom": "DataTable-Cell-verticalAlignBottom",
-    "Cell-verticalAlignMiddle": "DataTable-Cell-verticalAlignMiddle",
-    "Cell-verticalAlignBaseline": "DataTable-Cell-verticalAlignBaseline",
+    "RowCountIsEven": "DataTable-RowCountIsEven",
+    "ShowTotalsInFooter": "DataTable-ShowTotalsInFooter",
+    "Cell-firstColumn": "DataTable-firstColumn",
+    "Cell-numeric": "DataTable-numeric",
+    "Cell-truncated": "DataTable-truncated",
+    "Cell-header": "DataTable-header",
+    "Cell-sortable": "DataTable-sortable",
+    "Heading-left": "DataTable-left",
+    "Cell-verticalAlignTop": "DataTable-verticalAlignTop",
+    "Cell-verticalAlignBottom": "DataTable-verticalAlignBottom",
+    "Cell-verticalAlignMiddle": "DataTable-verticalAlignMiddle",
+    "Cell-verticalAlignBaseline": "DataTable-verticalAlignBaseline",
     "hoverable": "DataTable-hoverable",
-    "Cell-hovered": "DataTable-Cell-hovered",
+    "Cell-hovered": "DataTable-hovered",
     "Icon": "DataTable-Icon",
     "Heading": "DataTable-Heading",
-    "Cell-sorted": "DataTable-Cell-sorted",
-    "Heading:focus:not(:active)": "DataTable-Heading:focus:not(:active)",
-    "Cell-total": "DataTable-Cell-total",
-    "Cell-total-footer": "DataTable-Cell-total-footer",
-    "Footer": "DataTable-Footer",
     "StickyHeaderEnabled": "DataTable-StickyHeaderEnabled",
     "StickyHeaderWrapper": "DataTable-StickyHeaderWrapper",
+    "Cell-sorted": "DataTable-sorted",
+    "Cell-total": "DataTable-total",
+    "ShowTotals": "DataTable-ShowTotals",
+    "Cell-total-footer": "DataTable-total-footer",
+    "Footer": "DataTable-Footer",
     "StickyHeaderInner": "DataTable-StickyHeaderInner",
-    "StickyHeaderInner-isSticky)": "DataTable-StickyHeaderInner-isSticky)",
+    "StickyHeaderInner-isSticky": "DataTable-isSticky",
     "StickyHeaderTable": "DataTable-StickyHeaderTable",
     "FixedFirstColumn": "DataTable-FixedFirstColumn",
     "StickyTableHeadingsRow": "DataTable-StickyTableHeadingsRow",
-    "StickyHeaderInner-isSticky": "DataTable-StickyHeaderInner-isSticky",
     "TooltipContent": "DataTable-TooltipContent"
 };
 exports.default = DataTableClassnames;

package/dist/src/components/DataTable/DataTable.js

@@ -345,8 +345,8 @@ class DataTableInner extends react_1.PureComponent {
             const totalsLabel = totalsName
                 ? totalsName
                 : {
-                    singular: i18n.translate('Polaris.DataTable.totalRowHeading'),
-                    plural: i18n.translate('Polaris.DataTable.totalsRowHeading'),
+                    singular: i18n.translate('Macive.DataTable.totalRowHeading'),
+                    plural: i18n.translate('Macive.DataTable.totalsRowHeading'),
                 };
             return totals && totals.filter((total) => total !== '').length > 1
                 ? totalsLabel.plural

package/dist/src/components/DataTable/components/Cell/Cell.js

@@ -24,7 +24,7 @@ function Cell({ content, contentType, nthColumn, firstColumn, truncate, header,
     const direction = sorted && sortDirection ? sortDirection : defaultSortDirection;
     const source = direction === 'descending' ? Icons_1.MaSortDescending : Icons_1.MaSortAscending;
     const oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
-    const sortAccessibilityLabel = i18n.translate('Polaris.DataTable.sortAccessibilityLabel', {
+    const sortAccessibilityLabel = i18n.translate('Macive.DataTable.sortAccessibilityLabel', {
         direction: sorted ? oppositeDirection : direction,
     });
     const iconMarkup = ((0, jsx_runtime_1.jsx)("span", { className: iconClassName, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: source, accessibilityLabel: sortAccessibilityLabel }) }));

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

@@ -18,10 +18,10 @@ function Navigation({ columnVisibilityData, isScrolledFarthestLeft, isScrolledFa
         const className = (0, css_1.classNames)(DataTable_classnames_1.default.Pip, column.isVisible && DataTable_classnames_1.default['Pip-visible']);
         return (0, jsx_runtime_1.jsx)("div", { className: className }, `pip-${index}`);
     });
-    const leftA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
+    const leftA11yLabel = i18n.translate('Macive.DataTable.navAccessibilityLabel', {
         direction: 'left',
     });
-    const rightA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
+    const rightA11yLabel = i18n.translate('Macive.DataTable.navAccessibilityLabel', {
         direction: 'right',
     });
     return ((0, jsx_runtime_1.jsxs)("div", { className: DataTable_classnames_1.default.Navigation, ref: setRef, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaLeft, disabled: isScrolledFarthestLeft, accessibilityLabel: leftA11yLabel, onClick: navigateTableLeft }), pipMarkup, (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaRight, disabled: isScrolledFarthestRight, accessibilityLabel: rightA11yLabel, onClick: navigateTableRight })] }));

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

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const DescriptionListClassnames = {
-    "spacingTight": "DescriptionList-spacingTight",
     "DescriptionList": "DescriptionList-DescriptionList",
     "Term": "DescriptionList-Term",
-    "Description+&+.Description": "DescriptionList-Description+&+.Description",
-    "Description": "DescriptionList-Description",
-    "Term+.Description": "DescriptionList-Term+.Description"
+    "spacingTight": "DescriptionList-spacingTight",
+    "Description": "DescriptionList-Description"
 };
 exports.default = DescriptionListClassnames;

package/dist/src/components/DisplayText/DisplayText.js

@@ -10,7 +10,7 @@ const DisplayText_classnames_1 = __importDefault(require("./DisplayText.classnam
 /**
  * @deprecated The DisplayText component will be removed in the next
  * major version. Use the Text component instead. See the
- * Polaris component guide on how to use Text.
+ * Macive component guide on how to use Text.
  *
  * https://dev.airsoko.com/components/text
  */

package/dist/src/components/EmptySearchResult/EmptySearchResult.js

@@ -12,7 +12,7 @@ const Text_1 = require("../Text");
 const illustrations_1 = __importDefault(require("./illustrations"));
 function EmptySearchResult({ title, description, withIllustration, }) {
     const i18n = (0, i18n_1.useI18n)();
-    const altText = i18n.translate('Polaris.EmptySearchResult.altText');
+    const altText = i18n.translate('Macive.EmptySearchResult.altText');
     const descriptionMarkup = description ? (0, jsx_runtime_1.jsx)("p", { children: description }) : null;
     const svgString = `data:image/svg+xml;utf8,${illustrations_1.default}`;
     // const illustrationMarkup = withIllustration ? (

package/dist/src/components/Form/Form.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Text_1 = require("../Text");
 const i18n_1 = require("../../utilities/i18n");
+const Text_1 = require("../Text");
 function Form({ acceptCharset, action, autoComplete, children, encType, implicitSubmit = true, method = 'post', name, noValidate, preventDefault = true, target, onSubmit, }) {
     const i18n = (0, i18n_1.useI18n)();
     const handleSubmit = (0, react_1.useCallback)((event) => {
@@ -15,7 +15,7 @@ function Form({ acceptCharset, action, autoComplete, children, encType, implicit
         onSubmit(event);
     }, [onSubmit, preventDefault]);
     const autoCompleteInputs = normalizeAutoComplete(autoComplete);
-    const submitMarkup = implicitSubmit ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: "span", visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("button", { type: "submit", "aria-hidden": "true", tabIndex: -1, children: i18n.translate('Polaris.Common.submit') }) })) : null;
+    const submitMarkup = implicitSubmit ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("button", { type: 'submit', "aria-hidden": 'true', tabIndex: -1, children: i18n.translate('Macive.Common.submit') }) })) : null;
     return ((0, jsx_runtime_1.jsxs)("form", { acceptCharset: acceptCharset, action: action, autoComplete: autoCompleteInputs, encType: encType, method: method, name: name, noValidate: noValidate, target: target, onSubmit: handleSubmit, children: [submitMarkup, children] }));
 }
 exports.Form = Form;

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

@@ -5,7 +5,7 @@ const FormLayoutClassnames = {
     "Title": "FormLayout-Title",
     "Items": "FormLayout-Items",
     "Item": "FormLayout-Item",
-    "condensed": "FormLayout-condensed",
-    "grouped": "FormLayout-grouped"
+    "grouped": "FormLayout-grouped",
+    "condensed": "FormLayout-condensed"
 };
 exports.default = FormLayoutClassnames;