npm - @ledgerhq/react-ui - Versions diffs - 0.14.1-nightly.0 → 0.14.2-nightly.0 - Mend

@ledgerhq/react-ui 0.14.1-nightly.0 → 0.14.2-nightly.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/lib/cjs/components/navigation/Breadcrumb/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Breadcrumb/index.tsx"],
-  "sourcesContent": ["import React, { memo } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Dropdown from \"../../form/Dropdown\";\nimport * as ControlModule from \"../../form/SelectInput/Control\";\n\nexport type Props = { segments: Segment[]; onChange: (values: string[]) => void }; //React.PropsWithChildren<unknown>;\nexport type Element = {\n  label: string;\n  value: string;\n};\nexport type Elements = {\n  value: Element;\n  options: Element[];\n};\nexport type Segment = Element | Elements;\n\nconst Link = styled(Text).attrs({\n  ff: \"Inter|SemiBold\",\n  fontSize: 3,\n  color: \"neutral.c80\",\n  tabIndex: 0,\n})`\n  cursor: pointer;\n  :hover,\n  :active,\n  :focus {\n    color: ${(p) => p.theme.colors.neutral.c100};\n    text-decoration: underline;\n  }\n`;\n\nfunction isMultiSegment(segment: Segment): segment is Elements {\n  return (segment as Elements).options !== undefined;\n}\n\nexport default memo(function Breadcrumb({ segments, onChange }: Props): JSX.Element {\n  const theme = useTheme();\n  const [contents] = segments.reduce<[React.ReactNode[], string[]]>(\n    ([renderArray, valuesArray], segment, index) => {\n      const values = [...valuesArray];\n\n      renderArray.push(\n        <>\n          {index > 0 ? (\n            <Text fontWeight=\"semiBold\" color=\"neutral.c40\" variant={\"paragraph\"}>\n              /\n            </Text>\n          ) : null}\n          {isMultiSegment(segment) ? (\n            <Dropdown\n              label=\"\"\n              options={segment.options}\n              value={segment.value}\n              onChange={(elt) => elt && onChange([...values, elt.value])}\n              styles={{\n                control: (provided, state) => ({\n                  ...ControlModule.getStyles<Element>(theme)(provided, state),\n                  cursor: \"pointer\",\n                }),\n                singleValue: (provided) => ({\n                  ...provided,\n                  margin: 0,\n                  top: undefined,\n                  position: undefined,\n                  overflow: undefined,\n                  maxWidth: undefined,\n                  transform: undefined,\n                  color: theme.colors.neutral.c80,\n                  \":hover\": {\n                    color: theme.colors.neutral.c100,\n                    textDecoration: \"underline\",\n                  },\n                }),\n              }}\n            />\n          ) : (\n            <Link\n              onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) =>\n                [\"Enter\", \" \"].includes(event.key) && onChange([...values, segment.value])\n              }\n              onClick={() => onChange([...values, segment.value])}\n            >\n              {segment.label}\n            </Link>\n          )}\n        </>,\n      );\n\n      valuesArray.push(isMultiSegment(segment) ? segment.value.value : segment.value);\n      return [renderArray, valuesArray];\n    },\n    [[], []],\n  );\n\n  return (\n    <Flex columnGap={5} alignItems=\"center\">\n      {contents}\n    </Flex>\n  );\n});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAiC;AACjC,kBAAiB;AACjB,kBAAiB;AACjB,sBAAqB;AACrB,oBAA+B;AAa/B,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKY,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK3C,SAAS,eAAe,SAAuC;AAC7D,SAAQ,QAAqB,YAAY;AAC3C;AAEA,IAAO,yBAAQ,mBAAK,SAAS,WAAW,EAAE,UAAU,SAAS,GAAuB;AAClF,QAAM,YAAQ,mCAAS;AACvB,QAAM,CAAC,QAAQ,IAAI,SAAS;AAAA,IAC1B,CAAC,CAAC,aAAa,WAAW,GAAG,SAAS,UAAU;AAC9C,YAAM,SAAS,CAAC,GAAG,WAAW;AAE9B,kBAAY;AAAA,QACV,6BAAAC,QAAA,2BAAAA,QAAA,gBACG,QAAQ,IACP,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,YAAW,YAAW,OAAM,eAAc,SAAS,eAAa,GAEtE,IACE,MACH,eAAe,OAAO,IACrB,6BAAAC,QAAA;AAAA,UAAC,gBAAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,QAAQ;AAAA,YACjB,OAAO,QAAQ;AAAA,YACf,UAAU,CAAC,QAAQ,OAAO,SAAS,CAAC,GAAG,QAAQ,IAAI,KAAK,CAAC;AAAA,YACzD,QAAQ;AAAA,cACN,SAAS,CAAC,UAAU,WAAW;AAAA,gBAC7B,GAAG,cAAc,UAAmB,KAAK,EAAE,UAAU,KAAK;AAAA,gBAC1D,QAAQ;AAAA,cACV;AAAA,cACA,aAAa,CAAC,cAAc;AAAA,gBAC1B,GAAG;AAAA,gBACH,QAAQ;AAAA,gBACR,KAAK;AAAA,gBACL,UAAU;AAAA,gBACV,UAAU;AAAA,gBACV,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,OAAO,MAAM,OAAO,QAAQ;AAAA,gBAC5B,UAAU;AAAA,kBACR,OAAO,MAAM,OAAO,QAAQ;AAAA,kBAC5B,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF,IAEA,6BAAAD,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,UACV,CAAC,SAAS,GAAG,EAAE,SAAS,MAAM,GAAG,KAAK,SAAS,CAAC,GAAG,QAAQ,QAAQ,KAAK,CAAC;AAAA,YAE3E,SAAS,MAAM,SAAS,CAAC,GAAG,QAAQ,QAAQ,KAAK,CAAC;AAAA;AAAA,UAEjD,QAAQ;AAAA,QACX,CAEJ;AAAA,MACF;AAEA,kBAAY,KAAK,eAAe,OAAO,IAAI,QAAQ,MAAM,QAAQ,QAAQ,KAAK;AAC9E,aAAO,CAAC,aAAa,WAAW;AAAA,IAClC;AAAA,IACA,CAAC,CAAC,GAAG,CAAC,CAAC;AAAA,EACT;AAEA,SACE,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,WAAW,GAAG,YAAW,YAC5B,QACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { memo } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Dropdown from \"../../form/Dropdown\";\nimport * as ControlModule from \"../../form/SelectInput/Control\";\n\nexport type Props = { segments: Segment[]; onChange: (values: string[]) => void }; //React.PropsWithChildren<unknown>;\nexport type Element = {\n  label: string;\n  value: string;\n};\nexport type Elements = {\n  value: Element;\n  options: Element[];\n};\nexport type Segment = Element | Elements;\n\nconst Link = styled(Text).attrs({\n  ff: \"Inter|SemiBold\",\n  fontSize: 3,\n  color: \"neutral.c80\",\n  tabIndex: 0,\n})`\n  cursor: pointer;\n  :hover,\n  :active,\n  :focus {\n    color: ${p => p.theme.colors.neutral.c100};\n    text-decoration: underline;\n  }\n`;\n\nfunction isMultiSegment(segment: Segment): segment is Elements {\n  return (segment as Elements).options !== undefined;\n}\n\nexport default memo(function Breadcrumb({ segments, onChange }: Props): JSX.Element {\n  const theme = useTheme();\n  const [contents] = segments.reduce<[React.ReactNode[], string[]]>(\n    ([renderArray, valuesArray], segment, index) => {\n      const values = [...valuesArray];\n\n      renderArray.push(\n        <>\n          {index > 0 ? (\n            <Text fontWeight=\"semiBold\" color=\"neutral.c40\" variant={\"paragraph\"}>\n              /\n            </Text>\n          ) : null}\n          {isMultiSegment(segment) ? (\n            <Dropdown\n              label=\"\"\n              options={segment.options}\n              value={segment.value}\n              onChange={elt => elt && onChange([...values, elt.value])}\n              styles={{\n                control: (provided, state) => ({\n                  ...ControlModule.getStyles<Element>(theme)(provided, state),\n                  cursor: \"pointer\",\n                }),\n                singleValue: provided => ({\n                  ...provided,\n                  margin: 0,\n                  top: undefined,\n                  position: undefined,\n                  overflow: undefined,\n                  maxWidth: undefined,\n                  transform: undefined,\n                  color: theme.colors.neutral.c80,\n                  \":hover\": {\n                    color: theme.colors.neutral.c100,\n                    textDecoration: \"underline\",\n                  },\n                }),\n              }}\n            />\n          ) : (\n            <Link\n              onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) =>\n                [\"Enter\", \" \"].includes(event.key) && onChange([...values, segment.value])\n              }\n              onClick={() => onChange([...values, segment.value])}\n            >\n              {segment.label}\n            </Link>\n          )}\n        </>,\n      );\n\n      valuesArray.push(isMultiSegment(segment) ? segment.value.value : segment.value);\n      return [renderArray, valuesArray];\n    },\n    [[], []],\n  );\n\n  return (\n    <Flex columnGap={5} alignItems=\"center\">\n      {contents}\n    </Flex>\n  );\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAC5B,+BAAiC;AACjC,kBAAiB;AACjB,kBAAiB;AACjB,sBAAqB;AACrB,oBAA+B;AAa/B,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKY,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKzC,SAAS,eAAe,SAAuC;AAC7D,SAAQ,QAAqB,YAAY;AAC3C;AAEA,IAAO,yBAAQ,mBAAK,SAAS,WAAW,EAAE,UAAU,SAAS,GAAuB;AAClF,QAAM,YAAQ,mCAAS;AACvB,QAAM,CAAC,QAAQ,IAAI,SAAS;AAAA,IAC1B,CAAC,CAAC,aAAa,WAAW,GAAG,SAAS,UAAU;AAC9C,YAAM,SAAS,CAAC,GAAG,WAAW;AAE9B,kBAAY;AAAA,QACV,6BAAAC,QAAA,2BAAAA,QAAA,gBACG,QAAQ,IACP,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,YAAW,YAAW,OAAM,eAAc,SAAS,eAAa,GAEtE,IACE,MACH,eAAe,OAAO,IACrB,6BAAAC,QAAA;AAAA,UAAC,gBAAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,QAAQ;AAAA,YACjB,OAAO,QAAQ;AAAA,YACf,UAAU,SAAO,OAAO,SAAS,CAAC,GAAG,QAAQ,IAAI,KAAK,CAAC;AAAA,YACvD,QAAQ;AAAA,cACN,SAAS,CAAC,UAAU,WAAW;AAAA,gBAC7B,GAAG,cAAc,UAAmB,KAAK,EAAE,UAAU,KAAK;AAAA,gBAC1D,QAAQ;AAAA,cACV;AAAA,cACA,aAAa,eAAa;AAAA,gBACxB,GAAG;AAAA,gBACH,QAAQ;AAAA,gBACR,KAAK;AAAA,gBACL,UAAU;AAAA,gBACV,UAAU;AAAA,gBACV,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,OAAO,MAAM,OAAO,QAAQ;AAAA,gBAC5B,UAAU;AAAA,kBACR,OAAO,MAAM,OAAO,QAAQ;AAAA,kBAC5B,gBAAgB;AAAA,gBAClB;AAAA,cACF;AAAA,YACF;AAAA;AAAA,QACF,IAEA,6BAAAD,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,UACV,CAAC,SAAS,GAAG,EAAE,SAAS,MAAM,GAAG,KAAK,SAAS,CAAC,GAAG,QAAQ,QAAQ,KAAK,CAAC;AAAA,YAE3E,SAAS,MAAM,SAAS,CAAC,GAAG,QAAQ,QAAQ,KAAK,CAAC;AAAA;AAAA,UAEjD,QAAQ;AAAA,QACX,CAEJ;AAAA,MACF;AAEA,kBAAY,KAAK,eAAe,OAAO,IAAI,QAAQ,MAAM,QAAQ,QAAQ,KAAK;AAC9E,aAAO,CAAC,aAAa,WAAW;AAAA,IAClC;AAAA,IACA,CAAC,CAAC,GAAG,CAAC,CAAC;AAAA,EACT;AAEA,SACE,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,WAAW,GAAG,YAAW,YAC5B,QACH;AAEJ,CAAC;",
   "names": ["styled", "Text", "React", "Dropdown", "Flex"]
 }

package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
-  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, Icons, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n  activeIndex={1}\n  renderStepFooter={ // Optional\n    ({activeIndex, stepsLength, children}) => (\n      <YourFooterWrapper>\n        {children}\n      </YourFooterWrapper>\n    )\n  }\n>\n  <YourStepA label=\"StepA\" />\n  <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n  <YourStepC label=\"StepC\" />\n  <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n  <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n  <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n  <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n  <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n  activeIndex={activeIndex}\n  header={() => (\n    <Text variant=\"h1\">\n      Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n    </Text>\n  )}\n  footer={() => (\n    <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n      <Box alignSelf=\"stretch\">\n        <Divider variant=\"light\" />\n      </Box>\n      <Flex columnGap={6}>\n        <Button\n          variant=\"main\"\n          outline\n          disabled={activeIndex <= 0}\n          onClick={() => setActiveIndex(i => i - 1)}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"main\"\n          disabled={activeIndex >= NB_OF_STEPS - 1}\n          onClick={() => setActiveIndex(i => i + 1)}\n        >\n          Continue\n        </Button>\n      </Flex>\n    </Flex>\n  )}\n>\n  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n    <FlowStepper.Step label={\"Step \" + index}>\n      <Text key={index} variant=\"body\">\n        {lipsum}\n      </Text>\n    </FlowStepper.Step>\n  ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n  title: \"Navigation/FlowStepper\",\n  component: FlowStepper,\n  argTypes: {\n    activeIndex: { control: \"number\", defaultValue: 0 },\n    extraProps: { control: \"disabled\" },\n    extraContainerProps: { control: \"disabled\" },\n    extraStepperProps: { control: \"disabled\" },\n    extraStepperContainerProps: { control: \"disabled\" },\n    children: { control: \"disabled\" },\n    renderChildren: { control: \"disabled\" },\n    header: { control: \"disabled\" },\n    stepHeaders: { control: \"disabled\" },\n    renderStepHeader: { control: \"disabled\" },\n    footer: { control: \"disabled\" },\n    stepFooters: { control: \"disabled\" },\n    renderStepFooter: { control: \"disabled\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const { activeIndex, ...rest } = args;\n  const [, updateArgs] = useArgs();\n\n  return (\n    <FlowStepper\n      activeIndex={activeIndex}\n      header={() => (\n        <Text variant=\"h1\">\n          Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n        </Text>\n      )}\n      footer={() => (\n        <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n          <Box alignSelf=\"stretch\">\n            <Divider />\n          </Box>\n          <Flex columnGap={6}>\n            <Button\n              variant=\"main\"\n              outline\n              disabled={activeIndex <= 0}\n              onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"main\"\n              disabled={activeIndex >= NB_OF_STEPS - 1}\n              onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n            >\n              Continue\n            </Button>\n          </Flex>\n        </Flex>\n      )}\n      {...rest}\n    >\n      {[\n        ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n          <FlowStepper.Step label={\"Step \" + index}>\n            <Text key={index} variant=\"body\">\n              {lipsum}\n            </Text>\n            <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n              Navigate to the hidden step.\n            </Button>\n          </FlowStepper.Step>\n        )),\n        <FlowStepper.Step label=\"Hidden Step\" hidden>\n          <Text key=\"hidden\" variant=\"body\">\n            I am hidden.\n          </Text>\n        </FlowStepper.Step>,\n      ]}\n    </FlowStepper>\n  );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n  return (\n    <Box position=\"relative\" my={6}>\n      {onBack && (\n        <Box position=\"absolute\">\n          <Link onClick={onBack} Icon={Icons.ArrowLeftMedium} iconPosition=\"left\">\n            Back\n          </Link>\n        </Box>\n      )}\n      <Flex justifyContent=\"center\">\n        <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n      </Flex>\n    </Box>\n  );\n};\n\nconst Footer = ({\n  onContinue,\n  children,\n}: {\n  onContinue?: () => void;\n  children?: React.ReactNode;\n}) => (\n  <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n    <Box alignSelf=\"stretch\">\n      <Divider />\n    </Box>\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      {children || <Flex />}\n      {onContinue && (\n        <Button variant=\"main\" onClick={onContinue}>\n          Continue\n        </Button>\n      )}\n    </Flex>\n  </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n  transition: opacity 500ms;\n  width: 100%;\n  height: 100%;\n  &.step-enter {\n    opacity: 0;\n  }\n  &.step-enter-active {\n    opacity: 1;\n  }\n  &.step-exit {\n    opacity: 1;\n  }\n  &.step-exit-active {\n    opacity: 0;\n  }\n`;\nconst Item = ({ label }: { label: string }) => (\n  <AnimatedItem>\n    <Flex\n      position=\"absolute\"\n      left=\"0\"\n      right=\"0\"\n      top=\"0\"\n      bottom=\"0\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      <Text variant=\"h2\" textTransform=\"capitalize\">\n        {label}\n      </Text>\n    </Flex>\n  </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n  <Flex flexDirection=\"row\" alignItems=\"center\">\n    <Text whiteSpace=\"pre\">Footer for step </Text>\n    <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n      {label}\n    </Tag>\n  </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [, updateArgs] = useArgs();\n\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex - 1 });\n                  }\n                : undefined\n            }\n          />\n        )}\n        renderStepFooter={({ stepsLength, activeIndex, children }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex + 1 });\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </Footer>\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        renderChildren={({ children }) => (\n          <TransitionGroup component={null}>{children}</TransitionGroup>\n        )}\n        {...args}\n      >\n        {steps.map((label) => (\n          <CSSTransition\n            key={label}\n            label={label}\n            footer={<StepFooter label={label} />}\n            timeout={500}\n            classNames=\"step\"\n            mountOnEnter\n            unmountOnExit\n          >\n            <Item label={label} />\n          </CSSTransition>\n        ))}\n      </FlowStepper>\n    </Flex>\n  );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n  const { label, setActiveStep } = props;\n  const content = useMemo(() => {\n    return steps.map((step) => {\n      return (\n        <Button\n          key={step}\n          disabled={step === label}\n          variant=\"main\"\n          onClick={() => setActiveStep(step)}\n        >\n          Go to \"{step}\"\n        </Button>\n      );\n    });\n  }, [setActiveStep, label]);\n  return (\n    <Flex\n      flex={1}\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      padding={4}\n      rowGap={4}\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      {content}\n    </Flex>\n  );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [activeStep, setActiveStep] = useState(steps[0]);\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper.Indexed\n        activeKey={activeStep}\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    setActiveStep(steps[activeIndex - 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        footer={({ stepsLength, activeIndex }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    setActiveStep(steps[activeIndex + 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        {...args}\n      >\n        {steps.map((label) => (\n          <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n            <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n          </FlowStepper.Indexed.Step>\n        ))}\n      </FlowStepper.Indexed>\n    </Flex>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, Icons, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n  activeIndex={1}\n  renderStepFooter={ // Optional\n    ({activeIndex, stepsLength, children}) => (\n      <YourFooterWrapper>\n        {children}\n      </YourFooterWrapper>\n    )\n  }\n>\n  <YourStepA label=\"StepA\" />\n  <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n  <YourStepC label=\"StepC\" />\n  <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n  <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n  <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n  <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n  <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n  activeIndex={activeIndex}\n  header={() => (\n    <Text variant=\"h1\">\n      Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n    </Text>\n  )}\n  footer={() => (\n    <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n      <Box alignSelf=\"stretch\">\n        <Divider variant=\"light\" />\n      </Box>\n      <Flex columnGap={6}>\n        <Button\n          variant=\"main\"\n          outline\n          disabled={activeIndex <= 0}\n          onClick={() => setActiveIndex(i => i - 1)}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"main\"\n          disabled={activeIndex >= NB_OF_STEPS - 1}\n          onClick={() => setActiveIndex(i => i + 1)}\n        >\n          Continue\n        </Button>\n      </Flex>\n    </Flex>\n  )}\n>\n  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n    <FlowStepper.Step label={\"Step \" + index}>\n      <Text key={index} variant=\"body\">\n        {lipsum}\n      </Text>\n    </FlowStepper.Step>\n  ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n  title: \"Navigation/FlowStepper\",\n  component: FlowStepper,\n  argTypes: {\n    activeIndex: { control: \"number\", defaultValue: 0 },\n    extraProps: { control: \"disabled\" },\n    extraContainerProps: { control: \"disabled\" },\n    extraStepperProps: { control: \"disabled\" },\n    extraStepperContainerProps: { control: \"disabled\" },\n    children: { control: \"disabled\" },\n    renderChildren: { control: \"disabled\" },\n    header: { control: \"disabled\" },\n    stepHeaders: { control: \"disabled\" },\n    renderStepHeader: { control: \"disabled\" },\n    footer: { control: \"disabled\" },\n    stepFooters: { control: \"disabled\" },\n    renderStepFooter: { control: \"disabled\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = args => {\n  const { activeIndex, ...rest } = args;\n  const [, updateArgs] = useArgs();\n\n  return (\n    <FlowStepper\n      activeIndex={activeIndex}\n      header={() => (\n        <Text variant=\"h1\">\n          Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n        </Text>\n      )}\n      footer={() => (\n        <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n          <Box alignSelf=\"stretch\">\n            <Divider />\n          </Box>\n          <Flex columnGap={6}>\n            <Button\n              variant=\"main\"\n              outline\n              disabled={activeIndex <= 0}\n              onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"main\"\n              disabled={activeIndex >= NB_OF_STEPS - 1}\n              onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n            >\n              Continue\n            </Button>\n          </Flex>\n        </Flex>\n      )}\n      {...rest}\n    >\n      {[\n        ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n          <FlowStepper.Step label={\"Step \" + index}>\n            <Text key={index} variant=\"body\">\n              {lipsum}\n            </Text>\n            <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n              Navigate to the hidden step.\n            </Button>\n          </FlowStepper.Step>\n        )),\n        <FlowStepper.Step label=\"Hidden Step\" hidden>\n          <Text key=\"hidden\" variant=\"body\">\n            I am hidden.\n          </Text>\n        </FlowStepper.Step>,\n      ]}\n    </FlowStepper>\n  );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n  return (\n    <Box position=\"relative\" my={6}>\n      {onBack && (\n        <Box position=\"absolute\">\n          <Link onClick={onBack} Icon={Icons.ArrowLeftMedium} iconPosition=\"left\">\n            Back\n          </Link>\n        </Box>\n      )}\n      <Flex justifyContent=\"center\">\n        <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n      </Flex>\n    </Box>\n  );\n};\n\nconst Footer = ({\n  onContinue,\n  children,\n}: {\n  onContinue?: () => void;\n  children?: React.ReactNode;\n}) => (\n  <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n    <Box alignSelf=\"stretch\">\n      <Divider />\n    </Box>\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      {children || <Flex />}\n      {onContinue && (\n        <Button variant=\"main\" onClick={onContinue}>\n          Continue\n        </Button>\n      )}\n    </Flex>\n  </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n  transition: opacity 500ms;\n  width: 100%;\n  height: 100%;\n  &.step-enter {\n    opacity: 0;\n  }\n  &.step-enter-active {\n    opacity: 1;\n  }\n  &.step-exit {\n    opacity: 1;\n  }\n  &.step-exit-active {\n    opacity: 0;\n  }\n`;\nconst Item = ({ label }: { label: string }) => (\n  <AnimatedItem>\n    <Flex\n      position=\"absolute\"\n      left=\"0\"\n      right=\"0\"\n      top=\"0\"\n      bottom=\"0\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      <Text variant=\"h2\" textTransform=\"capitalize\">\n        {label}\n      </Text>\n    </Flex>\n  </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n  <Flex flexDirection=\"row\" alignItems=\"center\">\n    <Text whiteSpace=\"pre\">Footer for step </Text>\n    <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n      {label}\n    </Tag>\n  </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = args => {\n  const [, updateArgs] = useArgs();\n\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex - 1 });\n                  }\n                : undefined\n            }\n          />\n        )}\n        renderStepFooter={({ stepsLength, activeIndex, children }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex + 1 });\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </Footer>\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        renderChildren={({ children }) => (\n          <TransitionGroup component={null}>{children}</TransitionGroup>\n        )}\n        {...args}\n      >\n        {steps.map(label => (\n          <CSSTransition\n            key={label}\n            label={label}\n            footer={<StepFooter label={label} />}\n            timeout={500}\n            classNames=\"step\"\n            mountOnEnter\n            unmountOnExit\n          >\n            <Item label={label} />\n          </CSSTransition>\n        ))}\n      </FlowStepper>\n    </Flex>\n  );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n  const { label, setActiveStep } = props;\n  const content = useMemo(() => {\n    return steps.map(step => {\n      return (\n        <Button\n          key={step}\n          disabled={step === label}\n          variant=\"main\"\n          onClick={() => setActiveStep(step)}\n        >\n          Go to \"{step}\"\n        </Button>\n      );\n    });\n  }, [setActiveStep, label]);\n  return (\n    <Flex\n      flex={1}\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      padding={4}\n      rowGap={4}\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      {content}\n    </Flex>\n  );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = args => {\n  const [activeStep, setActiveStep] = useState(steps[0]);\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper.Indexed\n        activeKey={activeStep}\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    setActiveStep(steps[activeIndex - 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        footer={({ stepsLength, activeIndex }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    setActiveStep(steps[activeIndex + 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        {...args}\n      >\n        {steps.map(label => (\n          <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n            <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n          </FlowStepper.Indexed.Step>\n        ))}\n      </FlowStepper.Indexed>\n    </Flex>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["import_react", "React", "styled"]
 }

package/lib/cjs/components/navigation/FlowStepper/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/FlowStepper/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { isElement } from \"react-is\";\nimport { Props as StepperProps } from \"../progress/Stepper\";\nimport Flex, { FlexBoxProps as FlexProps } from \"../../layout/Flex\";\nimport { Stepper } from \"..\";\n\nexport type StepProps = {\n  /**\n   * A specific index, can be used to explicitely order steps.\n   */\n  index?: number;\n  /**\n   * Custom header for this step.\n   */\n  header?: React.ReactNode;\n  /**\n   * Custom footer for this step.\n   */\n  footer?: React.ReactNode;\n  /**\n   * The label of the step.\n   */\n  label: string;\n  /**\n   * Hides the step from the progress stepper.\n   */\n  hidden?: boolean;\n  /**\n   * The step contents.\n   */\n  children: React.ReactNode;\n};\n\ninterface InnerProps {\n  /**\n   * The active index.\n   */\n  activeIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsLength: number;\n}\n\ntype StepChild = React.ReactElement<StepProps>;\ntype SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;\ntype SectionStepRenderFunc<ExtraProps> = (\n  args: InnerProps & ExtraProps & { children: React.ReactNode },\n) => React.ReactNode;\n\nexport interface Props<ExtraProps> {\n  /**\n   * The index of the active step.\n   */\n  activeIndex: number;\n  /**\n   * An optional generic header displayed above the stepper.\n   */\n  header?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the header (only used if the `header` is defined\n   * on the child for the current step.)\n   */\n  renderStepHeader?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * An optional generic footer displayed below the body.\n   */\n  footer?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the footer (only used if the `footer` is defined\n   * on the child for the current step.)\n   */\n  renderStepFooter?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * Extra props that are passed to the header and footer render functions.\n   */\n  extraProps?: ExtraProps;\n  /**\n   * Extra props that are passed to the container `Flex` element.\n   */\n  extraContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the stepper component.\n   */\n  extraStepperProps?: Partial<StepperProps>;\n  /**\n   * Extra props that are passed to the stepper `Flex` wrapper.\n   */\n  extraStepperContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the children `Flex` wrapper.\n   */\n  extraChildrenContainerProps?: FlexProps;\n  /**\n   * Custom rendering function to wrap children.\n   */\n  renderChildren?: (\n    args: InnerProps & ExtraProps & { children: React.ReactNode },\n  ) => React.ReactNode;\n  /**\n   * A list of children representing each step of the flow.\n   * Each child can have a prop `stepHeader` and/or `stepFooter` that will\n   * associate a custom header/footer to this particular step.\n   * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.\n   */\n  children: StepChild | StepChild[];\n}\n\nfunction FlowStepper<ExtraProps>({\n  activeIndex,\n  header,\n  renderStepHeader,\n  footer,\n  renderStepFooter,\n  extraProps,\n  extraContainerProps,\n  extraStepperProps,\n  extraStepperContainerProps,\n  extraChildrenContainerProps,\n  renderChildren,\n  children,\n}: Props<ExtraProps>) {\n  const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce<{\n    steps: string[];\n    innerContents: React.ReactNode | null;\n    stepHeader: React.ReactNode | null;\n    stepFooter: React.ReactNode | null;\n  }>(\n    (acc, child, idx) => {\n      const index = (isElement(child) && child.props.index) ?? idx;\n      const label = isElement(child) && child.props.label;\n      const hidden = isElement(child) && child.props.hidden;\n      const stepHeader = isElement(child) && child.props.header;\n      const stepFooter = isElement(child) && child.props.footer;\n\n      if (label && !hidden) {\n        acc.steps[index] = label;\n      }\n      if (index === activeIndex) {\n        acc.innerContents = child;\n        acc.stepFooter = stepFooter;\n        acc.stepHeader = stepHeader;\n      }\n      return acc;\n    },\n    {\n      steps: [],\n      innerContents: null,\n      stepHeader: null,\n      stepFooter: null,\n    },\n  );\n\n  const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length } as InnerProps &\n    ExtraProps;\n\n  function getSectionContents(\n    renderFunc?: SectionRenderFunc<ExtraProps>,\n    stepSection?: React.ReactNode,\n    renderStepFunc?: SectionStepRenderFunc<ExtraProps>,\n  ) {\n    return stepSection\n      ? renderStepFunc\n        ? renderStepFunc({ ...renderArgs, children: stepSection })\n        : stepSection\n      : renderFunc && renderFunc(renderArgs);\n  }\n\n  return (\n    <Flex flex={1} flexDirection=\"column\" {...extraContainerProps}>\n      {getSectionContents(header, stepHeader, renderStepHeader)}\n      <Flex my={8} justifyContent=\"center\" {...extraStepperContainerProps}>\n        <Stepper activeIndex={activeIndex} steps={steps} flex={1} {...extraStepperProps} />\n      </Flex>\n      <Flex flex={1} flexDirection=\"column\" position=\"relative\" {...extraChildrenContainerProps}>\n        {renderChildren\n          ? renderChildren({ ...renderArgs, children: innerContents })\n          : innerContents}\n      </Flex>\n      {getSectionContents(footer, stepFooter, renderStepFooter)}\n    </Flex>\n  );\n}\n\nfunction Step({ children }: StepProps) {\n  return <>{children}</>;\n}\n\nFlowStepper.Step = Step;\nexport default FlowStepper;\n\nexport type IndexedStepProps = StepProps & {\n  /**\n   * String to identify the step. Must be different from sibling steps's `key` prop.\n   */\n  itemKey: string;\n};\n\ntype IndexedStepperChild = React.ReactElement<IndexedStepProps>;\n\nexport type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, \"activeIndex\" | \"children\"> & {\n  /**\n   * The key of the active step\n   */\n  activeKey: string;\n\n  /**\n   * A list of children representing each step of the flow.\n   */\n  children: IndexedStepperChild | IndexedStepperChild[];\n};\n\n/**\n * This is a FlowStepper where each child must have an `itemKey: string` prop\n * and the active step is defined by the `activeKey: string` prop.\n *\n * This allows for usages with a lot of steps where dealing with indices could be\n * painful and error prone (for instance inserting/removing a step somewhere would shift\n * the indices of the following steps and navigation would be impacted).\n *\n * By using string identifiers (`itemKey`) for each step, it's more \"human readable\"\n * and less error prone to setup a navigation logic between steps.\n */\nfunction FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>) {\n  const { activeKey, children, ...otherProps } = props;\n  const activeIndex = React.Children.toArray(children).findIndex((child) => {\n    const res = isElement(child) && child.props.itemKey === activeKey;\n    return res;\n  });\n  return (\n    <FlowStepper {...otherProps} activeIndex={activeIndex}>\n      {children}\n    </FlowStepper>\n  );\n}\n\nfunction IndexedStep({ children }: IndexedStepProps) {\n  return <>{children}</>;\n}\n\nFlowStepperIndexed.Step = IndexedStep;\nFlowStepper.Indexed = FlowStepperIndexed;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;AAwGxB,SAAS,YAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,EAAE,OAAO,eAAe,YAAY,WAAW,IAAI,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAMxF,CAAC,KAAK,OAAO,QAAQ;AACnB,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM,UAAU;AACzD,YAAM,YAAQ,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC9C,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC/C,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AACnD,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AAEnD,UAAI,SAAS,CAAC,QAAQ;AACpB,YAAI,MAAM,KAAK,IAAI;AAAA,MACrB;AACA,UAAI,UAAU,aAAa;AACzB,YAAI,gBAAgB;AACpB,YAAI,aAAaA;AACjB,YAAI,aAAaD;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO,CAAC;AAAA,MACR,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,aAAa,EAAE,GAAG,YAAY,aAAa,aAAa,MAAM,OAAO;AAG3E,WAAS,mBACP,YACA,aACA,gBACA;AACA,WAAO,cACH,iBACE,eAAe,EAAE,GAAG,YAAY,UAAU,YAAY,CAAC,IACvD,cACF,cAAc,WAAW,UAAU;AAAA,EACzC;AAEA,SACE,6BAAAD,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAU,GAAG,uBACvC,mBAAmB,QAAQ,YAAY,gBAAgB,GACxD,6BAAAH,QAAA,cAAC,YAAAG,SAAA,EAAK,IAAI,GAAG,gBAAe,UAAU,GAAG,8BACvC,6BAAAH,QAAA,cAAC,oBAAQ,aAA0B,OAAc,MAAM,GAAI,GAAG,mBAAmB,CACnF,GACA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAS,UAAS,YAAY,GAAG,+BAC3D,iBACG,eAAe,EAAE,GAAG,YAAY,UAAU,cAAc,CAAC,IACzD,aACN,GACC,mBAAmB,QAAQ,YAAY,gBAAgB,CAC1D;AAEJ;AAEA,SAAS,KAAK,EAAE,SAAS,GAAc;AACrC,SAAO,6BAAAH,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,YAAY,OAAO;AACnB,IAAO,sBAAQ;AAkCf,SAAS,mBAA+B,OAAiC;AACvE,QAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,QAAM,cAAc,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,UAAU,CAAC,UAAU;AACxE,UAAM,UAAM,2BAAU,KAAK,KAAK,MAAM,MAAM,YAAY;AACxD,WAAO;AAAA,EACT,CAAC;AACD,SACE,6BAAAA,QAAA,cAAC,eAAa,GAAG,YAAY,eAC1B,QACH;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAS,GAAqB;AACnD,SAAO,6BAAAA,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,mBAAmB,OAAO;AAC1B,YAAY,UAAU;",
+  "sourcesContent": ["import React from \"react\";\nimport { isElement } from \"react-is\";\nimport { Props as StepperProps } from \"../progress/Stepper\";\nimport Flex, { FlexBoxProps as FlexProps } from \"../../layout/Flex\";\nimport { Stepper } from \"..\";\n\nexport type StepProps = {\n  /**\n   * A specific index, can be used to explicitely order steps.\n   */\n  index?: number;\n  /**\n   * Custom header for this step.\n   */\n  header?: React.ReactNode;\n  /**\n   * Custom footer for this step.\n   */\n  footer?: React.ReactNode;\n  /**\n   * The label of the step.\n   */\n  label: string;\n  /**\n   * Hides the step from the progress stepper.\n   */\n  hidden?: boolean;\n  /**\n   * The step contents.\n   */\n  children: React.ReactNode;\n};\n\ninterface InnerProps {\n  /**\n   * The active index.\n   */\n  activeIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsLength: number;\n}\n\ntype StepChild = React.ReactElement<StepProps>;\ntype SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;\ntype SectionStepRenderFunc<ExtraProps> = (\n  args: InnerProps & ExtraProps & { children: React.ReactNode },\n) => React.ReactNode;\n\nexport interface Props<ExtraProps> {\n  /**\n   * The index of the active step.\n   */\n  activeIndex: number;\n  /**\n   * An optional generic header displayed above the stepper.\n   */\n  header?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the header (only used if the `header` is defined\n   * on the child for the current step.)\n   */\n  renderStepHeader?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * An optional generic footer displayed below the body.\n   */\n  footer?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the footer (only used if the `footer` is defined\n   * on the child for the current step.)\n   */\n  renderStepFooter?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * Extra props that are passed to the header and footer render functions.\n   */\n  extraProps?: ExtraProps;\n  /**\n   * Extra props that are passed to the container `Flex` element.\n   */\n  extraContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the stepper component.\n   */\n  extraStepperProps?: Partial<StepperProps>;\n  /**\n   * Extra props that are passed to the stepper `Flex` wrapper.\n   */\n  extraStepperContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the children `Flex` wrapper.\n   */\n  extraChildrenContainerProps?: FlexProps;\n  /**\n   * Custom rendering function to wrap children.\n   */\n  renderChildren?: (\n    args: InnerProps & ExtraProps & { children: React.ReactNode },\n  ) => React.ReactNode;\n  /**\n   * A list of children representing each step of the flow.\n   * Each child can have a prop `stepHeader` and/or `stepFooter` that will\n   * associate a custom header/footer to this particular step.\n   * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.\n   */\n  children: StepChild | StepChild[];\n}\n\nfunction FlowStepper<ExtraProps>({\n  activeIndex,\n  header,\n  renderStepHeader,\n  footer,\n  renderStepFooter,\n  extraProps,\n  extraContainerProps,\n  extraStepperProps,\n  extraStepperContainerProps,\n  extraChildrenContainerProps,\n  renderChildren,\n  children,\n}: Props<ExtraProps>) {\n  const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce<{\n    steps: string[];\n    innerContents: React.ReactNode | null;\n    stepHeader: React.ReactNode | null;\n    stepFooter: React.ReactNode | null;\n  }>(\n    (acc, child, idx) => {\n      const index = (isElement(child) && child.props.index) ?? idx;\n      const label = isElement(child) && child.props.label;\n      const hidden = isElement(child) && child.props.hidden;\n      const stepHeader = isElement(child) && child.props.header;\n      const stepFooter = isElement(child) && child.props.footer;\n\n      if (label && !hidden) {\n        acc.steps[index] = label;\n      }\n      if (index === activeIndex) {\n        acc.innerContents = child;\n        acc.stepFooter = stepFooter;\n        acc.stepHeader = stepHeader;\n      }\n      return acc;\n    },\n    {\n      steps: [],\n      innerContents: null,\n      stepHeader: null,\n      stepFooter: null,\n    },\n  );\n\n  const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length } as InnerProps &\n    ExtraProps;\n\n  function getSectionContents(\n    renderFunc?: SectionRenderFunc<ExtraProps>,\n    stepSection?: React.ReactNode,\n    renderStepFunc?: SectionStepRenderFunc<ExtraProps>,\n  ) {\n    return stepSection\n      ? renderStepFunc\n        ? renderStepFunc({ ...renderArgs, children: stepSection })\n        : stepSection\n      : renderFunc && renderFunc(renderArgs);\n  }\n\n  return (\n    <Flex flex={1} flexDirection=\"column\" {...extraContainerProps}>\n      {getSectionContents(header, stepHeader, renderStepHeader)}\n      <Flex my={8} justifyContent=\"center\" {...extraStepperContainerProps}>\n        <Stepper activeIndex={activeIndex} steps={steps} flex={1} {...extraStepperProps} />\n      </Flex>\n      <Flex flex={1} flexDirection=\"column\" position=\"relative\" {...extraChildrenContainerProps}>\n        {renderChildren\n          ? renderChildren({ ...renderArgs, children: innerContents })\n          : innerContents}\n      </Flex>\n      {getSectionContents(footer, stepFooter, renderStepFooter)}\n    </Flex>\n  );\n}\n\nfunction Step({ children }: StepProps) {\n  return <>{children}</>;\n}\n\nFlowStepper.Step = Step;\nexport default FlowStepper;\n\nexport type IndexedStepProps = StepProps & {\n  /**\n   * String to identify the step. Must be different from sibling steps's `key` prop.\n   */\n  itemKey: string;\n};\n\ntype IndexedStepperChild = React.ReactElement<IndexedStepProps>;\n\nexport type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, \"activeIndex\" | \"children\"> & {\n  /**\n   * The key of the active step\n   */\n  activeKey: string;\n\n  /**\n   * A list of children representing each step of the flow.\n   */\n  children: IndexedStepperChild | IndexedStepperChild[];\n};\n\n/**\n * This is a FlowStepper where each child must have an `itemKey: string` prop\n * and the active step is defined by the `activeKey: string` prop.\n *\n * This allows for usages with a lot of steps where dealing with indices could be\n * painful and error prone (for instance inserting/removing a step somewhere would shift\n * the indices of the following steps and navigation would be impacted).\n *\n * By using string identifiers (`itemKey`) for each step, it's more \"human readable\"\n * and less error prone to setup a navigation logic between steps.\n */\nfunction FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>) {\n  const { activeKey, children, ...otherProps } = props;\n  const activeIndex = React.Children.toArray(children).findIndex(child => {\n    const res = isElement(child) && child.props.itemKey === activeKey;\n    return res;\n  });\n  return (\n    <FlowStepper {...otherProps} activeIndex={activeIndex}>\n      {children}\n    </FlowStepper>\n  );\n}\n\nfunction IndexedStep({ children }: IndexedStepProps) {\n  return <>{children}</>;\n}\n\nFlowStepperIndexed.Step = IndexedStep;\nFlowStepper.Indexed = FlowStepperIndexed;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;AAwGxB,SAAS,YAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,EAAE,OAAO,eAAe,YAAY,WAAW,IAAI,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAMxF,CAAC,KAAK,OAAO,QAAQ;AACnB,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM,UAAU;AACzD,YAAM,YAAQ,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC9C,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC/C,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AACnD,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AAEnD,UAAI,SAAS,CAAC,QAAQ;AACpB,YAAI,MAAM,KAAK,IAAI;AAAA,MACrB;AACA,UAAI,UAAU,aAAa;AACzB,YAAI,gBAAgB;AACpB,YAAI,aAAaA;AACjB,YAAI,aAAaD;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO,CAAC;AAAA,MACR,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,aAAa,EAAE,GAAG,YAAY,aAAa,aAAa,MAAM,OAAO;AAG3E,WAAS,mBACP,YACA,aACA,gBACA;AACA,WAAO,cACH,iBACE,eAAe,EAAE,GAAG,YAAY,UAAU,YAAY,CAAC,IACvD,cACF,cAAc,WAAW,UAAU;AAAA,EACzC;AAEA,SACE,6BAAAD,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAU,GAAG,uBACvC,mBAAmB,QAAQ,YAAY,gBAAgB,GACxD,6BAAAH,QAAA,cAAC,YAAAG,SAAA,EAAK,IAAI,GAAG,gBAAe,UAAU,GAAG,8BACvC,6BAAAH,QAAA,cAAC,oBAAQ,aAA0B,OAAc,MAAM,GAAI,GAAG,mBAAmB,CACnF,GACA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAS,UAAS,YAAY,GAAG,+BAC3D,iBACG,eAAe,EAAE,GAAG,YAAY,UAAU,cAAc,CAAC,IACzD,aACN,GACC,mBAAmB,QAAQ,YAAY,gBAAgB,CAC1D;AAEJ;AAEA,SAAS,KAAK,EAAE,SAAS,GAAc;AACrC,SAAO,6BAAAH,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,YAAY,OAAO;AACnB,IAAO,sBAAQ;AAkCf,SAAS,mBAA+B,OAAiC;AACvE,QAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,QAAM,cAAc,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,UAAU,WAAS;AACtE,UAAM,UAAM,2BAAU,KAAK,KAAK,MAAM,MAAM,YAAY;AACxD,WAAO;AAAA,EACT,CAAC;AACD,SACE,6BAAAA,QAAA,cAAC,eAAa,GAAG,YAAY,eAC1B,QACH;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAS,GAAqB;AACnD,SAAO,6BAAAA,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,mBAAmB,OAAO;AAC1B,YAAY,UAAU;",
   "names": ["React", "stepHeader", "stepFooter", "Flex"]
 }

package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/progress/ProgressBar/Onboarding.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 24px;\n  align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n  transition: all 600ms linear;\n  height: 4px;\n  border-radius: 2px;\n  /* Disable left/right border radius to match the handler */\n  border-top-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  border-bottom-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  flex: ${(p) => p.fill};\n  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n  transition: all 600ms linear;\n  padding: 4px;\n  background: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  column-gap: 6px;\n\n  & span.index {\n    display: flex;\n    border-radius: 2px;\n    height: 16px;\n    width: 16px;\n    justify-content: center;\n    align-items: center;\n    color: ${(p) => p.theme.colors.neutral.c100};\n    background: ${(p) => p.theme.colors.neutral.c00};\n  }\n`;\n\ninterface Step {\n  key: string;\n  label: string;\n}\n\nexport type OnboardingProps = {\n  steps: Step[];\n  currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n  const currentStep = steps[currentIndex];\n  const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n  return (\n    <Container>\n      <Bar on fill={fill} />\n      <Handler key={currentStep.key}>\n        <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n          {currentIndex + 1}\n        </Text>\n        <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n          {currentStep.label}\n        </Text>\n      </Handler>\n      <Bar fill={100 - Number(fill)} />\n    </Container>\n  );\n};\n\nexport default Onboarding;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,kBACtB,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,UACjC,CAAC,MAAM,EAAE;AAAA,gBACH,CAAC,MAAO,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGpF,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA,gBAGP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc/B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACzB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAchD,MAAM,aAAa,CAAC,EAAE,OAAO,aAAa,MAAoC;AAC5E,QAAM,cAAc,MAAM,YAAY;AACtC,QAAM,QAAS,gBAAgB,MAAM,SAAS,KAAM,KAAK,QAAQ,CAAC;AAElE,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA,cAAC,OAAI,IAAE,MAAC,MAAY,GACpB,6BAAAA,QAAA,cAAC,WAAQ,KAAK,YAAY,OACxB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAU,SAAQ,OAAM,eAAc,YAAW,UAAS,SAAS,WACtE,eAAe,CAClB,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,eAAc,YAAW,UAAS,eAAc,aAAY,SAAS,WAC9E,YAAY,KACf,CACF,GACA,6BAAAD,QAAA,cAAC,OAAI,MAAM,MAAM,OAAO,IAAI,GAAG,CACjC;AAEJ;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 24px;\n  align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n  transition: all 600ms linear;\n  height: 4px;\n  border-radius: 2px;\n  /* Disable left/right border radius to match the handler */\n  border-top-${p => (p.on ? \"right\" : \"left\")}-radius: 0;\n  border-bottom-${p => (p.on ? \"right\" : \"left\")}-radius: 0;\n  flex: ${p => p.fill};\n  background: ${p => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n  transition: all 600ms linear;\n  padding: 4px;\n  background: ${p => p.theme.colors.neutral.c100};\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  column-gap: 6px;\n\n  & span.index {\n    display: flex;\n    border-radius: 2px;\n    height: 16px;\n    width: 16px;\n    justify-content: center;\n    align-items: center;\n    color: ${p => p.theme.colors.neutral.c100};\n    background: ${p => p.theme.colors.neutral.c00};\n  }\n`;\n\ninterface Step {\n  key: string;\n  label: string;\n}\n\nexport type OnboardingProps = {\n  steps: Step[];\n  currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n  const currentStep = steps[currentIndex];\n  const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n  return (\n    <Container>\n      <Bar on fill={fill} />\n      <Handler key={currentStep.key}>\n        <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n          {currentIndex + 1}\n        </Text>\n        <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n          {currentStep.label}\n        </Text>\n      </Handler>\n      <Bar fill={100 - Number(fill)} />\n    </Container>\n  );\n};\n\nexport default Onboarding;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,OAAM,EAAE,KAAK,UAAU;AAAA,kBACpB,OAAM,EAAE,KAAK,UAAU;AAAA,UAC/B,OAAK,EAAE;AAAA,gBACD,OAAM,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGlF,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA,gBAGP,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,mBACzB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc7B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACvB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAc9C,MAAM,aAAa,CAAC,EAAE,OAAO,aAAa,MAAoC;AAC5E,QAAM,cAAc,MAAM,YAAY;AACtC,QAAM,QAAS,gBAAgB,MAAM,SAAS,KAAM,KAAK,QAAQ,CAAC;AAElE,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA,cAAC,OAAI,IAAE,MAAC,MAAY,GACpB,6BAAAA,QAAA,cAAC,WAAQ,KAAK,YAAY,OACxB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAU,SAAQ,OAAM,eAAc,YAAW,UAAS,SAAS,WACtE,eAAe,CAClB,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,eAAc,YAAW,UAAS,eAAc,aAAY,SAAS,WAC9E,YAAY,KACf,CACF,GACA,6BAAAD,QAAA,cAAC,OAAI,MAAM,MAAM,OAAO,IAAI,GAAG,CACjC;AAEJ;AAEA,IAAO,qBAAQ;",
   "names": ["styled", "React", "Text"]
 }

package/lib/cjs/components/navigation/progress/Stepper/index.js CHANGED Viewed

@@ -79,6 +79,7 @@ const Item = {
   Errored: () => /* @__PURE__ */ import_react.default.createElement(import__.Icons.CloseMedium, { size: 16 })
 };
 const StepText = (0, import_styled_components.default)(import_Text.default)`
+  text-align: center;
   color: ${(p) => {
   if (p.state === "errored") {
     return p.theme.colors.error.c50;
@@ -119,7 +120,7 @@ const Step = (0, import_react.memo)(function Step2({
 }) {
   const inactive = state === "pending";
   const nextInactive = state === "pending";
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(Item.Spacer, { mb: 5 }, !hideLeftSeparator && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive, position: "left" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" }), stepContentsByState[state], nextState && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive: nextInactive, position: "right" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" })), typeof Label === "string" ? /* @__PURE__ */ import_react.default.createElement(StepText, { state, variant: "small" }, Label) : /* @__PURE__ */ import_react.default.createElement(Label, { state }));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", alignItems: "center", flex: 20 }, /* @__PURE__ */ import_react.default.createElement(Item.Spacer, { mb: 5 }, !hideLeftSeparator && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive, position: "left" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" }), stepContentsByState[state], nextState && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive: nextInactive, position: "right" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" })), typeof Label === "string" ? /* @__PURE__ */ import_react.default.createElement(StepText, { state, variant: "small" }, Label) : /* @__PURE__ */ import_react.default.createElement(Label, { state }));
 });
 function getState(activeIndex, index, errored, disabled) {
   if (disabled) {

package/lib/cjs/components/navigation/progress/Stepper/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/progress/Stepper/index.tsx"],
-  "sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { Icons } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n  /**\n   * An array of labels that will determine the progress bar steps.\n   *  A label is either a string or a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom label.\n   */\n  steps: LabelType[];\n  /**\n   * Index of the active step, starting at zero and defaulting to 0 if omitted.\n   */\n  activeIndex?: number;\n  /**\n   * If true the current step is considered as a failure.\n   */\n  errored?: boolean;\n  /**\n   * Steps with indexes contained inside the array will be shown as disabled.\n   */\n  disabledIndexes?: number[];\n}\n\nexport type StepProps = {\n  /**\n   * State of the step.\n   */\n  state: StepState;\n  /**\n   * The label to display. To display more than text, this can be a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom Label\n   */\n  label: LabelType;\n  /**\n   * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n   */\n  hideLeftSeparator: boolean;\n  /**\n   * The next step state, or undefined if the current step is the last one.\n   */\n  nextState?: StepState;\n};\n\nexport const Item = {\n  Container: styled.div.attrs({\n    mx: \"8px\",\n  })<ColorProps & BorderProps & SpaceProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${(p) => p.theme.space[8]}px;\n    height: ${(p) => p.theme.space[8]}px;\n    ${color}\n    ${border}\n    ${space}\n  `,\n  Spacer: styled.div<SpaceProps>`\n    display: flex;\n    align-self: stretch;\n    ${space}\n  `,\n  Current: styled.div.attrs({\n    backgroundColor: \"primary.c90\",\n  })<ColorProps>`\n    width: 6px;\n    height: 6px;\n    border-radius: 6px;\n    ${color}\n  `,\n  Pending: styled.div.attrs({\n    backgroundColor: \"neutral.c70\",\n  })<ColorProps>`\n    width: ${(p) => p.theme.space[2]}px;\n    height: ${(p) => p.theme.space[2]}px;\n    border-radius: ${(p) => p.theme.space[2]}px;\n    ${color}\n  `,\n  Completed: (): JSX.Element => <Icons.CheckAloneMedium size={16} />,\n  Disabled: (): JSX.Element => <Icons.CloseMedium size={16} />,\n  Errored: (): JSX.Element => <Icons.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n  color: ${(p) => {\n    if (p.state === \"errored\") {\n      return p.theme.colors.error.c50;\n    }\n    if (p.state === \"disabled\") {\n      return p.theme.colors.neutral.c50;\n    }\n    if (p.state === \"pending\") {\n      return p.theme.colors.neutral.c70;\n    }\n    return p.theme.colors.neutral.c100;\n  }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n  flex: 1;\n  position: relative;\n  overflow-x: hidden;\n  background-color: ${(p) => p.theme.colors.neutral.c40};\n  height: 1px;\n  top: ${(p) => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n  Step: styled(BaseSeparator)``,\n  Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n  pending: (\n    <Item.Container>\n      <Item.Pending />\n    </Item.Container>\n  ),\n  current: (\n    <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Current />\n    </Item.Container>\n  ),\n  completed: (\n    <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Completed />\n    </Item.Container>\n  ),\n  errored: (\n    <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n      <Item.Errored />\n    </Item.Container>\n  ),\n  disabled: (\n    <Item.Container color=\"neutral.c50\">\n      <Item.Disabled />\n    </Item.Container>\n  ),\n};\n\nexport const Step = memo(function Step({\n  state,\n  label: Label,\n  hideLeftSeparator,\n  nextState,\n}: StepProps): JSX.Element {\n  const inactive = state === \"pending\";\n  const nextInactive = state === \"pending\";\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\">\n      <Item.Spacer mb={5}>\n        {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n          <Flex flex=\"1\" />\n        )}\n        {stepContentsByState[state]}\n        {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n          <Flex flex=\"1\" />\n        )}\n      </Item.Spacer>\n      {typeof Label === \"string\" ? (\n        <StepText state={state} variant=\"small\">\n          {Label}\n        </StepText>\n      ) : (\n        <Label state={state} />\n      )}\n    </Flex>\n  );\n});\n\nfunction getState(activeIndex: number, index: number, errored?: boolean, disabled?: boolean) {\n  if (disabled) {\n    return \"disabled\";\n  }\n  if (activeIndex < index) {\n    return \"pending\";\n  }\n  if (activeIndex === index) {\n    return errored ? \"errored\" : \"current\";\n  }\n  return \"completed\";\n}\n\nfunction Stepper({ steps, activeIndex = 0, errored, disabledIndexes, ...extraProps }: Props) {\n  return (\n    <Flex flexWrap=\"nowrap\" justifyContent=\"space-between\" {...extraProps}>\n      {steps.map((step, idx) => {\n        const state = getState(activeIndex, idx, errored, disabledIndexes?.includes(idx));\n        const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;\n        return (\n          <Fragment key={idx}>\n            {idx > 0 && <Separator.Step inactive={state === \"pending\"} />}\n            <Step label={step} state={state} nextState={nextState} hideLeftSeparator={idx === 0} />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n}\n\nexport default memo(Stepper);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { Icons } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n  /**\n   * An array of labels that will determine the progress bar steps.\n   *  A label is either a string or a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom label.\n   */\n  steps: LabelType[];\n  /**\n   * Index of the active step, starting at zero and defaulting to 0 if omitted.\n   */\n  activeIndex?: number;\n  /**\n   * If true the current step is considered as a failure.\n   */\n  errored?: boolean;\n  /**\n   * Steps with indexes contained inside the array will be shown as disabled.\n   */\n  disabledIndexes?: number[];\n}\n\nexport type StepProps = {\n  /**\n   * State of the step.\n   */\n  state: StepState;\n  /**\n   * The label to display. To display more than text, this can be a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom Label\n   */\n  label: LabelType;\n  /**\n   * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n   */\n  hideLeftSeparator: boolean;\n  /**\n   * The next step state, or undefined if the current step is the last one.\n   */\n  nextState?: StepState;\n};\n\nexport const Item = {\n  Container: styled.div.attrs({\n    mx: \"8px\",\n  })<ColorProps & BorderProps & SpaceProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${p => p.theme.space[8]}px;\n    height: ${p => p.theme.space[8]}px;\n    ${color}\n    ${border}\n    ${space}\n  `,\n  Spacer: styled.div<SpaceProps>`\n    display: flex;\n    align-self: stretch;\n    ${space}\n  `,\n  Current: styled.div.attrs({\n    backgroundColor: \"primary.c90\",\n  })<ColorProps>`\n    width: 6px;\n    height: 6px;\n    border-radius: 6px;\n    ${color}\n  `,\n  Pending: styled.div.attrs({\n    backgroundColor: \"neutral.c70\",\n  })<ColorProps>`\n    width: ${p => p.theme.space[2]}px;\n    height: ${p => p.theme.space[2]}px;\n    border-radius: ${p => p.theme.space[2]}px;\n    ${color}\n  `,\n  Completed: (): JSX.Element => <Icons.CheckAloneMedium size={16} />,\n  Disabled: (): JSX.Element => <Icons.CloseMedium size={16} />,\n  Errored: (): JSX.Element => <Icons.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n  text-align: center;\n  color: ${p => {\n    if (p.state === \"errored\") {\n      return p.theme.colors.error.c50;\n    }\n    if (p.state === \"disabled\") {\n      return p.theme.colors.neutral.c50;\n    }\n    if (p.state === \"pending\") {\n      return p.theme.colors.neutral.c70;\n    }\n    return p.theme.colors.neutral.c100;\n  }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n  flex: 1;\n  position: relative;\n  overflow-x: hidden;\n  background-color: ${p => p.theme.colors.neutral.c40};\n  height: 1px;\n  top: ${p => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n  Step: styled(BaseSeparator)``,\n  Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n  pending: (\n    <Item.Container>\n      <Item.Pending />\n    </Item.Container>\n  ),\n  current: (\n    <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Current />\n    </Item.Container>\n  ),\n  completed: (\n    <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Completed />\n    </Item.Container>\n  ),\n  errored: (\n    <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n      <Item.Errored />\n    </Item.Container>\n  ),\n  disabled: (\n    <Item.Container color=\"neutral.c50\">\n      <Item.Disabled />\n    </Item.Container>\n  ),\n};\n\nexport const Step = memo(function Step({\n  state,\n  label: Label,\n  hideLeftSeparator,\n  nextState,\n}: StepProps): JSX.Element {\n  const inactive = state === \"pending\";\n  const nextInactive = state === \"pending\";\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\" flex={20}>\n      <Item.Spacer mb={5}>\n        {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n          <Flex flex=\"1\" />\n        )}\n        {stepContentsByState[state]}\n        {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n          <Flex flex=\"1\" />\n        )}\n      </Item.Spacer>\n      {typeof Label === \"string\" ? (\n        <StepText state={state} variant=\"small\">\n          {Label}\n        </StepText>\n      ) : (\n        <Label state={state} />\n      )}\n    </Flex>\n  );\n});\n\nfunction getState(activeIndex: number, index: number, errored?: boolean, disabled?: boolean) {\n  if (disabled) {\n    return \"disabled\";\n  }\n  if (activeIndex < index) {\n    return \"pending\";\n  }\n  if (activeIndex === index) {\n    return errored ? \"errored\" : \"current\";\n  }\n  return \"completed\";\n}\n\nfunction Stepper({ steps, activeIndex = 0, errored, disabledIndexes, ...extraProps }: Props) {\n  return (\n    <Flex flexWrap=\"nowrap\" justifyContent=\"space-between\" {...extraProps}>\n      {steps.map((step, idx) => {\n        const state = getState(activeIndex, idx, errored, disabledIndexes?.includes(idx));\n        const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;\n        return (\n          <Fragment key={idx}>\n            {idx > 0 && <Separator.Step inactive={state === \"pending\"} />}\n            <Step label={step} state={state} nextState={nextState} hideLeftSeparator={idx === 0} />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n}\n\nexport default memo(Stepper);\n"],
+  "mappings": "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",
   "names": ["styled", "React", "Text", "Step", "Flex"]
 }

package/lib/cjs/components/navigation/sideBar/Item/Item.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Item/Item.tsx"],
-  "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../index\";\nimport Text from \"../../../asorted/Text\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport Flex from \"../../../layout/Flex\";\n\nconst ItemWrapper = styled.li`\n  /** DEFAULT VARIANT **/\n  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-background-color: unset;\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${(p) => p.theme.space[3]}px;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  padding: ${(p) => p.theme.space[5]}px;\n  border-radius: ${(p) => p.theme.space[3]}px;\n  min-height: ${(p) => p.theme.space[13]}px;\n  min-width: ${(p) => p.theme.space[13]}px;\n\n  color: var(--ll-sidebar-item-icon-color);\n  background-color: var(--ll-sidebar-item-background-color);\n  cursor: pointer;\n\n  /** HOVER VARIANT **/\n  &:hover {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: unset;\n  }\n\n  /** FOCUS VARIANT **/\n  &:focus {\n    box-shadow: 0px 0px 0px 4px rgba(187, 176, 255, 0.4);\n    border-radius: ${(p) => p.theme.space[3]}px;\n  }\n\n  /** ACTIVE VARIANT **/\n  &[data-active=\"true\"] {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};\n  }\n\n  /** DISABLE VARIANT **/\n  &[data-disable=\"true\"] {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-background-color: unset;\n    opacity: 0.3;\n    cursor: unset;\n    pointer-events: none;\n  }\n`;\n\nconst CollapsedBadgeContainer = styled.div`\n  position: absolute;\n  margin-top: -${(p) => p.theme.space[11]}px;\n  margin-left: ${(p) => p.theme.space[8]}px;\n`;\n\nconst DefaultBadge = styled.div`\n  height: ${(p) => p.theme.space[4]}px;\n  width: ${(p) => p.theme.space[4]}px;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background-color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nexport const ItemLabel = styled(Text)`\n  display: inline-block;\n  color: var(--ll-sidebar-item-label-color);\n\n  text-transform: capitalize;\n`;\n\nexport type ItemType = {\n  label: string;\n  children: JSX.Element;\n  onClick: () => void;\n  isActive?: boolean;\n  isDisabled?: boolean;\n  displayNotificationBadge?: boolean;\n  customNotificationBadge?: JSX.Element;\n};\n\nconst Item = ({\n  label,\n  children,\n  onClick,\n  isActive,\n  isDisabled,\n  displayNotificationBadge,\n  customNotificationBadge,\n}: ItemType): JSX.Element => {\n  const { isExpanded } = useContext(SideBarContext);\n\n  const handleClick = () => {\n    if (isDisabled) return;\n    onClick();\n  };\n\n  const badge = customNotificationBadge ?? <DefaultBadge />;\n\n  return (\n    <>\n      <ItemWrapper\n        role=\"button\"\n        onClick={handleClick}\n        data-active={isActive}\n        data-disable={isDisabled}\n        tabIndex={0}\n      >\n        {children}\n        <CollapsedBadgeContainer>\n          <TransitionInOut\n            unmountOnExit\n            mountOnEnter\n            in={!isExpanded}\n            style={{ transitionDelay: !isExpanded ? \"200ms\" : 0 }}\n          >\n            {displayNotificationBadge && badge}\n          </TransitionInOut>\n        </CollapsedBadgeContainer>\n        <TransitionInOut\n          timeout={200}\n          in={isExpanded}\n          unmountOnExit\n          mountOnEnter\n          style={{ transitionDelay: isExpanded ? \"200ms\" : 0, display: \"flex\", flex: \"1\" }}\n        >\n          <ItemLabel variant=\"paragraph\">{label}</ItemLabel>\n          <Flex alignItems=\"center\" justifyContent=\"flex-end\" ml={2} flexGrow={1}>\n            {displayNotificationBadge && badge}\n          </Flex>\n        </TransitionInOut>\n      </ItemWrapper>\n    </>\n  );\n};\n\nexport default Item;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../index\";\nimport Text from \"../../../asorted/Text\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport Flex from \"../../../layout/Flex\";\n\nconst ItemWrapper = styled.li`\n  /** DEFAULT VARIANT **/\n  --ll-sidebar-item-label-color: ${props => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-icon-color: ${props => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-background-color: unset;\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${p => p.theme.space[3]}px;\n  column-gap: ${p => p.theme.space[5]}px;\n  padding: ${p => p.theme.space[5]}px;\n  border-radius: ${p => p.theme.space[3]}px;\n  min-height: ${p => p.theme.space[13]}px;\n  min-width: ${p => p.theme.space[13]}px;\n\n  color: var(--ll-sidebar-item-icon-color);\n  background-color: var(--ll-sidebar-item-background-color);\n  cursor: pointer;\n\n  /** HOVER VARIANT **/\n  &:hover {\n    --ll-sidebar-item-label-color: ${props => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${props => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: unset;\n  }\n\n  /** FOCUS VARIANT **/\n  &:focus {\n    box-shadow: 0px 0px 0px 4px rgba(187, 176, 255, 0.4);\n    border-radius: ${p => p.theme.space[3]}px;\n  }\n\n  /** ACTIVE VARIANT **/\n  &[data-active=\"true\"] {\n    --ll-sidebar-item-label-color: ${props => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${props => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: ${props => props.theme.colors.primary.c20};\n  }\n\n  /** DISABLE VARIANT **/\n  &[data-disable=\"true\"] {\n    --ll-sidebar-item-label-color: ${props => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-icon-color: ${props => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-background-color: unset;\n    opacity: 0.3;\n    cursor: unset;\n    pointer-events: none;\n  }\n`;\n\nconst CollapsedBadgeContainer = styled.div`\n  position: absolute;\n  margin-top: -${p => p.theme.space[11]}px;\n  margin-left: ${p => p.theme.space[8]}px;\n`;\n\nconst DefaultBadge = styled.div`\n  height: ${p => p.theme.space[4]}px;\n  width: ${p => p.theme.space[4]}px;\n  border-radius: ${p => p.theme.radii[2]}px;\n  background-color: ${p => p.theme.colors.primary.c80};\n`;\n\nexport const ItemLabel = styled(Text)`\n  display: inline-block;\n  color: var(--ll-sidebar-item-label-color);\n\n  text-transform: capitalize;\n`;\n\nexport type ItemType = {\n  label: string;\n  children: JSX.Element;\n  onClick: () => void;\n  isActive?: boolean;\n  isDisabled?: boolean;\n  displayNotificationBadge?: boolean;\n  customNotificationBadge?: JSX.Element;\n};\n\nconst Item = ({\n  label,\n  children,\n  onClick,\n  isActive,\n  isDisabled,\n  displayNotificationBadge,\n  customNotificationBadge,\n}: ItemType): JSX.Element => {\n  const { isExpanded } = useContext(SideBarContext);\n\n  const handleClick = () => {\n    if (isDisabled) return;\n    onClick();\n  };\n\n  const badge = customNotificationBadge ?? <DefaultBadge />;\n\n  return (\n    <>\n      <ItemWrapper\n        role=\"button\"\n        onClick={handleClick}\n        data-active={isActive}\n        data-disable={isDisabled}\n        tabIndex={0}\n      >\n        {children}\n        <CollapsedBadgeContainer>\n          <TransitionInOut\n            unmountOnExit\n            mountOnEnter\n            in={!isExpanded}\n            style={{ transitionDelay: !isExpanded ? \"200ms\" : 0 }}\n          >\n            {displayNotificationBadge && badge}\n          </TransitionInOut>\n        </CollapsedBadgeContainer>\n        <TransitionInOut\n          timeout={200}\n          in={isExpanded}\n          unmountOnExit\n          mountOnEnter\n          style={{ transitionDelay: isExpanded ? \"200ms\" : 0, display: \"flex\", flex: \"1\" }}\n        >\n          <ItemLabel variant=\"paragraph\">{label}</ItemLabel>\n          <Flex alignItems=\"center\" justifyContent=\"flex-end\" ml={2} flexGrow={1}>\n            {displayNotificationBadge && badge}\n          </Flex>\n        </TransitionInOut>\n      </ItemWrapper>\n    </>\n  );\n};\n\nexport default Item;\n"],
+  "mappings": "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",
   "names": ["styled", "Text", "SideBarContext", "React", "TransitionInOut", "Flex"]
 }

package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/SideBar/SideBar.tsx"],
-  "sourcesContent": ["import React, { useMemo, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../../../navigation/sideBar\";\nimport Flex from \"../../../layout/Flex\";\nimport Item from \"../../../navigation/sideBar/Item\";\nimport Logo from \"../../../navigation/sideBar/Logo\";\nimport Toggle from \"../../../navigation/sideBar/Toggle\";\n\nconst Nav = styled(Flex)`\n  position: relative;\n  padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};\n  row-gap: 1.5rem;\n  height: 100vh;\n  width: 14.875rem;\n  color: ${(props) => props.theme.colors.neutral.c100};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};\n  background-color: ${(props) => props.theme.colors.background.main};\n  transition: width 200ms;\n  will-change: width;\n  flex-shrink: 0;\n  z-index: ${(p) => p.theme.zIndexes[2]};\n\n  &.nav-enter {\n    width: ${(p) => p.theme.space[19]}px;\n  }\n  &.nav-enter-done {\n    width: 14.875rem;\n  }\n  &.nav-exit {\n    width: 14.875rem;\n  }\n  &.nav-exit-done {\n    width: ${(p) => `${p.theme.space[19]}px`};\n  }\n`;\n\nconst TransparentMouseZone = styled.div`\n  position: absolute;\n  left: 100%;\n  top: 0;\n  width: ${(p) => `${p.theme.space[8]}px`};\n  height: 100%;\n`;\n\nexport type SideBarProps = {\n  children: Array<JSX.Element>;\n  onToggle: () => void;\n  isExpanded?: boolean;\n};\n\nconst SideBar = ({ children, onToggle, isExpanded = true }: SideBarProps): JSX.Element => {\n  const [isToggleDisplayed, setToggleDisplayed] = useState(false);\n  const providerValue = useMemo(() => ({ isExpanded, onToggle }), [isExpanded, onToggle]);\n\n  return (\n    <SideBarContext.Provider value={providerValue}>\n      <CSSTransition in={isExpanded} timeout={200} classNames=\"nav\">\n        <Nav\n          flexDirection=\"column\"\n          justifyContent=\"flex-start\"\n          alignContent=\"stretch\"\n          role=\"navigation\"\n          aria-label=\"Main\"\n          onMouseEnter={() => setToggleDisplayed(true)}\n          onMouseLeave={() => setToggleDisplayed(false)}\n        >\n          <TransparentMouseZone />\n          <Toggle isDisplayed={isToggleDisplayed} />\n          <Logo />\n          <Flex flexDirection=\"column\" justifyContent=\"flex-start\" alignContent=\"stretch\">\n            {children}\n          </Flex>\n        </Nav>\n      </CSSTransition>\n    </SideBarContext.Provider>\n  );\n};\n\nSideBar.Item = Item;\n\nexport default SideBar;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,oCAA8B;AAC9B,+BAAmB;AACnB,qBAA2B;AAC3B,kBAAiB;AACjB,kBAAiB;AACjB,kBAAiB;AACjB,oBAAmB;AAEnB,MAAM,UAAM,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,aAEV,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,WAIlD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,4BACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC5C,CAAC,UAAU,MAAM,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA,aAIlD,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA;AAAA;AAAA,aAGzB,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASvB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAIvC,MAAM,uBAAuB,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAAA,WAIzB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAUpC,MAAM,UAAU,CAAC,EAAE,UAAU,UAAU,aAAa,KAAK,MAAiC;AACxF,QAAM,CAAC,mBAAmB,kBAAkB,QAAI,uBAAS,KAAK;AAC9D,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,YAAY,SAAS,IAAI,CAAC,YAAY,QAAQ,CAAC;AAEtF,SACE,6BAAAE,QAAA,cAAC,eAAAC,QAAe,UAAf,EAAwB,OAAO,iBAC9B,6BAAAD,QAAA,cAAC,+CAAc,IAAI,YAAY,SAAS,KAAK,YAAW,SACtD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAc,MAAM,mBAAmB,IAAI;AAAA,MAC3C,cAAc,MAAM,mBAAmB,KAAK;AAAA;AAAA,IAE5C,6BAAAA,QAAA,cAAC,0BAAqB;AAAA,IACtB,6BAAAA,QAAA,cAAC,cAAAE,SAAA,EAAO,aAAa,mBAAmB;AAAA,IACxC,6BAAAF,QAAA,cAAC,YAAAG,SAAA,IAAK;AAAA,IACN,6BAAAH,QAAA,cAAC,YAAAD,SAAA,EAAK,eAAc,UAAS,gBAAe,cAAa,cAAa,aACnE,QACH;AAAA,EACF,CACF,CACF;AAEJ;AAEA,QAAQ,OAAO,YAAAK;AAEf,IAAO,kBAAQ;",
+  "sourcesContent": ["import React, { useMemo, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../../../navigation/sideBar\";\nimport Flex from \"../../../layout/Flex\";\nimport Item from \"../../../navigation/sideBar/Item\";\nimport Logo from \"../../../navigation/sideBar/Logo\";\nimport Toggle from \"../../../navigation/sideBar/Toggle\";\n\nconst Nav = styled(Flex)`\n  position: relative;\n  padding: ${p => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};\n  row-gap: 1.5rem;\n  height: 100vh;\n  width: 14.875rem;\n  color: ${props => props.theme.colors.neutral.c100};\n  border-right: 1px solid ${props => props.theme.colors.neutral.c40};\n  background-color: ${props => props.theme.colors.background.main};\n  transition: width 200ms;\n  will-change: width;\n  flex-shrink: 0;\n  z-index: ${p => p.theme.zIndexes[2]};\n\n  &.nav-enter {\n    width: ${p => p.theme.space[19]}px;\n  }\n  &.nav-enter-done {\n    width: 14.875rem;\n  }\n  &.nav-exit {\n    width: 14.875rem;\n  }\n  &.nav-exit-done {\n    width: ${p => `${p.theme.space[19]}px`};\n  }\n`;\n\nconst TransparentMouseZone = styled.div`\n  position: absolute;\n  left: 100%;\n  top: 0;\n  width: ${p => `${p.theme.space[8]}px`};\n  height: 100%;\n`;\n\nexport type SideBarProps = {\n  children: Array<JSX.Element>;\n  onToggle: () => void;\n  isExpanded?: boolean;\n};\n\nconst SideBar = ({ children, onToggle, isExpanded = true }: SideBarProps): JSX.Element => {\n  const [isToggleDisplayed, setToggleDisplayed] = useState(false);\n  const providerValue = useMemo(() => ({ isExpanded, onToggle }), [isExpanded, onToggle]);\n\n  return (\n    <SideBarContext.Provider value={providerValue}>\n      <CSSTransition in={isExpanded} timeout={200} classNames=\"nav\">\n        <Nav\n          flexDirection=\"column\"\n          justifyContent=\"flex-start\"\n          alignContent=\"stretch\"\n          role=\"navigation\"\n          aria-label=\"Main\"\n          onMouseEnter={() => setToggleDisplayed(true)}\n          onMouseLeave={() => setToggleDisplayed(false)}\n        >\n          <TransparentMouseZone />\n          <Toggle isDisplayed={isToggleDisplayed} />\n          <Logo />\n          <Flex flexDirection=\"column\" justifyContent=\"flex-start\" alignContent=\"stretch\">\n            {children}\n          </Flex>\n        </Nav>\n      </CSSTransition>\n    </SideBarContext.Provider>\n  );\n};\n\nSideBar.Item = Item;\n\nexport default SideBar;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,oCAA8B;AAC9B,+BAAmB;AACnB,qBAA2B;AAC3B,kBAAiB;AACjB,kBAAiB;AACjB,kBAAiB;AACjB,oBAAmB;AAEnB,MAAM,UAAM,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,aAEV,OAAK,GAAG,EAAE,MAAM,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,WAIhD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,4BACnB,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC1C,WAAS,MAAM,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA,aAIhD,OAAK,EAAE,MAAM,SAAS,CAAC;AAAA;AAAA;AAAA,aAGvB,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASrB,OAAK,GAAG,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAIrC,MAAM,uBAAuB,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAAA,WAIzB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAUlC,MAAM,UAAU,CAAC,EAAE,UAAU,UAAU,aAAa,KAAK,MAAiC;AACxF,QAAM,CAAC,mBAAmB,kBAAkB,QAAI,uBAAS,KAAK;AAC9D,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,YAAY,SAAS,IAAI,CAAC,YAAY,QAAQ,CAAC;AAEtF,SACE,6BAAAE,QAAA,cAAC,eAAAC,QAAe,UAAf,EAAwB,OAAO,iBAC9B,6BAAAD,QAAA,cAAC,+CAAc,IAAI,YAAY,SAAS,KAAK,YAAW,SACtD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAc,MAAM,mBAAmB,IAAI;AAAA,MAC3C,cAAc,MAAM,mBAAmB,KAAK;AAAA;AAAA,IAE5C,6BAAAA,QAAA,cAAC,0BAAqB;AAAA,IACtB,6BAAAA,QAAA,cAAC,cAAAE,SAAA,EAAO,aAAa,mBAAmB;AAAA,IACxC,6BAAAF,QAAA,cAAC,YAAAG,SAAA,IAAK;AAAA,IACN,6BAAAH,QAAA,cAAC,YAAAD,SAAA,EAAK,eAAc,UAAS,gBAAe,cAAa,cAAa,aACnE,QACH;AAAA,EACF,CACF,CACF;AAEJ;AAEA,QAAQ,OAAO,YAAAK;AAEf,IAAO,kBAAQ;",
   "names": ["styled", "Flex", "React", "SideBarContext", "Toggle", "Logo", "Item"]
 }

package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Toggle/Toggle.tsx"],
-  "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\n\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport ArrowRightIcon from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport SideBarContext from \"../../../navigation/sideBar\";\n\nconst ToggleButtonContainer = styled(TransitionInOut)`\n  --ll-side-bar-toggle-button-size: ${(p) => p.theme.space[10]}px;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: var(--ll-side-bar-toggle-button-size);\n  right: calc(var(--ll-side-bar-toggle-button-size) / -2);\n  cursor: pointer;\n\n  background: ${(p) => p.theme.colors.neutral.c20};\n  border: 1px solid ${(p) => p.theme.colors.neutral.c100};\n  border-radius: 50%;\n  width: var(--ll-side-bar-toggle-button-size);\n  height: var(--ll-side-bar-toggle-button-size);\n`;\n\ntype ToggleButtonProps = { isDisplayed: boolean };\nconst ToggleButton = ({ isDisplayed }: ToggleButtonProps): JSX.Element => {\n  const { isExpanded, onToggle } = useContext(SideBarContext);\n\n  return (\n    <ToggleButtonContainer\n      timeout={200}\n      in={isDisplayed}\n      appear\n      unmountOnExit\n      onClick={onToggle}\n      role=\"button\"\n    >\n      {isExpanded ? <ArrowLeftIcon /> : <ArrowRightIcon />}\n    </ToggleButtonContainer>\n  );\n};\n\nexport default ToggleButton;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,+BAAmB;AAEnB,6BAA0B;AAC1B,8BAA2B;AAC3B,6BAA4B;AAC5B,qBAA2B;AAE3B,MAAM,4BAAwB,yBAAAA,SAAO,uBAAAC,OAAe;AAAA,sCACd,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAU7C,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACxB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAOpD,MAAM,eAAe,CAAC,EAAE,YAAY,MAAsC;AACxE,QAAM,EAAE,YAAY,SAAS,QAAI,yBAAW,eAAAC,OAAc;AAE1D,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,QAAM;AAAA,MACN,eAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAK;AAAA;AAAA,IAEJ,aAAa,6BAAAA,QAAA,cAAC,uBAAAC,SAAA,IAAc,IAAK,6BAAAD,QAAA,cAAC,wBAAAE,SAAA,IAAe;AAAA,EACpD;AAEJ;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\n\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport ArrowRightIcon from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport SideBarContext from \"../../../navigation/sideBar\";\n\nconst ToggleButtonContainer = styled(TransitionInOut)`\n  --ll-side-bar-toggle-button-size: ${p => p.theme.space[10]}px;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: var(--ll-side-bar-toggle-button-size);\n  right: calc(var(--ll-side-bar-toggle-button-size) / -2);\n  cursor: pointer;\n\n  background: ${p => p.theme.colors.neutral.c20};\n  border: 1px solid ${p => p.theme.colors.neutral.c100};\n  border-radius: 50%;\n  width: var(--ll-side-bar-toggle-button-size);\n  height: var(--ll-side-bar-toggle-button-size);\n`;\n\ntype ToggleButtonProps = { isDisplayed: boolean };\nconst ToggleButton = ({ isDisplayed }: ToggleButtonProps): JSX.Element => {\n  const { isExpanded, onToggle } = useContext(SideBarContext);\n\n  return (\n    <ToggleButtonContainer\n      timeout={200}\n      in={isDisplayed}\n      appear\n      unmountOnExit\n      onClick={onToggle}\n      role=\"button\"\n    >\n      {isExpanded ? <ArrowLeftIcon /> : <ArrowRightIcon />}\n    </ToggleButtonContainer>\n  );\n};\n\nexport default ToggleButton;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,+BAAmB;AAEnB,6BAA0B;AAC1B,8BAA2B;AAC3B,6BAA4B;AAC5B,qBAA2B;AAE3B,MAAM,4BAAwB,yBAAAA,SAAO,uBAAAC,OAAe;AAAA,sCACd,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAU3C,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACtB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,eAAe,CAAC,EAAE,YAAY,MAAsC;AACxE,QAAM,EAAE,YAAY,SAAS,QAAI,yBAAW,eAAAC,OAAc;AAE1D,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,QAAM;AAAA,MACN,eAAa;AAAA,MACb,SAAS;AAAA,MACT,MAAK;AAAA;AAAA,IAEJ,aAAa,6BAAAA,QAAA,cAAC,uBAAAC,SAAA,IAAc,IAAK,6BAAAD,QAAA,cAAC,wBAAAE,SAAA,IAAe;AAAA,EACpD;AAEJ;AAEA,IAAO,iBAAQ;",
   "names": ["styled", "TransitionInOut", "SideBarContext", "React", "ArrowLeftIcon", "ArrowRightIcon"]
 }

package/lib/cjs/components/tabs/Bar/Bar.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Bar/Bar.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport BarTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Graph\",\n  component: BarTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <BarTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </BarTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Graph = (args: Props): React.ReactNode[] =>\n  navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n    const labels = [\n      navItems.slice(0, index + 1).map((label) => (\n        <Text color=\"inherit\" variant=\"small\">\n          {label}\n        </Text>\n      )),\n    ];\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nGraph.args = {\n  initialActiveIndex: 1,\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAA+B;AAC/B,kBAAiB;AAEjB,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAS,GAAG,MAAM,aAAa,kBAC7B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,QAAQ,CAAC,SACpB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,CAAC,UAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,MAAM,OAAO;AAAA,EACX,oBAAoB;AACtB;",
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport BarTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Graph\",\n  component: BarTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <BarTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </BarTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Graph = (args: Props): React.ReactNode[] =>\n  navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n    const labels = [\n      navItems.slice(0, index + 1).map(label => (\n        <Text color=\"inherit\" variant=\"small\">\n          {label}\n        </Text>\n      )),\n    ];\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nGraph.args = {\n  initialActiveIndex: 1,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAA+B;AAC/B,kBAAiB;AAEjB,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAS,GAAG,MAAM,aAAa,kBAC7B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,QAAQ,CAAC,SACpB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAC/B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,MAAM,OAAO;AAAA,EACX,oBAAoB;AACtB;",
   "names": ["BarTabs", "React", "Text"]
 }

package/lib/cjs/components/tabs/Bar/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Bar/index.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Bar = styled.div`\n  display: inline-flex;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c40};\n  border-radius: 33px;\n  padding: 2px;\n`;\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: 33px;\n  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};\n  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Bar>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Bar>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA,sBAEG,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKpD,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBAC5D,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO;AAAA;AAGxD,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,WACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Bar = styled.div`\n  display: inline-flex;\n  border: 1px solid ${p => p.theme.colors.neutral.c40};\n  border-radius: 33px;\n  padding: 2px;\n`;\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: 33px;\n  color: ${p => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};\n  background-color: ${p => (p.active ? p.theme.colors.neutral.c100 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Bar>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Bar>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA,sBAEG,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKlD,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBAC1D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO;AAAA;AAGtD,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,WACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
   "names": ["styled", "Flex", "React"]
 }

package/lib/cjs/components/tabs/Chip/Chip.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Chip/Chip.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Chip\",\n  component: ChipTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100%\" }}>\n        <ChipTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </ChipTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Chip = (args: Props): React.ReactNode[] =>\n  navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n    const labels = [\n      navItems.slice(0, index + 1).map((label) => (\n        <Text color=\"inherit\" variant=\"small\">\n          {label}\n        </Text>\n      )),\n    ];\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nChip.args = {\n  initialActiveIndex: 1,\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,CAAC,UAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Chip\",\n  component: ChipTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100%\" }}>\n        <ChipTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </ChipTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Chip = (args: Props): React.ReactNode[] =>\n  navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n    const labels = [\n      navItems.slice(0, index + 1).map(label => (\n        <Text color=\"inherit\" variant=\"small\">\n          {label}\n        </Text>\n      )),\n    ];\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nChip.args = {\n  initialActiveIndex: 1,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAC/B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
   "names": ["ChipTabs", "React", "Text"]
 }

package/lib/cjs/components/tabs/Chip/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  color: ${(p) => p.theme.colors.neutral.c100};\n  background-color: ${(p) => (p.active ? p.theme.colors.primary.c30 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Flex justifyContent=\"space-between\" flex={1} columnGap={5}>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA,mBAGkB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,WAC9B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACnB,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGvD,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,YAAAD,SAAA,EAAK,gBAAe,iBAAgB,MAAM,GAAG,WAAW,KACtD,aAAAC,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: ${p => p.theme.radii[2]}px;\n  color: ${p => p.theme.colors.neutral.c100};\n  background-color: ${p => (p.active ? p.theme.colors.primary.c30 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Flex justifyContent=\"space-between\" flex={1} columnGap={5}>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA,mBAGkB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,WAC5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACjB,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGrD,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,YAAAD,SAAA,EAAK,gBAAe,iBAAgB,MAAM,GAAG,WAAW,KACtD,aAAAC,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
   "names": ["styled", "Flex", "React"]
 }

package/lib/cjs/components/tabs/Pill/Pill.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Pill/Pill.stories.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport PillTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Icon from \"../../asorted/Icon\";\n\nexport default {\n  title: \"Tabs/View\",\n  component: PillTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"Manager\", \"MenuBurger\", \"Apple\", \"Crown\", \"Settings\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <PillTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </PillTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const View = (args: Props): JSX.Element[] =>\n  navItems.reduce<JSX.Element[]>((acc, _, index) => {\n    const labels = navItems.slice(0, index + 1).map((label) => <Icon name={label} />);\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nView.args = {\n  initialActiveIndex: 1,\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AACjB,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,WAAW,cAAc,SAAS,SAAS,UAAU;AAEvE,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAAsB,CAAC,KAAK,GAAG,UAAU;AAChD,QAAM,SAAS,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,CAAC,UAAU,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAM,OAAO,CAAE;AAChF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAF,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport PillTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Icon from \"../../asorted/Icon\";\n\nexport default {\n  title: \"Tabs/View\",\n  component: PillTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"Manager\", \"MenuBurger\", \"Apple\", \"Crown\", \"Settings\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <PillTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </PillTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const View = (args: Props): JSX.Element[] =>\n  navItems.reduce<JSX.Element[]>((acc, _, index) => {\n    const labels = navItems.slice(0, index + 1).map(label => <Icon name={label} />);\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nView.args = {\n  initialActiveIndex: 1,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AACjB,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,WAAW,cAAc,SAAS,SAAS,UAAU;AAEvE,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAAsB,CAAC,KAAK,GAAG,UAAU;AAChD,QAAM,SAAS,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAAS,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAM,OAAO,CAAE;AAC9E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAF,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
   "names": ["PillTabs", "React", "Text", "Icon"]
 }

package/lib/cjs/components/tabs/Pill/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Pill/index.tsx"],
-  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps } from \"styled-system\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\n\nconst Pill = styled.div<BorderProps>`\n  display: inline-flex;\n  & > :first-child {\n    border-top-left-radius: 20px;\n    border-bottom-left-radius: 20px;\n    padding-left: 12px;\n  }\n  & > :last-child {\n    border-top-right-radius: 20px;\n    border-bottom-right-radius: 20px;\n    padding-right: 12px;\n  }\n  & > :not(:first-child) {\n    border-left-width: 0;\n  }\n  ${border};\n`;\nconst Item = styled(Flex).attrs({ flex: 1, justifyContent: \"center\", alignItems: \"center\" })`\n  cursor: pointer;\n  padding: 8px 10px 8px 10px;\n  border: 1px solid;\n  &[data-active=\"false\"] {\n    color: ${(p) => p.theme.colors.neutral.c80};\n    background-color: ${(p) => p.theme.colors.neutral.c00};\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n  }\n  &[data-active=\"true\"] {\n    color: ${(p) => p.theme.colors.neutral.c00};\n    background-color: ${(p) => p.theme.colors.neutral.c100};\n    border-color: ${(p) => p.theme.colors.neutral.c100};\n\n    &:not(:last-child) {\n      border-right-width: 0;\n    }\n  }\n  &[data-active=\"true\"] + div {\n    border-left-width: 1px;\n  }\n`;\n\nexport default function PillTabs({\n  children,\n  onTabChange,\n  initialActiveIndex,\n}: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Pill>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          data-active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Pill>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,2BAAoC;AACpC,kBAAiB;AAcjB,MAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehB;AAAA;AAEJ,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,GAAG,gBAAgB,UAAU,YAAY,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9E,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGrC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWnC,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,YACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,UAAU;AAAA,MACvB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps } from \"styled-system\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\n\nconst Pill = styled.div<BorderProps>`\n  display: inline-flex;\n  & > :first-child {\n    border-top-left-radius: 20px;\n    border-bottom-left-radius: 20px;\n    padding-left: 12px;\n  }\n  & > :last-child {\n    border-top-right-radius: 20px;\n    border-bottom-right-radius: 20px;\n    padding-right: 12px;\n  }\n  & > :not(:first-child) {\n    border-left-width: 0;\n  }\n  ${border};\n`;\nconst Item = styled(Flex).attrs({ flex: 1, justifyContent: \"center\", alignItems: \"center\" })`\n  cursor: pointer;\n  padding: 8px 10px 8px 10px;\n  border: 1px solid;\n  &[data-active=\"false\"] {\n    color: ${p => p.theme.colors.neutral.c80};\n    background-color: ${p => p.theme.colors.neutral.c00};\n    border-color: ${p => p.theme.colors.neutral.c40};\n  }\n  &[data-active=\"true\"] {\n    color: ${p => p.theme.colors.neutral.c00};\n    background-color: ${p => p.theme.colors.neutral.c100};\n    border-color: ${p => p.theme.colors.neutral.c100};\n\n    &:not(:last-child) {\n      border-right-width: 0;\n    }\n  }\n  &[data-active=\"true\"] + div {\n    border-left-width: 1px;\n  }\n`;\n\nexport default function PillTabs({\n  children,\n  onTabChange,\n  initialActiveIndex,\n}: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Pill>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          data-active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Pill>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,2BAAoC;AACpC,kBAAiB;AAcjB,MAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehB;AAAA;AAEJ,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,GAAG,gBAAgB,UAAU,YAAY,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9E,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAChC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGnC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAChC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjC,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,YACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,UAAU;AAAA,MACvB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
   "names": ["styled", "Flex", "React"]
 }