npm - @ledgerhq/react-ui - Versions diffs - 0.44.1 → 0.45.0-nightly.20260127025000 - Mend

@ledgerhq/react-ui 0.44.1 → 0.45.0-nightly.20260127025000

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 (37) hide show

package/lib/cjs/components/cta/Link/index.js CHANGED Viewed

@@ -59,10 +59,10 @@ const Base = import_styled.default.a`
   align-items: center;
   justify-content: center;
-  :hover {
+  &:hover {
     text-decoration: underline;
   }
-  :active {
+  &:active {
     color: ${({ color, theme, type = "main" }) => color || (0, import_getLinkStyle.getLinkColors)(theme.colors)[type]["pressed"]};
     text-decoration: underline;
   }

package/lib/cjs/components/cta/Link/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Link/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { getLinkColors } from \"./getLinkStyle\";\nimport { ctaIconSize, ctaTextType } from \"../getCtaStyle\";\nimport { Text } from \"../../asorted\";\nimport { TextProps } from \"../../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  BaseStyledProps & {\n    /**\n     * Component that takes `{size: number; color?: string}` as props\n     */\n    Icon?: React.ComponentType<{ size: number; color?: string }>;\n    /**\n     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop\n     */\n    type?: \"main\" | \"shade\" | \"color\";\n    /**\n     * Affect the font variant & icon size\n     */\n    size?: \"small\" | \"medium\" | \"large\";\n    /**\n     * Color of the link, overrides colors defined by the `type` prop\n     */\n    color?: string;\n    /**\n     * Props passed to the rendered text\n     */\n    textProps?: TextProps;\n    /**\n     * If true text will always be underlined, else it will be underlined only on hover\n     */\n    alwaysUnderline?: boolean;\n    /**\n     * Position of the icon relative to the text\n     */\n    iconPosition?: \"right\" | \"left\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const DEFAULT_ICON_POSITION = \"right\";\nexport const DEFAULT_SIZE = \"medium\";\nexport const DEFAULT_TYPE = \"main\";\n\nconst IconContainer = styled.div<{\n  iconPosition: \"right\" | \"left\";\n  iconLink?: boolean;\n}>`\n  ${p => (p.iconLink ? \"\" : p.iconPosition === \"left\" ? `margin-right: 6px;` : `margin-left: 6px;`)}\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Base = baseStyled.a<LinkProps>`\n  color: ${({ color, theme, disabled, type = \"main\" }) =>\n    color || getLinkColors(theme.colors)[disabled ? \"disabled\" : type][\"default\"]};\n  cursor: pointer;\n  display: inline-flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n\n  :hover {\n    text-decoration: underline;\n  }\n  :active {\n    color: ${({ color, theme, type = \"main\" }) =>\n      color || getLinkColors(theme.colors)[type][\"pressed\"]};\n    text-decoration: underline;\n  }\n\n  text-decoration: ${p => (p.alwaysUnderline ? \"underline\" : \"none\")};\n\n`;\n\nconst LinkContainer = ({\n  Icon,\n  iconPosition = DEFAULT_ICON_POSITION,\n  children,\n  color,\n  size = DEFAULT_SIZE,\n  textProps,\n}: LinkProps): React.ReactElement => {\n  const text = (\n    <Text\n      variant={ctaTextType[size]}\n      fontWeight=\"semiBold\"\n      color={color || \"inherit\"}\n      {...textProps}\n    >\n      {children}\n    </Text>\n  );\n\n  return (\n    <>\n      {iconPosition === \"right\" && children ? text : null}\n      {Icon ? (\n        <IconContainer iconLink={!children} iconPosition={iconPosition}>\n          <Icon size={ctaIconSize[size]} color={color || \"currentcolor\"} />\n        </IconContainer>\n      ) : null}\n      {iconPosition === \"left\" && children ? text : null}\n    </>\n  );\n};\n\nconst Link = (props: LinkProps): React.ReactElement => {\n  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;\n  return (\n    <Base color={color} {...props}>\n      <LinkContainer {...props} type={type} size={size} />\n    </Base>\n  );\n};\n\nexport default Link;\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { getLinkColors } from \"./getLinkStyle\";\nimport { ctaIconSize, ctaTextType } from \"../getCtaStyle\";\nimport { Text } from \"../../asorted\";\nimport { TextProps } from \"../../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  BaseStyledProps & {\n    /**\n     * Component that takes `{size: number; color?: string}` as props\n     */\n    Icon?: React.ComponentType<{ size: number; color?: string }>;\n    /**\n     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop\n     */\n    type?: \"main\" | \"shade\" | \"color\";\n    /**\n     * Affect the font variant & icon size\n     */\n    size?: \"small\" | \"medium\" | \"large\";\n    /**\n     * Color of the link, overrides colors defined by the `type` prop\n     */\n    color?: string;\n    /**\n     * Props passed to the rendered text\n     */\n    textProps?: TextProps;\n    /**\n     * If true text will always be underlined, else it will be underlined only on hover\n     */\n    alwaysUnderline?: boolean;\n    /**\n     * Position of the icon relative to the text\n     */\n    iconPosition?: \"right\" | \"left\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const DEFAULT_ICON_POSITION = \"right\";\nexport const DEFAULT_SIZE = \"medium\";\nexport const DEFAULT_TYPE = \"main\";\n\nconst IconContainer = styled.div<{\n  iconPosition: \"right\" | \"left\";\n  iconLink?: boolean;\n}>`\n  ${p => (p.iconLink ? \"\" : p.iconPosition === \"left\" ? `margin-right: 6px;` : `margin-left: 6px;`)}\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Base = baseStyled.a<LinkProps>`\n  color: ${({ color, theme, disabled, type = \"main\" }) =>\n    color || getLinkColors(theme.colors)[disabled ? \"disabled\" : type][\"default\"]};\n  cursor: pointer;\n  display: inline-flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    text-decoration: underline;\n  }\n  &:active {\n    color: ${({ color, theme, type = \"main\" }) =>\n      color || getLinkColors(theme.colors)[type][\"pressed\"]};\n    text-decoration: underline;\n  }\n\n  text-decoration: ${p => (p.alwaysUnderline ? \"underline\" : \"none\")};\n\n`;\n\nconst LinkContainer = ({\n  Icon,\n  iconPosition = DEFAULT_ICON_POSITION,\n  children,\n  color,\n  size = DEFAULT_SIZE,\n  textProps,\n}: LinkProps): React.ReactElement => {\n  const text = (\n    <Text\n      variant={ctaTextType[size]}\n      fontWeight=\"semiBold\"\n      color={color || \"inherit\"}\n      {...textProps}\n    >\n      {children}\n    </Text>\n  );\n\n  return (\n    <>\n      {iconPosition === \"right\" && children ? text : null}\n      {Icon ? (\n        <IconContainer iconLink={!children} iconPosition={iconPosition}>\n          <Icon size={ctaIconSize[size]} color={color || \"currentcolor\"} />\n        </IconContainer>\n      ) : null}\n      {iconPosition === \"left\" && children ? text : null}\n    </>\n  );\n};\n\nconst Link = (props: LinkProps): React.ReactElement => {\n  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;\n  return (\n    <Base color={color} {...props}>\n      <LinkContainer {...props} type={type} size={size} />\n    </Base>\n  );\n};\n\nexport default Link;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,0BAA8B;AAC9B,yBAAyC;AACzC,qBAAqB;AAErB,oBAA4C;AAoCrC,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,eAAe;AAE5B,MAAM,gBAAgB,yBAAAA,QAAO;AAAA,IAIzB,OAAM,EAAE,WAAW,KAAK,EAAE,iBAAiB,SAAS,uBAAuB,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAM5F,MAAM,OAAO,cAAAC,QAAW;AAAA,WACpB,CAAC,EAAE,OAAO,OAAO,UAAU,OAAO,OAAO,MAChD,aAAS,mCAAc,MAAM,MAAM,EAAE,WAAW,aAAa,IAAI,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYpE,CAAC,EAAE,OAAO,OAAO,OAAO,OAAO,MACtC,aAAS,mCAAc,MAAM,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItC,OAAM,EAAE,kBAAkB,cAAc,MAAO;AAAA;AAAA;AAIpE,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAAqC;AACnC,QAAM,OACJ,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,+BAAY,IAAI;AAAA,MACzB,YAAW;AAAA,MACX,OAAO,SAAS;AAAA,MACf,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAGF,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,iBAAiB,WAAW,WAAW,OAAO,MAC9C,OACC,6BAAAA,QAAA,cAAC,iBAAc,UAAU,CAAC,UAAU,gBAClC,6BAAAA,QAAA,cAAC,QAAK,MAAM,+BAAY,IAAI,GAAG,OAAO,SAAS,gBAAgB,CACjE,IACE,MACH,iBAAiB,UAAU,WAAW,OAAO,IAChD;AAEJ;AAEA,MAAM,OAAO,CAAC,UAAyC;AACrD,QAAM,EAAE,OAAO,cAAc,OAAO,cAAc,MAAM,IAAI;AAC5D,SACE,6BAAAA,QAAA,cAAC,QAAK,OAAe,GAAG,SACtB,6BAAAA,QAAA,cAAC,iBAAe,GAAG,OAAO,MAAY,MAAY,CACpD;AAEJ;AAEA,IAAO,eAAQ;",
   "names": ["styled", "baseStyled", "React"]
 }

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

@@ -69,53 +69,53 @@ const Input = import_styled_components.default.input`
   }
   &[data-variant="default"] {
-    :hover {
+    &:hover {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};
     }
-    :active {
+    &:active {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};
     }
-    :checked,
-    :focus {
+    &:checked,
+    &:focus {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.48)};
     }
   }
   &[data-variant="main"] {
-    :hover {
+    &:hover {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};
     }
-    :active,
-    :checked,
-    :focus {
+    &:active,
+    &:checked,
+    &:focus {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.neutral.c60, 0.48)};
     }
   }
   &[data-variant="success"] {
-    :hover,
-    :checked:not([disabled]),
-    :checked:not([disabled]) + ${Label}, :focus {
+    &:hover,
+    &:checked:not([disabled]),
+    &:checked:not([disabled]) + ${Label}, &:focus {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c50};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.success.c50, 0.48)};
     }
   }
   &[data-variant="error"] {
-    :hover,
-    :checked:not([disabled]),
-    :checked:not([disabled]) + ${Label}, :focus {
+    &:hover,
+    &:checked:not([disabled]),
+    &:checked:not([disabled]) + ${Label}, &:focus {
       --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c50};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.error.c50, 0.48)};
     }
   }
@@ -131,23 +131,24 @@ const outlinedCSS = import_styled_components.css`
   border: 1px solid ${(p) => p.theme.colors.neutral.c50};
   border-radius: ${(p) => p.theme.radii[2]}px;
   &[data-variant="default"] {
-    :hover {
+    &:hover {
       border-color: ${(p) => p.theme.colors.primary.c90};
     }
-    &[data-checked] :active {
+    &[data-checked]:active {
       border-color: ${(p) => p.theme.colors.primary.c100};
     }
-    :focus {
+    &:focus {
       border-color: ${(p) => p.theme.colors.primary.c80};
     }
   }
   &[data-variant="main"] {
-    :hover {
+    &:hover {
       border-color: ${(p) => p.theme.colors.neutral.c90};
     }
     &[data-checked],
-    :active :focus {
+    &:active,
+    &:focus {
       border-color: ${(p) => p.theme.colors.neutral.c100};
     }
   }
@@ -156,7 +157,7 @@ const outlinedCSS = import_styled_components.css`
     &[data-checked]:not([disabled]) {
       border-color: ${(p) => p.theme.colors.success.c50};
     }
-    :hover {
+    &:hover {
       border-color: ${(p) => p.theme.colors.success.c50};
     }
   }
@@ -165,7 +166,7 @@ const outlinedCSS = import_styled_components.css`
     &[data-checked]:not([disabled]) {
       border-color: ${(p) => p.theme.colors.error.c50};
     }
-    :hover {
+    &:hover {
       border-color: ${(p) => p.theme.colors.error.c50};
     }
   }

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  const isChecked = useMemo(() => context.currentValue == value, [context.currentValue, value]);\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,\n    &: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  const isChecked = useMemo(() => context.currentValue == value, [context.currentValue, value]);\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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",
   "names": ["styled", "Text", "React"]
 }

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

@@ -50,7 +50,7 @@ const Container = (0, import_styled_components.default)(import_Flex.default)`
   border-radius: ${(p) => `${p.theme.radii[2]}px`};
   padding: ${(p) => p.theme.space[6]}px;
-  :hover {
+  &:hover {
     border-color: ${(p) => p.disabled || p.checked ? "" : p.theme.colors.primary.c80};
   }
 `;

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"],
+  "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,UACA,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ,IAAI;AAAA;AAGrC,MAAM,gBAAY,yBAAAD,SAAO,YAAAE,OAAI;AAAA,YACjB,OAAM,EAAE,WAAW,KAAK,SAAU;AAAA;AAAA;AAAA,sBAGxB,OAAM,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAG;AAAA,sBAClD,OAAM,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,mBAC7E,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA,aAClC,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,oBAGd,OAAM,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA;AAAA;AAIpF,MAAM,QAAQ,yBAAAF,QAAO;AAAA;AAAA;AAAA,cAGP,SAAS;AAAA,kCACW,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI,CAAC;AAAA;AAAA;AAI7E,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/index.js CHANGED Viewed

@@ -71,7 +71,7 @@ const stylesFn = (theme) => ({
   multiValueRemove: (provided) => ({
     ...provided,
     cursor: "pointer",
-    ":hover": {
+    "&:hover": {
       color: theme.colors.error.c50,
       backgroundColor: theme.colors.error.c30
     }

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,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;",
+  "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,WAAW;AAAA,MACT,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/navigation/Breadcrumb/Breadcrumb.stories.js CHANGED Viewed

@@ -66,7 +66,7 @@ const routes = [
   }
 ];
 const RouteElement = import_styled_components.default.div`
-  :hover {
+  &:hover {
     text-decoration: underline;
   }
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx"],
-  "sourcesContent": ["import React, { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport BreadcrumbComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Navigation/Breadcrumb\",\n  component: BreadcrumbComponent,\n};\n\ntype Route = {\n  path: string;\n  label: string;\n  routes?: Route[];\n};\nconst routes: Route[] = [\n  {\n    path: \"settings\",\n    label: \"Settings\",\n    routes: [\n      { path: \"experimental\", label: \"Experimental\" },\n      { path: \"developer\", label: \"Developer\" },\n    ],\n  },\n  {\n    path: \"account\",\n    label: \"Account\",\n    routes: [{ path: \"user\", label: \"User\", routes: [{ path: \"edit\", label: \"Edit\" }] }],\n  },\n  {\n    path: \"apps\",\n    label: \"Applications\",\n    routes: [\n      { path: \"buy\", label: \"Buy\" },\n      { path: \"sell\", label: \"Sell\" },\n      { path: \"swap\", label: \"Swap\", routes: [{ path: \"confirm\", label: \"Confirm\" }] },\n    ],\n  },\n];\n\nconst RouteElement = styled.div`\n  :hover {\n    text-decoration: underline;\n  }\n`;\nconst Routes = ({\n  onClick,\n  routes,\n  previousPath = [],\n}: {\n  onClick: (path: string) => void;\n  routes?: Route[];\n  previousPath?: string[];\n}): JSX.Element | null => {\n  if (!routes || routes.length === 0) return null;\n\n  return (\n    <div style={{ paddingLeft: \"1em\" }}>\n      {routes.map(route => (\n        <>\n          <RouteElement onClick={() => onClick([...previousPath, route.path].join(\"/\"))}>\n            {route.label} [{\"/\" + route.path}]\n          </RouteElement>\n          <Routes\n            routes={route.routes}\n            previousPath={[...previousPath, route.path]}\n            onClick={onClick}\n          />\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport const Breadcrumb = (args: Props): JSX.Element => {\n  const [route, setRoute] = useState(\"apps/swap/confirm\");\n\n  const onChange = useCallback((value: string[]) => setRoute(value.join(\"/\")), [setRoute]);\n  const segments = useMemo(() => {\n    const paths = route.split(\"/\");\n\n    const [, result] = paths.reduce<[Route[], React.ComponentProps<typeof Breadcrumb>[\"segments\"]]>(\n      ([routes, result], path) => {\n        let activeRoute: Route | null = null;\n        const level = routes.map(route => {\n          if (route.path === path) {\n            activeRoute = route;\n          }\n          return {\n            value: route.path,\n            label: route.label,\n          };\n        });\n\n        if (!activeRoute) {\n          throw new Error(\"Cannot match path.\");\n        }\n\n        const nextRoutes = (activeRoute as Route).routes || [];\n        if (level.length === 1) {\n          result.push(level[0]);\n        } else {\n          result.push({\n            options: level,\n            value: {\n              value: (activeRoute as Route).path,\n              label: (activeRoute as Route).label,\n            },\n          });\n        }\n\n        return [nextRoutes, result];\n      },\n      [routes, []],\n    );\n    return result;\n  }, [route]);\n\n  return (\n    <FlexBox rowGap={3} flexDirection=\"column\">\n      <BreadcrumbComponent {...args} segments={segments} onChange={onChange} />\n      <hr />\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Current route: /{route}\n      </Text>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Available routes:\n      </Text>\n      <Text fontWeight=\"regular\" variant={\"paragraph\"} style={{ cursor: \"pointer\" }}>\n        <Routes routes={routes} onClick={setRoute} />\n      </Text>\n    </FlexBox>\n  );\n};\n"],
+  "sourcesContent": ["import React, { useState, useCallback, useMemo } from \"react\";\nimport styled from \"styled-components\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport BreadcrumbComponent, { Props } from \"./index\";\n\nexport default {\n  title: \"Navigation/Breadcrumb\",\n  component: BreadcrumbComponent,\n};\n\ntype Route = {\n  path: string;\n  label: string;\n  routes?: Route[];\n};\nconst routes: Route[] = [\n  {\n    path: \"settings\",\n    label: \"Settings\",\n    routes: [\n      { path: \"experimental\", label: \"Experimental\" },\n      { path: \"developer\", label: \"Developer\" },\n    ],\n  },\n  {\n    path: \"account\",\n    label: \"Account\",\n    routes: [{ path: \"user\", label: \"User\", routes: [{ path: \"edit\", label: \"Edit\" }] }],\n  },\n  {\n    path: \"apps\",\n    label: \"Applications\",\n    routes: [\n      { path: \"buy\", label: \"Buy\" },\n      { path: \"sell\", label: \"Sell\" },\n      { path: \"swap\", label: \"Swap\", routes: [{ path: \"confirm\", label: \"Confirm\" }] },\n    ],\n  },\n];\n\nconst RouteElement = styled.div`\n  &:hover {\n    text-decoration: underline;\n  }\n`;\nconst Routes = ({\n  onClick,\n  routes,\n  previousPath = [],\n}: {\n  onClick: (path: string) => void;\n  routes?: Route[];\n  previousPath?: string[];\n}): JSX.Element | null => {\n  if (!routes || routes.length === 0) return null;\n\n  return (\n    <div style={{ paddingLeft: \"1em\" }}>\n      {routes.map(route => (\n        <>\n          <RouteElement onClick={() => onClick([...previousPath, route.path].join(\"/\"))}>\n            {route.label} [{\"/\" + route.path}]\n          </RouteElement>\n          <Routes\n            routes={route.routes}\n            previousPath={[...previousPath, route.path]}\n            onClick={onClick}\n          />\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport const Breadcrumb = (args: Props): JSX.Element => {\n  const [route, setRoute] = useState(\"apps/swap/confirm\");\n\n  const onChange = useCallback((value: string[]) => setRoute(value.join(\"/\")), [setRoute]);\n  const segments = useMemo(() => {\n    const paths = route.split(\"/\");\n\n    const [, result] = paths.reduce<[Route[], React.ComponentProps<typeof Breadcrumb>[\"segments\"]]>(\n      ([routes, result], path) => {\n        let activeRoute: Route | null = null;\n        const level = routes.map(route => {\n          if (route.path === path) {\n            activeRoute = route;\n          }\n          return {\n            value: route.path,\n            label: route.label,\n          };\n        });\n\n        if (!activeRoute) {\n          throw new Error(\"Cannot match path.\");\n        }\n\n        const nextRoutes = (activeRoute as Route).routes || [];\n        if (level.length === 1) {\n          result.push(level[0]);\n        } else {\n          result.push({\n            options: level,\n            value: {\n              value: (activeRoute as Route).path,\n              label: (activeRoute as Route).label,\n            },\n          });\n        }\n\n        return [nextRoutes, result];\n      },\n      [routes, []],\n    );\n    return result;\n  }, [route]);\n\n  return (\n    <FlexBox rowGap={3} flexDirection=\"column\">\n      <BreadcrumbComponent {...args} segments={segments} onChange={onChange} />\n      <hr />\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Current route: /{route}\n      </Text>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Available routes:\n      </Text>\n      <Text fontWeight=\"regular\" variant={\"paragraph\"} style={{ cursor: \"pointer\" }}>\n        <Routes routes={routes} onClick={setRoute} />\n      </Text>\n    </FlexBox>\n  );\n};\n"],
   "mappings": "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",
   "names": ["BreadcrumbComponent", "styled", "routes", "React", "result", "route", "FlexBox", "Text"]
 }

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

@@ -44,9 +44,9 @@ const Link = (0, import_styled_components.default)(import_Text.default).attrs({
   tabIndex: 0
 })`
   cursor: pointer;
-  :hover,
-  :active,
-  :focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: ${(p) => p.theme.colors.neutral.c100};
     text-decoration: underline;
   }
@@ -81,7 +81,7 @@ var Breadcrumb_default = (0, import_react.memo)(function Breadcrumb({ segments,
                 maxWidth: void 0,
                 transform: void 0,
                 color: theme.colors.neutral.c80,
-                ":hover": {
+                "&:hover": {
                   color: theme.colors.neutral.c100,
                   textDecoration: "underline"
                 }

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

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

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js CHANGED Viewed

@@ -81,11 +81,11 @@ const Wrapper = import_styled_components.default.div`
   ${(p) => p.isClickable ? `
     border-radius: var(--radius-m);
     padding: var(--margin-s);
-    :hover {
+    &:hover {
       background-color: var(--colors-surface-transparent-hover);
     }
-    :active {
+    &:active {
       background-color: var(--colors-surface-transparent-pressed);
     }
   ` : ""}

package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex, Icon, Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Tag } from \"../Tag/Tag\";\n\nexport type Account = {\n  address: string;\n  balance?: string;\n  cryptoId?: string;\n  fiatValue?: string;\n  id: string;\n  name: string;\n  parentId?: string;\n  protocol?: string;\n  ticker?: string;\n};\n\nexport type RightElementArrow = {\n  type: \"arrow\";\n};\n\nexport type RightElementCheckbox = {\n  type: \"checkbox\";\n  checkbox: CheckboxProps;\n};\n\nexport type RightElementEdit = {\n  type: \"edit\";\n  onClick: () => void;\n};\n\nexport type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;\n\nexport type AccountItemProps = {\n  onClick?: () => void;\n  account: Account;\n  rightElement?: RightElement;\n  showIcon?: boolean;\n  backgroundColor?: string;\n};\n\nconst ICON_BUTTONS_SIZE = \"32px\";\n\n// TODO a proper IconButton component that handles hover and pressed states.\nconst IconButton = styled.button`\n  ${withTokens(\"colors-content-default-default\")}\n\n  all: unset;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ${ICON_BUTTONS_SIZE};\n  width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Wrapper = styled.div<{ backgroundColor?: string; isClickable: boolean }>`\n  ${withTokens(\n    \"spacing-xxxs\",\n    \"spacing-xxs\",\n    \"spacing-xs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"radius-m\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-content-subdued-default-default\",\n    \"colors-surface-transparent-subdued-default\",\n  )}\n\n  display: flex;\n  cursor: ${p => (p.isClickable ? \"pointer\" : \"default\")};\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 200px;\n  overflow: hidden;\n\n  background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"transparent\")};\n\n  ${p =>\n    p.isClickable\n      ? `\n    border-radius: var(--radius-m);\n    padding: var(--margin-s);\n    :hover {\n      background-color: var(--colors-surface-transparent-hover);\n    }\n\n    :active {\n      background-color: var(--colors-surface-transparent-pressed);\n    }\n  `\n      : \"\"}\n`;\n\nconst ContentContainer = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 1;\n  gap: var(--spacing-xs);\n  justify-content: space-between;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n`;\n\nconst AccountInfoContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: var(--spacing-xxxs);\n  min-width: 0;\n  width: 100%;\n`;\n\nconst NameDiv = styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1;\n  max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n  flex-shrink: 0;\n  margin-left: var(--spacing-xxs);\n  display: flex;\n  flex: 1;\n  max-width: fit-content;\n  align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  text-align: right;\n`;\n\nexport const AccountItem = ({\n  onClick,\n  account,\n  rightElement,\n  showIcon = true,\n  backgroundColor,\n}: AccountItemProps) => {\n  const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n  return (\n    <Wrapper backgroundColor={backgroundColor} isClickable={Boolean(onClick)} onClick={onClick}>\n      <ContentContainer>\n        <AccountInfoContainer>\n          <NameRow>\n            <NameDiv>\n              <Text\n                data-testid={`account-row-${name}`}\n                variant=\"largeLineHeight\"\n                fontWeight=\"semiBold\"\n                color=\"var(--colors-content-default-default)\"\n                fontSize=\"14px\"\n                lineHeight=\"20px\"\n                title={name}\n                style={{\n                  display: \"block\",\n                  whiteSpace: \"nowrap\",\n                  overflow: \"hidden\",\n                  textOverflow: \"ellipsis\",\n                }}\n              >\n                {name}\n              </Text>\n            </NameDiv>\n            {protocol && (\n              <TagWrapper>\n                <Tag textTransform=\"uppercase\">{protocol}</Tag>\n              </TagWrapper>\n            )}\n          </NameRow>\n          <Address\n            address={address}\n            cryptoId={cryptoId}\n            ticker={ticker}\n            parentId={parentId}\n            showIcon={showIcon}\n            isShortened\n          />\n        </AccountInfoContainer>\n        <BalanceContainer>\n          {fiatValue && <Text fontSize=\"14px\">{fiatValue}</Text>}\n          {balance && (\n            <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n              {balance}\n            </Text>\n          )}\n        </BalanceContainer>\n        {rightElement && rightElement.type === \"checkbox\" && (\n          <Flex data-testid=\"right-element-checkbox\" aria-label=\"Checkbox account item\">\n            <Checkbox {...rightElement.checkbox} size={20} />\n          </Flex>\n        )}\n        {rightElement && rightElement.type === \"arrow\" && (\n          <Flex data-testid=\"right-element-arrow-icon\" aria-label=\"Arrow account item\">\n            <Icon name=\"ChevronRight\" size={24} />\n          </Flex>\n        )}\n        {rightElement && rightElement.type === \"edit\" && (\n          <IconButton\n            aria-label=\"Edit account item\"\n            data-testid=\"right-element-edit-icon\"\n            onClick={e => {\n              e.stopPropagation();\n              if (rightElement?.type === \"edit\") {\n                rightElement.onClick();\n              }\n            }}\n          >\n            <Icons.PenEdit size=\"S\" color=\"var(--colors-content-default-default)\" />\n          </IconButton>\n        )}\n      </ContentContainer>\n    </Wrapper>\n  );\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex, Icon, Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport { Address } from \"../Address/Address\";\nimport type { CheckboxProps } from \"../Checkbox/Checkbox\";\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Tag } from \"../Tag/Tag\";\n\nexport type Account = {\n  address: string;\n  balance?: string;\n  cryptoId?: string;\n  fiatValue?: string;\n  id: string;\n  name: string;\n  parentId?: string;\n  protocol?: string;\n  ticker?: string;\n};\n\nexport type RightElementArrow = {\n  type: \"arrow\";\n};\n\nexport type RightElementCheckbox = {\n  type: \"checkbox\";\n  checkbox: CheckboxProps;\n};\n\nexport type RightElementEdit = {\n  type: \"edit\";\n  onClick: () => void;\n};\n\nexport type RightElement = RightElementArrow | RightElementCheckbox | RightElementEdit;\n\nexport type AccountItemProps = {\n  onClick?: () => void;\n  account: Account;\n  rightElement?: RightElement;\n  showIcon?: boolean;\n  backgroundColor?: string;\n};\n\nconst ICON_BUTTONS_SIZE = \"32px\";\n\n// TODO a proper IconButton component that handles hover and pressed states.\nconst IconButton = styled.button`\n  ${withTokens(\"colors-content-default-default\")}\n\n  all: unset;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ${ICON_BUTTONS_SIZE};\n  width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Wrapper = styled.div<{ backgroundColor?: string; isClickable: boolean }>`\n  ${withTokens(\n    \"spacing-xxxs\",\n    \"spacing-xxs\",\n    \"spacing-xs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"radius-m\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-content-subdued-default-default\",\n    \"colors-surface-transparent-subdued-default\",\n  )}\n\n  display: flex;\n  cursor: ${p => (p.isClickable ? \"pointer\" : \"default\")};\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 200px;\n  overflow: hidden;\n\n  background-color: ${p => (p.backgroundColor ? p.backgroundColor : \"transparent\")};\n\n  ${p =>\n    p.isClickable\n      ? `\n    border-radius: var(--radius-m);\n    padding: var(--margin-s);\n    &:hover {\n      background-color: var(--colors-surface-transparent-hover);\n    }\n\n    &:active {\n      background-color: var(--colors-surface-transparent-pressed);\n    }\n  `\n      : \"\"}\n`;\n\nconst ContentContainer = styled.div`\n  align-items: center;\n  display: flex;\n  flex: 1;\n  gap: var(--spacing-xs);\n  justify-content: space-between;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n`;\n\nconst AccountInfoContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-width: 0;\n  flex: 1;\n  overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: var(--spacing-xxxs);\n  min-width: 0;\n  width: 100%;\n`;\n\nconst NameDiv = styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1;\n  max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n  flex-shrink: 0;\n  margin-left: var(--spacing-xxs);\n  display: flex;\n  flex: 1;\n  max-width: fit-content;\n  align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  text-align: right;\n`;\n\nexport const AccountItem = ({\n  onClick,\n  account,\n  rightElement,\n  showIcon = true,\n  backgroundColor,\n}: AccountItemProps) => {\n  const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n  return (\n    <Wrapper backgroundColor={backgroundColor} isClickable={Boolean(onClick)} onClick={onClick}>\n      <ContentContainer>\n        <AccountInfoContainer>\n          <NameRow>\n            <NameDiv>\n              <Text\n                data-testid={`account-row-${name}`}\n                variant=\"largeLineHeight\"\n                fontWeight=\"semiBold\"\n                color=\"var(--colors-content-default-default)\"\n                fontSize=\"14px\"\n                lineHeight=\"20px\"\n                title={name}\n                style={{\n                  display: \"block\",\n                  whiteSpace: \"nowrap\",\n                  overflow: \"hidden\",\n                  textOverflow: \"ellipsis\",\n                }}\n              >\n                {name}\n              </Text>\n            </NameDiv>\n            {protocol && (\n              <TagWrapper>\n                <Tag textTransform=\"uppercase\">{protocol}</Tag>\n              </TagWrapper>\n            )}\n          </NameRow>\n          <Address\n            address={address}\n            cryptoId={cryptoId}\n            ticker={ticker}\n            parentId={parentId}\n            showIcon={showIcon}\n            isShortened\n          />\n        </AccountInfoContainer>\n        <BalanceContainer>\n          {fiatValue && <Text fontSize=\"14px\">{fiatValue}</Text>}\n          {balance && (\n            <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n              {balance}\n            </Text>\n          )}\n        </BalanceContainer>\n        {rightElement && rightElement.type === \"checkbox\" && (\n          <Flex data-testid=\"right-element-checkbox\" aria-label=\"Checkbox account item\">\n            <Checkbox {...rightElement.checkbox} size={20} />\n          </Flex>\n        )}\n        {rightElement && rightElement.type === \"arrow\" && (\n          <Flex data-testid=\"right-element-arrow-icon\" aria-label=\"Arrow account item\">\n            <Icon name=\"ChevronRight\" size={24} />\n          </Flex>\n        )}\n        {rightElement && rightElement.type === \"edit\" && (\n          <IconButton\n            aria-label=\"Edit account item\"\n            data-testid=\"right-element-edit-icon\"\n            onClick={e => {\n              e.stopPropagation();\n              if (rightElement?.type === \"edit\") {\n                rightElement.onClick();\n              }\n            }}\n          >\n            <Icons.PenEdit size=\"S\" color=\"var(--colors-content-default-default)\" />\n          </IconButton>\n        )}\n      </ContentContainer>\n    </Wrapper>\n  );\n};\n"],
   "mappings": "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",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js CHANGED Viewed

@@ -61,11 +61,11 @@ const Wrapper = import_styled_components.default.div`
   align-items: center;
   overflow: hidden;
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;

package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"@ledgerhq/crypto-icons\";\n\nconst copyToClipboard = async (text: string) => {\n  try {\n    await navigator.clipboard.writeText(text);\n  } catch (err) {\n    console.error(\"Failed to copy to clipboard:\", err);\n  }\n};\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n  id: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n  numberOfNetworks?: number;\n  assetId?: string;\n  shouldDisplayId?: boolean;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n  overflow: hidden;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  overflow: hidden;\n  flex: 1;\n  gap: 4px;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TagWrapper = styled.div`\n  ${withTokens(\n    \"colors-surface-transparent-subdued-default\",\n    \"colors-content-subdued-default-default\",\n    \"radius-xs\",\n    \"spacing-xxxs\",\n  )}\n\n  padding: var(--spacing-xxxs);\n  border-radius: var(--radius-xs);\n  display: inline-flex;\n  background-color: var(--colors-surface-transparent-subdued-default);\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const AssetItem = ({\n  name,\n  ticker,\n  numberOfNetworks,\n  id,\n  assetId,\n  onClick,\n  leftElement,\n  rightElement,\n  shouldDisplayId,\n}: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker, id })}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          data-testid={`asset-item-name-${name}`}\n          fontSize=\"14px\"\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n          style={{\n            display: \"block\",\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>\n          <Text\n            data-testid={`asset-item-ticker-${ticker}`}\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            variant=\"bodyLineHeight\"\n            fontWeight=\"medium\"\n            color=\"var(--colors-content-subdued-default-default)\"\n          >\n            {ticker}\n          </Text>\n          {leftElement}\n          {shouldDisplayId && assetId ? (\n            <TagWrapper\n              onClick={e => {\n                e.stopPropagation();\n                copyToClipboard(assetId);\n              }}\n            >\n              <Text\n                color=\"var(--colors-content-subdued-default-default)\"\n                fontSize=\"12px\"\n              >{`${assetId} (${numberOfNetworks} networks)`}</Text>\n            </TagWrapper>\n          ) : null}\n        </LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"@ledgerhq/crypto-icons\";\n\nconst copyToClipboard = async (text: string) => {\n  try {\n    await navigator.clipboard.writeText(text);\n  } catch (err) {\n    console.error(\"Failed to copy to clipboard:\", err);\n  }\n};\n\nexport type AssetType = {\n  name: string;\n  ticker: string;\n  id: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n  numberOfNetworks?: number;\n  assetId?: string;\n  shouldDisplayId?: boolean;\n};\n\ntype AssetItemProps = AssetType & {\n  onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n  overflow: hidden;\n\n  &:hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  &:active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  overflow: hidden;\n  flex: 1;\n  gap: 4px;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TagWrapper = styled.div`\n  ${withTokens(\n    \"colors-surface-transparent-subdued-default\",\n    \"colors-content-subdued-default-default\",\n    \"radius-xs\",\n    \"spacing-xxxs\",\n  )}\n\n  padding: var(--spacing-xxxs);\n  border-radius: var(--radius-xs);\n  display: inline-flex;\n  background-color: var(--colors-surface-transparent-subdued-default);\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const AssetItem = ({\n  name,\n  ticker,\n  numberOfNetworks,\n  id,\n  assetId,\n  onClick,\n  leftElement,\n  rightElement,\n  shouldDisplayId,\n}: AssetItemProps) => {\n  return (\n    <Wrapper onClick={() => onClick({ name, ticker, id })}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          data-testid={`asset-item-name-${name}`}\n          fontSize=\"14px\"\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n          style={{\n            display: \"block\",\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n          }}\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>\n          <Text\n            data-testid={`asset-item-ticker-${ticker}`}\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            variant=\"bodyLineHeight\"\n            fontWeight=\"medium\"\n            color=\"var(--colors-content-subdued-default-default)\"\n          >\n            {ticker}\n          </Text>\n          {leftElement}\n          {shouldDisplayId && assetId ? (\n            <TagWrapper\n              onClick={e => {\n                e.stopPropagation();\n                copyToClipboard(assetId);\n              }}\n            >\n              <Text\n                color=\"var(--colors-content-subdued-default-default)\"\n                fontSize=\"12px\"\n              >{`${assetId} (${numberOfNetworks} networks)`}</Text>\n            </TagWrapper>\n          ) : null}\n        </LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,0BAA2B;AAE3B,MAAM,kBAAkB,OAAO,SAAiB;AAC9C,MAAI;AACF,UAAM,UAAU,UAAU,UAAU,IAAI;AAAA,EAC1C,SAAS,KAAK;AACZ,YAAQ,MAAM,gCAAgC,GAAG;AAAA,EACnD;AACF;AAiBA,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,aAAa,yBAAAA,QAAO;AAAA,QACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,kCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB,IAAI;AAAA,MACpC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qBAAqB,MAAM;AAAA,MACxC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,aACA,mBAAmB,UAClB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,OAAK;AACZ,UAAE,gBAAgB;AAClB,wBAAgB,OAAO;AAAA,MACzB;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,UAAS;AAAA;AAAA,MACT,GAAG,OAAO,KAAK,gBAAgB;AAAA,IAAa;AAAA,EAChD,IACE,IACN,CACF,GACC,YACH;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/CardButton/CardButton.js CHANGED Viewed

@@ -65,17 +65,17 @@ const Button = import_styled_components.default.button`
   border-radius: var(--radius-s);
   border-color: ${({ theme: { theme } }) => theme === "light" ? "var(--colors-border-light-default);" : "var(--colors-opacity-default-10);"}
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
     ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-hover);"}
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
     ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-pressed);"}
   }
-  :focus-visible {
+  &:focus-visible {
     border-color: var(--colors-border-focus-default);
     border-width: var(--border-width-focus);
   }

package/lib/cjs/pre-ldls/components/CardButton/CardButton.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/CardButton/CardButton.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Button = styled.button`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-border-light-default\",\n    \"colors-opacity-default-10\",\n    \"colors-border-subdued-default-hover\",\n    \"colors-border-subdued-default-pressed\",\n    \"colors-border-focus-default\",\n    \"radius-s\",\n    \"border-width-default\",\n    \"border-width-focus\",\n    \"spacing-xs\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xs);\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n\n  background-color: transparent;\n  color: var(--colors-content-default-default);\n  font-weight: 600;\n\n  border-width: var(--border-width-default);\n  border-radius: var(--radius-s);\n  border-color: ${({ theme: { theme } }) =>\n    theme === \"light\" ? \"var(--colors-border-light-default);\" : \"var(--colors-opacity-default-10);\"}\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n    ${({ theme: { theme } }) =>\n      theme === \"light\" && \"border-color: var(--colors-border-subdued-default-hover);\"}\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n    ${({ theme: { theme } }) => theme === \"light\" && \"border-color: var(--colors-border-subdued-default-pressed);\"}\n  }\n\n  :focus-visible {\n    border-color: var(--colors-border-focus-default);\n    border-width: var(--border-width-focus);\n  }\n`;\n\nexport const CardButton = ({\n  onClick,\n  title,\n  iconRight,\n  variant = \"default\",\n}: {\n  onClick: () => void;\n  title: string;\n  iconRight?: JSX.Element;\n  variant?: \"default\" | \"dashed\";\n}) => {\n  return (\n    <Button onClick={onClick} style={{ borderStyle: variant === \"default\" ? \"solid\" : \"dashed\" }}>\n      {title} {iconRight}\n    </Button>\n  );\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Button = styled.button`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n    \"colors-border-light-default\",\n    \"colors-opacity-default-10\",\n    \"colors-border-subdued-default-hover\",\n    \"colors-border-subdued-default-pressed\",\n    \"colors-border-focus-default\",\n    \"radius-s\",\n    \"border-width-default\",\n    \"border-width-focus\",\n    \"spacing-xs\",\n  )}\n\n  display: flex;\n  padding: var(--spacing-xs);\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n\n  background-color: transparent;\n  color: var(--colors-content-default-default);\n  font-weight: 600;\n\n  border-width: var(--border-width-default);\n  border-radius: var(--radius-s);\n  border-color: ${({ theme: { theme } }) =>\n    theme === \"light\" ? \"var(--colors-border-light-default);\" : \"var(--colors-opacity-default-10);\"}\n\n  &:hover {\n    background-color: var(--colors-surface-transparent-hover);\n    ${({ theme: { theme } }) =>\n      theme === \"light\" && \"border-color: var(--colors-border-subdued-default-hover);\"}\n  }\n\n  &:active {\n    background-color: var(--colors-surface-transparent-pressed);\n    ${({ theme: { theme } }) => theme === \"light\" && \"border-color: var(--colors-border-subdued-default-pressed);\"}\n  }\n\n  &:focus-visible {\n    border-color: var(--colors-border-focus-default);\n    border-width: var(--border-width-focus);\n  }\n`;\n\nexport const CardButton = ({\n  onClick,\n  title,\n  iconRight,\n  variant = \"default\",\n}: {\n  onClick: () => void;\n  title: string;\n  iconRight?: JSX.Element;\n  variant?: \"default\" | \"dashed\";\n}) => {\n  return (\n    <Button onClick={onClick} style={{ borderStyle: variant === \"default\" ? \"solid\" : \"dashed\" }}>\n      {title} {iconRight}\n    </Button>\n  );\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,SAAS,yBAAAA,QAAO;AAAA,QAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAee,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAClC,UAAU,UAAU,wCAAwC,mCAAmC;AAAA;AAAA;AAAA;AAAA,MAI7F,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MACpB,UAAU,WAAW,2DAA2D;AAAA;AAAA;AAAA;AAAA;AAAA,MAKhF,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,WAAW,6DAA6D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3G,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAKM;AACJ,SACE,6BAAAC,QAAA,cAAC,UAAO,SAAkB,OAAO,EAAE,aAAa,YAAY,YAAY,UAAU,SAAS,KACxF,OAAM,KAAE,SACX;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js CHANGED Viewed

@@ -53,11 +53,11 @@ const Wrapper = import_styled_components.default.div`
   border-radius: var(--radius-s, 8px);
   align-items: center;
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;

package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"@ledgerhq/crypto-icons\";\n\nexport type Network = {\n  name: string;\n  id: string;\n  ticker: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\ntype NetworkItemProps = Network & {\n  onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-default-default\",\n    \"colors-content-subdued-default-default\", // used by leftElement child\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nexport const NetworkItem = ({\n  name,\n  onClick,\n  id,\n  ticker,\n  leftElement,\n  rightElement,\n}: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          data-testid={`network-item-name-${name}`}\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>{leftElement}</LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"@ledgerhq/crypto-icons\";\n\nexport type Network = {\n  name: string;\n  id: string;\n  ticker: string;\n  leftElement?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\ntype NetworkItemProps = Network & {\n  onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xxs\",\n    \"margin-s\",\n    \"radius-s\",\n    \"colors-content-default-default\",\n    \"colors-content-subdued-default-default\", // used by leftElement child\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xxs);\n  cursor: pointer;\n  border-radius: var(--radius-s, 8px);\n  align-items: center;\n\n  &:hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  &:active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--margin-s);\n  flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nexport const NetworkItem = ({\n  name,\n  onClick,\n  id,\n  ticker,\n  leftElement,\n  rightElement,\n}: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\n      <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n      <InfoWrapper>\n        <Text\n          data-testid={`network-item-name-${name}`}\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n        <LeftElementWrapper>{leftElement}</LeftElementWrapper>\n      </InfoWrapper>\n      {rightElement}\n    </Wrapper>\n  );\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,0BAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,kCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qBAAqB,IAAI;AAAA,MACtC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BAAoB,WAAY,CACnC,GACC,YACH;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/cjs/pre-ldls/components/Search/Search.js CHANGED Viewed

@@ -40,7 +40,7 @@ var import_libs = require("../../libs");
 const Wrapper = import_styled_components.default.div`
   ${(0, import_libs.withTokens)("colors-border-active-default", "radius-s")}
-  :focus-within {
+  &:focus-within {
     box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
   }
   border-radius: var(--radius-s, 8px);

package/lib/cjs/pre-ldls/components/Search/Search.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/Search/Search.tsx"],
-  "sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled.div`\n  ${withTokens(\"colors-border-active-default\", \"radius-s\")}\n\n  :focus-within {\n    box-shadow: inset 0 0 0 2px var(--colors-border-active-default);\n  }\n  border-radius: var(--radius-s, 8px);\n`;\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n  InputProps & {\n    onDebouncedChange?: (current: string, prev: string) => void;\n    debounceTime?: number;\n    autoFocus?: boolean;\n  }\n>;\n\nexport function Search({\n  onDebouncedChange,\n  debounceTime = 500,\n  onChange,\n  autoFocus = true,\n  ...props\n}: Props) {\n  const initialValue = props.value ?? props.defaultValue ?? \"\";\n  const prevValue = useRef(String(initialValue));\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Delay focus to prevent layout shifts\n      setTimeout(() => {\n        searchInputRef.current?.focus({ preventScroll: true });\n      }, 0);\n    }\n  }, [autoFocus]);\n\n  const handleDebouncedChange = useDebouncedCallback(\n    useMemo(() => {\n      if (!onDebouncedChange) return;\n      return (event: ChangeEvent<HTMLInputElement>) => {\n        const current = event.target.value;\n        onDebouncedChange(current, prevValue.current);\n        prevValue.current = current;\n      };\n    }, [onDebouncedChange]),\n    debounceTime,\n  );\n\n  const handleChange = useMemo(() => {\n    if (!handleDebouncedChange && !onChange) return;\n    return (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      handleDebouncedChange?.(event);\n    };\n  }, [handleDebouncedChange, onChange]);\n\n  return (\n    <Wrapper>\n      <Input\n        {...props}\n        ref={searchInputRef}\n        icon={<Icons.Search size=\"S\" />}\n        onChange={handleChange}\n      />\n    </Wrapper>\n  );\n}\n"],
+  "sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled.div`\n  ${withTokens(\"colors-border-active-default\", \"radius-s\")}\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px var(--colors-border-active-default);\n  }\n  border-radius: var(--radius-s, 8px);\n`;\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n  InputProps & {\n    onDebouncedChange?: (current: string, prev: string) => void;\n    debounceTime?: number;\n    autoFocus?: boolean;\n  }\n>;\n\nexport function Search({\n  onDebouncedChange,\n  debounceTime = 500,\n  onChange,\n  autoFocus = true,\n  ...props\n}: Props) {\n  const initialValue = props.value ?? props.defaultValue ?? \"\";\n  const prevValue = useRef(String(initialValue));\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Delay focus to prevent layout shifts\n      setTimeout(() => {\n        searchInputRef.current?.focus({ preventScroll: true });\n      }, 0);\n    }\n  }, [autoFocus]);\n\n  const handleDebouncedChange = useDebouncedCallback(\n    useMemo(() => {\n      if (!onDebouncedChange) return;\n      return (event: ChangeEvent<HTMLInputElement>) => {\n        const current = event.target.value;\n        onDebouncedChange(current, prevValue.current);\n        prevValue.current = current;\n      };\n    }, [onDebouncedChange]),\n    debounceTime,\n  );\n\n  const handleChange = useMemo(() => {\n    if (!handleDebouncedChange && !onChange) return;\n    return (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      handleDebouncedChange?.(event);\n    };\n  }, [handleDebouncedChange, onChange]);\n\n  return (\n    <Wrapper>\n      <Input\n        {...props}\n        ref={searchInputRef}\n        icon={<Icons.Search size=\"S\" />}\n        onChange={handleChange}\n      />\n    </Wrapper>\n  );\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AACtB,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gCAAgC,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBnD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAU;AACR,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAC7C,QAAM,qBAAiB,qBAAyB,IAAI;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,eAAe,SAAS;AAEvC,iBAAW,MAAM;AAvCvB;AAwCQ,6BAAe,YAAf,mBAAwB,MAAM,EAAE,eAAe,KAAK;AAAA,MACtD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,MAC7B,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
   "names": ["styled", "React"]
 }

package/lib/components/cta/Link/index.js CHANGED Viewed

@@ -22,10 +22,10 @@ export const Base = baseStyled.a `
   align-items: center;
   justify-content: center;
-  :hover {
+  &:hover {
     text-decoration: underline;
   }
-  :active {
+  &:active {
     color: ${({ color, theme, type = "main" }) => color || getLinkColors(theme.colors)[type]["pressed"]};
     text-decoration: underline;
   }

package/lib/components/form/Radio/RadioElement.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;~~AAkKxE~~,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;CA6BjC,CAAC;AAKF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;AAmKxE,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;CA6BjC,CAAC;AAKF,eAAe,OAAO,CAAC"}

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

@@ -36,53 +36,53 @@ const Input = styled.input `
   }
   &[data-variant="default"] {
-    :hover {
+    &:hover {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};
     }
-    :active {
+    &:active {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};
     }
-    :checked,
-    :focus {
+    &:checked,
+    &:focus {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};
     }
   }
   &[data-variant="main"] {
-    :hover {
+    &:hover {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};
     }
-    :active,
-    :checked,
-    :focus {
+    &:active,
+    &:checked,
+    &:focus {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};
     }
   }
   &[data-variant="success"] {
-    :hover,
-    :checked:not([disabled]),
-    :checked:not([disabled]) + ${Label}, :focus {
+    &:hover,
+    &:checked:not([disabled]),
+    &:checked:not([disabled]) + ${Label}, &:focus {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};
     }
   }
   &[data-variant="error"] {
-    :hover,
-    :checked:not([disabled]),
-    :checked:not([disabled]) + ${Label}, :focus {
+    &:hover,
+    &:checked:not([disabled]),
+    &:checked:not([disabled]) + ${Label}, &:focus {
       --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};
     }
-    :focus {
+    &:focus {
       box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};
     }
   }
@@ -98,23 +98,24 @@ const outlinedCSS = css `
   border: 1px solid ${p => p.theme.colors.neutral.c50};
   border-radius: ${p => p.theme.radii[2]}px;
   &[data-variant="default"] {
-    :hover {
+    &:hover {
       border-color: ${p => p.theme.colors.primary.c90};
     }
-    &[data-checked] :active {
+    &[data-checked]:active {
       border-color: ${p => p.theme.colors.primary.c100};
     }
-    :focus {
+    &:focus {
       border-color: ${p => p.theme.colors.primary.c80};
     }
   }
   &[data-variant="main"] {
-    :hover {
+    &:hover {
       border-color: ${p => p.theme.colors.neutral.c90};
     }
     &[data-checked],
-    :active :focus {
+    &:active,
+    &:focus {
       border-color: ${p => p.theme.colors.neutral.c100};
     }
   }
@@ -123,7 +124,7 @@ const outlinedCSS = css `
     &[data-checked]:not([disabled]) {
       border-color: ${p => p.theme.colors.success.c50};
     }
-    :hover {
+    &:hover {
       border-color: ${p => p.theme.colors.success.c50};
     }
   }
@@ -132,7 +133,7 @@ const outlinedCSS = css `
     &[data-checked]:not([disabled]) {
       border-color: ${p => p.theme.colors.error.c50};
     }
-    :hover {
+    &:hover {
       border-color: ${p => p.theme.colors.error.c50};
     }
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;2CACiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;CAE1E,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;gCACM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;;;mBAQ5C,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;oCAqBX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;oCAIhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;oCAM3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;oCAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;oCAGhC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;;~~iCAO9C~~,KAAK;~~oCACF~~,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;oCAG/B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;;;~~iCAO9C~~,KAAK;~~oCACF~~,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;oCAG7B,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC;;;;;kCAK3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;wBAEzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;CAEtD,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;sBAED,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;mBAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;sBAGlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;sBAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;sBAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;sBAM/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG~~;;;;sBAI~~/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;sBAMhC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;sBAG/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;;;;sBAM/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;sBAG7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;;;;;oBAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;;CAGlD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAEvD;;;;;;;;IAQE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW;CACjC,CAAC;AAUF,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACU,EAAe,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,OAAO,KAAK,SAAS;QAAE,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAE/F,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,IAAI,KAAK,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9F,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,oBACG,OAAO,KACjB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,QAAQ,EAAE,QAAQ;QAElB,oBAAC,KAAK,IACJ,IAAI,EAAC,OAAO,kBACE,OAAO,EACrB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,IAAI,KACd,KAAK,GACT;QACF,oBAAC,KAAK,IAAC,OAAO,EAAC,WAAW,IAAE,KAAK,CAAS,CAC7B,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,+DAA+D;AACtG,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;AAEtB,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"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"}

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

@@ -20,7 +20,7 @@ const Container = styled(Flex) `
   border-radius: ${p => `${p.theme.radii[2]}px`};
   padding: ${p => p.theme.space[6]}px;
-  :hover {
+  &:hover {
     border-color: ${p => (p.disabled || p.checked ? "" : p.theme.colors.primary.c80)};
   }
 `;

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

@@ -38,7 +38,7 @@ const stylesFn = (theme) => ({
     multiValueRemove: provided => ({
         ...provided,
         cursor: "pointer",
-        ":hover": {
+        "&:hover": {
             color: theme.colors.error.c50,
             backgroundColor: theme.colors.error.c30,
         },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/SelectInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,MAMN,MAAM,cAAc,CAAC;AACtB,OAAO,EAAgB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,uBAAuB,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,oBAAoB,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,aAAa,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,YAAY,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAsBnD,MAAM,QAAQ,GAAG,CACf,KAAmB,EACI,EAAE,CAAC,CAAC;IAC3B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC;IACvC,cAAc,EAAE,oBAAoB,CAAC,SAAS,EAAE;IAChD,iBAAiB,EAAE,uBAAuB,CAAC,SAAS,EAAE;IACtD,QAAQ,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC,SAAS,EAAE;IAChC,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAClB,GAAG,QAAQ;QACX,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;KACjC,CAAC;IACF,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QACxB,GAAG,QAAQ;QACX,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;KAChC,CAAC;IACF,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QACxB,GAAG,QAAQ;QACX,KAAK,EAAE,SAAS;KACjB,CAAC;IACF,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QACvB,GAAG,QAAQ;QACX,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;QACzC,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC5B,GAAG,QAAQ;QACX,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;KACjC,CAAC;IACF,gBAAgB,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7B,GAAG,QAAQ;QACX,MAAM,EAAE,SAAS;QACjB,~~QAAQ~~,EAAE;~~YACR~~,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;YAC7B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG;SACxC;KACF,CAAC;IACF,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QACjB,GAAG,QAAQ;QACX,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,MAAM;QACjB,UAAU,EAAE,MAAM;KACnB,CAAC;CACH,CAAC,CAAC;AAEH,SAAS,WAAW,CAA+C,EACjE,KAAK,EACL,SAAS,GAAG,EAAE,EACd,SAAS,EACT,YAAY,EACZ,GAAG,KAAK,EACO;IACf,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC,EACxF,CAAC,KAAK,EAAE,YAAY,CAAC,CACtB,CAAC;IACF,MAAM,EAAE,UAAU,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,YAAY,GAAG,CACnB,oBAAC,MAAM,OACD,KAAK,EACT,MAAM,EAAE;YACN,GAAG,MAAM;YACT,GAAG,KAAK,CAAC,MAAM;SAChB,EACD,eAAe,EAAC,cAAc,EAC9B,UAAU,EAAE;YACV,OAAO,EAAE,aAAa,CAAC,OAAO;YAC9B,cAAc,EAAE,oBAAoB,CAAC,cAAc;YACnD,mBAAmB;YACnB,iBAAiB,EAAE,uBAAuB,CAAC,iBAAiB;YAC5D,QAAQ,EAAE,cAAc,CAAC,QAAQ;YACjC,MAAM,EAAE,YAAY,CAAC,MAAM;YAC3B,kBAAkB,EAAE,IAAI;YACxB,GAAG,UAAU;SACd;QACD,gEAAgE;QAChE,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IAEF,IAAI,SAAS;QAAE,OAAO,YAAY,CAAC;IAEnC,OAAO,CACL;QACG,YAAY;QACZ,KAAK,IAAI,CAAC,UAAU,IAAI,CACvB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,WAAW,IAAG,KAAK,CAAuB,CACzE,CACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC,WAAW,CAAuB,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/SelectInput/index.tsx"],"names":[],"mappings":"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"}

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

@@ -11,9 +11,9 @@ const Link = styled(Text).attrs({
     tabIndex: 0,
 }) `
   cursor: pointer;
-  :hover,
-  :active,
-  :focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: ${p => p.theme.colors.neutral.c100};
     text-decoration: underline;
   }
@@ -41,7 +41,7 @@ export default memo(function Breadcrumb({ segments, onChange }) {
                         maxWidth: undefined,
                         transform: undefined,
                         color: theme.colors.neutral.c80,
-                        ":hover": {
+                        "&:hover": {
                             color: theme.colors.neutral.c100,
                             textDecoration: "underline",
                         },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,aAAa,MAAM,gCAAgC,CAAC;AAahE,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,EAAE,EAAE,gBAAgB;IACpB,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC;CACZ,CAAC,CAAA;;;;;aAKW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;CAG5C,CAAC;AAEF,SAAS,cAAc,CAAC,OAAgB;IACtC,OAAQ,OAAoB,CAAC,OAAO,KAAK,SAAS,CAAC;AACrD,CAAC;AAED,eAAe,IAAI,CAAC,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAS;IACnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,CAChC,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;QAC7C,MAAM,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC;QAEhC,WAAW,CAAC,IAAI,CACd;YACG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CACX,oBAAC,IAAI,IAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,WAAW,QAE7D,CACR,CAAC,CAAC,CAAC,IAAI;YACP,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACzB,oBAAC,QAAQ,IACP,KAAK,EAAC,EAAE,EACR,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,EACxD,MAAM,EAAE;oBACN,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;wBAC7B,GAAG,aAAa,CAAC,SAAS,CAAU,KAAK,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC;wBAC3D,MAAM,EAAE,SAAS;qBAClB,CAAC;oBACF,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;wBACxB,GAAG,QAAQ;wBACX,MAAM,EAAE,CAAC;wBACT,GAAG,EAAE,SAAS;wBACd,QAAQ,EAAE,SAAS;wBACnB,QAAQ,EAAE,SAAS;wBACnB,QAAQ,EAAE,SAAS;wBACnB,SAAS,EAAE,SAAS;wBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;wBAC/B,~~QAAQ~~,EAAE;~~4BACR~~,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;4BAChC,cAAc,EAAE,WAAW;yBAC5B;qBACF,CAAC;iBACH,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IACH,SAAS,EAAE,CAAC,KAA2C,EAAE,EAAE,CACzD,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAE5E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,IAElD,OAAO,CAAC,KAAK,CACT,CACR,CACA,CACJ,CAAC;QAEF,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChF,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,EAAE,EAAE,EAAE,CAAC,CACT,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,IACpC,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/Breadcrumb/index.tsx"],"names":[],"mappings":"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"}

package/lib/pre-ldls/components/AccountItem/AccountItem.js CHANGED Viewed

@@ -38,11 +38,11 @@ const Wrapper = styled.div `
     ? `
     border-radius: var(--radius-m);
     padding: var(--margin-s);
-    :hover {
+    &:hover {
       background-color: var(--colors-surface-transparent-hover);
     }
-    :active {
+    &:active {
       background-color: var(--colors-surface-transparent-pressed);
     }
   `

package/lib/pre-ldls/components/AssetItem/AssetItem.js CHANGED Viewed

@@ -21,11 +21,11 @@ const Wrapper = styled.div `
   align-items: center;
   overflow: hidden;
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;

package/lib/pre-ldls/components/CardButton/CardButton.js CHANGED Viewed

@@ -19,17 +19,17 @@ const Button = styled.button `
   border-radius: var(--radius-s);
   border-color: ${({ theme: { theme } }) => theme === "light" ? "var(--colors-border-light-default);" : "var(--colors-opacity-default-10);"}
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
     ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-hover);"}
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
     ${({ theme: { theme } }) => theme === "light" && "border-color: var(--colors-border-subdued-default-pressed);"}
   }
-  :focus-visible {
+  &:focus-visible {
     border-color: var(--colors-border-focus-default);
     border-width: var(--border-width-focus);
   }

package/lib/pre-ldls/components/NetworkItem/NetworkItem.js CHANGED Viewed

@@ -12,11 +12,11 @@ const Wrapper = styled.div `
   border-radius: var(--radius-s, 8px);
   align-items: center;
-  :hover {
+  &:hover {
     background-color: var(--colors-surface-transparent-hover);
   }
-  :active {
+  &:active {
     background-color: var(--colors-surface-transparent-pressed);
   }
 `;

package/lib/pre-ldls/components/Search/Search.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { withTokens } from "../../libs";
 const Wrapper = styled.div `
   ${withTokens("colors-border-active-default", "radius-s")}
-  :focus-within {
+  &:focus-within {
     box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
   }
   border-radius: var(--radius-s, 8px);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.44.1",
+  "version": "0.45.0-nightly.20260127025000",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Wallet Team <team-live@ledger.fr>",
   "repository": {