npm - @ledgerhq/react-ui - Versions diffs - 0.16.5 → 0.17.0-nightly.1 - Mend

@ledgerhq/react-ui 0.16.5 → 0.17.0-nightly.1

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

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

@@ -228,7 +228,13 @@ const Base = import_styled.default.button.attrs((p) => ({
 const ContentContainer = import_styled_components.default.div``;
 const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref) => {
   const iconNodeSize = iconSize || import_theme.fontSizes[props.fontSize ?? 4];
-  const IconNode = (0, import_react.useMemo)(() => Icon && /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconNodeSize }), [iconNodeSize, Icon]);
+  const IconNode = (0, import_react.useMemo)(() => {
+    if (!Icon)
+      return null;
+    if (typeof Icon === "object")
+      return Icon;
+    return /* @__PURE__ */ import_react.default.createElement(Icon, { size: iconNodeSize });
+  }, [iconNodeSize, Icon]);
   return /* @__PURE__ */ import_react.default.createElement(Base, { ...props, ref, iconButton: !(Icon == null) && !children, onClick }, iconPosition === "right" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null, IconNode && /* @__PURE__ */ import_react.default.createElement(IconContainer, { iconPosition }, IconNode), iconPosition === "left" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null);
 };
 const ButtonWithRef = import_react.default.forwardRef(Button);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/cta/Button/index.tsx"],
-  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"xs\" | \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c50};\n      color: ${p.theme.colors.error.c50};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c50};\n      &:hover {\n        background-color: ${p.theme.colors.error.c40};\n      }\n    `,\n  },\n  neutral: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: ${p.theme.colors.neutral.c30};\n    &:hover {\n      background-color: ${p.theme.colors.neutral.c40};\n    }\n  `,\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: 44px;\n  border-style: solid;\n  border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${p => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${p => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"neutral\":\n        return variants.neutral;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${p =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[12]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(() => Icon && <Icon size={iconNodeSize} />, [iconNodeSize, Icon]);\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded(expanded => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  xs: {\n    padding: \"0 12px\",\n    height: \"28px\",\n  },\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: \"xs\" | \"small\" | \"medium\" | \"large\";\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n  whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  Icon?: React.ReactElement | React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${p => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c50};\n      color: ${p.theme.colors.error.c50};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c50};\n      &:hover {\n        background-color: ${p.theme.colors.error.c40};\n      }\n    `,\n  },\n  neutral: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: ${p.theme.colors.neutral.c30};\n    &:hover {\n      background-color: ${p.theme.colors.neutral.c40};\n    }\n  `,\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n        &:focus, &:hover {\n          box-shadow: none;\n        }\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: 44px;\n  border-style: solid;\n  border-width: ${p => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  line-height: ${p => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  ${p => buttonSizeStyle[p.size || \"medium\"]}\n  text-overflow: ellipsis;\n  white-space: ${p => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n  max-width: 100%;\n  position: relative;\n  cursor: ${p => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${p => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${p => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"neutral\":\n        return variants.neutral;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${p =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[12]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${p => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(() => {\n    if (!Icon) return null;\n    if (typeof Icon === \"object\") return Icon;\n    return <Icon size={iconNodeSize} />;\n  }, [iconNodeSize, Icon]);\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs(props => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${p => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded(expanded => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nexport const buttonSizeStyle: {\n  [index: string]: {\n    padding: string;\n    height: string;\n  };\n} = {\n  xs: {\n    padding: \"0 12px\",\n    height: \"28px\",\n  },\n  small: {\n    padding: \"0 20px\",\n    height: \"32px\",\n  },\n  medium: {\n    padding: \"0 24px\",\n    height: \"40px\",\n  },\n  large: {\n    padding: \"0 28px\",\n    height: \"48px\",\n  },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
+  "mappings": "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",
   "names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
 }

package/lib/cjs/components/layout/Carousel/Carousel.stories.js CHANGED Viewed

@@ -29,42 +29,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Carousel_stories_exports = {};
 __export(Carousel_stories_exports, {
   Default: () => Default,
+  PortfolioContentCards: () => PortfolioContentCards,
   default: () => Carousel_stories_default
 });
 module.exports = __toCommonJS(Carousel_stories_exports);
+var import_addon_actions = require("@storybook/addon-actions");
 var import_react = __toESM(require("react"));
+var import_PortfolioContentCard = __toESM(require("../ContentCard/PortfolioContentCard"));
 var import__ = __toESM(require("./"));
-const CarouselStory = (args) => {
-  const slides = [...Array(5)].map((_, index) => /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      key: index,
-      style: {
-        backgroundColor: "hsl(" + Math.random() * 360 + ", 100%, 75%)",
-        padding: "15px",
-        borderRadius: "5px"
-      }
-    },
-    "Slide ",
-    index
-  ));
-  return /* @__PURE__ */ import_react.default.createElement(import__.default, { variant: args.variant, children: slides });
-};
+const SlideContext = import_react.default.createContext([]);
 var Carousel_stories_default = {
   title: "Layout/Carousel",
   argTypes: {
     children: {
-      description: "The elements to be displayed."
+      description: "The elements to be displayed.",
+      control: { type: "range", min: 1, max: 10, step: 1 }
     },
     variant: {
       description: "Variant for the carousel.",
       options: ["default", "content-card"],
       defaultValue: "default",
-      control: { type: "select" }
+      control: "inline-radio"
+    },
+    onChange: {
+      description: "Function called when a new slide is shown."
     }
   },
   args: {
-    variant: "default"
+    variant: "default",
+    children: 5
   },
   parameters: {
     docs: {
@@ -72,7 +65,50 @@ var Carousel_stories_default = {
         component: "A simple Carousel component."
       }
     }
+  },
+  decorators: [
+    (Story, { args, parameters }) => /* @__PURE__ */ import_react.default.createElement(
+      SlideContext.Provider,
+      {
+        value: Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(parameters.Slide, { key: index, index }))
+      },
+      /* @__PURE__ */ import_react.default.createElement(Story, null)
+    )
+  ],
+  render: ({ children, ...props }) => /* @__PURE__ */ import_react.default.createElement(import__.default, { ...props }, (0, import_react.useContext)(SlideContext))
+};
+const Default = {
+  parameters: {
+    Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,
+          padding: "16px 24px",
+          borderRadius: "5px"
+        }
+      },
+      "Slide ",
+      index
+    )
+  }
+};
+const PortfolioContentCards = {
+  parameters: {
+    Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
+      import_PortfolioContentCard.default,
+      {
+        title: "Ledger Recover",
+        description: "Get peace of mind and start your free trial.",
+        cta: index % 2 ? void 0 : "Start my free trial",
+        tag: index % 3 ? void 0 : "New",
+        image: (index + 1) % 4 ? IMAGE_SRC : void 0,
+        onClick: () => onSlideAction(`click on slide ${index}`),
+        onClose: () => onSlideAction(`close slide ${index}`)
+      }
+    )
   }
 };
-const Default = CarouselStory.bind({});
+const onSlideAction = (0, import_addon_actions.action)("onSlideAction");
+const IMAGE_SRC = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>";
 //# sourceMappingURL=Carousel.stories.js.map

package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\nconst CarouselStory = (args: Props) => {\n  const slides = [...Array(5)].map((_, index) => (\n    <div\n      key={index}\n      style={{\n        backgroundColor: \"hsl(\" + Math.random() * 360 + \", 100%, 75%)\",\n        padding: \"15px\",\n        borderRadius: \"5px\",\n      }}\n    >\n      Slide {index}\n    </div>\n  ));\n\n  return <Carousel variant={args.variant} children={slides} />;\n};\n\nexport default {\n  title: \"Layout/Carousel\",\n  argTypes: {\n    children: {\n      description: \"The elements to be displayed.\",\n    },\n    variant: {\n      description: \"Variant for the carousel.\",\n      options: [\"default\", \"content-card\"],\n      defaultValue: \"default\",\n      control: { type: \"select\" },\n    },\n  },\n  args: {\n    variant: \"default\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: \"A simple Carousel component.\",\n      },\n    },\n  },\n};\n\nexport const Default = CarouselStory.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAAqB;AAGrB,MAAM,gBAAgB,CAAC,SAAgB;AACrC,QAAM,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,UACnC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,iBAAiB,SAAS,KAAK,OAAO,IAAI,MAAM;AAAA,QAChD,SAAS;AAAA,QACT,cAAc;AAAA,MAChB;AAAA;AAAA,IACD;AAAA,IACQ;AAAA,EACT,CACD;AAED,SAAO,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAS,SAAS,KAAK,SAAS,UAAU,QAAQ;AAC5D;AAEA,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU,cAAc,KAAK,CAAC,CAAC;",
-  "names": ["React", "Carousel"]
+  "sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n  title: \"Layout/Carousel\",\n  argTypes: {\n    children: {\n      description: \"The elements to be displayed.\",\n      control: { type: \"range\", min: 1, max: 10, step: 1 },\n    },\n    variant: {\n      description: \"Variant for the carousel.\",\n      options: [\"default\", \"content-card\"],\n      defaultValue: \"default\",\n      control: \"inline-radio\",\n    },\n    onChange: {\n      description: \"Function called when a new slide is shown.\",\n    },\n  },\n  args: {\n    variant: \"default\",\n    children: 5,\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: \"A simple Carousel component.\",\n      },\n    },\n  },\n  decorators: [\n    (Story: FC, { args, parameters }: { args: Args; parameters: Parameters }) => (\n      <SlideContext.Provider\n        value={Array.from({ length: args.children }, (_, index) => (\n          <parameters.Slide key={index} index={index} />\n        ))}\n      >\n        <Story />\n      </SlideContext.Provider>\n    ),\n  ],\n  render: ({ children, ...props }: Args) => (\n    <Carousel {...props}>{useContext(SlideContext)}</Carousel>\n  ),\n} satisfies Meta<Args>;\n\nexport const Default: StoryObj<Args> = {\n  parameters: {\n    Slide: (({ index }) => (\n      <div\n        style={{\n          backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,\n          padding: \"16px 24px\",\n          borderRadius: \"5px\",\n        }}\n      >\n        Slide {index}\n      </div>\n    )) satisfies Parameters[\"Slide\"],\n  },\n};\n\nexport const PortfolioContentCards: StoryObj<Args> = {\n  parameters: {\n    Slide: (({ index }) => (\n      <PortfolioContentCard\n        title=\"Ledger Recover\"\n        description=\"Get peace of mind and start your free trial.\"\n        cta={index % 2 ? undefined : \"Start my free trial\"}\n        tag={index % 3 ? undefined : \"New\"}\n        image={(index + 1) % 4 ? IMAGE_SRC : undefined}\n        onClick={() => onSlideAction(`click on slide ${index}`)}\n        onClose={() => onSlideAction(`close slide ${index}`)}\n      />\n    )) satisfies Parameters[\"Slide\"],\n  },\n};\n\nconst onSlideAction = action(\"onSlideAction\");\n\nconst IMAGE_SRC =\n  \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,OAAW,EAAE,MAAM,WAAW,MAC7B,6BAAAA,QAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UAC/C,6BAAAA,QAAA,cAAC,WAAW,OAAX,EAAiB,KAAK,OAAO,OAAc,CAC7C;AAAA;AAAA,MAED,6BAAAA,QAAA,cAAC,WAAM;AAAA,IACT;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5B,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,aAAQ,yBAAW,YAAY,CAAE;AAEnD;AAEO,MAAM,UAA0B;AAAA,EACrC,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB,OAAO,KAAK,OAAO,IAAI,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA;AAAA,MACD;AAAA,MACQ;AAAA,IACT;AAAA,EAEJ;AACF;AAEO,MAAM,wBAAwC;AAAA,EACnD,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAA,QAAA;AAAA,MAAC,4BAAAE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,QAAQ,QAAQ,KAAK,IAAI,YAAY;AAAA,QACrC,SAAS,MAAM,cAAc,kBAAkB,KAAK,EAAE;AAAA,QACtD,SAAS,MAAM,cAAc,eAAe,KAAK,EAAE;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAgB,6BAAO,eAAe;AAE5C,MAAM,YACJ;",
+  "names": ["React", "Carousel", "PortfolioContentCard"]
 }

package/lib/cjs/components/layout/Carousel/ChevronArrow.js ADDED Viewed

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ChevronArrow_exports = {};
+__export(ChevronArrow_exports, {
+  ChevronArrow: () => ChevronArrow
+});
+module.exports = __toCommonJS(ChevronArrow_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_assets = require("../../../assets");
+function ChevronArrow(props) {
+  return /* @__PURE__ */ import_react.default.createElement(ChevronArrowContainer, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.ChevronLeft, null));
+}
+const ChevronArrowContainer = import_styled_components.default.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  top: 50%;
+  left: ${({ direction }) => direction === "left" ? "0" : "auto"};
+  right: ${({ direction }) => direction === "left" ? "auto" : "0"};
+  z-index: 1;
+  --dir: ${({ direction }) => direction === "left" ? "1" : "-1"};
+  scale: var(--dir) 1;
+  translate: calc(-50% * var(--dir)) -50%;
+  background-color: ${({ theme }) => theme.colors.background.default}; // Fake the transparent clip
+  border-radius: 100%;
+  border: none;
+  outline: none;
+  ::before {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: -1;
+    inset: 3px;
+    background-color: ${({ theme }) => theme.colors.opacityDefault.c05};
+    border-color: ${({ theme }) => theme.colors.opacityDefault.c05};
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 1px;
+  }
+  svg {
+    color: ${({ theme }) => theme.colors.primary.c100};
+  }
+  ::before,
+  svg {
+    cursor: pointer;
+  }
+  transition: opacity 0.2s ease-in-out;
+  opacity: var(--hover-transition);
+  ::before,
+  svg {
+    transition: translate 0.2s ease-in-out;
+    translate: calc(-50% + 50% * var(--hover-transition)) 0;
+  }
+`;
+//# sourceMappingURL=ChevronArrow.js.map

package/lib/cjs/components/layout/Carousel/ChevronArrow.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Carousel/ChevronArrow.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\n\ntype Props = ContainerProps & {\n  onClick: () => void;\n};\n\nexport function ChevronArrow(props: Props) {\n  return (\n    <ChevronArrowContainer {...props}>\n      <Icons.ChevronLeft />\n    </ChevronArrowContainer>\n  );\n}\n\ntype ContainerProps = {\n  direction: \"left\" | \"right\";\n};\n\nconst ChevronArrowContainer = styled.button<ContainerProps>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n\n  position: absolute;\n  top: 50%;\n  left: ${({ direction }) => (direction === \"left\" ? \"0\" : \"auto\")};\n  right: ${({ direction }) => (direction === \"left\" ? \"auto\" : \"0\")};\n  z-index: 1;\n\n  --dir: ${({ direction }) => (direction === \"left\" ? \"1\" : \"-1\")};\n  scale: var(--dir) 1;\n  translate: calc(-50% * var(--dir)) -50%;\n\n  background-color: ${({ theme }) => theme.colors.background.default}; // Fake the transparent clip\n  border-radius: 100%;\n  border: none;\n  outline: none;\n\n  ::before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    z-index: -1;\n    inset: 3px;\n    background-color: ${({ theme }) => theme.colors.opacityDefault.c05};\n    border-color: ${({ theme }) => theme.colors.opacityDefault.c05};\n    border-radius: 100%;\n    border-style: solid;\n    border-width: 1px;\n  }\n  svg {\n    color: ${({ theme }) => theme.colors.primary.c100};\n  }\n  ::before,\n  svg {\n    cursor: pointer;\n  }\n\n  transition: opacity 0.2s ease-in-out;\n  opacity: var(--hover-transition);\n  ::before,\n  svg {\n    transition: translate 0.2s ease-in-out;\n    translate: calc(-50% + 50% * var(--hover-transition)) 0;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,oBAAsB;AAMf,SAAS,aAAa,OAAc;AACzC,SACE,6BAAAA,QAAA,cAAC,yBAAuB,GAAG,SACzB,6BAAAA,QAAA,cAAC,oBAAM,aAAN,IAAkB,CACrB;AAEJ;AAMA,MAAM,wBAAwB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAS3B,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,MAAM,MAAO;AAAA,WACvD,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,SAAS,GAAI;AAAA;AAAA;AAAA,WAGxD,CAAC,EAAE,UAAU,MAAO,cAAc,SAAS,MAAM,IAAK;AAAA;AAAA;AAAA;AAAA,sBAI3C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAW5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA,oBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": ["React", "styled"]
+}

package/lib/cjs/components/layout/Carousel/Footer/Pagination/index.js CHANGED Viewed

@@ -40,7 +40,7 @@ const FooterCarouselBullets = import_styled_components.default.div`
   align-items: center;
 `;
 const Pagination = ({ children, currentIndex }) => {
-  return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex) })));
+  return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex, children.length) })));
 };
 var Pagination_default = Pagination;
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { SubProps } from \"../../types\";\nimport Bullet from \"./bullets\";\nimport { getItemStatus } from \"./utils\";\n\nconst FooterCarouselBullets = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Pagination = ({ children, currentIndex }: SubProps) => {\n  return (\n    <FooterCarouselBullets>\n      {children.map((child, index) => (\n        <Bullet key={child.key} type={getItemStatus(index, currentIndex)} />\n      ))}\n    </FooterCarouselBullets>\n  );\n};\n\nexport default Pagination;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,qBAAmB;AACnB,mBAA8B;AAE9B,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,CAAC,EAAE,UAAU,aAAa,MAAgB;AAC3D,SACE,6BAAAC,QAAA,cAAC,6BACE,SAAS,IAAI,CAAC,OAAO,UACpB,6BAAAA,QAAA,cAAC,eAAAC,SAAA,EAAO,KAAK,MAAM,KAAK,UAAM,4BAAc,OAAO,YAAY,GAAG,CACnE,CACH;AAEJ;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { SubProps } from \"../../types\";\nimport Bullet from \"./bullets\";\nimport { getItemStatus } from \"./utils\";\n\nconst FooterCarouselBullets = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Pagination = ({ children, currentIndex }: SubProps) => {\n  return (\n    <FooterCarouselBullets>\n      {children.map((child, index) => (\n        <Bullet key={child.key} type={getItemStatus(index, currentIndex, children.length)} />\n      ))}\n    </FooterCarouselBullets>\n  );\n};\n\nexport default Pagination;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AAEnB,qBAAmB;AACnB,mBAA8B;AAE9B,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,CAAC,EAAE,UAAU,aAAa,MAAgB;AAC3D,SACE,6BAAAC,QAAA,cAAC,6BACE,SAAS,IAAI,CAAC,OAAO,UACpB,6BAAAA,QAAA,cAAC,eAAAC,SAAA,EAAO,KAAK,MAAM,KAAK,UAAM,4BAAc,OAAO,cAAc,SAAS,MAAM,GAAG,CACpF,CACH;AAEJ;AAEA,IAAO,qBAAQ;",
   "names": ["styled", "React", "Bullet"]
 }

package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js CHANGED Viewed

@@ -22,17 +22,16 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_types = require("./types");
-const getItemStatus = (itemIndex, activeIndex) => {
-  const itemDistanceFromActiveIndex = Math.abs(itemIndex - activeIndex);
-  switch (itemDistanceFromActiveIndex) {
-    case 0:
-      return import_types.ItemStatus.active;
-    case 1:
-      return import_types.ItemStatus.nearby;
-    case 2:
-      return import_types.ItemStatus.far;
-    default:
-      return import_types.ItemStatus.none;
+const getItemStatus = (itemIndex, activeIndex, itemCount) => {
+  const isActive = itemIndex === activeIndex;
+  if (isActive) {
+    return import_types.ItemStatus.active;
   }
+  const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;
+  if (isAdjacent) {
+    return import_types.ItemStatus.nearby;
+  }
+  const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;
+  return isEdge ? import_types.ItemStatus.far : import_types.ItemStatus.nearby;
 };
 //# sourceMappingURL=utils.js.map

package/lib/cjs/components/layout/Carousel/Footer/Pagination/utils.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],
-  "sourcesContent": ["import { ItemStatus } from \"./types\";\n\n/**\n * Returns the status of an indexed item from the carousel index.\n */\nexport const getItemStatus = (itemIndex: number, activeIndex: number) => {\n  const itemDistanceFromActiveIndex = Math.abs(itemIndex - activeIndex);\n\n  switch (itemDistanceFromActiveIndex) {\n    case 0:\n      return ItemStatus.active;\n    case 1:\n      return ItemStatus.nearby;\n    case 2:\n      return ItemStatus.far;\n    default:\n      return ItemStatus.none;\n  }\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAKpB,MAAM,gBAAgB,CAAC,WAAmB,gBAAwB;AACvE,QAAM,8BAA8B,KAAK,IAAI,YAAY,WAAW;AAEpE,UAAQ,6BAA6B;AAAA,IACnC,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB,KAAK;AACH,aAAO,wBAAW;AAAA,IACpB;AACE,aAAO,wBAAW;AAAA,EACtB;AACF;",
+  "sourcesContent": ["import { ItemStatus } from \"./types\";\n\n/**\n * Returns the status of an indexed item from the carousel index.\n */\nexport const getItemStatus = (itemIndex: number, activeIndex: number, itemCount: number) => {\n  const isActive = itemIndex === activeIndex;\n  if (isActive) {\n    return ItemStatus.active;\n  }\n\n  const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;\n  if (isAdjacent) {\n    return ItemStatus.nearby;\n  }\n\n  const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;\n  return isEdge ? ItemStatus.far : ItemStatus.nearby;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAKpB,MAAM,gBAAgB,CAAC,WAAmB,aAAqB,cAAsB;AAC1F,QAAM,WAAW,cAAc;AAC/B,MAAI,UAAU;AACZ,WAAO,wBAAW;AAAA,EACpB;AAEA,QAAM,aAAa,KAAK,IAAI,YAAY,WAAW,MAAM;AACzD,MAAI,YAAY;AACd,WAAO,wBAAW;AAAA,EACpB;AAEA,QAAM,SAAS,cAAc,KAAK,cAAc,YAAY;AAC5D,SAAO,SAAS,wBAAW,MAAM,wBAAW;AAC9C;",
   "names": []
 }

package/lib/cjs/components/layout/Carousel/Footer/index.js CHANGED Viewed

@@ -39,6 +39,8 @@ const Footers = {
   default: import_variantDefault.default
 };
 const Footer = (props) => {
+  if (props.children.length === 1)
+    return null;
   const Component = Footers[props.variant];
   return /* @__PURE__ */ import_react.default.createElement(Component, { ...props });
 };

package/lib/cjs/components/layout/Carousel/Footer/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Carousel/Footer/index.tsx"],
-  "sourcesContent": ["import React, { FC } from \"react\";\nimport { SubProps, Variant } from \"../types\";\nimport FooterContentCard from \"./variantContentCard\";\nimport FooterDefault from \"./variantDefault\";\n\nconst Footers: { [key in Variant]: FC<SubProps> } = {\n  \"content-card\": FooterContentCard,\n  default: FooterDefault,\n};\n\nconst Footer = (props: SubProps) => {\n  const Component = Footers[props.variant];\n  return <Component {...props} />;\n};\n\nexport default Footer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,gCAA8B;AAC9B,4BAA0B;AAE1B,MAAM,UAA8C;AAAA,EAClD,gBAAgB,0BAAAA;AAAA,EAChB,SAAS,sBAAAC;AACX;AAEA,MAAM,SAAS,CAAC,UAAoB;AAClC,QAAM,YAAY,QAAQ,MAAM,OAAO;AACvC,SAAO,6BAAAC,QAAA,cAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["import React, { FC } from \"react\";\nimport { SubProps, Variant } from \"../types\";\nimport FooterContentCard from \"./variantContentCard\";\nimport FooterDefault from \"./variantDefault\";\n\nconst Footers: { [key in Variant]: FC<SubProps> } = {\n  \"content-card\": FooterContentCard,\n  default: FooterDefault,\n};\n\nconst Footer = (props: SubProps) => {\n  if (props.children.length === 1) return null;\n\n  const Component = Footers[props.variant];\n  return <Component {...props} />;\n};\n\nexport default Footer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,gCAA8B;AAC9B,4BAA0B;AAE1B,MAAM,UAA8C;AAAA,EAClD,gBAAgB,0BAAAA;AAAA,EAChB,SAAS,sBAAAC;AACX;AAEA,MAAM,SAAS,CAAC,UAAoB;AAClC,MAAI,MAAM,SAAS,WAAW;AAAG,WAAO;AAExC,QAAM,YAAY,QAAQ,MAAM,OAAO;AACvC,SAAO,6BAAAC,QAAA,cAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,IAAO,iBAAQ;",
   "names": ["FooterContentCard", "FooterDefault", "React"]
 }

package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js CHANGED Viewed

@@ -53,8 +53,6 @@ const FooterArrowContainer = import_styled_components.default.div`
   cursor: pointer;
 `;
 const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
-  if (children.length === 1)
-    return null;
   return /* @__PURE__ */ import_react2.default.createElement(FooterContainer, null, /* @__PURE__ */ import_react2.default.createElement(
     import_Pagination.default,
     {

package/lib/cjs/components/layout/Carousel/Footer/variantContentCard.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],
-  "sourcesContent": ["import { ArrowLeft, ArrowRight } from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n  height: 32px;\n  border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 16px 6px 16px;\n`;\n\nconst FooterArrowsContainer = styled.div`\n  display: flex;\n  gap: 8px;\n  align-items: center;\n`;\n\nconst FooterArrowContainer = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n`;\n\nconst FooterContentCard = ({ children, emblaApi, currentIndex, variant }: SubProps) => {\n  if (children.length === 1) return null;\n\n  return (\n    <FooterContainer>\n      <Pagination\n        variant={variant}\n        children={children}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n\n      <FooterArrowsContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollPrev()}>\n          <ArrowLeft size=\"S\" />\n        </FooterArrowContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollNext()}>\n          <ArrowRight size=\"S\" />\n        </FooterArrowContainer>\n      </FooterArrowsContainer>\n    </FooterContainer>\n  );\n};\n\nexport default FooterContentCard;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,IAAAA,gBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA,0BAEL,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,cAAc,QAAQ,MAAgB;AACrF,MAAI,SAAS,WAAW;AAAG,WAAO;AAElC,SACE,8BAAAC,QAAA,cAAC,uBACC,8BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEA,8BAAAD,QAAA,cAAC,6BACC,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,0BAAU,MAAK,KAAI,CACtB,GACA,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,2BAAW,MAAK,KAAI,CACvB,CACF,CACF;AAEJ;AAEA,IAAO,6BAAQ;",
+  "sourcesContent": ["import { ArrowLeft, ArrowRight } from \"@ledgerhq/icons-ui/react\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n  height: 32px;\n  border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 16px 6px 16px;\n`;\n\nconst FooterArrowsContainer = styled.div`\n  display: flex;\n  gap: 8px;\n  align-items: center;\n`;\n\nconst FooterArrowContainer = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n`;\n\nconst FooterContentCard = ({ children, emblaApi, currentIndex, variant }: SubProps) => {\n  return (\n    <FooterContainer>\n      <Pagination\n        variant={variant}\n        children={children}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n\n      <FooterArrowsContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollPrev()}>\n          <ArrowLeft size=\"S\" />\n        </FooterArrowContainer>\n        <FooterArrowContainer onClick={() => emblaApi?.scrollNext()}>\n          <ArrowRight size=\"S\" />\n        </FooterArrowContainer>\n      </FooterArrowsContainer>\n    </FooterContainer>\n  );\n};\n\nexport default FooterContentCard;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,IAAAA,gBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA,0BAEL,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAAA;AAMhE,MAAM,wBAAwB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,oBAAoB,CAAC,EAAE,UAAU,UAAU,cAAc,QAAQ,MAAgB;AACrF,SACE,8BAAAC,QAAA,cAAC,uBACC,8BAAAA,QAAA;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAEA,8BAAAD,QAAA,cAAC,6BACC,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,0BAAU,MAAK,KAAI,CACtB,GACA,8BAAAA,QAAA,cAAC,wBAAqB,SAAS,MAAM,qCAAU,gBAC7C,8BAAAA,QAAA,cAAC,2BAAW,MAAK,KAAI,CACvB,CACF,CACF;AAEJ;AAEA,IAAO,6BAAQ;",
   "names": ["import_react", "styled", "React", "Pagination"]
 }

package/lib/cjs/components/layout/Carousel/index.js CHANGED Viewed

@@ -35,6 +35,7 @@ var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Footer = __toESM(require("./Footer"));
+var import_ChevronArrow = require("./ChevronArrow");
 const Embla = import_styled_components.default.div`
   overflow: hidden;
 `;
@@ -42,10 +43,22 @@ const EmblaContainer = import_styled_components.default.div`
   display: flex;
 `;
 const EmblaSlide = import_styled_components.default.div`
+  display: flex;
   flex: 0 0 100%;
   min-width: 0;
+  > * {
+    flex-basis: 100%;
+  }
+`;
+const CarouselContainer = import_styled_components.default.div`
+  position: relative;
+  --hover-transition: 0;
+  &:hover {
+    --hover-transition: 1;
+  }
 `;
-const Carousel = ({ children, variant = "default" }) => {
+const Carousel = ({ children, variant = "default", onChange }) => {
   const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
   const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true });
   const updateIndex = (0, import_react.useCallback)(() => {
@@ -54,7 +67,8 @@ const Carousel = ({ children, variant = "default" }) => {
     const newIndex = emblaApi.selectedScrollSnap();
     setCurrentIndex(newIndex);
     emblaApi.scrollTo(newIndex);
-  }, [emblaApi]);
+    onChange == null ? void 0 : onChange(newIndex);
+  }, [emblaApi, onChange]);
   (0, import_react.useEffect)(() => {
     if (!emblaApi)
       return;
@@ -62,7 +76,9 @@ const Carousel = ({ children, variant = "default" }) => {
     emblaApi.on("select", updateIndex);
     emblaApi.on("reInit", updateIndex);
   }, [emblaApi, updateIndex]);
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child)))), /* @__PURE__ */ import_react.default.createElement(
+  const handleGotoPrevSlide = () => emblaApi == null ? void 0 : emblaApi.scrollPrev();
+  const handleGotoNextSlide = () => emblaApi == null ? void 0 : emblaApi.scrollNext();
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(CarouselContainer, { variant }, variant === "default" && children.length > 1 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ChevronArrow.ChevronArrow, { direction: "left", onClick: handleGotoPrevSlide }), /* @__PURE__ */ import_react.default.createElement(import_ChevronArrow.ChevronArrow, { direction: "right", onClick: handleGotoNextSlide })), /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child))))), /* @__PURE__ */ import_react.default.createElement(
     import_Footer.default,
     {
       children,

package/lib/cjs/components/layout/Carousel/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Carousel/index.tsx"],
-  "sourcesContent": ["import useEmblaCarousel from \"embla-carousel-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\n\nconst Embla = styled.div`\n  overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n  display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n  flex: 0 0 100%;\n  min-width: 0;\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\" }: Props) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });\n\n  const updateIndex = useCallback(() => {\n    if (!emblaApi) return;\n\n    const newIndex = emblaApi.selectedScrollSnap();\n    setCurrentIndex(newIndex);\n    emblaApi.scrollTo(newIndex);\n  }, [emblaApi]);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    // Initial call to update carousel index\n    updateIndex();\n\n    // When the selected scroll snap changes\n    emblaApi.on(\"select\", updateIndex);\n\n    // When `reInit` is called or when window is resized\n    emblaApi.on(\"reInit\", updateIndex);\n  }, [emblaApi, updateIndex]);\n\n  return (\n    <div>\n      <Embla ref={emblaRef}>\n        <EmblaContainer>\n          {children.map(child => (\n            <EmblaSlide key={child.key}>{child}</EmblaSlide>\n          ))}\n        </EmblaContainer>\n      </Embla>\n\n      <Footer\n        children={children}\n        variant={variant}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n    </div>\n  );\n};\nexport default Carousel;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAGnB,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAQ1B,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,UAAU,MAAa;AAC7D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAC,SAAiB,EAAE,MAAM,KAAK,CAAC;AAE5D,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,mBAAmB;AAC7C,oBAAgB,QAAQ;AACxB,aAAS,SAAS,QAAQ;AAAA,EAC5B,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU;AAGf,gBAAY;AAGZ,aAAS,GAAG,UAAU,WAAW;AAGjC,aAAS,GAAG,UAAU,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,SAAM,KAAK,YACV,6BAAAA,QAAA,cAAC,sBACE,SAAS,IAAI,WACZ,6BAAAA,QAAA,cAAC,cAAW,KAAK,MAAM,OAAM,KAAM,CACpC,CACH,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;AACA,IAAO,mBAAQ;",
+  "sourcesContent": ["import useEmblaCarousel from \"embla-carousel-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\nimport { ChevronArrow } from \"./ChevronArrow\";\n\nconst Embla = styled.div`\n  overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n  display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n  display: flex;\n  flex: 0 0 100%;\n  min-width: 0;\n  > * {\n    flex-basis: 100%;\n  }\n`;\n\nconst CarouselContainer = styled.div<Pick<Props, \"variant\">>`\n  position: relative;\n\n  --hover-transition: 0;\n  &:hover {\n    --hover-transition: 1;\n  }\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\", onChange }: Props) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });\n\n  const updateIndex = useCallback(() => {\n    if (!emblaApi) return;\n\n    const newIndex = emblaApi.selectedScrollSnap();\n    setCurrentIndex(newIndex);\n    emblaApi.scrollTo(newIndex);\n\n    onChange?.(newIndex);\n  }, [emblaApi, onChange]);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    // Initial call to update carousel index\n    updateIndex();\n\n    // When the selected scroll snap changes\n    emblaApi.on(\"select\", updateIndex);\n\n    // When `reInit` is called or when window is resized\n    emblaApi.on(\"reInit\", updateIndex);\n  }, [emblaApi, updateIndex]);\n\n  const handleGotoPrevSlide = () => emblaApi?.scrollPrev();\n  const handleGotoNextSlide = () => emblaApi?.scrollNext();\n\n  return (\n    <div>\n      <CarouselContainer variant={variant}>\n        {variant === \"default\" && children.length > 1 && (\n          <>\n            <ChevronArrow direction=\"left\" onClick={handleGotoPrevSlide} />\n            <ChevronArrow direction=\"right\" onClick={handleGotoNextSlide} />\n          </>\n        )}\n\n        <Embla ref={emblaRef}>\n          <EmblaContainer>\n            {children.map(child => (\n              <EmblaSlide key={child.key}>{child}</EmblaSlide>\n            ))}\n          </EmblaContainer>\n        </Embla>\n      </CarouselContainer>\n\n      <Footer\n        children={children}\n        variant={variant}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n    </div>\n  );\n};\n\nexport default Carousel;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAEnB,0BAA6B;AAE7B,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,oBAAoB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjC,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,WAAW,SAAS,MAAa;AACvE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAC,SAAiB,EAAE,MAAM,KAAK,CAAC;AAE5D,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,mBAAmB;AAC7C,oBAAgB,QAAQ;AACxB,aAAS,SAAS,QAAQ;AAE1B,yCAAW;AAAA,EACb,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU;AAGf,gBAAY;AAGZ,aAAS,GAAG,UAAU,WAAW;AAGjC,aAAS,GAAG,UAAU,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,sBAAsB,MAAM,qCAAU;AAC5C,QAAM,sBAAsB,MAAM,qCAAU;AAE5C,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,qBAAkB,WAChB,YAAY,aAAa,SAAS,SAAS,KAC1C,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,oCAAa,WAAU,QAAO,SAAS,qBAAqB,GAC7D,6BAAAA,QAAA,cAAC,oCAAa,WAAU,SAAQ,SAAS,qBAAqB,CAChE,GAGF,6BAAAA,QAAA,cAAC,SAAM,KAAK,YACV,6BAAAA,QAAA,cAAC,sBACE,SAAS,IAAI,WACZ,6BAAAA,QAAA,cAAC,cAAW,KAAK,MAAM,OAAM,KAAM,CACpC,CACH,CACF,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,mBAAQ;",
   "names": ["styled", "useEmblaCarousel", "React", "Footer"]
 }

package/lib/cjs/components/layout/Carousel/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Carousel/types.tsx"],
-  "sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n  children: ReactElement[];\n  variant?: Variant;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Props> & {\n  emblaApi: UseEmblaCarouselType[1];\n  currentIndex: number;\n};\n"],
+  "sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n  children: ReactElement[];\n  variant?: Variant;\n  onChange?: (index: number) => void;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Pick<Props, \"children\" | \"variant\">> & {\n  emblaApi: UseEmblaCarouselType[1];\n  currentIndex: number;\n};\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }