@veracity/vui 2.15.4 → 2.17.0-beta.0

package/.eslintrc.cjs

@@ -0,0 +1,12 @@
+/* eslint-env node */
+
+// This is a workaround for https://github.com/eslint/eslint/issues/3458
+require('@veracity/eslint-config/patch')
+
+module.exports = {
+  extends: ['@veracity/eslint-config/legacy'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 0,
+    'react-hooks/exhaustive-deps': 0
+  }
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+npm WARN ignoring workspace config at D:\a\1\s\packages\vui/.npmrc 
+
+> @veracity/vui@2.17.0-beta.0 build
+> tsc -p tsconfig.json && tsc -p tsconfig.legacy.json
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,15 @@
+npm WARN ignoring workspace config at D:\a\1\s\packages\vui/.npmrc 
+
+> @veracity/vui@2.17.0-beta.0 lint
+> npm run eslint && npm run tslint
+
+npm WARN ignoring workspace config at D:\a\1\s\packages\vui/.npmrc 
+
+> @veracity/vui@2.17.0-beta.0 eslint
+> eslint "src/**/*.{ts,tsx}"
+
+npm WARN ignoring workspace config at D:\a\1\s\packages\vui/.npmrc 
+
+> @veracity/vui@2.17.0-beta.0 tslint
+> tsc --noEmit
+

package/LICENSE.md

@@ -0,0 +1 @@
+Copyright (c) Veracity - All Rights Reserved

package/README.md

@@ -12,4 +12,19 @@ Test environment: [https://uitest.veracity.com/](https://uitest.veracity.com/).
 
 1. Propose changes to [VUI channel on Teams](https://teams.microsoft.com/l/channel/19%3a908d5ed7bcae497284565a693cb2ffed%40thread.tacv2/VUI?groupId=26777f8a-e423-402f-90f8-7af990f489a4&tenantId=adf10e2b-b6e9-41d6-be2f-c12bb566019c)
 2. Create a user story and check out a feature branch
-3. Create a PR with your changes and ask for review
+3. Create a PR with your changes and ask for review
+
+## Manually upgrade _onedesign-tokens_ private package (until it becomes public)
+
+Temporary procedure:
+
+1. install locally
+
+```
+npm i --no-save @dnvgl-onefoundation/onedesign-tokens@beta
+```
+
+2. copy file from `node_modules/@dnvgl-onefoundation/onedesign-tokens/dist/js/es6/rem/button.js`
+   into `./src/onedesign-tokens/dist/js/es6/rem`
+
+3. commit changes.

package/dist/cjs/accordion/accordion.d.ts

@@ -1,12 +1,12 @@
-import { VuiComponent } from '../core';
-import { AccordionProps } from './accordion.types';
-import AccordionItem from './accordionItem';
-import AccordionItemHorizontal from './accordionItemHorizontal';
-export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** Allows to show and hide sections of related content on a page. */
-export declare const Accordion: VuiComponent<"div", AccordionProps> & {
-    Item: typeof AccordionItem;
-    ItemHorizontal: typeof AccordionItemHorizontal;
-};
-export default Accordion;
+import { VuiComponent } from '../core';
+import { AccordionProps } from './accordion.types';
+import AccordionItem from './accordionItem';
+import AccordionItemHorizontal from './accordionItemHorizontal';
+export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Allows to show and hide sections of related content on a page. */
+export declare const Accordion: VuiComponent<"div", AccordionProps> & {
+    Item: typeof AccordionItem;
+    ItemHorizontal: typeof AccordionItemHorizontal;
+};
+export default Accordion;
 //# sourceMappingURL=accordion.d.ts.map

package/dist/cjs/accordion/accordion.js

@@ -1,72 +1,49 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = exports.AccordionBase = void 0;
-const react_1 = __importStar(require("react"));
-const core_1 = require("../core");
-const list_1 = __importDefault(require("../list"));
-const utils_1 = require("../utils");
-const accordionItem_1 = __importDefault(require("./accordionItem"));
-const accordionItemHorizontal_1 = __importDefault(require("./accordionItemHorizontal"));
-const context_1 = require("./context");
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = exports.AccordionBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../core");
+const list_1 = __importDefault(require("../list"));
+const utils_1 = require("../utils");
+const accordionItem_1 = __importDefault(require("./accordionItem"));
+const accordionItemHorizontal_1 = __importDefault(require("./accordionItemHorizontal"));
+const context_1 = require("./context");
 exports.AccordionBase = core_1.styled.divBox `
   display: flex;
   min-width: 0;
   transition-duration: normal;
-`;
-/** Allows to show and hide sections of related content on a page. */
-exports.Accordion = (0, core_1.vui)((props, ref) => {
-    var _a, _b;
-    const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant } = props, rest = __rest(props, ["children", "className", "items", "orientation", "iconPosition", "size", "variant"]);
-    const styles = (0, core_1.useStyleConfig)('Accordion', props);
-    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
-    const aliasedProps = (0, utils_1.filterUndefined)({});
-    const isVertical = orientation === 'vertical';
-    return (react_1.default.createElement(context_1.AccordionProvider, { value: context },
-        react_1.default.createElement(exports.AccordionBase, Object.assign({ borderLeft: isVertical
-                ? undefined
+`;
+/** Allows to show and hide sections of related content on a page. */
+exports.Accordion = (0, core_1.vui)((props, ref) => {
+    var _a, _b;
+    const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant } = props, rest = __rest(props, ["children", "className", "items", "orientation", "iconPosition", "size", "variant"]);
+    const styles = (0, core_1.useStyleConfig)('Accordion', props);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
+    const aliasedProps = (0, utils_1.filterUndefined)({});
+    const isVertical = orientation === 'vertical';
+    return ((0, jsx_runtime_1.jsx)(context_1.AccordionProvider, { value: context, children: (0, jsx_runtime_1.jsx)(exports.AccordionBase, Object.assign({ borderLeft: isVertical
+                ? undefined
                 : `1px solid transparent
-        `, borderTop: isVertical ? `1px solid transparent` : undefined, className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles.container, aliasedProps, rest), isVertical ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
-            ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => (react_1.default.createElement(accordionItem_1.default, Object.assign({ iconPosition: iconPosition, key: key }, item))))
-            : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ key: key }, item)))) : (children))));
-});
-exports.Accordion.Item = accordionItem_1.default;
-exports.Accordion.ItemHorizontal = accordionItemHorizontal_1.default;
-exports.Accordion.displayName = 'Accordion';
-exports.default = exports.Accordion;
+        `, borderTop: isVertical ? `1px solid transparent` : undefined, className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles.container, aliasedProps, rest, { children: isVertical ? ((0, jsx_runtime_1.jsx)(list_1.default, { w: "100%", children: items
+                    ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => ((0, jsx_runtime_1.jsx)(accordionItem_1.default, Object.assign({ iconPosition: iconPosition }, item), key)))
+                    : children })) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => (0, jsx_runtime_1.jsx)(accordionItemHorizontal_1.default, Object.assign({}, item), key))) : (children) })) }));
+});
+exports.Accordion.Item = accordionItem_1.default;
+exports.Accordion.ItemHorizontal = accordionItemHorizontal_1.default;
+exports.Accordion.displayName = 'Accordion';
+exports.default = exports.Accordion;

package/dist/cjs/accordion/accordion.types.d.ts

@@ -1,47 +1,47 @@
-import { ReactNode } from 'react';
-import { IconProps } from '../icon';
-import { ListItemProps } from '../list';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export type AccordionOrientation = 'vertical' | 'horizontal';
-export type AccordionIconPosition = 'end' | 'start';
-export type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
-    /** Items AccordionOrientation @default "vertical" */
-    orientation?: AccordionOrientation;
-    /** Collection of Accordion items */
-    items?: AccordionItemProps[];
-    /** Icon position for vertical orientation @default "end" */
-    iconPosition?: AccordionIconPosition;
-};
-export type AccordionItemId = string | number;
-export type AccordionOnToggleEvent = {
-    id: AccordionItemId;
-    collapsed: boolean;
-};
-export type AccordionItemProps = ListItemProps & {
-    /** Unique ID */
-    id: AccordionItemId;
-    /** Custom class name */
-    className?: string;
-    /** Content */
-    children?: ReactNode;
-    /** Alternative way to provide content */
-    content?: ReactNode;
-    /** Control the padding of the content */
-    contentPx?: string | number;
-    /** Collapsed state */
-    collapsed?: boolean;
-    /** The icon position @default "end" */
-    iconPosition?: AccordionIconPosition;
-    /** Title */
-    title?: string | ReactNode;
-    /** Collapse change state */
-    onToggle?: (event: AccordionOnToggleEvent) => void;
-};
-export type AccordionItemArrowProps = IconProps & {
-    collapsed?: boolean;
-    color?: string;
-    disabled?: boolean;
-    orientation?: AccordionOrientation;
-};
+import { ReactNode } from 'react';
+import { IconProps } from '../icon';
+import { ListItemProps } from '../list';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export type AccordionOrientation = 'vertical' | 'horizontal';
+export type AccordionIconPosition = 'end' | 'start';
+export type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+    /** Items AccordionOrientation @default "vertical" */
+    orientation?: AccordionOrientation;
+    /** Collection of Accordion items */
+    items?: AccordionItemProps[];
+    /** Icon position for vertical orientation @default "end" */
+    iconPosition?: AccordionIconPosition;
+};
+export type AccordionItemId = string | number;
+export type AccordionOnToggleEvent = {
+    id: AccordionItemId;
+    collapsed: boolean;
+};
+export type AccordionItemProps = ListItemProps & {
+    /** Unique ID */
+    id: AccordionItemId;
+    /** Custom class name */
+    className?: string;
+    /** Content */
+    children?: ReactNode;
+    /** Alternative way to provide content */
+    content?: ReactNode;
+    /** Control the padding of the content */
+    contentPx?: string | number;
+    /** Collapsed state */
+    collapsed?: boolean;
+    /** The icon position @default "end" */
+    iconPosition?: AccordionIconPosition;
+    /** Title */
+    title?: string | ReactNode;
+    /** Collapse change state */
+    onToggle?: (event: AccordionOnToggleEvent) => void;
+};
+export type AccordionItemArrowProps = IconProps & {
+    collapsed?: boolean;
+    color?: string;
+    disabled?: boolean;
+    orientation?: AccordionOrientation;
+};
 //# sourceMappingURL=accordion.types.d.ts.map

package/dist/cjs/accordion/accordion.types.js

@@ -1,2 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/accordion/accordionItem.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { AccordionItemProps } from './accordion.types';
-/** An accordion item. */
-export declare const AccordionItem: {
-    (props: AccordionItemProps): JSX.Element;
-    displayName: string;
-};
-export default AccordionItem;
+import { AccordionItemProps } from './accordion.types';
+/** An accordion item. */
+export declare const AccordionItem: {
+    (props: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccordionItem;
 //# sourceMappingURL=accordionItem.d.ts.map

package/dist/cjs/accordion/accordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa;YAAW,kBAAkB;;CAuFtD,CAAA;AAID,eAAe,aAAa,CAAA"}
+{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa;YAAW,kBAAkB;;CAuFtD,CAAA;AAID,eAAe,aAAa,CAAA"}

package/dist/cjs/accordion/accordionItem.js

@@ -1,79 +1,50 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionItem = void 0;
-const react_1 = __importStar(require("react"));
-const box_1 = require("../box");
-const core_1 = require("../core");
-const list_1 = require("../list");
-const utils_1 = require("../utils");
-const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
-const context_1 = require("./context");
-/** An accordion item. */
-const AccordionItem = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "title", "onToggle"]);
-    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
-    const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
-    (0, react_1.useEffect)(() => {
-        setIsCollapsedInternal(!!collapsed);
-    }, [collapsed]);
-    const toggle = () => {
-        if (!disabled) {
-            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
-            setIsCollapsedInternal(!collapsedInternal);
-        }
-    };
-    const isIconStart = iconPosition === 'start';
-    const isIconEnd = iconPosition === 'end';
-    return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: (0, utils_1.cs)('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
-        react_1.default.createElement(box_1.Box, Object.assign({ color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
-                ? 'transparent'
-                : collapsedInternal
-                    ? styles.item.itemTitleHoverBg
-                    : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item),
-            isIconStart && (react_1.default.createElement(box_1.Box, null,
-                react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color }))),
-            react_1.default.createElement(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0, opacity: disabled ? 0.5 : 1 }, title),
-            isIconEnd && (react_1.default.createElement(box_1.Box, null,
-                react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled })))),
-        !collapsedInternal && (react_1.default.createElement(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children !== null && children !== void 0 ? children : content))));
-};
-exports.AccordionItem = AccordionItem;
-exports.AccordionItem.displayName = 'AccordionItem';
-exports.default = exports.AccordionItem;
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const box_1 = require("../box");
+const core_1 = require("../core");
+const list_1 = require("../list");
+const utils_1 = require("../utils");
+const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
+const context_1 = require("./context");
+/** An accordion item. */
+const AccordionItem = (props) => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "title", "onToggle"]);
+    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
+    const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
+    (0, react_1.useEffect)(() => {
+        setIsCollapsedInternal(!!collapsed);
+    }, [collapsed]);
+    const toggle = () => {
+        if (!disabled) {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+    };
+    const isIconStart = iconPosition === 'start';
+    const isIconEnd = iconPosition === 'end';
+    return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, Object.assign({ borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: (0, utils_1.cs)('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
+                    ? 'transparent'
+                    : collapsedInternal
+                        ? styles.item.itemTitleHoverBg
+                        : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item, { children: [isIconStart && ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color }) })), (0, jsx_runtime_1.jsx)(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0, opacity: disabled ? 0.5 : 1, children: title }), isIconEnd && ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled }) }))] })), !collapsedInternal && ((0, jsx_runtime_1.jsx)(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%", children: children !== null && children !== void 0 ? children : content }))] })));
+};
+exports.AccordionItem = AccordionItem;
+exports.AccordionItem.displayName = 'AccordionItem';
+exports.default = exports.AccordionItem;

package/dist/cjs/accordion/accordionItemArrow.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AccordionItemArrowProps } from './accordion.types';
-declare const _default: React.MemoExoticComponent<({ collapsed, color, disabled, orientation, ...rest }: AccordionItemArrowProps) => JSX.Element>;
-export default _default;
+import React from 'react';
+import { AccordionItemArrowProps } from './accordion.types';
+declare const _default: React.MemoExoticComponent<({ collapsed, color, disabled, orientation, ...rest }: AccordionItemArrowProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
 //# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/cjs/accordion/accordionItemArrow.js

@@ -1,33 +1,34 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const icon_1 = __importDefault(require("../icon"));
-const names = {
-    horizontal: {
-        collapsed: 'falChevronRight',
-        expanded: 'falChevronLeft'
-    },
-    vertical: {
-        collapsed: 'falChevronDown',
-        expanded: 'falChevronUp'
-    }
-};
-const AccordionItemArrow = (_a) => {
-    var { collapsed, color = 'sandstone.10', disabled = false, orientation = 'vertical' } = _a, rest = __rest(_a, ["collapsed", "color", "disabled", "orientation"]);
-    return (react_1.default.createElement(icon_1.default, Object.assign({ name: names[orientation][collapsed ? 'collapsed' : 'expanded'], opacity: disabled ? 0.5 : 1, pathFill: color, size: "sm" }, rest)));
-};
-exports.default = react_1.default.memo(AccordionItemArrow);
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const icon_1 = __importDefault(require("../icon"));
+const names = {
+    horizontal: {
+        collapsed: 'falChevronRight',
+        expanded: 'falChevronLeft'
+    },
+    vertical: {
+        collapsed: 'falChevronDown',
+        expanded: 'falChevronUp'
+    }
+};
+const AccordionItemArrow = (_a) => {
+    var { collapsed, color = 'sandstone.10', disabled = false, orientation = 'vertical' } = _a, rest = __rest(_a, ["collapsed", "color", "disabled", "orientation"]);
+    return ((0, jsx_runtime_1.jsx)(icon_1.default, Object.assign({ name: names[orientation][collapsed ? 'collapsed' : 'expanded'], opacity: disabled ? 0.5 : 1, pathFill: color, size: "sm" }, rest)));
+};
+exports.default = react_1.default.memo(AccordionItemArrow);

package/dist/cjs/accordion/accordionItemHorizontal.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { AccordionItemProps } from './accordion.types';
-/** An accordion item (horizontal AccordionOrientation). */
-export declare const AccordionItemHorizontal: {
-    (props: AccordionItemProps): JSX.Element;
-    displayName: string;
-};
-export default AccordionItemHorizontal;
+import { AccordionItemProps } from './accordion.types';
+/** An accordion item (horizontal AccordionOrientation). */
+export declare const AccordionItemHorizontal: {
+    (props: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccordionItemHorizontal;
 //# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB;YAAW,kBAAkB;;CA0FhE,CAAA;AAID,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,2DAA2D;AAC3D,eAAO,MAAM,uBAAuB;YAAW,kBAAkB;;CA0FhE,CAAA;AAID,eAAe,uBAAuB,CAAA"}