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/form/QuantityInput/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/QuantityInput/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\nconst MaxButton = styled.button`\n  color: ${(p) => p.theme.colors.neutral.c00};\n  background-color: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: 100px;\n  border-width: 0;\n  padding-left: 14px;\n  padding-right: 14px;\n  height: 100%;\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n    color: ${(p) => p.theme.colors.neutral.c50};\n    cursor: unset;\n  }\n`;\n\nconst Legend = styled(Text)`\n  color: ${(p) => p.theme.colors.neutral.c70};\n\n  &[data-disabled=\"true\"] {\n    color: ${(p) => p.theme.colors.neutral.c50};\n  }\n`;\n\nfunction QuantityInput(\n  {\n    onMaxClick,\n    price,\n    ...inputProps\n  }: InputProps & {\n    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;\n    price?: string;\n  },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      type={\"number\"}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} pr={\"3px\"} py={\"3px\"}>\n          {price && (\n            <Legend variant=\"body\" pr={\"12px\"} data-disabled={inputProps.disabled}>\n              {price}\n            </Legend>\n          )}\n          <MaxButton onClick={onMaxClick} disabled={inputProps.disabled}>\n            <Text variant=\"tiny\" color=\"currentColor\">\n              Max\n            </Text>\n          </MaxButton>\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(QuantityInput);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,kBAAiB;AACjB,+BAAmB;AAEnB,MAAM,YAAY,yBAAAA,QAAO;AAAA,WACd,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK3C,MAAM,aAAS,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACf,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAG5B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,SAAS,cACP;AAAA,EACE;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIA,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,aACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAY,UAAU,gBAAgB,UAAU,IAAI,OAAO,IAAI,SACrE,SACC,6BAAAF,QAAA,cAAC,UAAO,SAAQ,QAAO,IAAI,QAAQ,iBAAe,WAAW,YAC1D,KACH,GAEF,6BAAAA,QAAA,cAAC,aAAU,SAAS,YAAY,UAAU,WAAW,YACnD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,SAAQ,QAAO,OAAM,kBAAe,KAE1C,CACF,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,wBAAQ,aAAAC,QAAM,WAAW,aAAa;",
+  "sourcesContent": ["import React from \"react\";\nimport Input, { InputProps } from \"../BaseInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport styled from \"styled-components\";\n\nconst MaxButton = styled.button`\n  color: ${p => p.theme.colors.neutral.c00};\n  background-color: ${p => p.theme.colors.neutral.c100};\n  border-radius: 100px;\n  border-width: 0;\n  padding-left: 14px;\n  padding-right: 14px;\n  height: 100%;\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ${p => p.theme.colors.neutral.c30};\n    color: ${p => p.theme.colors.neutral.c50};\n    cursor: unset;\n  }\n`;\n\nconst Legend = styled(Text)`\n  color: ${p => p.theme.colors.neutral.c70};\n\n  &[data-disabled=\"true\"] {\n    color: ${p => p.theme.colors.neutral.c50};\n  }\n`;\n\nfunction QuantityInput(\n  {\n    onMaxClick,\n    price,\n    ...inputProps\n  }: InputProps & {\n    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;\n    price?: string;\n  },\n  ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n  return (\n    <Input\n      ref={ref}\n      {...inputProps}\n      type={\"number\"}\n      renderRight={\n        <FlexBox alignItems={\"center\"} justifyContent={\"center\"} pr={\"3px\"} py={\"3px\"}>\n          {price && (\n            <Legend variant=\"body\" pr={\"12px\"} data-disabled={inputProps.disabled}>\n              {price}\n            </Legend>\n          )}\n          <MaxButton onClick={onMaxClick} disabled={inputProps.disabled}>\n            <Text variant=\"tiny\" color=\"currentColor\">\n              Max\n            </Text>\n          </MaxButton>\n        </FlexBox>\n      }\n    />\n  );\n}\n\nexport default React.forwardRef(QuantityInput);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAkC;AAClC,kBAAoB;AACpB,kBAAiB;AACjB,+BAAmB;AAEnB,MAAM,YAAY,yBAAAA,QAAO;AAAA,WACd,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS1B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,aACvC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKzC,MAAM,aAAS,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACf,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAG1B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIzC,SAAS,cACP;AAAA,EACE;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIA,KACa;AACb,SACE,6BAAAC,QAAA;AAAA,IAAC,iBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,aACE,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAY,UAAU,gBAAgB,UAAU,IAAI,OAAO,IAAI,SACrE,SACC,6BAAAF,QAAA,cAAC,UAAO,SAAQ,QAAO,IAAI,QAAQ,iBAAe,WAAW,YAC1D,KACH,GAEF,6BAAAA,QAAA,cAAC,aAAU,SAAS,YAAY,UAAU,WAAW,YACnD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,SAAQ,QAAO,OAAM,kBAAe,KAE1C,CACF,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,wBAAQ,aAAAC,QAAM,WAAW,aAAa;",
   "names": ["styled", "Text", "React", "Input", "FlexBox"]
 }

package/lib/cjs/components/form/Radio/Radio.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Radio/Radio.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Radio from \"./index\";\nimport type { RadioProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n  title: \"Form/Radio\",\n  argTypes: {\n    currentValue: {\n      type: \"text\",\n      description:\n        \"This is the current value. A RadioItem will be checked if its value matches this value.\",\n      control: false,\n    },\n    name: {\n      type: \"text\",\n      description: \"The name property is used to link all RadioItems\",\n      control: false,\n    },\n    onChange: {\n      control: false,\n      description: \"The callback receives the value of the pressed RadioItem as parameter\",\n      action: \"clicked\",\n    },\n  },\n};\n\nconst TemplateElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.Element label=\"Blue squad\" value=\"blue\" variant=\"default\" />\n      <Radio.Element label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element label=\"Core squad\" value=\"core\" variant=\"error\" />\n      <Radio.Element label=\"Orange squad\" value=\"orange\" variant=\"default\" disabled />\n      <Radio.Element label=\"Purple squad\" value=\"purple\" variant=\"default\" disabled />\n    </Radio>\n  );\n};\n\nconst TemplateOutlinedElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"20px\" }}\n    >\n      <Radio.Element outlined label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element outlined label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element outlined label=\"Core squad\" value=\"core\" variant=\"error\" />\n    </Radio>\n  );\n};\n\nexport const RadioGroup: StoryTemplate<RadioProps> = TemplateElement.bind({\n  currentValue: \"purple\",\n});\n\nexport const RadioGroupOutlined: StoryTemplate<RadioProps> = TemplateOutlinedElement.bind({});\n\nconst TemplateListElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = (value) => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.ListElement\n        label=\"Ledger Verse\"\n        value=\"ledgerVerse\"\n        disabled\n        containerProps={{ flex: 1 }}\n      />\n      <Radio.ListElement label=\"Live Monad\" value=\"liveMonad\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Hub\" value=\"liveHub\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Meta\" value=\"liveMeta\" containerProps={{ flex: 1 }} />\n    </Radio>\n  );\n};\n\nexport const RadioGroupList: StoryTemplate<RadioProps> = TemplateListElement.bind({});\n\n// Set the disabled item to be checked on mount\nRadioGroup.args = { currentValue: \"purple\" };\nRadioGroupList.args = { currentValue: \"liveHub\" };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Radio from \"./index\";\nimport type { RadioProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n  title: \"Form/Radio\",\n  argTypes: {\n    currentValue: {\n      type: \"text\",\n      description:\n        \"This is the current value. A RadioItem will be checked if its value matches this value.\",\n      control: false,\n    },\n    name: {\n      type: \"text\",\n      description: \"The name property is used to link all RadioItems\",\n      control: false,\n    },\n    onChange: {\n      control: false,\n      description: \"The callback receives the value of the pressed RadioItem as parameter\",\n      action: \"clicked\",\n    },\n  },\n};\n\nconst TemplateElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = value => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.Element label=\"Blue squad\" value=\"blue\" variant=\"default\" />\n      <Radio.Element label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element label=\"Core squad\" value=\"core\" variant=\"error\" />\n      <Radio.Element label=\"Orange squad\" value=\"orange\" variant=\"default\" disabled />\n      <Radio.Element label=\"Purple squad\" value=\"purple\" variant=\"default\" disabled />\n    </Radio>\n  );\n};\n\nconst TemplateOutlinedElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = value => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"20px\" }}\n    >\n      <Radio.Element outlined label=\"Black squad\" value=\"black\" variant=\"main\" />\n      <Radio.Element outlined label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n      <Radio.Element outlined label=\"Core squad\" value=\"core\" variant=\"error\" />\n    </Radio>\n  );\n};\n\nexport const RadioGroup: StoryTemplate<RadioProps> = TemplateElement.bind({\n  currentValue: \"purple\",\n});\n\nexport const RadioGroupOutlined: StoryTemplate<RadioProps> = TemplateOutlinedElement.bind({});\n\nconst TemplateListElement = (args: RadioProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n  const handleChange: RadioProps[\"onChange\"] = value => {\n    // toggle the checked value on click to simulate onChange\n    updateArgs({ currentValue: value });\n    // trigger the storybook action\n    currentArgs.onChange(value);\n  };\n  return (\n    <Radio\n      {...args}\n      onChange={handleChange}\n      containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n    >\n      <Radio.ListElement\n        label=\"Ledger Verse\"\n        value=\"ledgerVerse\"\n        disabled\n        containerProps={{ flex: 1 }}\n      />\n      <Radio.ListElement label=\"Live Monad\" value=\"liveMonad\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Hub\" value=\"liveHub\" containerProps={{ flex: 1 }} />\n      <Radio.ListElement label=\"Live Meta\" value=\"liveMeta\" containerProps={{ flex: 1 }} />\n    </Radio>\n  );\n};\n\nexport const RadioGroupList: StoryTemplate<RadioProps> = TemplateListElement.bind({});\n\n// Set the disabled item to be checked on mount\nRadioGroup.args = { currentValue: \"purple\" };\nRadioGroupList.args = { currentValue: \"liveHub\" };\n"],
+  "mappings": "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",
   "names": ["React", "Radio"]
 }

package/lib/cjs/components/form/Radio/RadioElement.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
-  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});\n  width: 266px;\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c50, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c50, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${(p) => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c50};\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${(p) => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${(p) => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${(p) => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${(p) => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.success.c50};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.success.c50};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${(p) => p.theme.colors.error.c50};\n    }\n    :hover {\n      border-color: ${(p) => p.theme.colors.error.c50};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${(p) => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n  color: var(--ledger-ui-checkbox-color, ${p => p.theme.colors.neutral.c100});\n  width: 266px;\n`;\n\nconst Input = styled.input`\n  --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c50};\n  --ledger-ui-checkbox-size: 1.25rem;\n\n  position: relative;\n  appearance: none;\n  width: var(--ledger-ui-checkbox-size);\n  height: var(--ledger-ui-checkbox-size);\n  flex-shrink: 0;\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  border: 1px solid var(--ledger-ui-checkbox-color);\n  cursor: pointer;\n\n  &:checked::before {\n    position: absolute;\n    display: block;\n    content: \" \";\n    background-color: var(--ledger-ui-checkbox-color);\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    margin: auto;\n    border-radius: 2px;\n    width: calc(var(--ledger-ui-checkbox-size) / 2);\n    height: calc(var(--ledger-ui-checkbox-size) / 2);\n  }\n\n  &[data-variant=\"default\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};\n    }\n    :active {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};\n    }\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};\n    }\n    :active,\n    :checked,\n    :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    :hover,\n    :checked:not([disabled]),\n    :checked:not([disabled]) + ${Label}, :focus {\n      --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};\n    }\n    :focus {\n      box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};\n    }\n  }\n\n  &[data-variant]:disabled {\n    --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n    background-color: ${p => p.theme.colors.neutral.c30};\n  }\n`;\n\nconst outlinedCSS = css`\n  padding: 20px;\n  border: 1px solid ${p => p.theme.colors.neutral.c50};\n  border-radius: ${p => p.theme.radii[2]}px;\n  &[data-variant=\"default\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.primary.c90};\n    }\n    &[data-checked] :active {\n      border-color: ${p => p.theme.colors.primary.c100};\n    }\n    :focus {\n      border-color: ${p => p.theme.colors.primary.c80};\n    }\n  }\n\n  &[data-variant=\"main\"] {\n    :hover {\n      border-color: ${p => p.theme.colors.neutral.c90};\n    }\n    &[data-checked],\n    :active :focus {\n      border-color: ${p => p.theme.colors.neutral.c100};\n    }\n  }\n\n  &[data-variant=\"success\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.success.c50};\n    }\n  }\n\n  &[data-variant=\"error\"] {\n    &[data-checked]:not([disabled]) {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n    :hover {\n      border-color: ${p => p.theme.colors.error.c50};\n    }\n  }\n\n  &[data-variant]:disabled {\n    border-color: ${p => p.theme.colors.neutral.c40};\n    cursor: unset;\n  }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n  outlined?: boolean;\n}>`\n  display: inline-flex;\n  column-gap: 0.75rem;\n  align-items: center;\n  cursor: pointer;\n  &[data-variant]:disabled {\n    cursor: unset;\n  }\n  ${p => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n  variant?: \"default\" | \"main\" | \"success\" | \"error\";\n  label: string;\n  outlined?: boolean;\n};\n\nconst Element = ({\n  label,\n  value,\n  disabled,\n  outlined,\n  variant = \"default\",\n  ...props\n}: RadioElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioElement\n      data-variant={variant}\n      {...(isChecked ? { \"data-checked\": true } : {})}\n      outlined={outlined}\n    >\n      <Input\n        type=\"radio\"\n        data-variant={variant}\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Label variant=\"paragraph\">{label}</Label>\n    </RadioElement>\n  );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,+BAA4B;AAE5B,qBAAqB;AACrB,kBAAiB;AACjB,mBAA6B;AAE7B,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI;AAAA,2CACkB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIvE,MAAM,QAAQ,yBAAAD,QAAO;AAAA,gCACW,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQzC,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAqBN,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,oCAG5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,oCAI5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,oCAG5B,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAM1C,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,oCAK5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,oCAG5B,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAO7C;AAAA,oCACG,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,oCAG5B,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAO7C;AAAA,oCACG,OAAK,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,oCAG1B,WAAK,qBAAK,EAAE,MAAM,OAAO,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,kCAK1C,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEtC,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIpD,MAAM,cAAc;AAAA;AAAA,sBAEE,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC/B,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,sBAGjB,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAG5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAG5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,sBAG5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM5B,OAAK,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,sBAG1B,OAAK,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK5B,OAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKhD,MAAM,eAAe,yBAAAA,QAAO,MAAM,MAAM,EAAE,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUpD,OAAK,EAAE,YAAY;AAAA;AAWvB,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAsC;AACpC,QAAM,cAAU,yBAAW,yBAAY;AACvC,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM,kDAAkD;AAG7F,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,iBAAiB,OAAO,CAAC,QAAQ,YAAY,CAAC;AAEtF,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,SACE,6BAAAE,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACb,GAAI,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAAA,MAC7C;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,MAAM,QAAQ;AAAA,QACb,GAAG;AAAA;AAAA,IACN;AAAA,IACA,6BAAAA,QAAA,cAAC,SAAM,SAAQ,eAAa,KAAM;AAAA,EACpC;AAEJ;AAEA,QAAQ,cAAc;AACtB,QAAQ,QAAQ;AAEhB,IAAO,uBAAQ;",
   "names": ["styled", "Text", "React"]
 }

package/lib/cjs/components/form/Radio/RadioListElement.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Radio/RadioListElement.tsx"],
-  "sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n  checked: boolean;\n  disabled?: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n  color: ${(p) =>\n    p.disabled\n      ? p.theme.colors.neutral.c50\n      : p.checked\n      ? p.theme.colors.primary.c90\n      : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n  cursor: ${(p) => (p.disabled ? \"\" : \"pointer\")};\n  justify-content: center;\n  align-items: center;\n  background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n  border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n  border-radius: ${(p) => `${p.theme.radii[2]}px`};\n  padding: ${(p) => p.theme.space[6]}px;\n\n  :hover {\n    border-color: ${(p) => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n  }\n`;\n\nconst Input = styled.input`\n  position: relative;\n  appearance: none;\n  &:focus ~ ${Container} {\n    box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n  }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n  display: inline-flex;\n  align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n  /**\n   * The string or component that will be rendered as label of this radio element\n   * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n   * */\n  label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n  /** Flex props to pass to the container */\n  containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n  label,\n  value,\n  disabled,\n  containerProps,\n  ...props\n}: RadioListElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  const isChecked = context.currentValue === value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioListElement>\n      <Input\n        type=\"radio\"\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Container checked={isChecked} disabled={disabled} {...containerProps}>\n        {typeof label === \"string\" ? (\n          <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n            {label}\n          </Label>\n        ) : (\n          React.createElement(label, { checked: isChecked, disabled })\n        )}\n      </Container>\n    </RadioListElement>\n  );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\nListElement.Label = Label;\n\nexport default ListElement;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACrB,CAAC,MACR,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,gBAAY,yBAAAD,SAAO,YAAAE,OAAI;AAAA,YACjB,CAAC,MAAO,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGhB,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBACjD,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3E,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,oBAGf,CAAC,MAAO,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlF,MAAM,QAAQ,yBAAAF,QAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,CAAC,UAAM,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAI9E,MAAM,mBAAmB,yBAAAA,QAAO,MAAM,MAAM,EAAE,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAiB5D,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0C;AACxC,QAAM,cAAU,yBAAW,yBAAY;AACvC,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM,kDAAkD;AAE7F,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,SACE,6BAAAG,QAAA,cAAC,wBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA;AAAA,EACN,GACA,6BAAAA,QAAA,cAAC,aAAU,SAAS,WAAW,UAAqB,GAAG,kBACpD,OAAO,UAAU,WAChB,6BAAAA,QAAA,cAAC,SAAM,SAAS,WAAW,UAAoB,SAAQ,eACpD,KACH,IAEA,aAAAA,QAAM,cAAc,OAAO,EAAE,SAAS,WAAW,SAAS,CAAC,CAE/D,CACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,YAAY,QAAQ;AAEpB,IAAO,2BAAQ;",
+  "sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n  checked: boolean;\n  disabled?: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n  color: ${p =>\n    p.disabled\n      ? p.theme.colors.neutral.c50\n      : p.checked\n      ? p.theme.colors.primary.c90\n      : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n  cursor: ${p => (p.disabled ? \"\" : \"pointer\")};\n  justify-content: center;\n  align-items: center;\n  background-color: ${p => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n  border: 1px solid ${p => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n  border-radius: ${p => `${p.theme.radii[2]}px`};\n  padding: ${p => p.theme.space[6]}px;\n\n  :hover {\n    border-color: ${p => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n  }\n`;\n\nconst Input = styled.input`\n  position: relative;\n  appearance: none;\n  &:focus ~ ${Container} {\n    box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n  }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n  display: inline-flex;\n  align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n  /**\n   * The string or component that will be rendered as label of this radio element\n   * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n   * */\n  label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n  /** Flex props to pass to the container */\n  containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n  label,\n  value,\n  disabled,\n  containerProps,\n  ...props\n}: RadioListElementProps): JSX.Element => {\n  const context = useContext(RadioContext);\n  if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n  const isChecked = context.currentValue === value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    context.onChange(event.target.value);\n  };\n\n  return (\n    <RadioListElement>\n      <Input\n        type=\"radio\"\n        checked={isChecked}\n        disabled={disabled}\n        onChange={handleChange}\n        value={value}\n        name={context.name}\n        {...props}\n      />\n      <Container checked={isChecked} disabled={disabled} {...containerProps}>\n        {typeof label === \"string\" ? (\n          <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n            {label}\n          </Label>\n        ) : (\n          React.createElement(label, { checked: isChecked, disabled })\n        )}\n      </Container>\n    </RadioListElement>\n  );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\nListElement.Label = Label;\n\nexport default ListElement;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACrB,OACP,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,gBAAY,yBAAAD,SAAO,YAAAE,OAAI;AAAA,YACjB,OAAM,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGd,OAAM,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBAC/C,OAAM,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBACzE,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC7B,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,oBAGb,OAAM,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIhF,MAAM,QAAQ,yBAAAF,QAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAI5E,MAAM,mBAAmB,yBAAAA,QAAO,MAAM,MAAM,EAAE,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAiB5D,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0C;AACxC,QAAM,cAAU,yBAAW,yBAAY;AACvC,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM,kDAAkD;AAE7F,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,SACE,6BAAAG,QAAA,cAAC,wBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA;AAAA,EACN,GACA,6BAAAA,QAAA,cAAC,aAAU,SAAS,WAAW,UAAqB,GAAG,kBACpD,OAAO,UAAU,WAChB,6BAAAA,QAAA,cAAC,SAAM,SAAS,WAAW,UAAoB,SAAQ,eACpD,KACH,IAEA,aAAAA,QAAM,cAAc,OAAO,EAAE,SAAS,WAAW,SAAS,CAAC,CAE/D,CACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,YAAY,QAAQ;AAEpB,IAAO,2BAAQ;",
   "names": ["styled", "Text", "Flex", "React"]
 }

package/lib/cjs/components/form/SelectInput/Control.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/Control.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ControlProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\nimport { InputContainer } from \"../BaseInput\";\nimport { Props as SelectProps } from \"./index\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"control\"]> {\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    border: 0,\n    padding: `0px ${theme.space[7]}px`,\n    boxShadow: \"none\",\n    borderRadius: \"inherit\",\n    background: \"transparent\",\n  });\n}\n\nexport function Control<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: ControlProps<O, M, G>): JSX.Element {\n  const { isFocused, selectProps, children } = props;\n\n  const { isDisabled, error, renderLeft } = selectProps as SelectProps<O, M, G>;\n\n  return (\n    <InputContainer disabled={isDisabled} error={error} focus={isFocused}>\n      <components.Control {...props}>\n        {renderLeft ? renderLeft(props) : null}\n        {children}\n      </components.Control>\n    </InputContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAkE;AAElE,uBAA+B;AAGxB,SAAS,UAId,OAAoE;AACpE,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,OAAO,MAAM,MAAM,CAAC;AAAA,IAC7B,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEO,SAAS,QAId,OAA2C;AAC3C,QAAM,EAAE,WAAW,aAAa,SAAS,IAAI;AAE7C,QAAM,EAAE,YAAY,OAAO,WAAW,IAAI;AAE1C,SACE,6BAAAA,QAAA,cAAC,mCAAe,UAAU,YAAY,OAAc,OAAO,aACzD,6BAAAA,QAAA,cAAC,+BAAW,SAAX,EAAoB,GAAG,SACrB,aAAa,WAAW,KAAK,IAAI,MACjC,QACH,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ControlProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\nimport { InputContainer } from \"../BaseInput\";\nimport { Props as SelectProps } from \"./index\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"control\"]> {\n  return provided => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    border: 0,\n    padding: `0px ${theme.space[7]}px`,\n    boxShadow: \"none\",\n    borderRadius: \"inherit\",\n    background: \"transparent\",\n  });\n}\n\nexport function Control<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: ControlProps<O, M, G>): JSX.Element {\n  const { isFocused, selectProps, children } = props;\n\n  const { isDisabled, error, renderLeft } = selectProps as SelectProps<O, M, G>;\n\n  return (\n    <InputContainer disabled={isDisabled} error={error} focus={isFocused}>\n      <components.Control {...props}>\n        {renderLeft ? renderLeft(props) : null}\n        {children}\n      </components.Control>\n    </InputContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAkE;AAElE,uBAA+B;AAGxB,SAAS,UAId,OAAoE;AACpE,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,OAAO,MAAM,MAAM,CAAC;AAAA,IAC7B,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEO,SAAS,QAId,OAA2C;AAC3C,QAAM,EAAE,WAAW,aAAa,SAAS,IAAI;AAE7C,QAAM,EAAE,YAAY,OAAO,WAAW,IAAI;AAE1C,SACE,6BAAAA,QAAA,cAAC,mCAAe,UAAU,YAAY,OAAc,OAAO,aACzD,6BAAAA,QAAA,cAAC,+BAAW,SAAX,EAAoB,GAAG,SACrB,aAAa,WAAW,KAAK,IAAI,MACjC,QACH,CACF;AAEJ;",
   "names": ["React"]
 }

package/lib/cjs/components/form/SelectInput/DropdownIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/DropdownIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, DropdownIndicatorProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { ChevronBottomMedium, ChevronTopMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"dropdownIndicator\"]> {\n  return (provided) => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\nexport function DropdownIndicator<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: DropdownIndicatorProps<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const { isDisabled } = props.selectProps;\n\n  const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;\n  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;\n\n  return (\n    <components.DropdownIndicator {...props}>\n      <Text as=\"div\" color={color} style={{ display: \"flex\" }}>\n        <ChevronIcon size={12} />\n      </Text>\n    </components.DropdownIndicator>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAA4E;AAC5E,+BAAyB;AACzB,kBAAiB;AACjB,IAAAA,gBAAsD;AAE/C,SAAS,YAI6C;AAC3D,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAEO,SAAS,kBAId,OAAqD;AACrD,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,WAAW,IAAI,MAAM;AAE7B,QAAM,cAAc,MAAM,YAAY,aAAa,iCAAmB;AACtE,QAAM,QAAQ,aAAa,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAE3E,SACE,6BAAAC,QAAA,cAAC,+BAAW,mBAAX,EAA8B,GAAG,SAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,IAAG,OAAM,OAAc,OAAO,EAAE,SAAS,OAAO,KACpD,6BAAAD,QAAA,cAAC,eAAY,MAAM,IAAI,CACzB,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, DropdownIndicatorProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { ChevronBottomMedium, ChevronTopMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"dropdownIndicator\"]> {\n  return provided => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\nexport function DropdownIndicator<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: DropdownIndicatorProps<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const { isDisabled } = props.selectProps;\n\n  const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;\n  const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;\n\n  return (\n    <components.DropdownIndicator {...props}>\n      <Text as=\"div\" color={color} style={{ display: \"flex\" }}>\n        <ChevronIcon size={12} />\n      </Text>\n    </components.DropdownIndicator>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAA4E;AAC5E,+BAAyB;AACzB,kBAAiB;AACjB,IAAAA,gBAAsD;AAE/C,SAAS,YAI6C;AAC3D,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAEO,SAAS,kBAId,OAAqD;AACrD,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,WAAW,IAAI,MAAM;AAE7B,QAAM,cAAc,MAAM,YAAY,aAAa,iCAAmB;AACtE,QAAM,QAAQ,aAAa,MAAM,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ;AAE3E,SACE,6BAAAC,QAAA,cAAC,+BAAW,mBAAX,EAA8B,GAAG,SAChC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,IAAG,OAAM,OAAc,OAAO,EAAE,SAAS,OAAO,KACpD,6BAAAD,QAAA,cAAC,eAAY,MAAM,IAAI,CACzB,CACF;AAEJ;",
   "names": ["import_react", "React", "Text"]
 }

package/lib/cjs/components/form/SelectInput/MenuList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/MenuList.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, MenuListProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"menuList\"]> {\n  const isLight = theme.colors.type === \"light\";\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space[2],\n    padding: theme.space[3],\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`,\n    background: theme.colors.neutral[isLight ? \"c00\" : \"c20\"],\n    color: theme.colors.neutral.c80,\n  });\n}\n\nexport function MenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): JSX.Element {\n  return <components.MenuList {...props}>{props.children}</components.MenuList>;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAmE;AAG5D,SAAS,UAId,OAAqE;AACrE,QAAM,UAAU,MAAM,OAAO,SAAS;AACtC,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM,CAAC;AAAA,IAClB,SAAS,MAAM,MAAM,CAAC;AAAA,IACtB,QAAQ,aAAa,MAAM,OAAO,QAAQ,UAAU,QAAQ,KAAK;AAAA,IACjE,cAAc;AAAA,IACd,WAAW,8BAA8B,UAAU,OAAO;AAAA,IAC1D,YAAY,MAAM,OAAO,QAAQ,UAAU,QAAQ,KAAK;AAAA,IACxD,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACF;AAEO,SAAS,SAId,OAA4C;AAC5C,SAAO,6BAAAA,QAAA,cAAC,+BAAW,UAAX,EAAqB,GAAG,SAAQ,MAAM,QAAS;AACzD;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, MenuListProps } from \"react-select\";\nimport { DefaultTheme } from \"styled-components\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>[\"menuList\"]> {\n  const isLight = theme.colors.type === \"light\";\n  return provided => ({\n    ...provided,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: theme.space[2],\n    padding: theme.space[3],\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`,\n    background: theme.colors.neutral[isLight ? \"c00\" : \"c20\"],\n    color: theme.colors.neutral.c80,\n  });\n}\n\nexport function MenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): JSX.Element {\n  return <components.MenuList {...props}>{props.children}</components.MenuList>;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAmE;AAG5D,SAAS,UAId,OAAqE;AACrE,QAAM,UAAU,MAAM,OAAO,SAAS;AACtC,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,MAAM,MAAM,CAAC;AAAA,IAClB,SAAS,MAAM,MAAM,CAAC;AAAA,IACtB,QAAQ,aAAa,MAAM,OAAO,QAAQ,UAAU,QAAQ,KAAK;AAAA,IACjE,cAAc;AAAA,IACd,WAAW,8BAA8B,UAAU,OAAO;AAAA,IAC1D,YAAY,MAAM,OAAO,QAAQ,UAAU,QAAQ,KAAK;AAAA,IACxD,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACF;AAEO,SAAS,SAId,OAA4C;AAC5C,SAAO,6BAAAA,QAAA,cAAC,+BAAW,UAAX,EAAqB,GAAG,SAAQ,MAAM,QAAS;AACzD;",
   "names": ["React"]
 }

package/lib/cjs/components/form/SelectInput/Option.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/Option.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, OptionProps } from \"react-select\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"option\"]> {\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 0,\n    cursor: \"inherit\",\n    background: \"inherit\",\n    color: \"inherit\",\n    boxShadow: \"none\",\n    border: \"none\",\n    \":active\": undefined,\n  });\n}\n\nconst Wrapper = styled(Text).attrs({ as: \"div\" })<{\n  disabled: boolean;\n  selected: boolean;\n  focus: boolean;\n}>`\n  height: 48px;\n  display: flex;\n  padding: 0 ${(p) => p.theme.space[5]}px;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  ${(p) => (!p.disabled ? \"cursor: pointer;\" : \"\")}\n  ${(props) => {\n    const { theme, selected, focus, disabled } = props;\n    if (selected) {\n      return `\n        color: ${theme.colors.primary.c90};\n        background: ${theme.colors.primary.c20};\n      `;\n    }\n    if (disabled) {\n      return `\n        color: ${theme.colors.neutral.c50};\n        ${\n          focus\n            ? `&:not(:active) {\n            background: ${theme.colors.neutral.c20};\n          }`\n            : \"\"\n        }\n      `;\n    }\n    return `\n      color: ${theme.colors.neutral.c80};\n      &:hover {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c10};\n      }\n      &:active {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c30};\n      }\n      ${\n        focus\n          ? `&:not(:active) {\n          color: ${theme.colors.neutral.c100};\n          background: ${theme.colors.primary.c10};\n        }`\n          : \"\"\n      }\n    `;\n  }};\n`;\n\nexport type ExtraProps<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<OptionProps<O, M, G>>) => React.ReactNode;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = OptionProps<O, M, G> & ExtraProps<O, M, G>;\nexport function Option<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: Props<O, M, G>): JSX.Element {\n  const { render, children, ...innerProps } = props;\n\n  return (\n    <Wrapper\n      disabled={props.isDisabled}\n      selected={props.isSelected}\n      focus={props.isFocused}\n      fontWeight=\"semiBold\"\n      variant={\"paragraph\"}\n    >\n      <components.Option {...innerProps}>{render ? render(props) : children}</components.Option>\n    </Wrapper>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAiE;AACjE,+BAAmB;AACnB,kBAAiB;AAEV,SAAS,YAIkC;AAChD,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AACF;AAEA,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,IAAI,MAAM,CAAC;AAAA;AAAA;AAAA,eAOjC,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,mBAClB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,IACxC,CAAC,MAAO,CAAC,EAAE,WAAW,qBAAqB;AAAA,IAC3C,CAAC,UAAU;AACX,QAAM,EAAE,OAAO,UAAU,OAAO,SAAS,IAAI;AAC7C,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEvC;AACA,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,UAE5B,QACI;AAAA,0BACY,MAAM,OAAO,QAAQ;AAAA,eAEjC;AAAA;AAAA,EAGV;AACA,SAAO;AAAA,eACI,MAAM,OAAO,QAAQ;AAAA;AAAA,iBAEnB,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAG1B,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA,QAGnC,QACI;AAAA,mBACO,MAAM,OAAO,QAAQ;AAAA,wBAChB,MAAM,OAAO,QAAQ;AAAA,aAEjC;AAAA;AAGV;AAAA;AAgBK,SAAS,OAId,OAAoC;AACpC,QAAM,EAAE,QAAQ,UAAU,GAAG,WAAW,IAAI;AAE5C,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,OAAO,MAAM;AAAA,MACb,YAAW;AAAA,MACX,SAAS;AAAA;AAAA,IAET,6BAAAA,QAAA,cAAC,+BAAW,QAAX,EAAmB,GAAG,cAAa,SAAS,OAAO,KAAK,IAAI,QAAS;AAAA,EACxE;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, OptionProps } from \"react-select\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): NonNullable<StylesConfig<O, M, G>[\"option\"]> {\n  return provided => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 0,\n    cursor: \"inherit\",\n    background: \"inherit\",\n    color: \"inherit\",\n    boxShadow: \"none\",\n    border: \"none\",\n    \":active\": undefined,\n  });\n}\n\nconst Wrapper = styled(Text).attrs({ as: \"div\" })<{\n  disabled: boolean;\n  selected: boolean;\n  focus: boolean;\n}>`\n  height: 48px;\n  display: flex;\n  padding: 0 ${p => p.theme.space[5]}px;\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  ${p => (!p.disabled ? \"cursor: pointer;\" : \"\")}\n  ${props => {\n    const { theme, selected, focus, disabled } = props;\n    if (selected) {\n      return `\n        color: ${theme.colors.primary.c90};\n        background: ${theme.colors.primary.c20};\n      `;\n    }\n    if (disabled) {\n      return `\n        color: ${theme.colors.neutral.c50};\n        ${\n          focus\n            ? `&:not(:active) {\n            background: ${theme.colors.neutral.c20};\n          }`\n            : \"\"\n        }\n      `;\n    }\n    return `\n      color: ${theme.colors.neutral.c80};\n      &:hover {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c10};\n      }\n      &:active {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c30};\n      }\n      ${\n        focus\n          ? `&:not(:active) {\n          color: ${theme.colors.neutral.c100};\n          background: ${theme.colors.primary.c10};\n        }`\n          : \"\"\n      }\n    `;\n  }};\n`;\n\nexport type ExtraProps<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<OptionProps<O, M, G>>) => React.ReactNode;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = OptionProps<O, M, G> & ExtraProps<O, M, G>;\nexport function Option<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: Props<O, M, G>): JSX.Element {\n  const { render, children, ...innerProps } = props;\n\n  return (\n    <Wrapper\n      disabled={props.isDisabled}\n      selected={props.isSelected}\n      focus={props.isFocused}\n      fontWeight=\"semiBold\"\n      variant={\"paragraph\"}\n    >\n      <components.Option {...innerProps}>{render ? render(props) : children}</components.Option>\n    </Wrapper>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAiE;AACjE,+BAAmB;AACnB,kBAAiB;AAEV,SAAS,YAIkC;AAChD,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AACF;AAEA,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,IAAI,MAAM,CAAC;AAAA;AAAA;AAAA,eAOjC,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,mBAChB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,IACtC,OAAM,CAAC,EAAE,WAAW,qBAAqB;AAAA,IACzC,WAAS;AACT,QAAM,EAAE,OAAO,UAAU,OAAO,SAAS,IAAI;AAC7C,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEvC;AACA,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,UAE5B,QACI;AAAA,0BACY,MAAM,OAAO,QAAQ;AAAA,eAEjC;AAAA;AAAA,EAGV;AACA,SAAO;AAAA,eACI,MAAM,OAAO,QAAQ;AAAA;AAAA,iBAEnB,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAG1B,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA,QAGnC,QACI;AAAA,mBACO,MAAM,OAAO,QAAQ;AAAA,wBAChB,MAAM,OAAO,QAAQ;AAAA,aAEjC;AAAA;AAGV;AAAA;AAgBK,SAAS,OAId,OAAoC;AACpC,QAAM,EAAE,QAAQ,UAAU,GAAG,WAAW,IAAI;AAE5C,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,OAAO,MAAM;AAAA,MACb,YAAW;AAAA,MACX,SAAS;AAAA;AAAA,IAET,6BAAAA,QAAA,cAAC,+BAAW,QAAX,EAAmB,GAAG,cAAa,SAAS,OAAO,KAAK,IAAI,QAAS;AAAA,EACxE;AAEJ;",
   "names": ["styled", "Text", "React"]
 }

package/lib/cjs/components/form/SelectInput/Select.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/Select.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { OptionProps, ValueContainerProps } from \"react-select\";\n\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport SearchMedium from \"@ledgerhq/icons-ui/react/SearchMedium\";\nimport SelectInput, { Props } from \"./index\";\nimport { Option } from \"./Option\";\nimport { VirtualMenuList } from \"./VirtualMenuList\";\nimport { ValueContainer } from \"./ValueContainer\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst description = `\n### A styled Select Input control\n\n> This component is based on [react-select](https://react-select.com/). Please refer to the [documentation](https://react-select.com/props) for an exhaustive list of available props.\n\n## Usage\n\n\\`\\`\\`jsx\n\nimport { SelectInput } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nBasically the component accepts a list of selectable options and a callback.\n\n\\`\\`\\`jsx\n// Minimal working example\n\nconst [value, setValue] = React.useState()\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n]\n\n<SelectInput\n  options={options}\n  value={value}\n  onChange={setValue}\n/>\n\\`\\`\\`\n\n## Portaling\n\nThe opened menu is not rendered inside a portal by default.\n\n- Use the \\`menuPortalTarget\\` [prop](https://react-select.com/advanced#portaling) to specify a node to root the portal.\n- To specify a custom z-index you will need to override the \\`menuPortal\\` style.\n\n\\`\\`\\`jsx\n<SelectInput\n  menuPortalTarget={document.body}\n  styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}\n/>\n\\`\\`\\`\n\n## Extending Styles\n\nreact-select has built in support for [overriding styles](https://react-select.com/styles#provided-styles-and-state).\n\n#### Using the \\`extendStyles\\` props\n\nSelectInput contains custom built-in styles to integrate the select control with the rest of the Ledger design.\n\nThe \\`extendStyles\\` prop is a function that will allow you to compose new styles.\nThe function argument is a map between the react-select provided styles and additional ones.\n\n\\`\\`\\`jsx\n/*\n  The \"styles\" argument is an object containing component names as keys and functions as values.\n  These functions take as arguments the styles provided by react-select and return an object of additional styles.\n*/\nconst extendStyles = (styles) => ({\n  ...styles,\n  menuPortal: (provided) => {\n    return {\n      // \"styles.menuPortal\" will exist if SelectInput has custom styles for this component.\n      // Otherwise, use the react-select provided ones.\n      ...((styles.menuPortal && styles.menuPortal(provided)) || { ...provided }),\n      // Then extend the output with your own styles!\n      zIndex: 2,\n    };\n  },\n});\n\n<SelectInput extendStyles={extendStyles} />\n\\`\\`\\`\n\n#### Using the \\`styles\\` prop\n\nTo completely override the SelectInput styles, use the \\`style\\` prop.\n\n\\`\\`\\`jsx\n// The \"provided\" argument will only contain the base react-select styles.\nconst styles = { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }\n\n<SelectInput styles={styles} />\n\\`\\`\\`\n\n## Extending Components\n\nreact-select has built in support for [extending components](https://react-select.com/components).\n\nTo override components use the \\`components\\` prop:\n\n\\`\\`\\`jsx\n\n<SelectInput components={{ Option: ColorOption, ValueContainer: ColorValueContainer }} />\n\n\\`\\`\\`\n\nIf you would like to re-use inner SelectInput components you can import them like so:\n\n\\`\\`\\`jsx\n// Import them as modules\nimport * as DropdownIndicatorModule from \"@ledgerhq/react-ui/components/form/SelectInput/DropdownIndicator\";\nimport * as ValueContainerModule from \"@ledgerhq/react-ui/components/form/SelectInput/ValueContainer\";\nimport * as ControlModule from \"@ledgerhq/react-ui/components/form/SelectInput/Control\";\nimport * as MenuListModule from \"@ledgerhq/react-ui/components/form/SelectInput/MenuList\";\nimport * as OptionModule from \"@ledgerhq/react-ui/components/form/SelectInput/Option\";\n\n// Then each module contains the component definition and the associated style\nconst { DropdownIndicator, getStyles } = DropdownIndicatorModule\n\n<SelectInput\n  components={{dropdownIndicator: DropdownIndicator}}\n  styles={{dropdownIndicator: getStyles}}\n/>\n\\`\\`\\`\n\n## Sandbox\n\nThe following advanced example showcases how to override components and styles and disable elements.\n`;\n\nexport default {\n  title: \"Form/Input/Select\",\n  component: SelectInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n  },\n  parameters: {\n    docs: {\n      description: { component: description },\n    },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst cssColors = [\n  \"aliceblue\",\n  \"antiquewhite\",\n  \"aqua\",\n  \"aquamarine\",\n  \"azure\",\n  \"beige\",\n  \"bisque\",\n  \"black\",\n  \"blanchedalmond\",\n  \"blue\",\n  \"blueviolet\",\n  \"brown\",\n  \"burlywood\",\n  \"cadetblue\",\n  \"chartreuse\",\n  \"chocolate\",\n  \"coral\",\n  \"cornflowerblue\",\n  \"cornsilk\",\n  \"crimson\",\n  \"cyan\",\n  \"darkblue\",\n  \"darkcyan\",\n  \"darkgoldenrod\",\n  \"darkgray\",\n  \"darkgreen\",\n  \"darkgrey\",\n  \"darkkhaki\",\n  \"darkmagenta\",\n  \"darkolivegreen\",\n  \"darkorange\",\n  \"darkorchid\",\n  \"darkred\",\n  \"darksalmon\",\n  \"darkseagreen\",\n  \"darkslateblue\",\n  \"darkslategray\",\n  \"darkslategrey\",\n  \"darkturquoise\",\n  \"darkviolet\",\n  \"deeppink\",\n  \"deepskyblue\",\n  \"dimgray\",\n  \"dimgrey\",\n  \"dodgerblue\",\n  \"firebrick\",\n  \"floralwhite\",\n  \"forestgreen\",\n  \"fuchsia\",\n  \"gainsboro\",\n  \"ghostwhite\",\n  \"gold\",\n  \"goldenrod\",\n  \"gray\",\n  \"green\",\n  \"greenyellow\",\n  \"grey\",\n  \"honeydew\",\n  \"hotpink\",\n  \"indianred\",\n  \"indigo\",\n  \"ivory\",\n  \"khaki\",\n  \"lavender\",\n  \"lavenderblush\",\n  \"lawngreen\",\n  \"lemonchiffon\",\n  \"lightblue\",\n  \"lightcoral\",\n  \"lightcyan\",\n  \"lightgoldenrodyellow\",\n  \"lightgray\",\n  \"lightgreen\",\n  \"lightgrey\",\n  \"lightpink\",\n  \"lightsalmon\",\n  \"lightseagreen\",\n  \"lightskyblue\",\n  \"lightslategray\",\n  \"lightslategrey\",\n  \"lightsteelblue\",\n  \"lightyellow\",\n  \"lime\",\n  \"limegreen\",\n  \"linen\",\n  \"magenta\",\n  \"maroon\",\n  \"mediumaquamarine\",\n  \"mediumblue\",\n  \"mediumorchid\",\n  \"mediumpurple\",\n  \"mediumseagreen\",\n  \"mediumslateblue\",\n  \"mediumspringgreen\",\n  \"mediumturquoise\",\n  \"mediumvioletred\",\n  \"midnightblue\",\n  \"mintcream\",\n  \"mistyrose\",\n  \"moccasin\",\n  \"navajowhite\",\n  \"navy\",\n  \"oldlace\",\n  \"olive\",\n  \"olivedrab\",\n  \"orange\",\n  \"orangered\",\n  \"orchid\",\n  \"palegoldenrod\",\n  \"palegreen\",\n  \"paleturquoise\",\n  \"palevioletred\",\n  \"papayawhip\",\n  \"peachpuff\",\n  \"peru\",\n  \"pink\",\n  \"plum\",\n  \"powderblue\",\n  \"purple\",\n  \"red\",\n  \"rosybrown\",\n  \"royalblue\",\n  \"saddlebrown\",\n  \"salmon\",\n  \"sandybrown\",\n  \"seagreen\",\n  \"seashell\",\n  \"sienna\",\n  \"silver\",\n  \"skyblue\",\n  \"slateblue\",\n  \"slategray\",\n  \"slategrey\",\n  \"snow\",\n  \"springgreen\",\n  \"steelblue\",\n  \"tan\",\n  \"teal\",\n  \"thistle\",\n  \"tomato\",\n  \"turquoise\",\n  \"violet\",\n  \"wheat\",\n  \"white\",\n  \"whitesmoke\",\n  \"yellow\",\n  \"yellowgreen\",\n];\n\ntype SelectItem = { label: string; value: string };\n\nconst colorOptions = cssColors.map((color) => ({ label: color, value: color }));\nconst ColorOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} py={2} alignItems=\"center\">\n          <Flex mr={4} p={4} style={{ background: props.data.value }} />\n          <Flex flex={1} style={{ textTransform: \"capitalize\" }}>\n            {children}\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nconst ColorValueContainer = (props: ValueContainerProps<SelectItem, false>) => {\n  return (\n    <ValueContainer\n      render={({ children }) => (\n        <Grid alignItems=\"center\" style={{ textTransform: \"capitalize\" }}>\n          {children}\n        </Grid>\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const Default: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={colorOptions}\n      value={value}\n      onChange={setValue}\n      placeholder=\"Pick a color\"\n      isClearable\n      isOptionDisabled={(option) => option.value.startsWith(\"b\")}\n      components={{ Option: ColorOption, ValueContainer: ColorValueContainer }}\n      renderLeft={(_) => value && <Flex mr={4} p={4} style={{ background: value.value }} />}\n      menuPortalTarget={document.body}\n      styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}\n      {...args}\n    />\n  );\n};\n\nexport const Minimal: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMinimal.parameters = {\n  docs: {\n    description: {\n      story: \"This is a minimal working example with only required props.\",\n    },\n  },\n};\n\nexport const SideRenders: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n  const theme = useTheme();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      renderLeft={(props) => (\n        <Flex mr={3}>\n          <SearchMedium color={props.isDisabled ? \"currentColor\" : theme.colors.neutral.c70} />\n        </Flex>\n      )}\n      renderRight={() => (\n        <Text mr={4} fontWeight=\"semiBold\" variant={\"body\"} color=\"inherit\">\n          #Right\n        </Text>\n      )}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nSideRenders.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This example has side renders - a magnifying glass icon on the left and custom label on the right.\",\n    },\n  },\n};\n\nconst CustomOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} alignItems=\"center\">\n          <Text fontWeight=\"semiBold\" variant={\"paragraph\"} mr={4}>\n            #Left\n          </Text>\n          <Flex flex={1} justifyContent=\"space-between\">\n            {children}\n            <Text fontWeight=\"semiBold\" variant={\"paragraph\"} color=\"inherit\">\n              #Right\n            </Text>\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nexport const CustomOptions: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ Option: CustomOption }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nCustomOptions.parameters = {\n  docs: {\n    description: {\n      story: \"Here the `Option` component is overriden to display side labels (#Left and #Right).\",\n    },\n  },\n};\n\nexport const DisabledOption: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      isOptionDisabled={(option) => option.value === \"lemon\"}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nDisabledOption.parameters = {\n  docs: {\n    description: {\n      story:\n        \"Using the `isOptionDisabled` prop, options having a value that matches 'lemon' are disabled.\",\n    },\n  },\n};\n\nconst hugeOptions = new Array(10000).fill(0).map((_, i) => ({ label: \"\" + i, value: \"\" + i }));\nexport const VirtualList: StoryTemplate<Props<SelectItem>> = (args) => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={hugeOptions}\n      value={value}\n      onChange={setValue}\n      components={{\n        MenuList: VirtualMenuList,\n      }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nVirtualList.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper.\",\n    },\n  },\n};\n\nexport const MultiSelect: StoryTemplate<Props<SelectItem, true>> = (args) => {\n  const [value, setValue] = React.useState<readonly SelectItem[]>([]);\n\n  return (\n    <SelectInput\n      isMulti\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMultiSelect.parameters = {\n  docs: {\n    description: {\n      story: \"A standard selector with multiselection using the `isMulti` prop.\",\n    },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { OptionProps, ValueContainerProps } from \"react-select\";\n\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport SearchMedium from \"@ledgerhq/icons-ui/react/SearchMedium\";\nimport SelectInput, { Props } from \"./index\";\nimport { Option } from \"./Option\";\nimport { VirtualMenuList } from \"./VirtualMenuList\";\nimport { ValueContainer } from \"./ValueContainer\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst description = `\n### A styled Select Input control\n\n> This component is based on [react-select](https://react-select.com/). Please refer to the [documentation](https://react-select.com/props) for an exhaustive list of available props.\n\n## Usage\n\n\\`\\`\\`jsx\n\nimport { SelectInput } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nBasically the component accepts a list of selectable options and a callback.\n\n\\`\\`\\`jsx\n// Minimal working example\n\nconst [value, setValue] = React.useState()\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n]\n\n<SelectInput\n  options={options}\n  value={value}\n  onChange={setValue}\n/>\n\\`\\`\\`\n\n## Portaling\n\nThe opened menu is not rendered inside a portal by default.\n\n- Use the \\`menuPortalTarget\\` [prop](https://react-select.com/advanced#portaling) to specify a node to root the portal.\n- To specify a custom z-index you will need to override the \\`menuPortal\\` style.\n\n\\`\\`\\`jsx\n<SelectInput\n  menuPortalTarget={document.body}\n  styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}\n/>\n\\`\\`\\`\n\n## Extending Styles\n\nreact-select has built in support for [overriding styles](https://react-select.com/styles#provided-styles-and-state).\n\n#### Using the \\`extendStyles\\` props\n\nSelectInput contains custom built-in styles to integrate the select control with the rest of the Ledger design.\n\nThe \\`extendStyles\\` prop is a function that will allow you to compose new styles.\nThe function argument is a map between the react-select provided styles and additional ones.\n\n\\`\\`\\`jsx\n/*\n  The \"styles\" argument is an object containing component names as keys and functions as values.\n  These functions take as arguments the styles provided by react-select and return an object of additional styles.\n*/\nconst extendStyles = (styles) => ({\n  ...styles,\n  menuPortal: (provided) => {\n    return {\n      // \"styles.menuPortal\" will exist if SelectInput has custom styles for this component.\n      // Otherwise, use the react-select provided ones.\n      ...((styles.menuPortal && styles.menuPortal(provided)) || { ...provided }),\n      // Then extend the output with your own styles!\n      zIndex: 2,\n    };\n  },\n});\n\n<SelectInput extendStyles={extendStyles} />\n\\`\\`\\`\n\n#### Using the \\`styles\\` prop\n\nTo completely override the SelectInput styles, use the \\`style\\` prop.\n\n\\`\\`\\`jsx\n// The \"provided\" argument will only contain the base react-select styles.\nconst styles = { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }\n\n<SelectInput styles={styles} />\n\\`\\`\\`\n\n## Extending Components\n\nreact-select has built in support for [extending components](https://react-select.com/components).\n\nTo override components use the \\`components\\` prop:\n\n\\`\\`\\`jsx\n\n<SelectInput components={{ Option: ColorOption, ValueContainer: ColorValueContainer }} />\n\n\\`\\`\\`\n\nIf you would like to re-use inner SelectInput components you can import them like so:\n\n\\`\\`\\`jsx\n// Import them as modules\nimport * as DropdownIndicatorModule from \"@ledgerhq/react-ui/components/form/SelectInput/DropdownIndicator\";\nimport * as ValueContainerModule from \"@ledgerhq/react-ui/components/form/SelectInput/ValueContainer\";\nimport * as ControlModule from \"@ledgerhq/react-ui/components/form/SelectInput/Control\";\nimport * as MenuListModule from \"@ledgerhq/react-ui/components/form/SelectInput/MenuList\";\nimport * as OptionModule from \"@ledgerhq/react-ui/components/form/SelectInput/Option\";\n\n// Then each module contains the component definition and the associated style\nconst { DropdownIndicator, getStyles } = DropdownIndicatorModule\n\n<SelectInput\n  components={{dropdownIndicator: DropdownIndicator}}\n  styles={{dropdownIndicator: getStyles}}\n/>\n\\`\\`\\`\n\n## Sandbox\n\nThe following advanced example showcases how to override components and styles and disable elements.\n`;\n\nexport default {\n  title: \"Form/Input/Select\",\n  component: SelectInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n  },\n  parameters: {\n    docs: {\n      description: { component: description },\n    },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst cssColors = [\n  \"aliceblue\",\n  \"antiquewhite\",\n  \"aqua\",\n  \"aquamarine\",\n  \"azure\",\n  \"beige\",\n  \"bisque\",\n  \"black\",\n  \"blanchedalmond\",\n  \"blue\",\n  \"blueviolet\",\n  \"brown\",\n  \"burlywood\",\n  \"cadetblue\",\n  \"chartreuse\",\n  \"chocolate\",\n  \"coral\",\n  \"cornflowerblue\",\n  \"cornsilk\",\n  \"crimson\",\n  \"cyan\",\n  \"darkblue\",\n  \"darkcyan\",\n  \"darkgoldenrod\",\n  \"darkgray\",\n  \"darkgreen\",\n  \"darkgrey\",\n  \"darkkhaki\",\n  \"darkmagenta\",\n  \"darkolivegreen\",\n  \"darkorange\",\n  \"darkorchid\",\n  \"darkred\",\n  \"darksalmon\",\n  \"darkseagreen\",\n  \"darkslateblue\",\n  \"darkslategray\",\n  \"darkslategrey\",\n  \"darkturquoise\",\n  \"darkviolet\",\n  \"deeppink\",\n  \"deepskyblue\",\n  \"dimgray\",\n  \"dimgrey\",\n  \"dodgerblue\",\n  \"firebrick\",\n  \"floralwhite\",\n  \"forestgreen\",\n  \"fuchsia\",\n  \"gainsboro\",\n  \"ghostwhite\",\n  \"gold\",\n  \"goldenrod\",\n  \"gray\",\n  \"green\",\n  \"greenyellow\",\n  \"grey\",\n  \"honeydew\",\n  \"hotpink\",\n  \"indianred\",\n  \"indigo\",\n  \"ivory\",\n  \"khaki\",\n  \"lavender\",\n  \"lavenderblush\",\n  \"lawngreen\",\n  \"lemonchiffon\",\n  \"lightblue\",\n  \"lightcoral\",\n  \"lightcyan\",\n  \"lightgoldenrodyellow\",\n  \"lightgray\",\n  \"lightgreen\",\n  \"lightgrey\",\n  \"lightpink\",\n  \"lightsalmon\",\n  \"lightseagreen\",\n  \"lightskyblue\",\n  \"lightslategray\",\n  \"lightslategrey\",\n  \"lightsteelblue\",\n  \"lightyellow\",\n  \"lime\",\n  \"limegreen\",\n  \"linen\",\n  \"magenta\",\n  \"maroon\",\n  \"mediumaquamarine\",\n  \"mediumblue\",\n  \"mediumorchid\",\n  \"mediumpurple\",\n  \"mediumseagreen\",\n  \"mediumslateblue\",\n  \"mediumspringgreen\",\n  \"mediumturquoise\",\n  \"mediumvioletred\",\n  \"midnightblue\",\n  \"mintcream\",\n  \"mistyrose\",\n  \"moccasin\",\n  \"navajowhite\",\n  \"navy\",\n  \"oldlace\",\n  \"olive\",\n  \"olivedrab\",\n  \"orange\",\n  \"orangered\",\n  \"orchid\",\n  \"palegoldenrod\",\n  \"palegreen\",\n  \"paleturquoise\",\n  \"palevioletred\",\n  \"papayawhip\",\n  \"peachpuff\",\n  \"peru\",\n  \"pink\",\n  \"plum\",\n  \"powderblue\",\n  \"purple\",\n  \"red\",\n  \"rosybrown\",\n  \"royalblue\",\n  \"saddlebrown\",\n  \"salmon\",\n  \"sandybrown\",\n  \"seagreen\",\n  \"seashell\",\n  \"sienna\",\n  \"silver\",\n  \"skyblue\",\n  \"slateblue\",\n  \"slategray\",\n  \"slategrey\",\n  \"snow\",\n  \"springgreen\",\n  \"steelblue\",\n  \"tan\",\n  \"teal\",\n  \"thistle\",\n  \"tomato\",\n  \"turquoise\",\n  \"violet\",\n  \"wheat\",\n  \"white\",\n  \"whitesmoke\",\n  \"yellow\",\n  \"yellowgreen\",\n];\n\ntype SelectItem = { label: string; value: string };\n\nconst colorOptions = cssColors.map(color => ({ label: color, value: color }));\nconst ColorOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} py={2} alignItems=\"center\">\n          <Flex mr={4} p={4} style={{ background: props.data.value }} />\n          <Flex flex={1} style={{ textTransform: \"capitalize\" }}>\n            {children}\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nconst ColorValueContainer = (props: ValueContainerProps<SelectItem, false>) => {\n  return (\n    <ValueContainer\n      render={({ children }) => (\n        <Grid alignItems=\"center\" style={{ textTransform: \"capitalize\" }}>\n          {children}\n        </Grid>\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const Default: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={colorOptions}\n      value={value}\n      onChange={setValue}\n      placeholder=\"Pick a color\"\n      isClearable\n      isOptionDisabled={option => option.value.startsWith(\"b\")}\n      components={{ Option: ColorOption, ValueContainer: ColorValueContainer }}\n      renderLeft={_ => value && <Flex mr={4} p={4} style={{ background: value.value }} />}\n      menuPortalTarget={document.body}\n      styles={{ menuPortal: provided => ({ ...provided, zIndex: 2 }) }}\n      {...args}\n    />\n  );\n};\n\nexport const Minimal: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMinimal.parameters = {\n  docs: {\n    description: {\n      story: \"This is a minimal working example with only required props.\",\n    },\n  },\n};\n\nexport const SideRenders: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n  const theme = useTheme();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      renderLeft={props => (\n        <Flex mr={3}>\n          <SearchMedium color={props.isDisabled ? \"currentColor\" : theme.colors.neutral.c70} />\n        </Flex>\n      )}\n      renderRight={() => (\n        <Text mr={4} fontWeight=\"semiBold\" variant={\"body\"} color=\"inherit\">\n          #Right\n        </Text>\n      )}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nSideRenders.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This example has side renders - a magnifying glass icon on the left and custom label on the right.\",\n    },\n  },\n};\n\nconst CustomOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} alignItems=\"center\">\n          <Text fontWeight=\"semiBold\" variant={\"paragraph\"} mr={4}>\n            #Left\n          </Text>\n          <Flex flex={1} justifyContent=\"space-between\">\n            {children}\n            <Text fontWeight=\"semiBold\" variant={\"paragraph\"} color=\"inherit\">\n              #Right\n            </Text>\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nexport const CustomOptions: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ Option: CustomOption }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nCustomOptions.parameters = {\n  docs: {\n    description: {\n      story: \"Here the `Option` component is overriden to display side labels (#Left and #Right).\",\n    },\n  },\n};\n\nexport const DisabledOption: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      isOptionDisabled={option => option.value === \"lemon\"}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nDisabledOption.parameters = {\n  docs: {\n    description: {\n      story:\n        \"Using the `isOptionDisabled` prop, options having a value that matches 'lemon' are disabled.\",\n    },\n  },\n};\n\nconst hugeOptions = new Array(10000).fill(0).map((_, i) => ({ label: \"\" + i, value: \"\" + i }));\nexport const VirtualList: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={hugeOptions}\n      value={value}\n      onChange={setValue}\n      components={{\n        MenuList: VirtualMenuList,\n      }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nVirtualList.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper.\",\n    },\n  },\n};\n\nexport const MultiSelect: StoryTemplate<Props<SelectItem, true>> = args => {\n  const [value, setValue] = React.useState<readonly SelectItem[]>([]);\n\n  return (\n    <SelectInput\n      isMulti\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMultiSelect.parameters = {\n  docs: {\n    description: {\n      story: \"A standard selector with multiselection using the `isMulti` prop.\",\n    },\n  },\n};\n"],
+  "mappings": "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",
   "names": ["SelectInput", "React", "Flex", "Grid", "SearchMedium", "Text"]
 }

package/lib/cjs/components/form/SelectInput/ValueContainer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/ValueContainer.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ValueContainerProps } from \"react-select\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): StylesConfig<O, M, G>[\"valueContainer\"] {\n  return (provided) => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\ntype ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;\n};\n\nexport type MixedProps<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = ValueContainerProps<O, M, G> & ExtraProps<O, M, G>;\n\nexport function ValueContainer<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MixedProps<O, M, G>): JSX.Element {\n  const color = props.selectProps.isDisabled ? \"neutral.c60\" : \"neutral.c100\";\n  return (\n    <components.ValueContainer {...props}>\n      <Text\n        as=\"div\"\n        variant=\"paragraph\"\n        color={color}\n        style={{ display: \"inherit\", alignItems: \"center\" }}\n      >\n        {props.render ? props.render(props) : props.children}\n      </Text>\n    </components.ValueContainer>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,kBAAiB;AAEV,SAAS,YAI6B;AAC3C,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAaO,SAAS,eAId,OAAyC;AACzC,QAAM,QAAQ,MAAM,YAAY,aAAa,gBAAgB;AAC7D,SACE,6BAAAA,QAAA,cAAC,+BAAW,gBAAX,EAA2B,GAAG,SAC7B,6BAAAA,QAAA;AAAA,IAAC,YAAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,WAAW,YAAY,SAAS;AAAA;AAAA,IAEjD,MAAM,SAAS,MAAM,OAAO,KAAK,IAAI,MAAM;AAAA,EAC9C,CACF;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ValueContainerProps } from \"react-select\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): StylesConfig<O, M, G>[\"valueContainer\"] {\n  return provided => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\ntype ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;\n};\n\nexport type MixedProps<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = ValueContainerProps<O, M, G> & ExtraProps<O, M, G>;\n\nexport function ValueContainer<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MixedProps<O, M, G>): JSX.Element {\n  const color = props.selectProps.isDisabled ? \"neutral.c60\" : \"neutral.c100\";\n  return (\n    <components.ValueContainer {...props}>\n      <Text\n        as=\"div\"\n        variant=\"paragraph\"\n        color={color}\n        style={{ display: \"inherit\", alignItems: \"center\" }}\n      >\n        {props.render ? props.render(props) : props.children}\n      </Text>\n    </components.ValueContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,kBAAiB;AAEV,SAAS,YAI6B;AAC3C,SAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAaO,SAAS,eAId,OAAyC;AACzC,QAAM,QAAQ,MAAM,YAAY,aAAa,gBAAgB;AAC7D,SACE,6BAAAA,QAAA,cAAC,+BAAW,gBAAX,EAA2B,GAAG,SAC7B,6BAAAA,QAAA;AAAA,IAAC,YAAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,WAAW,YAAY,SAAS;AAAA;AAAA,IAEjD,MAAM,SAAS,MAAM,OAAO,KAAK,IAAI,MAAM;AAAA,EAC9C,CACF;AAEJ;",
   "names": ["React", "Text"]
 }

package/lib/cjs/components/form/SelectInput/VirtualMenuList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/VirtualMenuList.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo, useRef, useEffect } from \"react\";\nimport { components, GroupBase, MenuListProps } from \"react-select\";\nimport { FixedSizeList, FixedSizeList as List } from \"react-window\";\nimport { Props as SelectProps } from \"./index\";\n\nexport type RowProps = React.PropsWithChildren<{ style: React.CSSProperties }>;\nexport const VirtualRow = memo(({ style, children }: RowProps) => (\n  <div style={style}>{children}</div>\n));\n\nexport function VirtualMenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): React.ReactElement {\n  const { children, options, maxHeight, getValue, getStyles, selectProps } = props;\n  const { noOptionsMessage, rowHeight = 0 } = selectProps as SelectProps<O, M, G>;\n\n  const listRef = useRef<FixedSizeList>();\n  const [value] = getValue();\n  const initialOffset = options.indexOf(value) * rowHeight;\n  const childrenLength = Array.isArray(children) ? children.length : 0;\n  const minHeight = Math.min(maxHeight, rowHeight * childrenLength);\n\n  const menuStyle = getStyles(\"menuList\", props);\n\n  const focusedIndex = useMemo(\n    () =>\n      Array.isArray(children)\n        ? Math.max(\n            children.findIndex(\n              (child: React.ReactNode) => React.isValidElement(child) && child.props.isFocused,\n            ),\n            0,\n          )\n        : 0,\n    [children],\n  );\n\n  useEffect(() => {\n    listRef.current?.scrollToItem(focusedIndex);\n  }, [focusedIndex]);\n\n  if (!children || !Array.isArray(children)) return <></>;\n\n  if (childrenLength === 0 && noOptionsMessage) {\n    return <components.NoOptionsMessage {...{ ...props, innerProps: {} }} />;\n  }\n\n  children.length &&\n    children.forEach((node: React.ReactNode) => {\n      if (!node || !React.isValidElement(node)) return;\n      delete node.props.innerProps.onMouseMove; // NB: Removes lag on hover, see https://github.com/JedWatson/react-select/issues/3128#issuecomment-433834170\n      delete node.props.innerProps.onMouseOver;\n    });\n\n  return (\n    <div\n      style={{ ...(menuStyle as React.CSSProperties), maxHeight: \"auto\" }}\n      onWheelCapture={(e) =>\n        /*\n          This event causes issues with react-window.\n          react-select logic is based on whether the bottom/top of the list has been reached\n          but with virtual lists it just does not work and prevents scrolling\u2026\n        */\n        e.stopPropagation()\n      }\n    >\n      <List\n        ref={listRef as React.LegacyRef<FixedSizeList>}\n        width=\"100%\"\n        height={minHeight}\n        overscanCount={50}\n        itemCount={childrenLength}\n        itemSize={rowHeight}\n        initialScrollOffset={initialOffset}\n      >\n        {({ index, style }) => <VirtualRow style={style}>{children[index]}</VirtualRow>}\n      </List>\n    </div>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AACxD,0BAAqD;AACrD,0BAAqD;AAI9C,MAAM,iBAAa,mBAAK,CAAC,EAAE,OAAO,SAAS,MAChD,6BAAAA,QAAA,cAAC,SAAI,SAAe,QAAS,CAC9B;AAEM,SAAS,gBAId,OAAmD;AACnD,QAAM,EAAE,UAAU,SAAS,WAAW,UAAU,WAAW,YAAY,IAAI;AAC3E,QAAM,EAAE,kBAAkB,YAAY,EAAE,IAAI;AAE5C,QAAM,cAAU,qBAAsB;AACtC,QAAM,CAAC,KAAK,IAAI,SAAS;AACzB,QAAM,gBAAgB,QAAQ,QAAQ,KAAK,IAAI;AAC/C,QAAM,iBAAiB,MAAM,QAAQ,QAAQ,IAAI,SAAS,SAAS;AACnE,QAAM,YAAY,KAAK,IAAI,WAAW,YAAY,cAAc;AAEhE,QAAM,YAAY,UAAU,YAAY,KAAK;AAE7C,QAAM,mBAAe;AAAA,IACnB,MACE,MAAM,QAAQ,QAAQ,IAClB,KAAK;AAAA,MACH,SAAS;AAAA,QACP,CAAC,UAA2B,aAAAA,QAAM,eAAe,KAAK,KAAK,MAAM,MAAM;AAAA,MACzE;AAAA,MACA;AAAA,IACF,IACA;AAAA,IACN,CAAC,QAAQ;AAAA,EACX;AAEA,8BAAU,MAAM;AAvClB;AAwCI,kBAAQ,YAAR,mBAAiB,aAAa;AAAA,EAChC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,QAAQ;AAAG,WAAO,6BAAAA,QAAA,2BAAAA,QAAA,cAAE;AAEpD,MAAI,mBAAmB,KAAK,kBAAkB;AAC5C,WAAO,6BAAAA,QAAA,cAAC,+BAAW,kBAAX,EAA6B,GAAG,EAAE,GAAG,OAAO,YAAY,CAAC,EAAE,GAAG;AAAA,EACxE;AAEA,WAAS,UACP,SAAS,QAAQ,CAAC,SAA0B;AAC1C,QAAI,CAAC,QAAQ,CAAC,aAAAA,QAAM,eAAe,IAAI;AAAG;AAC1C,WAAO,KAAK,MAAM,WAAW;AAC7B,WAAO,KAAK,MAAM,WAAW;AAAA,EAC/B,CAAC;AAEH,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,GAAI,WAAmC,WAAW,OAAO;AAAA,MAClE,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMf,EAAE,gBAAgB;AAAA;AAAA;AAAA,IAGpB,6BAAAA,QAAA;AAAA,MAAC,oBAAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,WAAW;AAAA,QACX,UAAU;AAAA,QACV,qBAAqB;AAAA;AAAA,MAEpB,CAAC,EAAE,OAAO,MAAM,MAAM,6BAAAD,QAAA,cAAC,cAAW,SAAe,SAAS,KAAK,CAAE;AAAA,IACpE;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { memo, useMemo, useRef, useEffect } from \"react\";\nimport { components, GroupBase, MenuListProps } from \"react-select\";\nimport { FixedSizeList, FixedSizeList as List } from \"react-window\";\nimport { Props as SelectProps } from \"./index\";\n\nexport type RowProps = React.PropsWithChildren<{ style: React.CSSProperties }>;\nexport const VirtualRow = memo(({ style, children }: RowProps) => (\n  <div style={style}>{children}</div>\n));\n\nexport function VirtualMenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): React.ReactElement {\n  const { children, options, maxHeight, getValue, getStyles, selectProps } = props;\n  const { noOptionsMessage, rowHeight = 0 } = selectProps as SelectProps<O, M, G>;\n\n  const listRef = useRef<FixedSizeList>();\n  const [value] = getValue();\n  const initialOffset = options.indexOf(value) * rowHeight;\n  const childrenLength = Array.isArray(children) ? children.length : 0;\n  const minHeight = Math.min(maxHeight, rowHeight * childrenLength);\n\n  const menuStyle = getStyles(\"menuList\", props);\n\n  const focusedIndex = useMemo(\n    () =>\n      Array.isArray(children)\n        ? Math.max(\n            children.findIndex(\n              (child: React.ReactNode) => React.isValidElement(child) && child.props.isFocused,\n            ),\n            0,\n          )\n        : 0,\n    [children],\n  );\n\n  useEffect(() => {\n    listRef.current?.scrollToItem(focusedIndex);\n  }, [focusedIndex]);\n\n  if (!children || !Array.isArray(children)) return <></>;\n\n  if (childrenLength === 0 && noOptionsMessage) {\n    return <components.NoOptionsMessage {...{ ...props, innerProps: {} }} />;\n  }\n\n  children.length &&\n    children.forEach((node: React.ReactNode) => {\n      if (!node || !React.isValidElement(node)) return;\n      delete node.props.innerProps.onMouseMove; // NB: Removes lag on hover, see https://github.com/JedWatson/react-select/issues/3128#issuecomment-433834170\n      delete node.props.innerProps.onMouseOver;\n    });\n\n  return (\n    <div\n      style={{ ...(menuStyle as React.CSSProperties), maxHeight: \"auto\" }}\n      onWheelCapture={e =>\n        /*\n          This event causes issues with react-window.\n          react-select logic is based on whether the bottom/top of the list has been reached\n          but with virtual lists it just does not work and prevents scrolling\u2026\n        */\n        e.stopPropagation()\n      }\n    >\n      <List\n        ref={listRef as React.LegacyRef<FixedSizeList>}\n        width=\"100%\"\n        height={minHeight}\n        overscanCount={50}\n        itemCount={childrenLength}\n        itemSize={rowHeight}\n        initialScrollOffset={initialOffset}\n      >\n        {({ index, style }) => <VirtualRow style={style}>{children[index]}</VirtualRow>}\n      </List>\n    </div>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AACxD,0BAAqD;AACrD,0BAAqD;AAI9C,MAAM,iBAAa,mBAAK,CAAC,EAAE,OAAO,SAAS,MAChD,6BAAAA,QAAA,cAAC,SAAI,SAAe,QAAS,CAC9B;AAEM,SAAS,gBAId,OAAmD;AACnD,QAAM,EAAE,UAAU,SAAS,WAAW,UAAU,WAAW,YAAY,IAAI;AAC3E,QAAM,EAAE,kBAAkB,YAAY,EAAE,IAAI;AAE5C,QAAM,cAAU,qBAAsB;AACtC,QAAM,CAAC,KAAK,IAAI,SAAS;AACzB,QAAM,gBAAgB,QAAQ,QAAQ,KAAK,IAAI;AAC/C,QAAM,iBAAiB,MAAM,QAAQ,QAAQ,IAAI,SAAS,SAAS;AACnE,QAAM,YAAY,KAAK,IAAI,WAAW,YAAY,cAAc;AAEhE,QAAM,YAAY,UAAU,YAAY,KAAK;AAE7C,QAAM,mBAAe;AAAA,IACnB,MACE,MAAM,QAAQ,QAAQ,IAClB,KAAK;AAAA,MACH,SAAS;AAAA,QACP,CAAC,UAA2B,aAAAA,QAAM,eAAe,KAAK,KAAK,MAAM,MAAM;AAAA,MACzE;AAAA,MACA;AAAA,IACF,IACA;AAAA,IACN,CAAC,QAAQ;AAAA,EACX;AAEA,8BAAU,MAAM;AAvClB;AAwCI,kBAAQ,YAAR,mBAAiB,aAAa;AAAA,EAChC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,QAAQ;AAAG,WAAO,6BAAAA,QAAA,2BAAAA,QAAA,cAAE;AAEpD,MAAI,mBAAmB,KAAK,kBAAkB;AAC5C,WAAO,6BAAAA,QAAA,cAAC,+BAAW,kBAAX,EAA6B,GAAG,EAAE,GAAG,OAAO,YAAY,CAAC,EAAE,GAAG;AAAA,EACxE;AAEA,WAAS,UACP,SAAS,QAAQ,CAAC,SAA0B;AAC1C,QAAI,CAAC,QAAQ,CAAC,aAAAA,QAAM,eAAe,IAAI;AAAG;AAC1C,WAAO,KAAK,MAAM,WAAW;AAC7B,WAAO,KAAK,MAAM,WAAW;AAAA,EAC/B,CAAC;AAEH,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,GAAI,WAAmC,WAAW,OAAO;AAAA,MAClE,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,EAAE,gBAAgB;AAAA;AAAA;AAAA,IAGpB,6BAAAA,QAAA;AAAA,MAAC,oBAAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,WAAW;AAAA,QACX,UAAU;AAAA,QACV,qBAAqB;AAAA;AAAA,MAEpB,CAAC,EAAE,OAAO,MAAM,MAAM,6BAAAD,QAAA,cAAC,cAAW,SAAe,SAAS,KAAK,CAAE;AAAA,IACpE;AAAA,EACF;AAEJ;",
   "names": ["React", "List"]
 }

package/lib/cjs/components/form/SelectInput/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/index.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from \"react\";\nimport Select, {\n  Props as SelectProps,\n  ControlProps,\n  IndicatorsContainerProps,\n  GroupBase,\n  StylesConfig,\n} from \"react-select\";\nimport { DefaultTheme, useTheme } from \"styled-components\";\nimport * as DropdownIndicatorModule from \"./DropdownIndicator\";\nimport * as ValueContainerModule from \"./ValueContainer\";\nimport * as ControlModule from \"./Control\";\nimport * as MenuListModule from \"./MenuList\";\nimport * as OptionModule from \"./Option\";\nimport { IndicatorsContainer } from \"./IndicatorsContainer\";\nimport { InputErrorContainer } from \"../BaseInput\";\n\nexport type SelfProps<O, M extends boolean, G extends GroupBase<O>> = {\n  /* An error which will be displayed below the component and will change the style. */\n  error?: string;\n  /* A component which will be rendered on the left side of the select. */\n  renderLeft?: (props: ControlProps<O, M, G>) => React.ReactNode;\n  /* A component which will be rendered on the right side of the select, before the indicators. */\n  renderRight?: (props: IndicatorsContainerProps<O, M, G>) => React.ReactNode;\n  /* This value is used to calculate the height of the menu list when dealing with virtual lists. */\n  rowHeight?: number;\n  /* Removes all wrappers when rendering the element. */\n  unwrapped?: boolean;\n  /* Extends defined styles. */\n  extendStyles?: (styles: StylesConfig<O, M, G>) => StylesConfig<O, M, G>;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = SelectProps<O, M, G> & SelfProps<O, M, G>;\n\nconst stylesFn = <O, M extends boolean, G extends GroupBase<O>>(\n  theme: DefaultTheme,\n): StylesConfig<O, M, G> => ({\n  control: ControlModule.getStyles(theme),\n  valueContainer: ValueContainerModule.getStyles(),\n  dropdownIndicator: DropdownIndicatorModule.getStyles(),\n  menuList: MenuListModule.getStyles(theme),\n  option: OptionModule.getStyles(),\n  input: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  placeholder: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c60,\n  }),\n  singleValue: (provided) => ({\n    ...provided,\n    color: \"inherit\",\n  }),\n  multiValue: (provided) => ({\n    ...provided,\n    backgroundColor: theme.colors.primary.c20,\n    borderRadius: theme.radii[1],\n  }),\n  multiValueLabel: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  multiValueRemove: (provided) => ({\n    ...provided,\n    cursor: \"pointer\",\n    \":hover\": {\n      color: theme.colors.error.c50,\n      backgroundColor: theme.colors.error.c30,\n    },\n  }),\n  menu: (provided) => ({\n    ...provided,\n    border: 0,\n    boxShadow: \"none\",\n    background: \"none\",\n  }),\n});\n\nfunction SelectInput<O, M extends boolean, G extends GroupBase<O>>({\n  error,\n  rowHeight = 48,\n  unwrapped,\n  extendStyles,\n  ...props\n}: Props<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const styles = useMemo(\n    () => (extendStyles ? extendStyles(stylesFn<O, M, G>(theme)) : stylesFn<O, M, G>(theme)),\n    [theme, extendStyles],\n  );\n  const { isDisabled, components = {} } = props;\n\n  const innerContent = (\n    <Select\n      {...props}\n      styles={{\n        ...styles,\n        ...props.styles,\n      }}\n      classNamePrefix=\"react-select\"\n      components={{\n        Control: ControlModule.Control,\n        ValueContainer: ValueContainerModule.ValueContainer,\n        IndicatorsContainer,\n        DropdownIndicator: DropdownIndicatorModule.DropdownIndicator,\n        MenuList: MenuListModule.MenuList,\n        Option: OptionModule.Option,\n        IndicatorSeparator: null,\n        ...components,\n      }}\n      // @ts-expect-error We want to be able to pass extra props here\u2026\n      rowHeight={rowHeight}\n    />\n  );\n\n  if (unwrapped) return innerContent;\n\n  return (\n    <div>\n      {innerContent}\n      {error && !isDisabled && (\n        <InputErrorContainer variant={\"paragraph\"}>{error}</InputErrorContainer>\n      )}\n    </div>\n  );\n}\n\nexport default memo(SelectInput) as typeof SelectInput;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,0BAMO;AACP,+BAAuC;AACvC,8BAAyC;AACzC,2BAAsC;AACtC,oBAA+B;AAC/B,qBAAgC;AAChC,mBAA8B;AAC9B,iCAAoC;AACpC,uBAAoC;AAsBpC,MAAM,WAAW,CACf,WAC2B;AAAA,EAC3B,SAAS,cAAc,UAAU,KAAK;AAAA,EACtC,gBAAgB,qBAAqB,UAAU;AAAA,EAC/C,mBAAmB,wBAAwB,UAAU;AAAA,EACrD,UAAU,eAAe,UAAU,KAAK;AAAA,EACxC,QAAQ,aAAa,UAAU;AAAA,EAC/B,OAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,aAAa,CAAC,cAAc;AAAA,IAC1B,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,aAAa,CAAC,cAAc;AAAA,IAC1B,GAAG;AAAA,IACH,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC,cAAc;AAAA,IACzB,GAAG;AAAA,IACH,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IACtC,cAAc,MAAM,MAAM,CAAC;AAAA,EAC7B;AAAA,EACA,iBAAiB,CAAC,cAAc;AAAA,IAC9B,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,kBAAkB,CAAC,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,OAAO,MAAM,OAAO,MAAM;AAAA,MAC1B,iBAAiB,MAAM,OAAO,MAAM;AAAA,IACtC;AAAA,EACF;AAAA,EACA,MAAM,CAAC,cAAc;AAAA,IACnB,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEA,SAAS,YAA0D;AAAA,EACjE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,YAAQ,mCAAS;AACvB,QAAM,aAAS;AAAA,IACb,MAAO,eAAe,aAAa,SAAkB,KAAK,CAAC,IAAI,SAAkB,KAAK;AAAA,IACtF,CAAC,OAAO,YAAY;AAAA,EACtB;AACA,QAAM,EAAE,YAAY,aAAa,CAAC,EAAE,IAAI;AAExC,QAAM,eACJ,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG,MAAM;AAAA,MACX;AAAA,MACA,iBAAgB;AAAA,MAChB,YAAY;AAAA,QACV,SAAS,cAAc;AAAA,QACvB,gBAAgB,qBAAqB;AAAA,QACrC;AAAA,QACA,mBAAmB,wBAAwB;AAAA,QAC3C,UAAU,eAAe;AAAA,QACzB,QAAQ,aAAa;AAAA,QACrB,oBAAoB;AAAA,QACpB,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,EACF;AAGF,MAAI;AAAW,WAAO;AAEtB,SACE,6BAAAD,QAAA,cAAC,aACE,cACA,SAAS,CAAC,cACT,6BAAAA,QAAA,cAAC,wCAAoB,SAAS,eAAc,KAAM,CAEtD;AAEJ;AAEA,IAAO,0BAAQ,mBAAK,WAAW;",
+  "sourcesContent": ["import React, { memo, useMemo } from \"react\";\nimport Select, {\n  Props as SelectProps,\n  ControlProps,\n  IndicatorsContainerProps,\n  GroupBase,\n  StylesConfig,\n} from \"react-select\";\nimport { DefaultTheme, useTheme } from \"styled-components\";\nimport * as DropdownIndicatorModule from \"./DropdownIndicator\";\nimport * as ValueContainerModule from \"./ValueContainer\";\nimport * as ControlModule from \"./Control\";\nimport * as MenuListModule from \"./MenuList\";\nimport * as OptionModule from \"./Option\";\nimport { IndicatorsContainer } from \"./IndicatorsContainer\";\nimport { InputErrorContainer } from \"../BaseInput\";\n\nexport type SelfProps<O, M extends boolean, G extends GroupBase<O>> = {\n  /* An error which will be displayed below the component and will change the style. */\n  error?: string;\n  /* A component which will be rendered on the left side of the select. */\n  renderLeft?: (props: ControlProps<O, M, G>) => React.ReactNode;\n  /* A component which will be rendered on the right side of the select, before the indicators. */\n  renderRight?: (props: IndicatorsContainerProps<O, M, G>) => React.ReactNode;\n  /* This value is used to calculate the height of the menu list when dealing with virtual lists. */\n  rowHeight?: number;\n  /* Removes all wrappers when rendering the element. */\n  unwrapped?: boolean;\n  /* Extends defined styles. */\n  extendStyles?: (styles: StylesConfig<O, M, G>) => StylesConfig<O, M, G>;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = SelectProps<O, M, G> & SelfProps<O, M, G>;\n\nconst stylesFn = <O, M extends boolean, G extends GroupBase<O>>(\n  theme: DefaultTheme,\n): StylesConfig<O, M, G> => ({\n  control: ControlModule.getStyles(theme),\n  valueContainer: ValueContainerModule.getStyles(),\n  dropdownIndicator: DropdownIndicatorModule.getStyles(),\n  menuList: MenuListModule.getStyles(theme),\n  option: OptionModule.getStyles(),\n  input: provided => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  placeholder: provided => ({\n    ...provided,\n    color: theme.colors.neutral.c60,\n  }),\n  singleValue: provided => ({\n    ...provided,\n    color: \"inherit\",\n  }),\n  multiValue: provided => ({\n    ...provided,\n    backgroundColor: theme.colors.primary.c20,\n    borderRadius: theme.radii[1],\n  }),\n  multiValueLabel: provided => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  multiValueRemove: provided => ({\n    ...provided,\n    cursor: \"pointer\",\n    \":hover\": {\n      color: theme.colors.error.c50,\n      backgroundColor: theme.colors.error.c30,\n    },\n  }),\n  menu: provided => ({\n    ...provided,\n    border: 0,\n    boxShadow: \"none\",\n    background: \"none\",\n  }),\n});\n\nfunction SelectInput<O, M extends boolean, G extends GroupBase<O>>({\n  error,\n  rowHeight = 48,\n  unwrapped,\n  extendStyles,\n  ...props\n}: Props<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const styles = useMemo(\n    () => (extendStyles ? extendStyles(stylesFn<O, M, G>(theme)) : stylesFn<O, M, G>(theme)),\n    [theme, extendStyles],\n  );\n  const { isDisabled, components = {} } = props;\n\n  const innerContent = (\n    <Select\n      {...props}\n      styles={{\n        ...styles,\n        ...props.styles,\n      }}\n      classNamePrefix=\"react-select\"\n      components={{\n        Control: ControlModule.Control,\n        ValueContainer: ValueContainerModule.ValueContainer,\n        IndicatorsContainer,\n        DropdownIndicator: DropdownIndicatorModule.DropdownIndicator,\n        MenuList: MenuListModule.MenuList,\n        Option: OptionModule.Option,\n        IndicatorSeparator: null,\n        ...components,\n      }}\n      // @ts-expect-error We want to be able to pass extra props here\u2026\n      rowHeight={rowHeight}\n    />\n  );\n\n  if (unwrapped) return innerContent;\n\n  return (\n    <div>\n      {innerContent}\n      {error && !isDisabled && (\n        <InputErrorContainer variant={\"paragraph\"}>{error}</InputErrorContainer>\n      )}\n    </div>\n  );\n}\n\nexport default memo(SelectInput) as typeof SelectInput;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,0BAMO;AACP,+BAAuC;AACvC,8BAAyC;AACzC,2BAAsC;AACtC,oBAA+B;AAC/B,qBAAgC;AAChC,mBAA8B;AAC9B,iCAAoC;AACpC,uBAAoC;AAsBpC,MAAM,WAAW,CACf,WAC2B;AAAA,EAC3B,SAAS,cAAc,UAAU,KAAK;AAAA,EACtC,gBAAgB,qBAAqB,UAAU;AAAA,EAC/C,mBAAmB,wBAAwB,UAAU;AAAA,EACrD,UAAU,eAAe,UAAU,KAAK;AAAA,EACxC,QAAQ,aAAa,UAAU;AAAA,EAC/B,OAAO,eAAa;AAAA,IAClB,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,aAAa,eAAa;AAAA,IACxB,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,aAAa,eAAa;AAAA,IACxB,GAAG;AAAA,IACH,OAAO;AAAA,EACT;AAAA,EACA,YAAY,eAAa;AAAA,IACvB,GAAG;AAAA,IACH,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IACtC,cAAc,MAAM,MAAM,CAAC;AAAA,EAC7B;AAAA,EACA,iBAAiB,eAAa;AAAA,IAC5B,GAAG;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,kBAAkB,eAAa;AAAA,IAC7B,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,OAAO,MAAM,OAAO,MAAM;AAAA,MAC1B,iBAAiB,MAAM,OAAO,MAAM;AAAA,IACtC;AAAA,EACF;AAAA,EACA,MAAM,eAAa;AAAA,IACjB,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEA,SAAS,YAA0D;AAAA,EACjE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,QAAM,YAAQ,mCAAS;AACvB,QAAM,aAAS;AAAA,IACb,MAAO,eAAe,aAAa,SAAkB,KAAK,CAAC,IAAI,SAAkB,KAAK;AAAA,IACtF,CAAC,OAAO,YAAY;AAAA,EACtB;AACA,QAAM,EAAE,YAAY,aAAa,CAAC,EAAE,IAAI;AAExC,QAAM,eACJ,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG,MAAM;AAAA,MACX;AAAA,MACA,iBAAgB;AAAA,MAChB,YAAY;AAAA,QACV,SAAS,cAAc;AAAA,QACvB,gBAAgB,qBAAqB;AAAA,QACrC;AAAA,QACA,mBAAmB,wBAAwB;AAAA,QAC3C,UAAU,eAAe;AAAA,QACzB,QAAQ,aAAa;AAAA,QACrB,oBAAoB;AAAA,QACpB,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,EACF;AAGF,MAAI;AAAW,WAAO;AAEtB,SACE,6BAAAD,QAAA,cAAC,aACE,cACA,SAAS,CAAC,cACT,6BAAAA,QAAA,cAAC,wCAAoB,SAAS,eAAc,KAAM,CAEtD;AAEJ;AAEA,IAAO,0BAAQ,mBAAK,WAAW;",
   "names": ["React", "Select"]
 }

package/lib/cjs/components/form/SplitInput/SplitInput.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SplitInput/SplitInput.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { components, StylesConfig } from \"react-select\";\nimport SplitInput, { Props } from \"./index\";\nimport Input from \"../BaseInput\";\nimport QuantityInput from \"../QuantityInput\";\nimport QrCodeInput from \"../QrCodeInput\";\nimport SelectInput, { Props as SelectInputProps } from \"../SelectInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Form/Input/Split\",\n  component: SplitInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { table: { disable: true } },\n    disabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst Label = ({ left, right }: { left: string; right: string }) => (\n  <FlexBox justifyContent=\"space-between\" mt={8} px={6}>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${left} />`}\n    </Text>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${right} />`}\n    </Text>\n  </FlexBox>\n);\n\nconst selectStyles: StylesConfig<Option> = {\n  container: (provided, state) => ({\n    ...provided,\n    height: \"100%\",\n    cursor: state.isDisabled ? \"not-allowed\" : \"text\",\n    pointerEvents: undefined,\n  }),\n  control: (_, state) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"100%\",\n    padding: \"0 20px\",\n    pointerEvents: state.isDisabled ? \"none\" : undefined,\n  }),\n};\n\ntype Option = typeof options[0];\nexport const Split = (args: Props): React.ReactNode => {\n  const [leftValue1, setLeftValue1] = React.useState<Option | null>(null);\n  const [rightValue1, setRightValue1] = React.useState<string>(\"\");\n  const [leftValue2, setLeftValue2] = React.useState<Option | null>(null);\n  const [rightValue2, setRightValue2] = React.useState<string>(\"\");\n  const [leftValue3, setLeftValue3] = React.useState<Option | null>(null);\n  const [rightValue3, setRightValue3] = React.useState<string>(\"\");\n  const [leftValue4, setLeftValue4] = React.useState<string>(\"\");\n  const [rightValue4, setRightValue4] = React.useState<string>(\"\");\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={3}>\n      <Label left=\"SelectInput\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue1}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue1}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <Input\n            value={rightValue1}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue1}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QuantityInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue2}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue2}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <QuantityInput\n            value={rightValue2}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue2}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QrCodeInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue3}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue3}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <QrCodeInput\n            value={rightValue3}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue3}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"Input\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props) => (\n          <Input\n            value={leftValue4}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue4}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <Input\n            value={rightValue4}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue4}\n            {...props}\n          />\n        )}\n      />\n    </FlexBox>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from \"react\";\nimport { components, StylesConfig } from \"react-select\";\nimport SplitInput, { Props } from \"./index\";\nimport Input from \"../BaseInput\";\nimport QuantityInput from \"../QuantityInput\";\nimport QrCodeInput from \"../QrCodeInput\";\nimport SelectInput, { Props as SelectInputProps } from \"../SelectInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Form/Input/Split\",\n  component: SplitInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { table: { disable: true } },\n    disabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst Label = ({ left, right }: { left: string; right: string }) => (\n  <FlexBox justifyContent=\"space-between\" mt={8} px={6}>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${left} />`}\n    </Text>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${right} />`}\n    </Text>\n  </FlexBox>\n);\n\nconst selectStyles: StylesConfig<Option> = {\n  container: (provided, state) => ({\n    ...provided,\n    height: \"100%\",\n    cursor: state.isDisabled ? \"not-allowed\" : \"text\",\n    pointerEvents: undefined,\n  }),\n  control: (_, state) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"100%\",\n    padding: \"0 20px\",\n    pointerEvents: state.isDisabled ? \"none\" : undefined,\n  }),\n};\n\ntype Option = (typeof options)[0];\nexport const Split = (args: Props): React.ReactNode => {\n  const [leftValue1, setLeftValue1] = React.useState<Option | null>(null);\n  const [rightValue1, setRightValue1] = React.useState<string>(\"\");\n  const [leftValue2, setLeftValue2] = React.useState<Option | null>(null);\n  const [rightValue2, setRightValue2] = React.useState<string>(\"\");\n  const [leftValue3, setLeftValue3] = React.useState<Option | null>(null);\n  const [rightValue3, setRightValue3] = React.useState<string>(\"\");\n  const [leftValue4, setLeftValue4] = React.useState<string>(\"\");\n  const [rightValue4, setRightValue4] = React.useState<string>(\"\");\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={3}>\n      <Label left=\"SelectInput\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue1}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue1}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={props => (\n          <Input\n            value={rightValue1}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue1}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QuantityInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue2}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue2}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={props => (\n          <QuantityInput\n            value={rightValue2}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue2}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QrCodeInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue3}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue3}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={props => (\n          <QrCodeInput\n            value={rightValue3}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue3}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"Input\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={props => (\n          <Input\n            value={leftValue4}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue4}\n            {...props}\n          />\n        )}\n        renderRight={props => (\n          <Input\n            value={rightValue4}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue4}\n            {...props}\n          />\n        )}\n      />\n    </FlexBox>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["SplitInput", "React", "FlexBox", "Text", "SelectInput", "Input", "QuantityInput", "QrCodeInput"]
 }

package/lib/cjs/components/form/Switch/Switch.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/Switch/Switch.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Container = styled(Flex).attrs({ alignItems: \"center\", flexDirection: \"row\" })`\n  width: fit-content;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  cursor: pointer;\n\n  /* reversed VARIANT */\n  &[data-reversed=\"true\"] {\n    flex-direction: row-reverse;\n  }\n\n  &[data-disabled=\"true\"] {\n    cursor: unset;\n  }\n`;\n\nconst Input = styled.input`\n  position: absolute;\n  visibility: hidden;\n`;\n\nconst Label = styled(Text)`\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Switcher = styled.div`\n  --ll-switch-width: ${(p) => p.theme.space[14]}px;\n  --ll-switch-height: ${(p) => p.theme.space[9]}px;\n  --ll-switch-padding: ${(p) => p.theme.space[2]}px;\n\n  position: relative;\n  display: inline-block;\n\n  background: ${(props) => props.theme.colors.neutral.c60};\n  border-radius: ${(p) => p.theme.space[6]}px;\n  width: var(--ll-switch-width);\n  height: var(--ll-switch-height);\n\n  transition: background 200ms;\n\n  &:before,\n  &:after {\n    content: \"\";\n  }\n\n  &:focus {\n    outline-style: auto;\n    outline: 1px solid ${(props) => props.theme.colors.neutral.c90};\n    outline-offset: ${(p) => p.theme.space[1]}px;\n  }\n\n  /* CIRCLE ELEMENT */\n  &:before {\n    position: absolute;\n    display: block;\n    background: ${(props) => props.theme.colors.constant.white};\n    border-radius: ${(p) => p.theme.space[12]}px;\n\n    width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    height: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    top: var(--ll-switch-padding);\n    transform: translateX(var(--ll-switch-padding));\n    transition: transform 0.25s;\n  }\n\n  /* SMALL VARIANT */\n  &[data-size=\"small\"] {\n    --ll-switch-width: ${(p) => p.theme.space[8]}px;\n    --ll-switch-height: ${(p) => p.theme.space[6]}px;\n  }\n\n  &:hover {\n    background-color: ${(props) => props.theme.colors.neutral.c70};\n  }\n\n  &:active {\n    background-color: ${(props) => props.theme.colors.neutral.c80};\n  }\n\n  /* CHECKED VARIANT */\n  ${Input}:checked ~ & {\n    background: ${(props) => props.theme.colors.primary.c80};\n\n    &:before {\n      transform: translateX(calc(var(--ll-switch-width) / 2));\n    }\n\n    &:hover {\n      background: ${(props) => props.theme.colors.primary.c90};\n    }\n\n    :active {\n      background: ${(props) => props.theme.colors.primary.c100};\n    }\n  }\n`;\n\nexport type SwitchProps = {\n  name: string;\n  checked: boolean;\n  onChange: (e: React.FormEvent<HTMLDivElement>) => void;\n  size?: \"normal\" | \"small\";\n  label?: string;\n  disabled?: boolean;\n  reversed?: boolean;\n};\n\nconst Switch = ({\n  name,\n  checked,\n  onChange,\n  label,\n  disabled,\n  reversed,\n  size,\n}: SwitchProps): JSX.Element => {\n  const handleFocusKeyDown = (e: React.FormEvent<HTMLDivElement> & { key: string }) => {\n    if (e.key.match(/enter/i)) onChange(e);\n  };\n\n  const handleClick = (e: React.FormEvent<HTMLDivElement>) => {\n    if (!disabled) onChange(e);\n  };\n\n  return (\n    <Container\n      role=\"button\"\n      data-reversed={reversed}\n      data-disabled={disabled}\n      onClick={handleClick}\n      tabIndex={0}\n      aria-pressed={checked}\n      onKeyDown={handleFocusKeyDown}\n    >\n      <Input type=\"checkbox\" name={name} id={name} disabled={disabled} checked={checked} />\n      <Switcher data-size={size} />\n      {label ? <Label variant=\"paragraph\">{label}</Label> : null}\n    </Container>\n  );\n};\n\nexport default Switch;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,YAAY,UAAU,eAAe,MAAM,CAAC;AAAA;AAAA,gBAEnE,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatC,MAAM,QAAQ,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,YAAQ,yBAAAA,SAAO,YAAAE,OAAI;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,WAAW,yBAAAF,QAAO;AAAA,uBACD,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA,wBACtB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,yBACrB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK/B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACnC,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAahB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBACzC,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAO1B,CAAC,UAAU,MAAM,MAAM,OAAO,SAAS;AAAA,qBACpC,CAAC,MAAM,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWnB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,0BACrB,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,wBAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI1D;AAAA,kBACc,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,oBAItC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAe1D,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,qBAAqB,CAAC,MAAyD;AACnF,QAAI,EAAE,IAAI,MAAM,QAAQ;AAAG,eAAS,CAAC;AAAA,EACvC;AAEA,QAAM,cAAc,CAAC,MAAuC;AAC1D,QAAI,CAAC;AAAU,eAAS,CAAC;AAAA,EAC3B;AAEA,SACE,6BAAAG,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,SAAM,MAAK,YAAW,MAAY,IAAI,MAAM,UAAoB,SAAkB;AAAA,IACnF,6BAAAA,QAAA,cAAC,YAAS,aAAW,MAAM;AAAA,IAC1B,QAAQ,6BAAAA,QAAA,cAAC,SAAM,SAAQ,eAAa,KAAM,IAAW;AAAA,EACxD;AAEJ;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Container = styled(Flex).attrs({ alignItems: \"center\", flexDirection: \"row\" })`\n  width: fit-content;\n  column-gap: ${p => p.theme.space[5]}px;\n  cursor: pointer;\n\n  /* reversed VARIANT */\n  &[data-reversed=\"true\"] {\n    flex-direction: row-reverse;\n  }\n\n  &[data-disabled=\"true\"] {\n    cursor: unset;\n  }\n`;\n\nconst Input = styled.input`\n  position: absolute;\n  visibility: hidden;\n`;\n\nconst Label = styled(Text)`\n  &:first-letter {\n    text-transform: uppercase;\n  }\n`;\n\nconst Switcher = styled.div`\n  --ll-switch-width: ${p => p.theme.space[14]}px;\n  --ll-switch-height: ${p => p.theme.space[9]}px;\n  --ll-switch-padding: ${p => p.theme.space[2]}px;\n\n  position: relative;\n  display: inline-block;\n\n  background: ${props => props.theme.colors.neutral.c60};\n  border-radius: ${p => p.theme.space[6]}px;\n  width: var(--ll-switch-width);\n  height: var(--ll-switch-height);\n\n  transition: background 200ms;\n\n  &:before,\n  &:after {\n    content: \"\";\n  }\n\n  &:focus {\n    outline-style: auto;\n    outline: 1px solid ${props => props.theme.colors.neutral.c90};\n    outline-offset: ${p => p.theme.space[1]}px;\n  }\n\n  /* CIRCLE ELEMENT */\n  &:before {\n    position: absolute;\n    display: block;\n    background: ${props => props.theme.colors.constant.white};\n    border-radius: ${p => p.theme.space[12]}px;\n\n    width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    height: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));\n    top: var(--ll-switch-padding);\n    transform: translateX(var(--ll-switch-padding));\n    transition: transform 0.25s;\n  }\n\n  /* SMALL VARIANT */\n  &[data-size=\"small\"] {\n    --ll-switch-width: ${p => p.theme.space[8]}px;\n    --ll-switch-height: ${p => p.theme.space[6]}px;\n  }\n\n  &:hover {\n    background-color: ${props => props.theme.colors.neutral.c70};\n  }\n\n  &:active {\n    background-color: ${props => props.theme.colors.neutral.c80};\n  }\n\n  /* CHECKED VARIANT */\n  ${Input}:checked ~ & {\n    background: ${props => props.theme.colors.primary.c80};\n\n    &:before {\n      transform: translateX(calc(var(--ll-switch-width) / 2));\n    }\n\n    &:hover {\n      background: ${props => props.theme.colors.primary.c90};\n    }\n\n    :active {\n      background: ${props => props.theme.colors.primary.c100};\n    }\n  }\n`;\n\nexport type SwitchProps = {\n  name: string;\n  checked: boolean;\n  onChange: (e: React.FormEvent<HTMLDivElement>) => void;\n  size?: \"normal\" | \"small\";\n  label?: string;\n  disabled?: boolean;\n  reversed?: boolean;\n};\n\nconst Switch = ({\n  name,\n  checked,\n  onChange,\n  label,\n  disabled,\n  reversed,\n  size,\n}: SwitchProps): JSX.Element => {\n  const handleFocusKeyDown = (e: React.FormEvent<HTMLDivElement> & { key: string }) => {\n    if (e.key.match(/enter/i)) onChange(e);\n  };\n\n  const handleClick = (e: React.FormEvent<HTMLDivElement>) => {\n    if (!disabled) onChange(e);\n  };\n\n  return (\n    <Container\n      role=\"button\"\n      data-reversed={reversed}\n      data-disabled={disabled}\n      onClick={handleClick}\n      tabIndex={0}\n      aria-pressed={checked}\n      onKeyDown={handleFocusKeyDown}\n    >\n      <Input type=\"checkbox\" name={name} id={name} disabled={disabled} checked={checked} />\n      <Switcher data-size={size} />\n      {label ? <Label variant=\"paragraph\">{label}</Label> : null}\n    </Container>\n  );\n};\n\nexport default Switch;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,YAAY,UAAU,eAAe,MAAM,CAAC;AAAA;AAAA,gBAEnE,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAapC,MAAM,QAAQ,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,YAAQ,yBAAAA,SAAO,YAAAE,OAAI;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,WAAW,yBAAAF,QAAO;AAAA,uBACD,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA,wBACpB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,yBACnB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK7B,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,mBACjC,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAad,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,sBACvC,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOxB,WAAS,MAAM,MAAM,OAAO,SAAS;AAAA,qBAClC,OAAK,EAAE,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWjB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA,0BACnB,OAAK,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,wBAItB,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,wBAIpC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIxD;AAAA,kBACc,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOlC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,oBAIpC,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAexD,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,qBAAqB,CAAC,MAAyD;AACnF,QAAI,EAAE,IAAI,MAAM,QAAQ;AAAG,eAAS,CAAC;AAAA,EACvC;AAEA,QAAM,cAAc,CAAC,MAAuC;AAC1D,QAAI,CAAC;AAAU,eAAS,CAAC;AAAA,EAC3B;AAEA,SACE,6BAAAG,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,SAAM,MAAK,YAAW,MAAY,IAAI,MAAM,UAAoB,SAAkB;AAAA,IACnF,6BAAAA,QAAA,cAAC,YAAS,aAAW,MAAM;AAAA,IAC1B,QAAQ,6BAAAA,QAAA,cAAC,SAAM,SAAQ,eAAa,KAAM,IAAW;AAAA,EACxD;AAEJ;AAEA,IAAO,iBAAQ;",
   "names": ["styled", "Flex", "Text", "React"]
 }