@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dcee34a

package/wizard/Wizard.stories.tsx

@@ -3,6 +3,7 @@ import DxcWizard from "./Wizard";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Wizard",
@@ -36,6 +37,7 @@ const stepWithLabel = [
     label: "Forth step",
   },
 ];
+
 const stepWithLabelDescription = [
   {
     label: "First step",
@@ -56,6 +58,7 @@ const stepWithLabelDescription = [
     valid: false,
   },
 ];
+
 const stepWithLongDescription = [
   {
     label: "First step",
@@ -73,6 +76,7 @@ const stepWithLongDescription = [
       "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. ",
   },
 ];
+
 const stepDisabled = [
   {
     label: "First step",
@@ -98,6 +102,7 @@ const stepDisabled = [
     disabled: true,
   },
 ];
+
 const stepIcons = [
   {
     label: "First step",
@@ -112,6 +117,7 @@ const stepIcons = [
     icon: favoriteSVG,
   },
 ];
+
 const stepLargeIcons = [
   {
     label: "First step",
@@ -127,19 +133,41 @@ const stepLargeIcons = [
   },
 ];
 
+const opinionatedTheme = {
+  wizard: {
+    baseColor: "#5f249f",
+    fontColor: "#000000",
+    selectedStepFontColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Current step in the third step, labels and description" theme="light" level={4} />
       <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in horizontal" theme="light" level={4} />
       <DxcWizard steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in vertical" theme="light" level={4} />
       <DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="Disabled steps" theme="light" level={4} />
       <DxcWizard steps={stepDisabled}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused steps" theme="light" level={4} />
+      <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With icons" theme="light" level={4} />
       <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With large icons" theme="light" level={4} />
       <DxcWizard steps={stepLargeIcons}></DxcWizard>
     </ExampleContainer>
@@ -201,10 +229,21 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
+const WizardSelected = () => (
+  <ExampleContainer>
+    <Title title="Clicked step" theme="light" level={4} />
+    <DxcWizard steps={stepWithLabel} mode="vertical"></DxcWizard>
+  </ExampleContainer>
+);
 
 export const WizardStepActived = WizardSelected.bind({});
 WizardStepActived.play = async ({ canvasElement }) => {

package/wizard/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type Step = {
     /**
      * Step label.
@@ -29,11 +29,12 @@ declare type Step = {
      */
     valid?: boolean;
 };
+export declare type Mode = "horizontal" | "vertical";
 declare type Props = {
     /**
      * The wizard can be showed in horizontal or vertical.
      */
-    mode?: "horizontal" | "vertical";
+    mode?: Mode;
     /**
      * Initially selected step, only when it is uncontrolled.
      */

package/common/RequiredComponent.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _templateObject;
-
-var DxcRequired = function DxcRequired(_ref) {
-  var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme;
-  return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
-};
-
-var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: #d0011b;\n  margin-right: 1px;\n  cursor: default;\n"])));
-
-DxcRequired.propTypes = {
-  theme: _propTypes["default"].oneOf(["dark", "light"])
-};
-var _default = DxcRequired;
-exports["default"] = _default;

package/inline/Inline.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import InlineProps from "./types";
-declare const DxcInline: ({ wrap, alignX, alignY, as, divider, gutter, reverse, children, }: InlineProps) => JSX.Element;
-export default DxcInline;

package/inline/Inline.js

@@ -1,60 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject, _templateObject2;
-
-var DxcInline = function DxcInline(_ref) {
-  var _ref$wrap = _ref.wrap,
-      wrap = _ref$wrap === void 0 ? false : _ref$wrap,
-      _ref$alignX = _ref.alignX,
-      alignX = _ref$alignX === void 0 ? "start" : _ref$alignX,
-      _ref$alignY = _ref.alignY,
-      alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "div" : _ref$as,
-      _ref$divider = _ref.divider,
-      divider = _ref$divider === void 0 ? false : _ref$divider,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
-      _ref$reverse = _ref.reverse,
-      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(Inline, {
-    wrap: wrap,
-    as: as,
-    alignX: alignX,
-    alignY: alignY,
-    gutter: gutter,
-    reverse: reverse,
-    divider: divider
-  }, _react["default"].Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
-  }));
-};
-
-var Inline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  padding: 0px;\n  margin: 0px;\n  width: 100%;\n"])), function (_ref2) {
-  var wrap = _ref2.wrap,
-      alignX = _ref2.alignX,
-      alignY = _ref2.alignY,
-      gutter = _ref2.gutter,
-      reverse = _ref2.reverse,
-      divider = _ref2.divider;
-  return "\n    flex-wrap: ".concat(wrap ? "wrap" : "nowrap", ";\n    flex-direction: ").concat(reverse ? "row-reverse" : "row", ";\n    align-items: stretch;\n    justify-content: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n\n    & > * {\n      align-self: ").concat(alignY === "start" || alignY === "end" ? "flex-".concat(alignY) : alignY, ";\n    }\n  ");
-});
-
-var Divider = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 1px;\n  background-color: #999999;\n  align-self: stretch;\n"])));
-
-var _default = DxcInline;
-exports["default"] = _default;

package/inline/Inline.stories.tsx

@@ -1,319 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcInline from "./Inline";
-
-export default {
-  title: "Inline",
-  component: DxcInline,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default" theme="light" level={4} />
-    <Container>
-      <DxcInline>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Default with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="medium" width="small" />
-      </DxcInline>
-    </Container>
-    <Title title="One child larger (width) than the container" theme="light" level={4} />
-    <FlexContainer customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="xlarge" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="One child larger (min-width) than the container" theme="light" level={4} />
-    <FlexContainer customWidth customHeight>
-      <DxcInline>
-        <MinSizePlaceholder height="medium" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="Wrap" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline wrap>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Nowrap in a non-flex container" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="large" />
-        <Placeholder height="small" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Nowrap in a flex container" theme="light" level={4} />
-    <FlexContainer customWidth>
-      <DxcInline>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-        <Placeholder height="large" width="small" />
-        <Placeholder height="medium" width="large" />
-        <Placeholder height="small" width="medium" />
-      </DxcInline>
-    </FlexContainer>
-    <Title title="AlignY = start" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="stretch">
-        <Placeholder width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = end with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="end" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = center" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY with wrapped items" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline alignY="end" wrap>
-        <Placeholder height="large" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignY = baseline" theme="light" level={4} />
-    <Container>
-      <DxcInline alignY="baseline">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = start" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="start">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = end with divider" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="end" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX = center" theme="light" level={4} />
-    <Container>
-      <DxcInline alignX="center">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="AlignX with wrapped items" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline alignX="center" wrap>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="large" width="medium" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="medium" width="small" />
-        <Placeholder height="small" width="large" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="large" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.125rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.125rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.25rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.25rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 0.75rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="0.75rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 1rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="1rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 1.5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="1.5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 2rem and divider" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="2rem" divider>
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-        <Placeholder height="small" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 3rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="3rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-        <Placeholder height="large" width="large" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 4rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="4rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Gutter = 5rem" theme="light" level={4} />
-    <Container>
-      <DxcInline gutter="5rem">
-        <Placeholder height="small" width="small" />
-        <Placeholder height="medium" width="medium" />
-      </DxcInline>
-    </Container>
-    <Title title="Reverse" theme="light" level={4} />
-    <Container>
-      <DxcInline reverse>
-        <Placeholder height="small" width="small">
-          1
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          2
-        </Placeholder>
-        <Placeholder height="large" width="large">
-          3
-        </Placeholder>
-        <Placeholder height="small" width="large">
-          4
-        </Placeholder>
-      </DxcInline>
-    </Container>
-    <Title title="Wrapped and reversed children" theme="light" level={4} />
-    <Container customWidth>
-      <DxcInline reverse wrap>
-        <Placeholder height="small" width="small">
-          1
-        </Placeholder>
-        <Placeholder height="medium" width="medium">
-          2
-        </Placeholder>
-        <Placeholder height="large" width="large">
-          3
-        </Placeholder>
-        <Placeholder height="small" width="large">
-          4
-        </Placeholder>
-      </DxcInline>
-    </Container>
-  </>
-);
-
-const FlexContainer = styled.div<{ customWidth?: boolean, customHeight?: boolean }>`
-  display: flex;
-  ${({ customWidth }) => customWidth && `width: 200px;`};
-  ${({ customHeight }) => customHeight && `height: 200px;`};
-  background: #f2eafa;
-`;
-
-const Container = styled.div<{ customWidth?: boolean }>`
-  background: #f2eafa;
-  ${({ customWidth }) => customWidth && `width: 300px;`};
-`;
-
-type PlaceholderProps = {
-  width?: "xlarge" | "large" | "medium" | "small" | "auto";
-  height?: "large" | "medium" | "small" | "auto";
-};
-
-const Placeholder = styled.div<PlaceholderProps>`
-  ${({ width }) =>
-    width &&
-    `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
-  ${({ height }) => height && `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;
-
-const MinSizePlaceholder = styled.div<PlaceholderProps>`
-  min-width: 300px;
-  ${({ height }) => height && `height: ${height === "large" ? "150px" : height === "medium" ? "100px" : "50px"};`};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/inline/types.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Sets whether the children are forced onto one line or can wrap onto multiple lines.
-     */
-    wrap?: boolean;
-    /**
-     * Alignment applied to children in the main axis.
-     */
-    alignX?: "start" | "end" | "center";
-    /**
-     * Alignment applied to children in the cross axis.
-     */
-    alignY?: "start" | "end" | "center" | "baseline" | "stretch";
-    /**
-     * Specifies the HTML tag or component that is rendered as the wrapper element.
-     */
-    as?: React.ElementType;
-    /**
-     * If true, a divider is shown between each child.
-     */
-    divider?: boolean;
-    /**
-     * Space applied between each child.
-     */
-    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-    /**
-     * If true, it changes the direction of the inline to reverse.
-     */
-    reverse?: boolean;
-    /**
-     * Custom content inside the stack.
-     */
-    children: React.ReactNode[] | React.ReactNode;
-};
-export default Props;

package/list/List.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import ListPropsType from "./types";
-declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
-export default List;

package/list/List.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _Text = _interopRequireDefault(require("../text/Text"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-function List(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "disc" : _ref$type,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "0.25rem" : _ref$gutter;
-  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    as: type === "number" ? "ol" : "ul",
-    gutter: gutter
-  }, _react["default"].Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
-  }));
-}
-
-var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  user-select: none;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
-
-var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n"])));
-
-var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  border: 1px solid black;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n  box-sizing: border-box;\n"])));
-
-var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n"])));
-
-var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  padding: 0px;\n  list-style: none;\n  display: flex;\n"])));
-
-var _default = List;
-exports["default"] = _default;