@ledgerhq/react-ui 0.53.0 → 0.53.1-nightly.20260902021544

package/lib/cjs/components/layout/Banner/NotificationCard/NotificationCard.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/layout/Banner/NotificationCard/NotificationCard.stories.js","sources":["webpack://@ledgerhq/react-ui/./src/components/asorted/Icon/NotificationIcon.tsx","webpack://@ledgerhq/react-ui/./src/components/asorted/Text/index.tsx","webpack://@ledgerhq/react-ui/./src/components/asorted/Text/styles.ts","webpack://@ledgerhq/react-ui/./src/components/cta/Link/getLinkStyle.ts","webpack://@ledgerhq/react-ui/./src/components/cta/Link/index.tsx","webpack://@ledgerhq/react-ui/./src/components/cta/getCtaStyle.ts","webpack://@ledgerhq/react-ui/./src/components/layout/Banner/NotificationCard/index.tsx","webpack://@ledgerhq/react-ui/./src/components/layout/Box/index.ts","webpack://@ledgerhq/react-ui/./src/components/layout/Flex/index.ts","webpack://@ledgerhq/react-ui/./src/components/layout/Grid/index.ts","webpack://@ledgerhq/react-ui/./src/components/styled.ts","webpack://@ledgerhq/react-ui/./src/styles/helpers.ts","webpack://@ledgerhq/react-ui/./src/styles/styled/fontFamily.ts","webpack://@ledgerhq/react-ui/./src/styles/system/gaps.ts","webpack://@ledgerhq/react-ui/./src/styles/theme.ts","webpack://@ledgerhq/react-ui/webpack/runtime/compat_get_default_export","webpack://@ledgerhq/react-ui/webpack/runtime/define_property_getters","webpack://@ledgerhq/react-ui/webpack/runtime/has_own_property","webpack://@ledgerhq/react-ui/webpack/runtime/make_namespace_object","webpack://@ledgerhq/react-ui/./src/components/layout/Banner/NotificationCard/NotificationCard.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { css, useTheme } from \"styled-components\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport { Box } from \"../../layout\";\nimport { type ColorPalette, rgba } from \"../../../styles\";\n\ntype IconKey = keyof typeof Icons;\ntype WrapperType = \"round\" | \"square\";\n\ntype IconPallet = { fg: string; bg: string };\n\nfunction getColorsByIcon(\n  colors: ColorPalette,\n): Partial<Record<IconKey, Partial<Record<WrapperType, Partial<IconPallet>>>>> {\n  const { warning } = colors;\n\n  return {\n    Warning: {\n      round: { fg: warning.c80, bg: warning.c30 },\n      square: { fg: warning.c80, bg: warning.c30 },\n    },\n  };\n}\n\nfunction getDefaultDefaultColors({ primary }: ColorPalette): Record<WrapperType, IconPallet> {\n  return {\n    round: { fg: primary.c90, bg: primary.c30 },\n    square: { fg: primary.c80, bg: rgba(primary.c80, 0.08) },\n  };\n}\n\ntype Props = Readonly<{\n  icon: IconKey;\n  variant: WrapperType;\n}>;\n\nexport default function NotificationIcon({ icon, variant = \"round\" }: Props) {\n  const { colors } = useTheme();\n  const defaultColors = getDefaultDefaultColors(colors)[variant];\n  const safeIcon: IconKey = icon in Icons ? icon : \"Information\";\n  const Icon = Icons[safeIcon];\n  const { fg: iconColor = defaultColors.fg, bg: iconBgColor = defaultColors.bg } =\n    getColorsByIcon(colors)[safeIcon]?.[variant] ?? {};\n\n  return (\n    <Wrapper backgroundColor={iconBgColor} variant={variant}>\n      <Icon color={iconColor} />\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled(Box)<{ variant: WrapperType }>`\n  display: inline-flex;\n  padding: 8px;\n  ${p => (p.variant === \"square\" ? squareWrapper : roundWrapper)}\n`;\n\nconst roundWrapper = css`\n  border-radius: 50%;\n`;\n\nconst squareWrapper = css`\n  border-radius: 13.5px;\n  background-clip: padding-box;\n  border-width: 7px;\n  border-style: solid;\n  border-color: transparent;\n  position: relative;\n\n  ${p => css`\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: -7px;\n      border-radius: 13.5px;\n      rotate: ${p.theme.colors.type === \"dark\" ? \"0deg\" : \"180deg\"};\n    }\n    &::before {\n      background: linear-gradient(\n        ${p.theme.colors.type === \"dark\" ? \"rgba(255, 255, 255, 0.05)\" : \"rgba(29, 28, 31, 0.05)\"}\n          0%,\n        rgba(29, 28, 31, 0) 100%\n      );\n    }\n    &::after {\n      content: ${p.theme.colors.type};\n      border: solid 0.5px ${p.theme.colors.type === \"dark\" ? \"#fff\" : \"rgba(0, 0, 0, 0.5)\"};\n      mask-image: linear-gradient(\n        rgba(255, 255, 255, 0.15) 0%,\n        rgba(255, 255, 255, 0.01) 60%,\n        rgba(255, 255, 255, 0) 100%\n      );\n    }\n  `};\n`;\n","import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport {\n  compose,\n  fontSize,\n  fontWeight,\n  textAlign,\n  lineHeight,\n  letterSpacing,\n  system,\n} from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport { textVariantStyle } from \"./styles\";\n\nconst uppercase = system({\n  uppercase: {\n    property: \"textTransform\",\n    transform: value => (value ? \"uppercase\" : \"none\"),\n  },\n});\n\ntype FontFamilies =\n  | \"Inter|ExtraLight\"\n  | \"Inter|Light\"\n  | \"Inter|Regular\"\n  | \"Inter|Medium\"\n  | \"Inter|SemiBold\"\n  | \"Inter|Bold\"\n  | \"Inter|ExtraBold\"\n  | \"Alpha|Medium\";\n\ntype WhiteSpace = \"normal\" | \"nowrap\" | \"pre\" | \"pre-line\" | \"pre-wrap\";\n\nexport interface TextProps extends BaseStyledProps {\n  fontFamily?: string;\n  ff?: FontFamilies;\n  fontSize?: number | string | TextVariants;\n  variant?: TextVariants;\n  textAlign?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  textTransform?: string;\n  textOverflow?: string;\n  uppercase?: boolean;\n  whiteSpace?: WhiteSpace;\n  children?: React.ReactNode;\n}\n\nconst Text = baseStyled.span.attrs<TextProps, TextProps>(\n  ({ variant = \"body\", fontSize, color }) => ({\n    fontSize: fontSize ? fontSize : variant,\n    color: color || \"neutral.c100\",\n  }),\n)`\n  font-weight: 500;\n  white-space: ${props => props.whiteSpace ?? \"normal\"};\n  ${(p: TextProps) => textVariantStyle[p.variant || \"body\"]}\n  ${compose(\n    uppercase,\n    lineHeight,\n    fontFamily,\n    fontSize,\n    textAlign,\n    fontWeight,\n    letterSpacing,\n    system({\n      textOverflow: true,\n    }),\n  )}\n  ${p => (p.textTransform ? `text-transform: ${p.textTransform};` : \"\")}\n`;\n\nexport default Text;\n","import { GlobalStyleProps } from \"../../../styles/global\";\nimport { css } from \"styled-components\";\nimport { TextVariants } from \"../../../styles/theme\";\n\nconst getFontSource = (name: string) => (props: GlobalStyleProps) => {\n  const fontsPath = props.fontsPath ?? \"assets/fonts\";\n  const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;\n  return `url(\"${fontsPath}/${fontName}\") format(\"woff2\")`;\n};\n\nexport const fontStyles = css`\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraLight-BETA\")};\n    font-weight: 100;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Light-BETA\")};\n    font-weight: 300;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Regular\")};\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-SemiBold\")};\n    font-weight: 600;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Inter\";\n    src: ${getFontSource(\"Inter-ExtraBold\")};\n    font-weight: 900;\n    font-style: normal;\n  }\n\n  @font-face {\n    font-family: \"Alpha\";\n    src: ${getFontSource(\"HMAlphaMono-Medium\")};\n    font-weight: 500;\n    font-style: normal;\n  }\n`;\n\nexport const textVariantStyle: Record<\n  TextVariants,\n  {\n    fontFamily: string;\n    lineHeight?: string | number;\n    fontWeight?: number;\n    \"text-transform\"?: string;\n  }\n> = {\n  h1: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h1Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h2: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h2Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h3: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h3Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n  },\n  h4: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h4Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 600,\n  },\n  h5: {\n    fontFamily: \"Alpha, Inter, Sans\",\n    fontWeight: 500,\n    \"text-transform\": \"uppercase\",\n  },\n  h5Inter: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 500,\n  },\n  large: {\n    fontFamily: \"Inter, Sans\",\n  },\n  largeLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  body: {\n    fontFamily: \"Inter, Sans\",\n  },\n  bodyLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  paragraph: {\n    fontFamily: \"Inter, Sans\",\n  },\n  paragraphLineHeight: {\n    fontFamily: \"Inter, Sans\",\n    lineHeight: 1.7,\n  },\n  small: {\n    fontFamily: \"Inter, Sans\",\n  },\n  extraSmall: {\n    fontFamily: \"Inter, Sans\",\n  },\n  tiny: {\n    fontFamily: \"Inter, Sans\",\n  },\n  micro: {\n    fontFamily: \"Inter, Sans\",\n  },\n  subtitle: {\n    fontFamily: \"Inter, Sans\",\n    fontWeight: 600,\n    \"text-transform\": \"uppercase\",\n  },\n};\n","import { Theme } from \"../../../styles/theme\";\n\nexport function getLinkColors(\n  colors: Theme[\"colors\"],\n): Record<\"disabled\" | \"main\" | \"color\" | \"shade\", Record<\"default\" | \"pressed\", string>> {\n  return {\n    disabled: {\n      default: colors.neutral.c50,\n      pressed: colors.neutral.c50,\n    },\n    main: {\n      default: colors.neutral.c100,\n      pressed: colors.neutral.c80,\n    },\n    color: {\n      default: colors.primary.c80,\n      pressed: colors.primary.c70,\n    },\n    shade: {\n      default: colors.neutral.c70,\n      pressed: colors.neutral.c80,\n    },\n  };\n}\n","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","import { TextVariants } from \"../../styles/theme\";\n\nexport const ctaTextType: { [index: string]: TextVariants } = {\n  small: \"small\",\n  medium: \"paragraph\",\n  large: \"body\",\n};\n\nexport const ctaIconSize: { [index: string]: number } = {\n  small: 16,\n  medium: 18,\n  large: 20,\n};\n","import React, { type ReactEventHandler, type ReactNode } from \"react\";\nimport styled from \"styled-components\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport { NotificationIcon } from \"../../../asorted\";\nimport Text from \"../../../asorted/Text\";\nimport type { Props as GridBoxProps } from \"../../Grid\";\nimport { Grid, Flex } from \"../..\";\n\ntype IconKey = keyof typeof Icons;\n\ntype Props = GridBoxProps & {\n  title?: string;\n  cta?: ReactNode;\n  description?: ReactNode;\n  icon: IconKey;\n  isHighlighted?: boolean;\n\n  onClick: ReactEventHandler;\n};\n\nexport default function NotificationCard({\n  title,\n  cta,\n  icon,\n  description,\n  isHighlighted,\n  onClick,\n  ...boxProps\n}: Props) {\n  const handleCTAClick: ReactEventHandler = event => {\n    event.stopPropagation();\n    onClick(event);\n  };\n\n  return (\n    <Wrapper {...boxProps} isHighlighted={isHighlighted} onClick={handleCTAClick}>\n      <NotificationIcon icon={icon} variant={isHighlighted ? \"square\" : \"round\"} />\n      <Flex flexDirection=\"column\" rowGap={isHighlighted ? \"4px\" : \"8px\"}>\n        {title && (\n          <Text variant=\"h4Inter\" fontSize={16}>\n            {title}\n          </Text>\n        )}\n        {description && (\n          <Desc color={isHighlighted ? \"neutral.c100\" : \"neutral.c80\"}>{description}</Desc>\n        )}\n        {cta}\n      </Flex>\n    </Wrapper>\n  );\n}\n\nconst Desc = styled(Text).attrs({ variant: \"small\" })`\n  font-family: Inter;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 500;\n`;\n\nconst Wrapper = styled(Grid)<Pick<Props, \"isHighlighted\">>`\n  background-color: ${({ isHighlighted, theme: { colors } }) => {\n    if (!isHighlighted) return \"transparent\";\n    return colors.type === \"dark\" ? colors.opacityDefault.c05 : colors.neutral.c00;\n  }};\n\n  cursor: pointer;\n  padding: 12px;\n  grid-template-columns: auto 1fr;\n  gap: ${p => (p.isHighlighted ? \"12px\" : \"24px\")};\n  border-radius: 12px;\n\n  align-items: center;\n  justify-content: start;\n`;\n","import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type BoxProps = BaseStyledProps;\n\nconst Box = baseStyled.div<BaseStyledProps>``;\n\nexport default Box;\n","import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nconst FlexBox = baseStyled.div.attrs<BaseStyledProps, BaseStyledProps>({\n  display: \"flex\",\n  minWidth: 0,\n})``;\nexport type FlexBoxProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement>;\n\nexport default FlexBox;\n","import { grid, GridProps } from \"styled-system\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport interface Props extends GridProps, BaseStyledProps {\n  columns?: number | string;\n  rows?: number | string;\n}\n\nfunction getColumns(props: Props) {\n  const { columns } = props;\n  return columns === \"none\" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;\n}\n\nfunction getRows(props: Props) {\n  const { rows } = props;\n  return !rows ? \"initial\" : rows === \"none\" ? rows : `repeat(${rows}, minmax(0, 1fr));`;\n}\n\nconst Grid = baseStyled.div<Props>`\n  display: grid;\n  grid-template-columns: ${getColumns};\n  grid-template-rows: ${getRows};\n  ${grid};\n`;\nexport default Grid;\n","import React from \"react\";\nimport gaps from \"../styles/system/gaps\";\nimport styled, { StyledInterface, InterpolationFunction } from \"styled-components\";\nimport {\n  compose,\n  flexbox,\n  FlexboxProps,\n  space,\n  SpaceProps,\n  position,\n  PositionProps,\n  color,\n  ColorProps,\n  layout,\n  LayoutProps,\n  overflow,\n  OverflowProps,\n  border,\n  BorderProps,\n} from \"styled-system\";\n\nexport type BaseStyledProps = SpaceProps &\n  FlexboxProps &\n  PositionProps &\n  ColorProps &\n  LayoutProps &\n  BorderProps &\n  OverflowProps & {\n    /**\n     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.\n     */\n    columnGap?: string | number;\n    /**\n     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.\n     */\n    rowGap?: string | number;\n    color?: string;\n    children?: React.ReactNode;\n  };\n\nexport const baseStyles: InterpolationFunction<unknown> = compose(\n  flexbox,\n  space,\n  position,\n  color,\n  layout,\n  overflow,\n  gaps,\n  border,\n);\n\nconst proxyStyled = new Proxy(styled, {\n  apply(target: typeof styled, thisArg, argumentsList: Parameters<typeof styled>) {\n    return styled(target.apply(thisArg, argumentsList)(baseStyles));\n  },\n  get(target, property: keyof typeof styled) {\n    if (typeof target[property] === \"function\") {\n      return styled(target[property].apply(styled, [baseStyles]));\n    }\n    return target[property];\n  },\n});\n\nexport default <StyledInterface>proxyStyled;\n","import Color from \"color\";\n\nimport { fontFamilies } from \"./theme\";\n\nexport const rgba = (c: string, a: number): string => Color(c).alpha(a).rgb().toString();\n\nexport const darken = (c: string, a: number): string => Color(c).darken(a).toString();\n\nexport const lighten = (c: string, a: number): string => Color(c).lighten(a).toString();\n\nexport const mix = (c: string, b: string, a: number): string =>\n  Color(c).mix(Color(b), a).toString();\n\nexport const ff = (v: string) => {\n  const [font, type = \"Regular\"] = v.split(\"|\");\n  // @ts-expect-error FIXME\n  const { style, weight } = fontFamilies[font][type];\n  // @ts-expect-error FIXME\n  const fallback: string = fontFamilies[font].fallback ?? \"Arial\";\n\n  return {\n    fontFamily: `${font}, ${fallback}`,\n    fontWeight: weight,\n    fontStyle: style,\n  };\n};\n\nexport const ensureContrast = (color1: string, color2: string) => {\n  const colorL1 = Color(color1).luminosity() + 0.05;\n  const colorL2 = Color(color2).luminosity() + 0.05;\n\n  const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;\n\n  if (lRatio < 1.5) {\n    return Color(color1).rotate(180).negate().string();\n  }\n  return color1;\n};\n","import { ff } from \"../helpers\";\n\nexport default (props: { ff?: string }) => {\n  const prop = props.ff;\n\n  if (prop == null) {\n    return null;\n  }\n\n  return ff(prop);\n};\n","import { system } from \"styled-system\";\n\nconst gaps = system({\n  rowGap: { property: \"rowGap\", scale: \"space\" },\n  columnGap: { property: \"columnGap\", scale: \"space\" },\n});\n\nexport default gaps;\n","import { keyframes, css, Font } from \"styled-components\";\nimport { palettes, ColorPalette } from \"@ledgerhq/ui-shared\";\n\nexport type screensBreakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\nexport const breakpoints = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  xxl: \"1536px\",\n} as Record<screensBreakpoints, string>;\n\nexport const space = [\n  /* space indexes:\n  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */\n  0,\n  2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76,\n];\n\nexport type TextVariants =\n  | \"h1\"\n  | \"h1Inter\"\n  | \"h2\"\n  | \"h2Inter\"\n  | \"h3\"\n  | \"h3Inter\"\n  | \"h4\"\n  | \"h4Inter\"\n  | \"h5\"\n  | \"h5Inter\"\n  | \"large\"\n  | \"largeLineHeight\"\n  | \"body\"\n  | \"bodyLineHeight\"\n  | \"paragraph\"\n  | \"paragraphLineHeight\"\n  | \"small\"\n  | \"extraSmall\"\n  | \"tiny\"\n  | \"micro\"\n  | \"subtitle\";\n\nexport type ThemeScale<Type, Aliases extends string> = Array<Type> & Record<Aliases, Type>;\n\nexport const fontSizes = [8, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36] as ThemeScale<\n  number,\n  TextVariants\n>;\n\n[\n  fontSizes.micro,\n  fontSizes.tiny,\n  fontSizes.extraSmall,\n  fontSizes.small,\n  fontSizes.paragraph,\n  fontSizes.body,\n  fontSizes.large,\n  fontSizes.h5,\n  fontSizes.h4,\n  fontSizes.h3,\n  fontSizes.h2,\n  fontSizes.h1,\n] = fontSizes;\nfontSizes.largeLineHeight = fontSizes.large;\nfontSizes.bodyLineHeight = fontSizes.body;\nfontSizes.paragraphLineHeight = fontSizes.paragraph;\nfontSizes.subtitle = fontSizes.extraSmall;\nfontSizes.h1Inter = fontSizes.h1;\nfontSizes.h2Inter = fontSizes.h2;\nfontSizes.h3Inter = fontSizes.h3;\nfontSizes.h4Inter = fontSizes.h4;\nfontSizes.h5Inter = fontSizes.h5;\n\nconst fontWeights = {\n  extraLight: \"100\",\n  light: \"300\",\n  regular: \"400\",\n  medium: \"500\",\n  semiBold: \"600\",\n  bold: \"700\",\n  extraBold: \"800\",\n};\n\nexport const radii = [0, 4, 8, 12, 16, 20];\nexport const shadows = [\"0 4px 8px 0 rgba(0, 0, 0, 0.03)\"];\nexport const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];\n\n// Those fonts are now defined in global.css, this is just a mapping for styled-system\nexport const fontFamilies = {\n  Inter: {\n    ExtraLight: {\n      weight: 100,\n      style: \"normal\",\n    },\n    Light: {\n      weight: 300,\n      style: \"normal\",\n    },\n    Regular: {\n      weight: 400,\n      style: \"normal\",\n    },\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n    SemiBold: {\n      weight: 600,\n      style: \"normal\",\n    },\n    Bold: {\n      weight: 700,\n      style: \"normal\",\n    },\n    ExtraBold: {\n      weight: 800,\n      style: \"normal\",\n    },\n  },\n  Alpha: {\n    Medium: {\n      weight: 500,\n      style: \"normal\",\n    },\n  },\n};\n\nconst animationDuration = \"0.33s\";\nconst easings = {\n  outQuadratic: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n};\n\nconst transition = (\n  properties = [\"all\"],\n  duration = animationDuration,\n  easing = easings.outQuadratic,\n) => css`\n  transition-property: ${properties.join(\",\")};\n  transition-duration: ${duration};\n  transition-timing-function: ${easing};\n`;\n\nconst fadeIn = keyframes`\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  `;\nconst fadeOut = keyframes`\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  `;\nconst fadeInGrowX = keyframes`\n    0% {\n      opacity: 0;\n      transform: scaleX(0);\n    }\n    100% {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n`;\nconst fadeInUp = keyframes`\n    0% {\n      opacity: 0;\n      transform: translateY(66%);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0%);\n    }\n  `;\nconst animations = {\n  fadeIn: () => css`\n    ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards\n  `,\n  fadeOut: () => css`\n    ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards\n  `,\n  fadeInGrowX: () => css`\n    ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards\n  `,\n  fadeInUp: () => css`\n    ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards\n  `,\n};\nconst overflow = {\n  x: css`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${p => p.theme.colors.neutral.c30};\n    }\n  `,\n  y: css`\n    overflow-x: hidden;\n    overflow-y: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${p => p.theme.colors.neutral.c30};\n    }\n  `,\n  yAuto: css`\n    overflow-x: hidden;\n    overflow-y: auto;\n    will-change: transform;\n    &:hover {\n      --track-color: ${p => p.theme.colors.neutral.c30};\n    }\n  `,\n  xy: css`\n    overflow: scroll;\n    will-change: transform;\n    &:hover {\n      --track-color: ${p => p.theme.colors.neutral.c30};\n    }\n  `,\n  trackSize: 12,\n};\n\ninterface DefaultTheme {\n  theme: \"dark\" | \"light\";\n  animations: typeof animations;\n  transition: typeof transition;\n  overflow: typeof overflow;\n  sizes: {\n    topBarHeight: number;\n    sideBarWidth: number;\n    drawer: {\n      side: {\n        big: {\n          width: number;\n        };\n        small: {\n          width: number;\n        };\n      };\n      popin: {\n        min: {\n          height: number;\n          width: number;\n        };\n        max: {\n          height: number;\n          width: number;\n        };\n      };\n    };\n  };\n  radii: number[];\n  fontFamilies: Record<string, Record<string, Font>>;\n  fontSizes: number[];\n  space: number[];\n  shadows: string[];\n  colors: ColorPalette;\n  fontWeights: Record<string, string>;\n  breakpoints: Record<screensBreakpoints, string>;\n  zIndexes: number[];\n}\n\nconst theme: DefaultTheme = {\n  theme: \"light\",\n  sizes: {\n    drawer: {\n      side: {\n        big: {\n          width: 580,\n        },\n        small: {\n          width: 420,\n        },\n      },\n      popin: {\n        min: {\n          height: 158,\n          width: 462,\n        },\n        max: {\n          height: 522,\n          width: 622,\n        },\n      },\n    },\n    topBarHeight: 58,\n    sideBarWidth: 230,\n  },\n  radii,\n  fontFamilies,\n  fontSizes,\n  fontWeights,\n  space,\n  shadows,\n  colors: palettes.light,\n  animations,\n  overflow,\n  transition,\n  zIndexes,\n  breakpoints,\n};\n\nexport default theme;\nexport type Theme = DefaultTheme;\n","// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, getters, values) => {\n\tvar define = (defs, kind) => {\n\t\tfor(var key in defs) {\n\t\t\tif(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });\n\t\t\t}\n\t\t}\n\t};\n\tdefine(getters, \"get\");\n\tdefine(values, \"value\");\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\n\nimport { Icons } from \"../../../../assets\";\nimport { Link } from \"../../../cta\";\nimport NotificationCard from \".\";\n\nconst meta: Meta<typeof NotificationCard> = {\n  title: \"Layout/Banner/NotificationCard\",\n  component: NotificationCard,\n  argTypes: {\n    title: {\n      description: \"Title of the card.\",\n    },\n    cta: {\n      description: \"Call to action element.\",\n    },\n    description: {\n      description: \"Description of the card.\",\n    },\n    icon: {\n      description: \"Icon to be displayed on the left of the notification card.\",\n      options: Object.keys(Icons),\n      control: {\n        type: \"select\",\n      },\n    },\n    onClick: {\n      description: \"Function to be called when the card is clicked.\",\n    },\n  },\n  args: {\n    title: \"Ledger Recover\",\n    description: \"Get peace of mind and start your free trial.\",\n    cta: <Link alignSelf=\"start\">Start my free trial</Link>,\n    icon: \"Warning\",\n    isHighlighted: false,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NotificationCard>;\n\nexport const Default: Story = {};\n\nexport const LNSNotificationCard: Story = {\n  args: {\n    title: \"\",\n    description:\n      \"Upgrade your Nano S to a newer Ledger — like the Ledger Flex — for more memory, the latest security enhancements, fresh features, and an exclusive 20% off. \",\n    cta: (\n      <Link alignSelf=\"start\" color=\"primary.c80\">\n        Upgrade my Ledger\n        <Icons.ExternalLink size=\"S\" style={{ marginLeft: \"8px\", verticalAlign: \"middle\" }} />\n      </Link>\n    ),\n    icon: \"SparksFill\",\n    isHighlighted: true,\n  },\n};\n"],"names":["React","styled","css","useTheme","Icons","Box","rgba","getColorsByIcon","colors","warning","getDefaultDefaultColors","primary","NotificationIcon","icon","variant","defaultColors","safeIcon","Icon","iconColor","iconBgColor","Wrapper","p","squareWrapper","roundWrapper","baseStyled","compose","fontSize","fontWeight","textAlign","lineHeight","letterSpacing","system","fontFamily","textVariantStyle","uppercase","value","Text","color","props","getFontSource","name","fontsPath","fontName","fontStyles","getLinkColors","ctaIconSize","ctaTextType","DEFAULT_ICON_POSITION","DEFAULT_SIZE","DEFAULT_TYPE","IconContainer","Base","theme","disabled","type","LinkContainer","iconPosition","children","size","textProps","text","Link","Grid","Flex","NotificationCard","title","cta","description","isHighlighted","onClick","boxProps","handleCTAClick","event","Desc","FlexBox","grid","getColumns","columns","getRows","rows","gaps","flexbox","space","position","layout","overflow","border","baseStyles","proxyStyled","Proxy","target","thisArg","argumentsList","property","Color","fontFamilies","c","a","darken","lighten","mix","b","ff","v","font","style","weight","fallback","ensureContrast","color1","color2","colorL1","colorL2","lRatio","prop","keyframes","palettes","breakpoints","fontSizes","fontWeights","radii","shadows","zIndexes","animationDuration","easings","transition","properties","duration","easing","fadeIn","fadeOut","fadeInGrowX","fadeInUp","animations","meta","Object","Default","LNSNotificationCard"],"mappings":"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"}

package/lib/cjs/components/layout/Box/Box.stories.js

@@ -1,221 +0,0 @@
-(() => {
-"use strict";
-var __webpack_modules__ = ({
-3832(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
-
-const Box = _styled__rspack_import_0["default"].div``;
-/* export default */ const __rspack_default_export = (Box);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
-/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
-/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
-/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
-/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
-
-
-
-const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
-const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
-    apply (target, thisArg, argumentsList) {
-        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
-    },
-    get (target, property) {
-        if (typeof target[property] === "function") {
-            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
-                baseStyles
-            ]));
-        }
-        return target[property];
-    }
-});
-/* export default */ const __rspack_default_export = (proxyStyled);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
-/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
-
-const gaps = (0,styled_system__rspack_import_0.system)({
-    rowGap: {
-        property: "rowGap",
-        scale: "space"
-    },
-    columnGap: {
-        property: "columnGap",
-        scale: "space"
-    }
-});
-/* export default */ const __rspack_default_export = (gaps);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-2770(module) {
-module.exports = require("styled-components");
-
-},
-9351(module) {
-module.exports = require("styled-system");
-
-},
-
-});
-// The module cache
-var __webpack_module_cache__ = {};
-
-// The require function
-function __webpack_require__(moduleId) {
-
-// Check if module is in cache
-var cachedModule = __webpack_module_cache__[moduleId];
-if (cachedModule !== undefined) {
-return cachedModule.exports;
-}
-// Create a new module (and put it into the cache)
-var module = (__webpack_module_cache__[moduleId] = {
-exports: {}
-});
-// Execute the module function
-__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-
-// Return the exports of the module
-return module.exports;
-
-}
-
-// webpack/runtime/compat_get_default_export
-(() => {
-// getDefaultExport function for compatibility with non-ESM modules
-__webpack_require__.n = (module) => {
-	var getter = module && module.__esModule ?
-		() => (module['default']) :
-		() => (module);
-	__webpack_require__.d(getter, { a: getter });
-	return getter;
-};
-
-})();
-// webpack/runtime/define_property_getters
-(() => {
-__webpack_require__.d = (exports, getters, values) => {
-	var define = (defs, kind) => {
-		for(var key in defs) {
-			if(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {
-				Object.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });
-			}
-		}
-	};
-	define(getters, "get");
-	define(values, "value");
-};
-})();
-// webpack/runtime/has_own_property
-(() => {
-__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-})();
-// webpack/runtime/make_namespace_object
-(() => {
-// define __esModule on exports
-__webpack_require__.r = (exports) => {
-	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-	}
-	Object.defineProperty(exports, '__esModule', { value: true });
-};
-})();
-var __webpack_exports__ = {};
-// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
-(() => {
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  Default: () => (/* binding */ Default),
-  "default": () => (/* binding */ Box_stories)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-// EXTERNAL MODULE: ./src/components/layout/Box/index.ts
-var Box = __webpack_require__(3832);
-;// CONCATENATED MODULE: ./src/components/layout/Box/Box.stories.tsx
-
-
-/* export default */ const Box_stories = ({
-    title: "Layout/Box",
-    component: Box["default"],
-    argTypes: {
-        backgroundColor: {
-            type: "text",
-            control: "color",
-            description: "This property defines the backgroundColor of the box. This property any color format."
-        },
-        width: {
-            type: "text",
-            description: "Width of the box."
-        },
-        py: {
-            type: "text",
-            description: "Padding top and bottom."
-        },
-        px: {
-            type: "text",
-            description: "Padding left and right."
-        },
-        mx: {
-            type: "text",
-            description: "Margin left and right."
-        }
-    },
-    args: {
-        backgroundColor: "#0EBDCD",
-        width: "200px",
-        py: "20px",
-        px: "20px",
-        mx: "20px"
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.
-      
-It include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.
-      
-[See more about styled-system utilities](https://styled-system.com/api)`
-            }
-        },
-        actions: {
-            argTypesRegex: false
-        }
-    }
-});
-const Template = (args)=>/*#__PURE__*/ external_react_default().createElement(Box["default"], args, "A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline props");
-const Default = Template.bind({});
-
-})();
-
-module.exports = __webpack_exports__;
-})()
-;
-//# sourceMappingURL=Box.stories.js.map

package/lib/cjs/components/layout/Box/Box.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/layout/Box/Box.stories.js","sources":["webpack://@ledgerhq/react-ui/./src/components/layout/Box/index.ts","webpack://@ledgerhq/react-ui/./src/components/styled.ts","webpack://@ledgerhq/react-ui/./src/styles/system/gaps.ts","webpack://@ledgerhq/react-ui/webpack/runtime/compat_get_default_export","webpack://@ledgerhq/react-ui/webpack/runtime/define_property_getters","webpack://@ledgerhq/react-ui/webpack/runtime/has_own_property","webpack://@ledgerhq/react-ui/webpack/runtime/make_namespace_object","webpack://@ledgerhq/react-ui/./src/components/layout/Box/Box.stories.tsx"],"sourcesContent":["import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type BoxProps = BaseStyledProps;\n\nconst Box = baseStyled.div<BaseStyledProps>``;\n\nexport default Box;\n","import React from \"react\";\nimport gaps from \"../styles/system/gaps\";\nimport styled, { StyledInterface, InterpolationFunction } from \"styled-components\";\nimport {\n  compose,\n  flexbox,\n  FlexboxProps,\n  space,\n  SpaceProps,\n  position,\n  PositionProps,\n  color,\n  ColorProps,\n  layout,\n  LayoutProps,\n  overflow,\n  OverflowProps,\n  border,\n  BorderProps,\n} from \"styled-system\";\n\nexport type BaseStyledProps = SpaceProps &\n  FlexboxProps &\n  PositionProps &\n  ColorProps &\n  LayoutProps &\n  BorderProps &\n  OverflowProps & {\n    /**\n     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.\n     */\n    columnGap?: string | number;\n    /**\n     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.\n     */\n    rowGap?: string | number;\n    color?: string;\n    children?: React.ReactNode;\n  };\n\nexport const baseStyles: InterpolationFunction<unknown> = compose(\n  flexbox,\n  space,\n  position,\n  color,\n  layout,\n  overflow,\n  gaps,\n  border,\n);\n\nconst proxyStyled = new Proxy(styled, {\n  apply(target: typeof styled, thisArg, argumentsList: Parameters<typeof styled>) {\n    return styled(target.apply(thisArg, argumentsList)(baseStyles));\n  },\n  get(target, property: keyof typeof styled) {\n    if (typeof target[property] === \"function\") {\n      return styled(target[property].apply(styled, [baseStyles]));\n    }\n    return target[property];\n  },\n});\n\nexport default <StyledInterface>proxyStyled;\n","import { system } from \"styled-system\";\n\nconst gaps = system({\n  rowGap: { property: \"rowGap\", scale: \"space\" },\n  columnGap: { property: \"columnGap\", scale: \"space\" },\n});\n\nexport default gaps;\n","// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, getters, values) => {\n\tvar define = (defs, kind) => {\n\t\tfor(var key in defs) {\n\t\t\tif(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });\n\t\t\t}\n\t\t}\n\t};\n\tdefine(getters, \"get\");\n\tdefine(values, \"value\");\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React from \"react\";\nimport Box, { BoxProps } from \".\";\nexport default {\n  title: \"Layout/Box\",\n  component: Box,\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      description: \"Padding top and bottom.\",\n    },\n    px: {\n      type: \"text\",\n      description: \"Padding left and right.\",\n    },\n    mx: {\n      type: \"text\",\n      description: \"Margin left and right.\",\n    },\n  },\n  args: {\n    backgroundColor: \"#0EBDCD\",\n    width: \"200px\",\n    py: \"20px\",\n    px: \"20px\",\n    mx: \"20px\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The Box component is a helper component that lets you write these common css properties more succinctly and inline.\n      \nIt include all the style props exported by the color, layout, position, shadow utilities, and some of the flexbox utility, from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n    actions: { argTypesRegex: false },\n  },\n};\n\nconst Template = (args: BoxProps) => (\n  <Box {...args}>\n    A plain good ol'box with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Box>\n);\n\nexport const Default = Template.bind({});\n"],"names":["baseStyled","Box","gaps","styled","compose","flexbox","space","position","color","layout","overflow","border","baseStyles","proxyStyled","Proxy","target","thisArg","argumentsList","property","system","React","Template","args","Default"],"mappings":";;;;;AAA2D;AAI3D,MAAMC,MAAMD,uCAA+B,CAAC,CAAC;AAE7C,sDAAeC,GAAGA,EAAC;;;;;;;;;;;;;;;ACLsB;AAC0C;AAiB5D;AAqBhB,MAAMW,aAA6CR,0CAAOA,CAC/DC,sCAAOA,EACPC,oCAAKA,EACLC,uCAAQA,EACRC,oCAAKA,EACLC,qCAAMA,EACNC,uCAAQA,EACRR,+CAAIA,EACJS,qCAAMA,EACN;AAEF,MAAME,cAAc,IAAIC,MAAMX,8CAAMA,EAAE;IACpC,OAAMY,MAAqB,EAAEC,OAAO,EAAEC,aAAwC;QAC5E,OAAOd,4CAAMA,CAACY,OAAO,KAAK,CAACC,SAASC,eAAeL;IACrD;IACA,KAAIG,MAAM,EAAEG,QAA6B;QACvC,IAAI,OAAOH,MAAM,CAACG,SAAS,KAAK,YAAY;YAC1C,OAAOf,4CAAMA,CAACY,MAAM,CAACG,SAAS,CAAC,KAAK,CAACf,8CAAMA,EAAE;gBAACS;aAAW;QAC3D;QACA,OAAOG,MAAM,CAACG,SAAS;IACzB;AACF;AAEA,sDAAgCL,WAAWA,EAAC;;;;;;;;;;;;AC/DL;AAEvC,MAAMX,OAAOiB,yCAAMA,CAAC;IAClB,QAAQ;QAAE,UAAU;QAAU,OAAO;IAAQ;IAC7C,WAAW;QAAE,UAAU;QAAa,OAAO;IAAQ;AACrD;AAEA,sDAAejB,IAAIA,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPpB;AACA;AACA;AACA;AACA;AACA,iCAAiC,WAAW;AAC5C;AACA;;;;;ACPA;AACA;AACA;AACA;AACA,0CAA0C,qCAAqC;AAC/E;AACA;AACA;AACA;AACA;AACA,E;;;;ACVA,wF;;;;ACAA;AACA;AACA;AACA,uDAAuD,iBAAiB;AACxE;AACA,gDAAgD,aAAa;AAC7D,E;;;;;;;;;;;;;;;;;;;;ACN0B;AACQ;AAClC,0CAAe;IACb,OAAO;IACP,WAAWD,cAAGA;IACd,UAAU;QACR,iBAAiB;YACf,MAAM;YACN,SAAS;YACT,aACE;QACJ;QACA,OAAO;YACL,MAAM;YACN,aAAa;QACf;QACA,IAAI;YACF,MAAM;YACN,aAAa;QACf;QACA,IAAI;YACF,MAAM;YACN,aAAa;QACf;QACA,IAAI;YACF,MAAM;YACN,aAAa;QACf;IACF;IACA,MAAM;QACJ,iBAAiB;QACjB,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,IAAI;IACN;IACA,YAAY;QACV,MAAM;YACJ,aAAa;gBACX,WAAW,CAAC;;;;uEAImD,CAAC;YAClE;QACF;QACA,SAAS;YAAE,eAAe;QAAM;IAClC;AACF,CAAC,EAAC;AAEF,MAAMoB,WAAW,CAACC,qBAChB,uCAACrB,cAAGA,EAAKqB,MAAM;AAMV,MAAMC,UAAUF,SAAS,IAAI,CAAC,CAAC,GAAG"}