@dxc-technology/halstack-react 0.0.0-951bb80 → 0.0.0-955a751

package/accordion/Accordion.stories.tsx

@@ -1,307 +0,0 @@
-import React from "react";
-import DxcAccordion from "./Accordion";
-import DxcHeading from "../heading/Heading";
-import DxcTextInput from "../text-input/TextInput";
-import DxcButton from "../button/Button";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { ThemeProvider } from "../ThemeContext";
-
-export default {
-  title: "Accordion",
-  component: DxcAccordion,
-};
-
-const folderIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    enable-background="new 0 0 24 24"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="currentColor"
-  >
-    <g>
-      <rect fill="none" height="24" width="24" />
-    </g>
-    <g>
-      <path d="M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z" />
-    </g>
-  </svg>
-);
-
-const thumbIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" />
-  </svg>
-);
-
-const advancedTheme = {
-  accordion: {
-    backgroundColor: "#000000",
-    assistiveTextFontColor: "#ffffff",
-    titleLabelFontColor: "#ffffff",
-    arrowColor: "#5f249f",
-    iconColor: "#5f249f",
-  },
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Component anatomy" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="With label" theme="light" level={4} />
-      <DxcAccordion label="Accordion">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="With assistive text" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="With icon" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="With bigger icon 48x48" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={thumbIcon}>
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <Title title="States" theme="light" level={2} />
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcAccordion label="Focused">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered" theme="light" level={4} />
-      <DxcAccordion label="Hovered">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Active" theme="light" level={4} />
-      <DxcAccordion label="Active">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled" theme="light" level={4} />
-      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Background color provider over accordion content" theme="light" level={4} />
-      <ThemeProvider advancedTheme={advancedTheme}>
-        <DxcAccordion
-          label="Dark Accordion"
-          isExpanded
-          assistiveText="Assistive text"
-          icon={folderIcon}
-          padding="medium"
-        >
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <DxcTextInput
-              label="Label"
-              helperText="HelperText"
-              placeholder="Placeholder"
-              size="fillParent"
-              margin={{ bottom: "medium" }}
-            />
-            <DxcButton label="Submit" size="medium" />
-          </div>
-        </DxcAccordion>
-      </ThemeProvider>
-    </ExampleContainer>
-    <Title title="Paddings" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall padding" theme="light" level={4} />
-      <DxcAccordion label="Xxsmall padding" isExpanded padding="xxsmall">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall padding" theme="light" level={4} />
-      <DxcAccordion label="Xsmall padding" isExpanded padding="xsmall">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small padding" theme="light" level={4} />
-      <DxcAccordion label="Small padding" isExpanded padding="small">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium padding" theme="light" level={4} />
-      <DxcAccordion label="Medium padding" isExpanded padding="medium">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large padding" theme="light" level={4} />
-      <DxcAccordion label="Large padding" isExpanded padding="large">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge padding" theme="light" level={4} />
-      <DxcAccordion label="Xlarge padding" isExpanded padding="xlarge">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge padding" theme="light" level={4} />
-      <DxcAccordion label="Xxlarge padding" isExpanded padding="xxlarge">
-        <div>
-          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcAccordion label="Xxsmall margin" margin="xxsmall">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcAccordion label="Xsmall margin" margin="xsmall">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small margin" theme="light" level={4} />
-      <DxcAccordion label="Small margin" margin="small">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium margin" theme="light" level={4} />
-      <DxcAccordion label="Medium margin" margin="medium">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large margin" theme="light" level={4} />
-      <DxcAccordion label="Large margin" margin="large">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcAccordion label="Xlarge margin" margin="xlarge">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcAccordion label="Xxlarge margin" margin="xxlarge">
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </DxcAccordion>
-      <hr />
-    </ExampleContainer>
-  </>
-);

package/accordion/types.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type SVG = React.SVGProps<SVGSVGElement>;
-declare type Props = {
-    /**
-     * The panel label.
-     */
-    label: string;
-    /**
-     * Represents the state of the panel. When true, the component will be
-     * expanded. If undefined, the component will be uncontrolled and its
-     * value will be managed internally by the component.
-     */
-    isExpanded?: boolean;
-    /**
-     * Element or path used as the icon that will be placed next to panel label.
-     */
-    icon?: string | SVG;
-    /**
-     * Assistive text to be placed on the right side of the panel.
-     */
-    assistiveText?: string;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * This function will be called when the user clicks the accordion to expand or collapse
-     * the panel. The new state of the panel will be passed as a parameter.
-     */
-    onChange?: (isExpanded: boolean) => void;
-    /**
-     * The expanded panel of the accordion. This area can be used to render
-     * custom content.
-     */
-    children: React.ReactNode;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space | Margin;
-    /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
-     */
-    padding?: Space | Padding;
-    /**
-     * Value of the tabindex.
-     */
-    tabIndex?: number;
-};
-export default Props;

package/accordion/types.js

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

package/accordion-group/AccordionGroup.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import AccordionGroupPropsType, { AccordionPropsType } from "./types";
-declare const DxcAccordionGroup: {
-    ({ indexActive, disabled, onActiveChange, margin, children, }: AccordionGroupPropsType): JSX.Element;
-    Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
-};
-export default DxcAccordionGroup;

package/accordion-group/AccordionGroup.js

@@ -1,170 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
-
-var _utils = require("../common/utils.js");
-
-var _variables = require("../common/variables.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _templateObject;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
-
-var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
-  var childProps = (0, _extends2["default"])({}, _ref);
-
-  var _useContext = (0, _react.useContext)(AccordionGroupAccordionContext),
-      innerIsExpanded = _useContext.innerIsExpanded,
-      handlerActiveChange = _useContext.handlerActiveChange,
-      disabled = _useContext.disabled,
-      index = _useContext.index;
-
-  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
-    isExpanded: innerIsExpanded === index,
-    onChange: function onChange() {
-      handlerActiveChange(index);
-    },
-    disabled: disabled
-  }, childProps), childProps.children);
-};
-
-var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
-  var indexActive = _ref2.indexActive,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      onActiveChange = _ref2.onActiveChange,
-      margin = _ref2.margin,
-      children = _ref2.children;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerIsExpanded = _useState2[0],
-      setInnerIsExpanded = _useState2[1];
-
-  var handlerActiveChange = (0, _react.useCallback)(function (index) {
-    indexActive === undefined ? setInnerIsExpanded(function (prev) {
-      return index === prev ? -1 : index;
-    }) : setInnerIsExpanded(indexActive);
-    !disabled && (onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(index));
-  }, [disabled, indexActive, onActiveChange]);
-  var value = (0, _react.useMemo)(function () {
-    return {
-      innerIsExpanded: innerIsExpanded,
-      handlerActiveChange: handlerActiveChange,
-      disabled: disabled
-    };
-  }, [innerIsExpanded, disabled]);
-  (0, _react.useEffect)(function () {
-    setInnerIsExpanded(indexActive);
-  }, [indexActive]);
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.accordion
-  }, /*#__PURE__*/_react["default"].createElement(AccordionGroupContainer, {
-    margin: margin,
-    disabled: disabled
-  }, (Array.isArray(children) ? children : [children]).filter(function (child) {
-    return child.type === AccordionGroupAccordion;
-  }).map(function (accordion, index) {
-    return /*#__PURE__*/_react["default"].createElement(AccordionGroupAccordionContext.Provider, {
-      value: _objectSpread({
-        index: index
-      }, value)
-    }, accordion);
-  })));
-};
-
-DxcAccordionGroup.Accordion = AccordionGroupAccordion;
-
-var calculateWidth = function calculateWidth(margin) {
-  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-};
-
-var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  width: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n\n  & > :not(div:last-child) {\n    & > div:first-child {\n      border-radius: 0;\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-radius: 0;\n      }\n      & > .MuiButtonBase-root {\n        border-radius: 0;\n      }\n    }\n  }\n\n  & > div:first-child {\n    & > div:first-child {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n      border-bottom: ", ";\n      border-color: ", ";\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        border-top-left-radius: ", ";\n        border-top-right-radius: ", ";\n      }\n    }\n  }\n\n  & > div:last-child {\n    & > div:first-child {\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      & > .Mui-expanded {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n      & > .MuiButtonBase-root {\n        border-bottom-left-radius: ", ";\n        border-bottom-right-radius: ", ";\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n    }\n  }\n"])), function (props) {
-  return calculateWidth(props.margin);
-}, function (_ref3) {
-  var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && (0, _typeof2["default"])(margin) === "object" && margin.left ? _variables.spaces[margin.left] : "";
-}, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
-}, function (props) {
-  return "".concat(props.theme.accordionGroupSeparatorBorderThickness, " ").concat(props.theme.accordionGroupSeparatorBorderStyle);
-}, function (props) {
-  return props.theme.accordionGroupSeparatorBorderColor;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return "".concat(props.theme.accordionGroupSeparatorBorderThickness, " ").concat(props.theme.accordionGroupSeparatorBorderStyle);
-}, function (props) {
-  return props.theme.accordionGroupSeparatorBorderColor;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderRadius;
-});
-
-var _default = DxcAccordionGroup;
-exports["default"] = _default;