@ultraviolet/ui 1.51.1 → 1.51.3

package/dist/src/components/Skeleton/index.js

@@ -1,82 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes } from '@emotion/react';
-import { Block } from './Block.js';
-import { Blocks } from './Blocks.js';
-import { BoxWithIcon } from './BoxWithIcon.js';
-import { Donut } from './Donut.js';
-import { Line } from './Line.js';
-import { List } from './List.js';
-import { Slider } from './Slider.js';
-import { Square } from './Square.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const shineAnimation = keyframes`
-  from {
-    left: -25%;
-  }
-  to {
-    left: 100%;
-  }
-`;
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e183x2r81"
-})(process.env.NODE_ENV === "production" ? {
-  name: "158ltsb",
-  styles: "position:relative;width:100%;overflow:hidden;cursor:progress;display:flex;flex-flow:column;height:100%"
-} : {
-  name: "158ltsb",
-  styles: "position:relative;width:100%;overflow:hidden;cursor:progress;display:flex;flex-flow:column;height:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledDiv = /*#__PURE__*/_styled("div", {
-  target: "e183x2r80"
-})("position:absolute;top:0;height:100%;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    ", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, "00,\n    ", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, "4D,\n    ", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, "66,\n    ", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, "4D,\n    ", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, "00\n  );animation:", shineAnimation, " 1s linear infinite;animation-direction:alternate;@media (prefers-reduced-motion: reduce){animation:unset;}");
-const variants = {
-  block: Block,
-  blocks: Blocks,
-  box: BoxWithIcon,
-  donut: Donut,
-  line: Line,
-  list: List,
-  slider: Slider,
-  square: Square
-};
-/**
- * Skeleton component is used to indicate that the data is loading.
- * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
- * content that will eventually be loaded on the screen.
- */
-const Skeleton = ({
-  variant = 'blocks',
-  length,
-  col,
-  className,
-  'aria-label': ariaLabel,
-  'data-testid': dataTestId
-}) => {
-  const Component = variants[variant];
-  return jsxs(StyledContainer, {
-    className: className,
-    "aria-busy": true,
-    "aria-live": "polite",
-    "aria-label": ariaLabel,
-    "data-testid": dataTestId,
-    children: [jsx(Component, {
-      length: length,
-      col: col
-    }), jsx(StyledDiv, {})]
-  });
-};
-
-export { Skeleton };

package/dist/src/components/Snippet/index.js

@@ -1,200 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useReducer, Children } from 'react';
-import { CopyButton } from '../CopyButton/index.js';
-import { Expandable } from '../Expandable/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const LINES_BREAK_REGEX = /\r\n|\r|\n/;
-const PreText = /*#__PURE__*/_styled(Text, {
-  shouldForwardProp: prop => !['multiline', 'hasShowMoreButton', 'showMore'].includes(prop),
-  target: "e1q0gj908"
-})("margin:0;padding:", ({
-  theme
-}) => theme.space['2'], ";padding-right:", ({
-  theme
-}) => theme.space['9'], ";overflow-x:", ({
-  hasShowMoreButton,
-  showMore
-}) => hasShowMoreButton && !showMore ? 'hidden' : 'auto', ";overflow-y:hidden;", ({
-  multiline
-}) => !multiline ? 'white-space: nowrap;' : '', " height:auto;counter-reset:section;");
-const StyledSpan = /*#__PURE__*/_styled('span', {
-  shouldForwardProp: prop => !['linePrefix', 'multiline', 'prefix'].includes(prop),
-  target: "e1q0gj907"
-})("display:block;&:after{content:'';", ({
-  theme,
-  multiline
-}) => multiline ? `padding: ${theme.space['4']}` : `padding-right: ${theme.space['8']}`, ";}", ({
-  prefix,
-  theme
-}) => prefix ? `
-    &:before {
-      color: ${theme.colors.neutral.textWeak};
-      width: ${prefix === 'lines' ? '35px' : ''};
-      display: inline-flex;
-      justify-content: flex-end;
-      counter-increment: section;
-      content: ${prefix === 'lines' ? 'counter(section)' : "'$'"};
-      padding-right: ${theme.space['1']};
-    }
-  ` : null, ";");
-const Container = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['multiline'].includes(prop),
-  target: "e1q0gj906"
-})("position:relative;display:flex;justify-content:start;max-width:100%;", ({
-  multiline
-}) => multiline ? 'width: 100%;' : '', " background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1q0gj905"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ButtonContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['multiline'].includes(prop),
-  target: "e1q0gj904"
-})("position:absolute;top:0;right:0;padding:", ({
-  theme,
-  multiline
-}) => `${theme.space[multiline ? '2' : '1']} ${theme.space['2']} 0 0`, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";border:2px solid transparent;", ({
-  multiline,
-  theme
-}) => !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundWeak}` : '', ";");
-const ShowMoreContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['showMore'].includes(prop),
-  target: "e1q0gj903"
-})("width:100%;box-shadow:", ({
-  theme,
-  showMore
-}) => !showMore ? `0px -22px 19px -6px
-    ${theme.colors.neutral.backgroundWeak}` : 'none', ";");
-const StyledButton = /*#__PURE__*/_styled("button", {
-  target: "e1q0gj902"
-})("width:100%;background:none;border:none;padding:", ({
-  theme
-}) => theme.space['2'], ";padding-top:", ({
-  theme
-}) => theme.space['1'], ";cursor:pointer;");
-const AlignCenterText = /*#__PURE__*/_styled(Text, {
-  target: "e1q0gj901"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vcob1d",
-  styles: "display:flex;justify-content:center;align-items:center"
-} : {
-  name: "1vcob1d",
-  styles: "display:flex;justify-content:center;align-items:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const AnimatedArrowIcon = /*#__PURE__*/_styled(Icon, {
-  shouldForwardProp: prop => !['showMore'].includes(prop),
-  target: "e1q0gj900"
-})("transform:", ({
-  showMore
-}) => showMore ? 'rotate(180deg)' : 'rotate(0deg)', ";transform-origin:center;transition:transform 300ms ease-in-out;");
-const CodeContent = ({
-  children,
-  prefix,
-  multiline,
-  showMore,
-  hasShowMoreButton,
-  lines
-}) => jsx(PreText, {
-  as: "pre",
-  variant: "code",
-  multiline: multiline,
-  hasShowMoreButton: hasShowMoreButton,
-  showMore: showMore,
-  children: multiline ? Children.map(lines, child => jsx(StyledSpan, {
-    multiline: true,
-    prefix: prefix,
-    children: child
-  })) : jsx(StyledSpan, {
-    prefix: prefix,
-    children: children
-  })
-});
-/**
- * Snippet component is used to display code snippets with the ability to copy the code.
- * It also has the ability to show/hide the code snippet if it has more than 4 lines.
- */
-const Snippet = ({
-  children,
-  copyText,
-  copiedText,
-  showText = 'Show',
-  hideText = 'Hide',
-  prefix,
-  className,
-  'data-testid': dataTestId,
-  initiallyExpanded
-}) => {
-  const [showMore, setShowMore] = useReducer(value => !value, initiallyExpanded ?? false);
-  const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
-  const numberOfLines = lines.length;
-  const multiline = numberOfLines > 1;
-  const hasShowMoreButton = numberOfLines > 4 && multiline;
-  return jsx(Container, {
-    multiline: multiline,
-    className: className,
-    "data-testid": dataTestId,
-    children: jsxs(StyledStack, {
-      children: [hasShowMoreButton ? jsx(Expandable, {
-        minHeight: 120,
-        opened: showMore,
-        children: jsx(CodeContent, {
-          prefix: prefix,
-          multiline: multiline,
-          lines: lines,
-          children: children
-        })
-      }) : jsx(CodeContent, {
-        prefix: prefix,
-        multiline: multiline,
-        lines: lines,
-        children: children
-      }), jsx(ButtonContainer, {
-        multiline: multiline && numberOfLines > 1,
-        children: jsx(CopyButton, {
-          value: children,
-          copyText: copyText,
-          copiedText: copiedText,
-          noBorder: true,
-          sentiment: "neutral"
-        })
-      }), hasShowMoreButton ? jsx(ShowMoreContainer, {
-        showMore: showMore,
-        children: jsx(StyledButton, {
-          type: "button",
-          onClick: setShowMore,
-          "aria-expanded": showMore,
-          children: jsxs(AlignCenterText, {
-            as: "span",
-            variant: "bodySmallStrong",
-            children: [showMore ? hideText : showText, "\xA0", jsx(AnimatedArrowIcon, {
-              name: "arrow-down",
-              showMore: showMore
-            })]
-          })
-        })
-      }) : null]
-    })
-  });
-};
-
-export { Snippet };

package/dist/src/components/Stack/index.js

@@ -1,29 +0,0 @@
-import _styled from '@emotion/styled/base';
-
-/**
- * A Stack is a widget that organize children in a vertical or horizontal layout based on css Flex,
- * it accepts few props to deal with spacing and align.
- */
-const Stack = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap', 'width', 'flex'].includes(prop),
-  target: "ehpbis70"
-})("display:flex;", ({
-  theme,
-  gap = 0,
-  direction = 'column',
-  alignItems = 'normal',
-  justifyContent = 'normal',
-  wrap = 'nowrap',
-  width,
-  flex
-}) => `
-    gap: ${theme.space[gap]};
-    flex-direction: ${direction};
-    align-items: ${alignItems};
-    justify-content: ${justifyContent};
-    flex-wrap: ${typeof wrap === 'boolean' ? 'wrap' : wrap};
-    ${flex ? `flex: ${flex};` : ''}
-    ${width ? `width: ${width};` : ''}
-  `, ";");
-
-export { Stack };

package/dist/src/components/Status/index.js

@@ -1,74 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { ping } from '../../utils/animations.js';
-
-const HEIGHT = '10px';
-const WIDTH = '10px';
-const sentiments = {
-  danger: ({
-    theme
-  }) => `
-      background-color: ${theme.colors.danger.backgroundStrong};
-    `,
-  info: ({
-    theme
-  }) => `
-      background-color: ${theme.colors.info.backgroundStrong};
-    `,
-  neutral: ({
-    theme
-  }) => `
-      background-color: ${theme.colors.neutral.backgroundStronger};
-    `,
-  success: ({
-    theme
-  }) => `
-      background-color: ${theme.colors.success.backgroundStrong};
-    `,
-  warning: ({
-    theme
-  }) => `
-      background-color: ${theme.colors.warning.backgroundStrong};
-    `
-};
-const StyledCircle = /*#__PURE__*/_styled("span", {
-  target: "eny0xmn2"
-})("display:inline-block;width:", WIDTH, ";height:", HEIGHT, ";border-radius:", ({
-  theme
-}) => theme.radii.circle, ";", ({
-  sentiment
-}) => sentiments[sentiment], ";");
-const StyledAnimatedCircle = /*#__PURE__*/_styled("span", {
-  target: "eny0xmn1"
-})("position:absolute;width:", WIDTH, ";height:", HEIGHT, ";opacity:0.75;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";animation:", ping, " 1.1s cubic-bezier(0, 0, 0.2, 1) infinite;", ({
-  sentiment
-}) => sentiments[sentiment], ";");
-const Container = /*#__PURE__*/_styled("span", {
-  target: "eny0xmn0"
-})("display:flex;width:", WIDTH, ";height:", HEIGHT, ";");
-/**
- * Status component used to display a colored circle with a tooltip for additional information.
- */
-const Status = ({
-  animated = false,
-  className,
-  tooltip,
-  sentiment,
-  'data-testid': dataTestId
-}) => jsx(Tooltip, {
-  text: tooltip,
-  children: jsxs(Container, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [animated ? jsx(StyledAnimatedCircle, {
-      sentiment: sentiment
-    }) : null, jsx(StyledCircle, {
-      sentiment: sentiment
-    })]
-  })
-});
-
-export { Status };

package/dist/src/components/StepList/index.js

@@ -1,69 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Bullet } from '../Bullet/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const Steps = /*#__PURE__*/_styled("ul", {
-  target: "ewuati22"
-})("list-style:none;padding-left:0;text-align:left;display:flex;flex-direction:column;gap:", ({
-  theme
-}) => theme.space['3'], ";font-size:16px;");
-const Step = /*#__PURE__*/_styled('li', {
-  shouldForwardProp: prop => !['disabled'].includes(prop),
-  target: "ewuati21"
-})("display:flex;align-items:flex-start;gap:1rem;justify-content:center;color:", ({
-  theme,
-  disabled
-}) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong, ";");
-const StyledDiv = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "ewuati20"
-})("flex:1;margin:auto;line-height:", ({
-  size
-}) => size === 'medium' ? '32px' : '24px', ";font-size:", ({
-  size
-}) => size === 'medium' ? '24px' : '16px', ";");
-const Item = ({
-  bulletText,
-  bulletIcon,
-  sentiment,
-  prominence,
-  children,
-  onClick,
-  size = 'medium',
-  disabled = false,
-  className
-}) => jsxs(Step, {
-  disabled: disabled,
-  className: className,
-  onClick: onClick,
-  children: [bulletIcon ? jsx(Bullet, {
-    icon: bulletIcon,
-    size: size,
-    sentiment: disabled ? 'disabled' : sentiment,
-    prominence: prominence
-  }) : null, bulletText ? jsx(Bullet, {
-    text: bulletText,
-    size: size,
-    sentiment: disabled ? 'disabled' : sentiment,
-    prominence: prominence
-  }) : null, jsx(StyledDiv, {
-    size: size,
-    children: children
-  })]
-});
-/**
- * StepList component is used to display a list of steps.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const StepList = ({
-  children,
-  className,
-  'data-testid': dataTestId
-}) => jsx(Steps, {
-  className: className,
-  "data-testid": dataTestId,
-  children: children
-});
-StepList.Item = Item;
-
-export { StepList };

package/dist/src/components/Stepper/index.js

@@ -1,150 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes, css } from '@emotion/react';
-import { Children, Fragment } from 'react';
-import { Bullet } from '../Bullet/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const LINE_HEIGHT_SIZES = {
-  small: 2,
-  medium: 4
-};
-const loadingAnimation = keyframes`
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-`;
-const StyledStepContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb4"
-})(process.env.NODE_ENV === "production" ? {
-  name: "b8wmnj",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
-} : {
-  name: "b8wmnj",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e19ft7rb3"
-})("margin-top:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledBullet = /*#__PURE__*/_styled(Bullet, {
-  target: "e19ft7rb2"
-})("margin-top:", ({
-  theme,
-  size
-}) => size === 'small' ? theme.space['0.5'] : 0, ";");
-const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
-const StyledLine = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb1"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";flex-grow:1;border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrong, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";", ({
-  temporal
-}) => temporal === 'previous' && `width: 100%;`, " ", ({
-  temporal,
-  animated
-}) => temporal === 'current' && animated && loadingStyle, ";}");
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", ({
-  theme
-}) => theme.space['1'], ";gap:", ({
-  theme,
-  labelPosition,
-  size
-}) => size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'], ";", StyledStepContainer, "{display:flex;flex-direction:", ({
-  labelPosition
-}) => labelPosition === 'bottom' ? 'column' : 'row', ";align-items:", ({
-  labelPosition
-}) => labelPosition === 'bottom' ? 'center' : 'baseline', ";gap:", ({
-  theme,
-  labelPosition
-}) => labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'], ";white-space:nowrap;}", StyledLine, "{height:", ({
-  size
-}) => LINE_HEIGHT_SIZES[size], "px;margin-top:", ({
-  theme
-}) => theme.space['2'], ";margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";}");
-const StepperNumbers = ({
-  temporal,
-  children,
-  CurrentStep,
-  size = 'medium'
-}) => jsxs(StyledStepContainer, {
-  children: [jsx(StyledBullet, {
-    sentiment: temporal === 'next' ? 'neutral' : 'primary',
-    ...(temporal === 'previous' ? {
-      icon: 'check'
-    } : {
-      text: CurrentStep.toString()
-    }),
-    prominence: temporal !== 'current' ? 'default' : 'strong',
-    size: size
-  }), jsx(StyledText, {
-    as: "span",
-    variant: size === 'medium' ? 'body' : 'bodySmall',
-    prominence: temporal === 'next' ? 'weak' : 'default',
-    children: children
-  })]
-});
-/**
- * Stepper component to show the progress of a process in a linear way.
- */
-const Stepper = ({
-  children,
-  selected = 0,
-  animated = false,
-  className,
-  labelPosition = 'bottom',
-  size = 'medium',
-  'data-testid': dataTestId
-}) => {
-  const cleanChildren = Children.toArray(children);
-  const lastStep = Children.count(cleanChildren) - 1;
-  return jsx(StyledContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    labelPosition: labelPosition,
-    size: size,
-    children: Children.map(cleanChildren, (child, index) => {
-      const getTemporal = () => {
-        if (selected > index) return 'previous';
-        if (selected === index) return 'current';
-        return 'next';
-      };
-      const isNotLast = index < lastStep;
-      const temporal = getTemporal();
-      return (
-        // eslint-disable-next-line react/no-array-index-key
-        jsxs(Fragment, {
-          children: [jsx(StepperNumbers, {
-            CurrentStep: index + 1,
-            temporal: temporal,
-            size: size,
-            children: child
-          }), isNotLast ? jsx(StyledLine, {
-            temporal: temporal,
-            animated: animated
-          }) : null]
-        }, `creation-progress-${index}`)
-      );
-    })
-  });
-};
-
-export { Stepper };

package/dist/src/components/SwitchButton/FocusOverlay.js

@@ -1,37 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const FOCUS_OVERLAY_SCALE_RATIO = 6;
-const FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET = 8;
-const StyledDiv = /*#__PURE__*/_styled("div", {
-  target: "etutiin0"
-})("position:absolute;height:calc(100% - ", ({
-  theme
-}) => theme.space['1'], ");border-radius:", ({
-  theme
-}) => theme.radii.default, ";background:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";transform-origin:left center;transition:all 200ms ease-in-out;&[data-focusposition='right']{transform-origin:right center;}");
-const FocusOverlay = ({
-  focusPosition,
-  rightCardWidth,
-  leftCardWidth,
-  hasMouseDown
-}) => {
-  const translateXValue = useMemo(() => focusPosition === 'left' ? 0 : leftCardWidth + FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET, [focusPosition, leftCardWidth]);
-  const getScaleXValue = () => {
-    if (!hasMouseDown || !leftCardWidth || !rightCardWidth) return 1;
-    const currentWidth = focusPosition === 'left' ? leftCardWidth : rightCardWidth;
-    return 1 + FOCUS_OVERLAY_SCALE_RATIO / currentWidth;
-  };
-  return jsx(StyledDiv, {
-    "data-focusposition": focusPosition,
-    style: {
-      transform: `translate3d(${translateXValue}px, 0, 0) scale3d(${getScaleXValue()}, 1, 1)`,
-      width: `${focusPosition === 'left' ? leftCardWidth : rightCardWidth}px`
-    }
-  });
-};
-
-export { FocusOverlay };