@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/SelectableCard/index.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef, useRef, useCallback } from "react";
+import { Checkbox } from "../Checkbox/index.js";
+import { Radio } from "../Radio/index.js";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const Container = styled(Stack)`
+  // This is to remove the gap when there is no label because if we do not there
+  // will be an empty space above the children due to the invisible input
+  // if you find a better way to do this feel free to do it
+  &[data-has-label='false'] > :first-child {
+    margin-bottom: -${({ theme }) => theme.space["0.5"]};
+  }
+
+  padding: ${({ theme }) => theme.space["2"]};
+  border-radius: ${({ theme }) => theme.radii.default};
+  transition:
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+  cursor: pointer;
+  background: ${({ theme }) => theme.colors.neutral.background};
+
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  color: ${({ theme }) => theme.colors.neutral.text};
+
+  &[data-checked='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.primary.border};
+  }
+
+  &[data-error='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &[data-disabled='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.neutral.borderDisabled};
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    cursor: not-allowed;
+  }
+
+  &:hover,
+  &:focus-within,
+  &:active {
+    &:not([data-error='true']):not([data-disabled='true']) {
+      border: 1px solid ${({ theme }) => theme.colors.primary.border};
+
+      &[data-cheked='false'] {
+        box-shadow: ${({ theme }) => theme.shadows.hoverPrimary};
+      }
+    }
+  }
+`;
+const StyledStack = styled(Stack)`
+  &[data-has-label='true'] {
+    padding-left: ${({ theme }) => theme.space["4"]};
+  }
+
+  &[data-has-label='false'] {
+    display: contents;
+  }
+`;
+const StyledElement = styled("div", {
+  shouldForwardProp: (prop) => !["showTick", "hasLabel"].includes(prop)
+})`
+  display: inline-flex;
+  align-items: start;
+
+  &[data-checked='true'] {
+    color: ${({ theme }) => theme.colors.primary.text};
+  }
+
+  &[data-error='true'] {
+    color: ${({ theme }) => theme.colors.danger.text};
+  }
+
+  &[aria-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+  }
+
+  input + svg {
+    ${({ showTick }) => !showTick ? `display: none;` : null}
+  }
+
+  label {
+    ${({ showTick, hasLabel }) => !showTick && !hasLabel ? `display: none;` : null}
+  }
+`;
+const StyledRadio = StyledElement.withComponent(Radio);
+const OverloadedCheckbox = StyledElement.withComponent(Checkbox);
+const StyledCheckbox = styled(OverloadedCheckbox)`
+  label {
+    width: 100%;
+  }
+
+  pointer-events: none; // Prevents the label from being clickable as we want the container to be clickable
+`;
+const SelectableCard = forwardRef(
+  ({
+    name,
+    value,
+    onChange,
+    showTick = false,
+    type = "radio",
+    checked = false,
+    disabled = false,
+    children,
+    className,
+    isError,
+    onFocus,
+    onBlur,
+    tooltip,
+    id,
+    label,
+    "data-testid": dataTestId
+  }, ref) => {
+    const innerRef = useRef(null);
+    const ParentContainer = useCallback(
+      ({ children: subChildren }) => {
+        if (tooltip) {
+          return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: subChildren }) });
+        }
+        return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
+      },
+      [tooltip]
+    );
+    return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsxs(
+      Container,
+      {
+        onClick: () => {
+          if (innerRef?.current) {
+            innerRef.current.click();
+          }
+        },
+        className,
+        "data-checked": checked,
+        "data-disabled": disabled,
+        "data-error": isError,
+        "data-testid": dataTestId,
+        "data-type": type,
+        "data-has-label": !!label,
+        ref,
+        alignItems: "start",
+        direction: "column",
+        gap: 0.5,
+        flex: 1,
+        children: [
+          type === "radio" ? /* @__PURE__ */ jsx(
+            StyledRadio,
+            {
+              name,
+              value,
+              onChange,
+              showTick,
+              checked,
+              disabled,
+              error: isError,
+              onFocus,
+              onBlur,
+              hasLabel: !!label,
+              id,
+              ref: innerRef,
+              "data-error": isError,
+              label
+            }
+          ) : /* @__PURE__ */ jsx(
+            StyledCheckbox,
+            {
+              name,
+              value,
+              onChange,
+              showTick,
+              checked,
+              disabled,
+              error: isError,
+              onFocus,
+              onBlur,
+              hasLabel: !!label,
+              id,
+              ref: innerRef,
+              "data-error": isError,
+              children: label
+            }
+          ),
+          children ? /* @__PURE__ */ jsx(StyledStack, { "data-has-label": !!label && showTick, width: "100%", children: typeof children === "function" ? children({ checked, disabled }) : children }) : null
+        ]
+      }
+    ) });
+  }
+);
+export {
+  SelectableCard
+};

package/dist/components/SelectableCardGroup/index.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type InputHTMLAttributes, type ReactNode } from 'react';
+import { SelectableCard } from '../SelectableCard';
+type CardSelectableCardProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange' | 'checked' | 'type' | 'showTick'>;
+type SelectableCardGroupProps = {
+    legend?: string;
+    value: string | number | (string | number)[];
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    columns?: number;
+    children: ReactNode;
+    type: 'radio' | 'checkbox';
+    required?: boolean;
+    showTick?: boolean;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>>;
+/**
+ * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
+ */
+export declare const SelectableCardGroup: {
+    ({ legend, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/SelectableCardGroup/index.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { createContext, useMemo, useContext } from "react";
+import { Row } from "../Row/index.js";
+import { SelectableCard } from "../SelectableCard/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const SelectableCardGroupContext = createContext(void 0);
+const CardSelectableCard = ({
+  value,
+  disabled,
+  children,
+  className,
+  isError,
+  onFocus,
+  onBlur,
+  tooltip,
+  id,
+  label,
+  "data-testid": dataTestId
+}) => {
+  const context = useContext(SelectableCardGroupContext);
+  if (!context) {
+    throw new Error(
+      "SelectableCardGroup.Card can only be used inside a SelectableCardGroup"
+    );
+  }
+  const { groupName, onChange, groupValue, type, showTick } = context;
+  return /* @__PURE__ */ jsx(
+    SelectableCard,
+    {
+      name: groupName,
+      value,
+      showTick,
+      type,
+      disabled,
+      className,
+      isError,
+      onFocus,
+      onBlur,
+      tooltip,
+      id,
+      label,
+      onChange,
+      checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+const FieldSet = styled.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+const StyledRequiredIcon = styled(Icon)`
+  vertical-align: super;
+`;
+const SelectableCardGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  columns = 1,
+  children,
+  onChange,
+  name,
+  required = false,
+  type,
+  showTick = false
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      groupName: name,
+      groupValue: value,
+      onChange,
+      required,
+      type,
+      showTick
+    }),
+    [name, value, onChange, required, type, showTick]
+  );
+  return /* @__PURE__ */ jsx(SelectableCardGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    /* @__PURE__ */ jsx(FieldSet, { className, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+      legend ? /* @__PURE__ */ jsxs(Text, { as: "legend", variant: "bodyStrong", children: [
+        legend && /* @__PURE__ */ jsxs(Fragment, { children: [
+          legend,
+          "  "
+        ] }),
+        required ? /* @__PURE__ */ jsx(StyledRequiredIcon, { name: "asterisk", color: "danger", size: 8 }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
+    ] }) }),
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        variant: "caption",
+        prominence: "weak",
+        sentiment: "neutral",
+        children: helper
+      }
+    ) : null,
+    error ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", sentiment: "danger", children: error }) : null
+  ] }) });
+};
+SelectableCardGroup.Card = CardSelectableCard;
+export {
+  SelectableCardGroup
+};

package/dist/components/Separator/index.d.ts

@@ -0,0 +1,17 @@
+import { Icon } from '@ultraviolet/icons';
+import type { ComponentProps } from 'react';
+import type { Color } from '../../theme';
+type Direction = 'horizontal' | 'vertical';
+type SeparatorProps = {
+    icon?: ComponentProps<typeof Icon>['name'];
+    direction?: Direction;
+    thickness?: number;
+    color?: Color;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * Separator component used to separate content with a horizontal or vertical line.
+ */
+export declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Separator/index.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+const StyledIconWrapper = styled("div", {
+  shouldForwardProp: (prop) => !["direction"].includes(prop)
+})`
+  display: flex;
+  flex-direction: ${({ direction }) => direction === "vertical" ? "column" : "row"};
+  align-items: center;
+`;
+const StyledIcon = styled(Icon)`
+  fill: ${({ color, theme }) => theme.colors[color].borderWeak};
+`;
+const StyledHr = styled("hr", {
+  shouldForwardProp: (prop) => !["direction", "thickness", "color", "hasIcon"].includes(prop)
+})`
+  margin: 0;
+  border: 0;
+  width: ${({ direction, thickness = 1 }) => direction === "vertical" ? `${thickness}px` : "auto"};
+  height: ${({ direction, thickness = 1 }) => direction === "horizontal" ? `${thickness}px` : "auto"};
+  flex-shrink: 0;
+  background-color: ${({ theme, color }) => theme.colors[color].borderWeak};
+  ${({ hasIcon }) => hasIcon && `flex: 1;`}
+`;
+const Separator = ({
+  direction = "horizontal",
+  thickness = 1,
+  color = "neutral",
+  icon,
+  className,
+  "data-testid": dataTestId
+}) => icon ? /* @__PURE__ */ jsxs(
+  StyledIconWrapper,
+  {
+    role: "separator",
+    "aria-orientation": direction,
+    direction,
+    className,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsx(
+        StyledHr,
+        {
+          direction,
+          thickness,
+          color,
+          hasIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(StyledIcon, { name: icon, size: 24, color }),
+      /* @__PURE__ */ jsx(
+        StyledHr,
+        {
+          direction,
+          thickness,
+          color,
+          hasIcon: true
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ jsx(
+  StyledHr,
+  {
+    role: "separator",
+    "aria-orientation": direction,
+    direction,
+    thickness,
+    color,
+    className,
+    "data-testid": dataTestId
+  }
+);
+export {
+  Separator
+};

package/dist/components/Skeleton/Block.d.ts

@@ -0,0 +1,3 @@
+export declare const Block: ({ length }: {
+    length?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Block.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Fragment } from "react";
+import { IconSkeleton } from "./IconSkeleton.js";
+import { Line } from "./Line.js";
+const StyledLine = styled.li`
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space["3"]} ${theme.space["2"]}`};
+`;
+const StyledList = styled.ul`
+  min-height: 200px;
+  width: 100%;
+  height: 100%;
+  padding: ${({ theme }) => theme.space["2"]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  margin: 0;
+
+  > ${StyledLine}:not(:last-child) {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  }
+`;
+const Block = ({ length = 3 }) => /* @__PURE__ */ jsx(StyledList, { children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(StyledLine, { children: [
+  /* @__PURE__ */ jsx(IconSkeleton, {}),
+  /* @__PURE__ */ jsx(Line, {})
+] }) }, `skeleton-block-${i}`)) });
+export {
+  Block
+};

package/dist/components/Skeleton/Blocks.d.ts

@@ -0,0 +1,4 @@
+export declare const Blocks: ({ col, length, }: {
+    col?: number;
+    length?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Blocks.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { IconSkeleton } from "./IconSkeleton.js";
+import { Line } from "./Line.js";
+const StyledContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ col }) => col}, 1fr);
+  gap: ${({ theme }) => theme.space["2"]};
+`;
+const Block = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space["1"]} ${theme.space["2"]}`};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  overflow: hidden;
+`;
+const Blocks = ({
+  col = 4,
+  length = 8
+}) => /* @__PURE__ */ jsx(StyledContainer, { col, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
+  /* @__PURE__ */ jsx(IconSkeleton, {}),
+  /* @__PURE__ */ jsx(Line, {})
+] }, `skeleton-blocks-${i}`)) });
+export {
+  Blocks
+};

package/dist/components/Skeleton/BoxWithIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const BoxWithIcon: ({ col, length, }: {
+    col?: number;
+    length?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/BoxWithIcon.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { IconSkeleton } from "./IconSkeleton.js";
+import { Line } from "./Line.js";
+const StyledContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ col }) => col}, 1fr);
+  gap: ${({ theme }) => theme.space["2"]};
+`;
+const Block = styled.div`
+  height: 130px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  overflow: hidden;
+`;
+const BoxWithIcon = ({
+  col = 4,
+  length = 8
+}) => /* @__PURE__ */ jsx(StyledContainer, { col, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
+  /* @__PURE__ */ jsx(IconSkeleton, {}),
+  /* @__PURE__ */ jsx(Line, {})
+] }, `skeleton-box-${i}`)) });
+export {
+  BoxWithIcon
+};

package/dist/components/Skeleton/Donut.d.ts

@@ -0,0 +1 @@
+export declare const Donut: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Donut.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Line } from "./Line.js";
+const CIRCLE_SIZE = 206;
+const StyledContainer = styled.div`
+  display: flex;
+`;
+const StyledSVG = styled.svg`
+  height: ${CIRCLE_SIZE}px;
+  width: ${CIRCLE_SIZE}px;
+  transform: rotate(-90deg);
+`;
+const StyledCircle = styled.circle`
+  transform-origin: 50% 50%;
+  stroke: ${({ theme }) => theme.colors.neutral.borderWeak};
+  stroke-width: 18;
+  stroke-linecap: butt;
+  fill: none;
+`;
+const LineList = styled.ul`
+  display: grid;
+  list-style: none;
+  gap: 16px;
+`;
+const Donut = () => /* @__PURE__ */ jsxs(StyledContainer, { children: [
+  /* @__PURE__ */ jsx(StyledSVG, { children: /* @__PURE__ */ jsx(StyledCircle, { cx: CIRCLE_SIZE / 2, cy: CIRCLE_SIZE / 2, r: "90" }) }),
+  /* @__PURE__ */ jsxs(LineList, { children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) })
+  ] })
+] });
+export {
+  Donut
+};

package/dist/components/Skeleton/IconSkeleton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const IconSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Skeleton/IconSkeleton.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+const IconSkeleton = styled.div`
+  margin-right: ${({ theme }) => theme.space["1"]};
+  width: ${({ theme }) => theme.space["4"]};
+  height: ${({ theme }) => theme.space["4"]};
+  min-width: ${({ theme }) => theme.space["4"]};
+  border-radius: ${({ theme }) => theme.radii.large};
+  background-color: ${({ theme }) => theme.colors.neutral.borderWeak};
+`;
+export {
+  IconSkeleton
+};

package/dist/components/Skeleton/Line.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Line: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Skeleton/Line.js

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+const sizes = [80, 120, 160, 200];
+const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
+const Line = styled.div`
+  height: 12px;
+  width: ${() => randomSize()}px;
+  max-width: 100%;
+  border-radius: ${({ theme }) => theme.radii.large};
+  background-color: ${({ theme }) => theme.colors.neutral.borderWeak};
+`;
+export {
+  Line
+};

package/dist/components/Skeleton/List.d.ts

@@ -0,0 +1,4 @@
+export declare const List: ({ length, col, }: {
+    length?: number;
+    col?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/List.js

@@ -0,0 +1,29 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Line } from "./Line.js";
+const StyledItem = styled.li`
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 4px 8px;
+`;
+const StyledLine = styled.div`
+  flex: 1;
+`;
+const StyledList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  > ${StyledItem}:nth-of-type(even) {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+  }
+`;
+const Item = ({ col = 3 }) => /* @__PURE__ */ jsx(StyledItem, { children: Array.from({ length: col }, (_, i) => /* @__PURE__ */ jsx(StyledLine, { children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
+const List = ({
+  length = 3,
+  col = 3
+}) => /* @__PURE__ */ jsx(StyledList, { children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)) });
+export {
+  List
+};

package/dist/components/Skeleton/Slider.d.ts

@@ -0,0 +1,3 @@
+export declare const Slider: ({ length }: {
+    length?: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Slider.js

@@ -0,0 +1,26 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+const StyledContainer = styled.div`
+  height: 277px;
+  display: grid;
+  grid-template-columns: repeat(${({ length }) => length}, 1fr);
+  gap: ${({ theme }) => theme.space["2"]};
+  overflow: auto;
+`;
+const StyledCard = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  border-radius: ${({ theme }) => theme.radii.default};
+  width: 239px;
+  height: 261px;
+  overflow: hidden;
+`;
+const StyledBanner = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  background-color: ${({ theme }) => theme.colors.neutral.borderWeak};
+  width: 100%;
+  height: 33%;
+`;
+const Slider = ({ length = 4 }) => /* @__PURE__ */ jsx(StyledContainer, { length, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(StyledCard, { children: /* @__PURE__ */ jsx(StyledBanner, {}) }, `skeleton-slider-card-${i}`)) });
+export {
+  Slider
+};