@itcase/ui 1.1.7 → 1.1.9

package/dist/{Accordion-JS45IVx7.js → Accordion-CqPVnTKh.js}

@@ -1,43 +1,12 @@
+import { b as __spreadArray } from './Link-ByBzBRDH.js';
 import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
 import React__default, { useCallback, useState, useMemo } from 'react';
 import clsx from 'clsx';
 import castArray from 'lodash/castArray';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { Icon } from './components/Icon.js';
-import { T as Text } from './Text-DffpwlYq.js';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { T as Text } from './Text-BcGbRc14.js';
 
 var ChevronDown16 = function ChevronDown16(props) {
   return /*#__PURE__*/React__default.createElement("svg", props, /*#__PURE__*/React__default.createElement("path", {

package/dist/Avatar-DB6Si0s1.js

@@ -0,0 +1,31 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { Image } from './components/Image.js';
+import { T as Text } from './Text-BcGbRc14.js';
+
+function Avatar(props) {
+    var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'avatar_shape_',
+        propsKey: 'shape',
+    });
+    var avatarChars = useMemo(function () {
+        var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
+        var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
+        return "".concat(firstChar).concat(secondChar);
+    }, [firstName, secondName]);
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntimeExports.jsxs("div", { className: clsx('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsxRuntimeExports.jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntimeExports.jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, stroke: iconStroke, SvgImage: icon })), Dot, after] }) }));
+}
+
+export { Avatar as A };

package/dist/{Breadcrumbs-KOoMbWmP.js → Breadcrumbs-B79kOtMG.js}

@@ -7,9 +7,9 @@ import fillProps from './constants/componentProps/fill.js';
 import positionProps from './constants/componentProps/position.js';
 import shapeProps from './constants/componentProps/shape.js';
 import widthProps from './constants/componentProps/width.js';
-import { Icon } from './components/Icon.js';
-import { T as Text } from './Text-DffpwlYq.js';
-import { LinkWrapper } from './components/Link.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { T as Text } from './Text-BcGbRc14.js';
+import { a as LinkWrapper } from './Link-ByBzBRDH.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 

package/dist/Button-B7vbiqrJ.js

@@ -0,0 +1,100 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import React__default from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { a as LinkWrapper } from './Link-ByBzBRDH.js';
+import { Loader } from './components/Loader.js';
+import { T as Text } from './Text-BcGbRc14.js';
+
+var buttonConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        buttonConfig.appearance = newComponent;
+    },
+};
+var Button = React__default.forwardRef(function Button(props, ref) {
+    var before = props.before, appearance = props.appearance, after = props.after, className = props.className, dataTour = props.dataTour, dataTestId = props.dataTestId, Badge = props.Badge, children = props.children, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, _a = props.loaderSet, loaderSet = _a === void 0 ? 'simple' : _a, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, link = props.link, href = props.href, target = props.target, rel = props.rel, _b = props.size, size = _b === void 0 ? 'xl' : _b, icon = props.icon, iconShape = props.iconShape, iconAfterShape = props.iconAfterShape, iconBeforeShape = props.iconBeforeShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconStroke = props.iconStroke, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconBeforeStroke = props.iconBeforeStroke, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterStroke = props.iconAfterStroke, iconAfterSrc = props.iconAfterSrc, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, type = props.type, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.htmlType, htmlType = _d === void 0 ? 'button' : _d; props.width; var isDisabled = props.isDisabled, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'button_width_',
+        propsKey: 'width',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'button_size_',
+        propsKey: 'size',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'button_shape_',
+        propsKey: 'shape',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @ts-expect-error
+    var _f = useStyles(props), buttonStyles = _f.styles, labelStyles = _f.label;
+    var appearanceConfig = appearance && buttonConfig.appearance && buttonConfig.appearance[appearance];
+    return (jsxRuntimeExports.jsx(LinkWrapper, { className: clsx(className, 'button', type && "button_type_".concat(type), borderWidthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderType) &&
+                "border-type_".concat(appearanceConfig.borderType).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label &&
+            (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) &&
+            'button_type_icon', label &&
+            (after ||
+                before ||
+                icon ||
+                iconAfter ||
+                iconAfterSrc ||
+                iconBefore ||
+                iconBeforeSrc ||
+                iconSrc) &&
+            "button_type_with-icon button_type_with-icon_".concat(size)), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntimeExports.jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsxRuntimeExports.jsx(Loader, { className: "button__loader", 
+                    // @ts-expect-error
+                    fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsxRuntimeExports.jsx(Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), iconStroke: iconBeforeStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeStroke), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), iconStroke: iconStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconStroke), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntimeExports.jsx(Text, { className: "button__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, 
+                    // @ts-expect-error
+                    style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWrap: labelTextWrap, textWeight: labelTextWeight, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsxRuntimeExports.jsx(Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), iconStroke: iconAfterStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterStroke), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
+});
+Button.defaultProps = {
+    // Button with a `type="submit"` attribute is a form control by default.
+    // If the button is not associated with any form, it will look for
+    // the nearest form in the DOM and submit its data when clicked.
+    htmlType: 'button',
+    size: 'xl',
+    width: 'hug',
+    loaderSet: 'simple',
+    loading: false,
+};
+
+export { Button as B, buttonConfig as b };

package/dist/{ContextMenuItem-CF5L8xev.js → ContextMenuItem-BPqsjmSA.js}

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import shapeProps from './constants/componentProps/shape.js';
-import { T as Text } from './Text-DffpwlYq.js';
-import { Icon } from './components/Icon.js';
-import { Divider } from './components/Divider.js';
+import { T as Text } from './Text-BcGbRc14.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { D as Divider } from './Divider-BlBwMHgl.js';
 
 function ContextMenu(props) {
   const {

package/dist/Divider-BlBwMHgl.js

@@ -0,0 +1,45 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+function Divider(props) {
+    var className = props.className;
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'divider_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'divider_size_',
+        propsKey: 'size',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var hrStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsx("hr", { className: clsx(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
+}
+
+export { Divider as D };

package/dist/Dot-C3R1y59u.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+function Dot(props) {
+    var className = props.className, children = props.children;
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'dot_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'dot_size_',
+        propsKey: 'size',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+}
+Dot.defaultProps = {};
+
+export { Dot as D };

package/dist/{DropdownItem-C0gYXEq6.js → DropdownItem-Dgf0LRhx.js}

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { Divider } from './components/Divider.js';
-import { Link } from './components/Link.js';
-import { T as Text } from './Text-DffpwlYq.js';
+import { D as Divider } from './Divider-BlBwMHgl.js';
+import { L as Link } from './Link-ByBzBRDH.js';
+import { T as Text } from './Text-BcGbRc14.js';
 import fillProps from './constants/componentProps/fill.js';
 import shapeProps from './constants/componentProps/shape.js';
 import typeProps from './constants/componentProps/type.js';

package/dist/{FlexItem-DHynUt6v.js → FlexItem-DzNgFIa0.js}

@@ -47,7 +47,7 @@ function Flex(props) {
     });
     var borderClass = useDeviceTargetClass(props, {
         prefix: 'border-color_',
-        propsKey: 'border',
+        propsKey: 'borderColor',
     });
     var borderTypeClass = useDeviceTargetClass(props, {
         prefix: 'border_type_',

package/dist/GridRow-Cc-rz56R.js

@@ -0,0 +1,158 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+function Grid(props) {
+    var id = props.id, after = props.after, before = props.before, children = props.children, className = props.className, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, onClick = props.onClick, type = props.type, useGridSystem = props.useGridSystem, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, dataTour = props.dataTour, verticalResizing = props.verticalResizing;
+    var columnsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_columns_',
+        propsKey: 'columns',
+    });
+    var rowsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_rows_',
+        propsKey: 'rows',
+    });
+    var rowGapClass = useDeviceTargetClass(props, {
+        prefix: 'grid_row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass(props, {
+        prefix: 'grid_column-gap_',
+        propsKey: 'columnGap',
+    });
+    var alignContentClass = useDeviceTargetClass(props, {
+        prefix: 'grid_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'grid_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var justifyItemsClass = useDeviceTargetClass(props, {
+        prefix: 'grid_justify-items_',
+        propsKey: 'justifyItems',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fillWrapper',
+    });
+    useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fillWrapperInner',
+    });
+    useDeviceTargetClass(props, {
+        prefix: 'grid_shape_',
+        propsKey: 'shapeWrapper',
+    });
+    useDeviceTargetClass(props, {
+        prefix: 'grid_shape_',
+        propsKey: 'shapeWrapperInner',
+    });
+    // prettier-ignore
+    // @ts-expect-error
+    var _b = useStyles(props), gridStyles = _b.styles; _b.gridWrapper; _b.gridWrapperInner;
+    return (jsxRuntimeExports.jsxs(Tag, { className: clsx(className, 'grid', useGridSystem && "grid_state_system", horizontalScroll && "grid_scroll_horizontal", type && "grid_type_".concat(type), columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && "grid_horizontal-resizing_".concat(horizontalResizing), verticalResizing && "grid_vertical-resizing_".concat(verticalResizing)), "data-tour": dataTour, id: id, style: gridStyles, onClick: onClick, children: [before && jsxRuntimeExports.jsx("div", { className: "grid__before", children: before }), children, after && jsxRuntimeExports.jsx("div", { className: "grid__after", children: after })] }));
+}
+Grid.defaultProps = {
+    tag: 'div',
+};
+
+function GridItem(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, onClick = props.onClick;
+    var orderClass = useDeviceTargetClass(props, {
+        prefix: 'order_',
+        propsKey: 'order',
+    });
+    var alignSelfClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_align-self_',
+        propsKey: 'alignSelf',
+    });
+    var justifySelfClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_justify-self_',
+        propsKey: 'justifySelf',
+    });
+    var columnStartClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-start_',
+        propsKey: 'columnStart',
+    });
+    var columnEndClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-end_',
+        propsKey: 'columnEnd',
+    });
+    var columnSpanClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_column-span_',
+        propsKey: 'columnSpan',
+    });
+    var rowStartClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-start_',
+        propsKey: 'rowStart',
+    });
+    var rowEndClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-end_',
+        propsKey: 'rowEnd',
+    });
+    var rowSpanClass = useDeviceTargetClass(props, {
+        prefix: 'grid__item_row-span_',
+        propsKey: 'rowSpan',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var gapClass = useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var rowGapClass = useDeviceTargetClass(props, {
+        prefix: 'row-gap_',
+        propsKey: 'rowGap',
+    });
+    var columnGapClass = useDeviceTargetClass(props, {
+        prefix: 'column-gap_',
+        propsKey: 'columnGap',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var gridItemStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass), "data-tour": dataTour, id: String(id), style: gridItemStyles, onClick: onClick, children: children }));
+}
+
+function GridRow(props) {
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, htmlFor = props.htmlFor, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // @ts-expect-error
+    var gridRowStyles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsx(Tag, { className: clsx(className, 'grid__row', fillClass, fillHoverClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: gridRowStyles, onClick: onClick, children: children }));
+}
+GridRow.defaultProps = {
+    tag: 'div',
+};
+
+export { Grid as G, GridRow as a, GridItem as b };

package/dist/{Group-DhYXDvAJ.js → Group-fbVPmr8W.js}

@@ -4,7 +4,7 @@ import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
 var groupConfig = {
-    appearance: {},
+    appearance: undefined,
     setAppearance: function (newComponent) {
         groupConfig.appearance = newComponent;
     },
@@ -85,30 +85,22 @@ function Group(props) {
     });
     // @ts-expect-error
     var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    var appearanceConfig = appearance && groupConfig.appearance && groupConfig.appearance[appearance];
     return (jsxRuntimeExports.jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
-            (appearance &&
-                groupConfig.appearance[appearance].direction &&
-                "group_direction_".concat(groupConfig.appearance[appearance].direction)
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "group_direction_".concat(appearanceConfig.direction)
                     .replace(/([A-Z])/g, '-$1')
                     .toLowerCase()), alignClass, fillClass ||
-            (appearance &&
-                groupConfig.appearance[appearance].fill &&
-                "fill_".concat(groupConfig.appearance[appearance].fill)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), fillHoverClass ||
-            (appearance &&
-                groupConfig.appearance[appearance].fillHover &&
-                "fill_hover_".concat(groupConfig.appearance[appearance].fillHover)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass ||
-            (appearance &&
-                groupConfig.appearance[appearance].borderColor &&
-                "border-color_".concat(groupConfig.appearance[appearance].borderColor)
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
                     .replace(/([A-Z])/g, '-$1')
                     .toLowerCase()), borderWidthClass ||
-            (appearance &&
-                groupConfig.appearance[appearance].borderWidth &&
-                "border-width_".concat(groupConfig.appearance[appearance].borderWidth)
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
                     .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntimeExports.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }