@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/Selectbox/Selectbox.js

@@ -9,106 +9,291 @@ import Icon from '../Icon/Icon.js';
 import LabelText from '../LabelText/LabelText.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
-const FieldContainer = styled.div `
-    color: ${theme.color.text.black};
-    margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
-const ErrorMessage = styled.div `
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.medium};
-    line-height: ${theme.lineHeight.s};
-    color: ${theme.color.notification.error};
-    margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.background.sand.E02, primary25: theme.color.background.sand.E01, primary: theme.color.background.sand.E02 }) });
+const FieldContainer = styled.div.withConfig({
+  displayName: "Selectbox__FieldContainer",
+  componentId: "sc-6e0ajj-0"
+})(["color:", ";margin-bottom:", ";"], theme.color.text.black, getMultipliedSize(theme.base.baseWidth, 1));
+const ErrorMessage = styled.div.withConfig({
+  displayName: "Selectbox__ErrorMessage",
+  componentId: "sc-6e0ajj-1"
+})(["font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-top:", ";"], theme.fontSize.s, theme.fontWeight.medium, theme.lineHeight.s, theme.color.notification.error, getMultipliedSize(theme.base.baseHeight, 0.5));
+const customTheme = Object.assign(Object.assign({}, defaultTheme), {
+  borderRadius: 0,
+  colors: Object.assign(Object.assign({}, defaultTheme.colors), {
+    primary50: theme.color.background.sand.E02,
+    primary25: theme.color.background.sand.E01,
+    primary: theme.color.background.sand.E02
+  })
+});
 const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, width: '100%', minHeight: getMultipliedSize(theme.base.baseHeight, 4), backgroundColor: state.isDisabled
-            ? theme.color.background.sand.E01
-            : theme.color.background.white.default, borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
-        borderBottom: `4px solid ${theme.color.notification.error}`,
-    })), (!state.menuIsOpen && {
-        ':focus-within': {
-            border: `2px solid ${theme.color.focus.light}`,
-            boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
-            outline: 'none',
-        },
-    }))),
-    valueContainer: styles => (Object.assign(Object.assign({}, styles), { padding: 0 })),
-    multiValue: styles => (Object.assign(Object.assign({}, styles), { padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`, backgroundColor: theme.color.background.sand.E02, borderRadius: theme.radius.pill, margin: '2px 6px 2px 0' })),
-    multiValueLabel: styles => (Object.assign(Object.assign({}, styles), { fontSize: theme.fontSize.s, fontWeight: theme.fontWeight.medium, lineHeight: theme.lineHeight.default, alignItems: 'center', color: theme.color.text.black, padding: 0, paddingLeft: 0 })),
-    multiValueRemove: styles => (Object.assign(Object.assign({}, styles), { marginLeft: getMultipliedSize(theme.base.baseWidth, 1), padding: 0, ':hover': {
-            cursor: 'pointer',
-            color: theme.color.text.black,
-            backgroundColor: theme.color.background.sand.E02,
-        } })),
-    placeholder: styles => (Object.assign(Object.assign({}, styles), { color: theme.color.text.black + theme.color.transparency.T50 })),
-    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { width: 0, backgroundColor: 'transparent', border: 'none' })),
-    clearIndicator: styles => (Object.assign(Object.assign({}, styles), { cursor: 'pointer', color: theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), ':hover': {
-            color: theme.color.text.black,
-        } })),
-    dropdownIndicator: (styles, { selectProps: { isSearchable } }) => (Object.assign(Object.assign({}, styles), { color: isSearchable ? theme.color.text.pink : theme.color.text.black, padding: 0, marginLeft: getMultipliedSize(theme.base.baseHeight, 1), pointerEvents: 'none', ':hover': {
-            color: theme.color.text.black,
-        } })),
-    menu: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { boxShadow: 'none', margin: '-3px 0 -3px 0', borderRadius: theme.radius.s, border: `1px solid ${theme.color.line.L01}` }), (state.placement === 'top' && {
-        borderBottom: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-    })), (state.placement === 'bottom' && Object.assign({ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }, (state.selectProps.errorState && {
-        margin: '-2px 0 -3px 0',
-    }))))),
-    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: theme.color.text.black, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden' }), (isDisabled && {
-        cursor: 'not-allowed',
-        color: theme.color.text.black + theme.color.transparency.T30,
-        backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30,
-    }))),
+  control: (_styles, state) => Object.assign(Object.assign({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`,
+    width: '100%',
+    minHeight: getMultipliedSize(theme.base.baseHeight, 4),
+    backgroundColor: state.isDisabled ? theme.color.background.sand.E01 : theme.color.background.white.default,
+    borderRadius: theme.radius.s,
+    border: `1px solid ${theme.color.line.L01}`,
+    overflow: 'auto'
+  }, state.selectProps.errorState && {
+    borderBottom: `4px solid ${theme.color.notification.error}`
+  }), !state.menuIsOpen && {
+    ':focus-within': {
+      border: `2px solid ${theme.color.focus.light}`,
+      boxShadow: `0px 0px 0px 2px ${theme.color.focus.dark}`,
+      outline: 'none'
+    }
+  }),
+  valueContainer: styles => Object.assign(Object.assign({}, styles), {
+    padding: 0
+  }),
+  multiValue: styles => Object.assign(Object.assign({}, styles), {
+    padding: `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`,
+    backgroundColor: theme.color.background.sand.E02,
+    borderRadius: theme.radius.pill,
+    margin: '2px 6px 2px 0'
+  }),
+  multiValueLabel: styles => Object.assign(Object.assign({}, styles), {
+    fontSize: theme.fontSize.s,
+    fontWeight: theme.fontWeight.medium,
+    lineHeight: theme.lineHeight.default,
+    alignItems: 'center',
+    color: theme.color.text.black,
+    padding: 0,
+    paddingLeft: 0
+  }),
+  multiValueRemove: styles => Object.assign(Object.assign({}, styles), {
+    marginLeft: getMultipliedSize(theme.base.baseWidth, 1),
+    padding: 0,
+    ':hover': {
+      cursor: 'pointer',
+      color: theme.color.text.black,
+      backgroundColor: theme.color.background.sand.E02
+    }
+  }),
+  placeholder: styles => Object.assign(Object.assign({}, styles), {
+    color: theme.color.text.black + theme.color.transparency.T50
+  }),
+  indicatorSeparator: styles => Object.assign(Object.assign({}, styles), {
+    width: 0,
+    backgroundColor: 'transparent',
+    border: 'none'
+  }),
+  clearIndicator: styles => Object.assign(Object.assign({}, styles), {
+    cursor: 'pointer',
+    color: theme.color.text.black,
+    padding: 0,
+    marginLeft: getMultipliedSize(theme.base.baseHeight, 1),
+    ':hover': {
+      color: theme.color.text.black
+    }
+  }),
+  dropdownIndicator: (styles, {
+    selectProps: {
+      isSearchable
+    }
+  }) => Object.assign(Object.assign({}, styles), {
+    color: isSearchable ? theme.color.text.pink : theme.color.text.black,
+    padding: 0,
+    marginLeft: getMultipliedSize(theme.base.baseHeight, 1),
+    pointerEvents: 'none',
+    ':hover': {
+      color: theme.color.text.black
+    }
+  }),
+  menu: (styles, state) => Object.assign(Object.assign(Object.assign(Object.assign({}, styles), {
+    boxShadow: 'none',
+    margin: '-3px 0 -3px 0',
+    borderRadius: theme.radius.s,
+    border: `1px solid ${theme.color.line.L01}`
+  }), state.placement === 'top' && {
+    borderBottom: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  }), state.placement === 'bottom' && Object.assign({
+    borderTop: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  }, state.selectProps.errorState && {
+    margin: '-2px 0 -3px 0'
+  })),
+  option: (styles, {
+    isDisabled,
+    isSelected
+  }) => Object.assign(Object.assign(Object.assign({}, styles), {
+    display: 'flex',
+    justifyContent: 'space-between',
+    color: theme.color.text.black,
+    fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book,
+    fontSize: theme.fontSize.default,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden'
+  }), isDisabled && {
+    cursor: 'not-allowed',
+    color: theme.color.text.black + theme.color.transparency.T30,
+    backgroundColor: theme.color.background.sand.E01 + theme.color.transparency.T30
+  })
 });
-const MultiValueRemove = (_a) => {
-    var multiValueRemoveProps = __rest(_a, []);
-    return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default.createElement(Icon, { icon: Close, size: "1rem" })));
+const MultiValueRemove = _a => {
+  var multiValueRemoveProps = __rest(_a, []);
+  return components.MultiValueRemove && (/*#__PURE__*/React__default.createElement(components.MultiValueRemove, {
+    data: multiValueRemoveProps.data,
+    innerProps: multiValueRemoveProps.innerProps,
+    selectProps: multiValueRemoveProps.selectProps
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Close,
+    size: "1rem"
+  })));
 };
-const IndicatorsContainer = (_a) => {
-    var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
-    return components.IndicatorsContainer && (React__default.createElement(components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default.createElement(Icon, { icon: Error, color: theme.color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default.createElement(Icon, { icon: Lock, position: "right" }),
-        indicatorsContainerProps.children));
+const IndicatorsContainer = _a => {
+  var {
+      selectProps
+    } = _a,
+    indicatorsContainerProps = __rest(_a, ["selectProps"]);
+  return components.IndicatorsContainer && (/*#__PURE__*/React__default.createElement(components.IndicatorsContainer, {
+    clearValue: indicatorsContainerProps.clearValue,
+    cx: indicatorsContainerProps.cx,
+    getClassNames: indicatorsContainerProps.getClassNames,
+    getStyles: indicatorsContainerProps.getStyles,
+    getValue: indicatorsContainerProps.getValue,
+    hasValue: indicatorsContainerProps.hasValue,
+    isDisabled: selectProps.isDisabled,
+    isMulti: indicatorsContainerProps.isMulti,
+    isRtl: indicatorsContainerProps.isRtl,
+    options: indicatorsContainerProps.options,
+    selectOption: indicatorsContainerProps.selectOption,
+    selectProps: selectProps,
+    setValue: indicatorsContainerProps.setValue,
+    theme: indicatorsContainerProps.theme
+  }, selectProps.errorState && (/*#__PURE__*/React__default.createElement(Icon, {
+    icon: Error,
+    color: theme.color.notification.error,
+    position: "right"
+  })), selectProps.isDisabled && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Lock,
+    position: "right"
+  }), indicatorsContainerProps.children));
 };
-const ClearIndicator = (_a) => {
-    var clearIndicatorProps = __rest(_a, []);
-    const onHandleKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            e.stopPropagation();
-            clearIndicatorProps.clearValue();
-        }
-    };
-    return (components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: Object.assign(Object.assign({}, clearIndicatorProps.innerProps), { tabIndex: 0, role: 'button', onKeyDown: e => onHandleKeyDown(e) }), isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: Close }))));
+const ClearIndicator = _a => {
+  var clearIndicatorProps = __rest(_a, []);
+  const onHandleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      clearIndicatorProps.clearValue();
+    }
+  };
+  return components.ClearIndicator && (/*#__PURE__*/React__default.createElement(components.ClearIndicator, {
+    clearValue: clearIndicatorProps.clearValue,
+    cx: clearIndicatorProps.cx,
+    getClassNames: clearIndicatorProps.getClassNames,
+    getStyles: clearIndicatorProps.getStyles,
+    getValue: clearIndicatorProps.getValue,
+    hasValue: clearIndicatorProps.hasValue,
+    innerProps: Object.assign(Object.assign({}, clearIndicatorProps.innerProps), {
+      tabIndex: 0,
+      role: 'button',
+      onKeyDown: e => onHandleKeyDown(e)
+    }),
+    isFocused: clearIndicatorProps.isFocused,
+    isMulti: clearIndicatorProps.isMulti,
+    isRtl: clearIndicatorProps.isRtl,
+    options: clearIndicatorProps.options,
+    selectOption: clearIndicatorProps.selectOption,
+    selectProps: clearIndicatorProps.selectProps,
+    setValue: clearIndicatorProps.setValue,
+    theme: clearIndicatorProps.theme
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Close
+  })));
 };
-const DropdownIndicator = (_a) => {
-    var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
-    const getIcon = () => {
-        if (selectProps.isSearchable) {
-            return Search;
-        }
-        return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
-    };
-    return (components.DropdownIndicator && (React__default.createElement(components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: getIcon() }))));
+const DropdownIndicator = _a => {
+  var {
+      selectProps
+    } = _a,
+    dropdownIndicatorProps = __rest(_a, ["selectProps"]);
+  const getIcon = () => {
+    if (selectProps.isSearchable) {
+      return Search;
+    }
+    return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
+  };
+  return components.DropdownIndicator && (/*#__PURE__*/React__default.createElement(components.DropdownIndicator, {
+    clearValue: dropdownIndicatorProps.clearValue,
+    cx: dropdownIndicatorProps.cx,
+    getClassNames: dropdownIndicatorProps.getClassNames,
+    getStyles: dropdownIndicatorProps.getStyles,
+    getValue: dropdownIndicatorProps.getValue,
+    hasValue: dropdownIndicatorProps.hasValue,
+    innerProps: dropdownIndicatorProps.innerProps,
+    isDisabled: dropdownIndicatorProps.isDisabled,
+    isFocused: dropdownIndicatorProps.isFocused,
+    isMulti: dropdownIndicatorProps.isMulti,
+    isRtl: dropdownIndicatorProps.isRtl,
+    options: dropdownIndicatorProps.options,
+    selectOption: dropdownIndicatorProps.selectOption,
+    selectProps: selectProps,
+    setValue: dropdownIndicatorProps.setValue,
+    theme: dropdownIndicatorProps.theme
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: getIcon()
+  })));
 };
-const SelectBox = (_a) => {
-    var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);
-    const getNoOptionsText = () => noOptionsText;
-    const errorId = props.inputId ? `${props.inputId}-error` : undefined;
-    const allComponents = Object.assign({ MultiValueRemove,
-        IndicatorsContainer,
-        ClearIndicator,
-        DropdownIndicator }, (props.optionComponent ? { Option: props.optionComponent } : {}));
-    return !props.isLoading ? (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.inputId, status: (props.error && 'error') || undefined, isMandatory: props.isRequired }, props.label)),
-        React__default.createElement(Select, { inputId: props.inputId, styles: props.styles || getStyles(), theme: customTheme, components: allComponents, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: Boolean(props.isSearchable), isClearable: Boolean(props.isClearable), isMulti: props.isMulti, isDisabled: Boolean(props.isDisabled), hideSelectedOptions: false, closeMenuOnSelect: !props.isMulti, errorState: props.error, "aria-labelledby": props.error ? errorId : undefined }),
-        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId }, props.errorMessage)))) : (React__default.createElement(PixelLoader, { label: props.loadingLabel }));
+const SelectBox = _a => {
+  var {
+      noOptionsText = '',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["noOptionsText", 'data-testid']);
+  const getNoOptionsText = () => noOptionsText;
+  const errorId = props.inputId ? `${props.inputId}-error` : undefined;
+  const allComponents = Object.assign({
+    MultiValueRemove,
+    IndicatorsContainer,
+    ClearIndicator,
+    DropdownIndicator
+  }, props.optionComponent ? {
+    Option: props.optionComponent
+  } : {});
+  return !props.isLoading ? (/*#__PURE__*/React__default.createElement(FieldContainer, {
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": props.ariaLabel
+  }, props.label && (/*#__PURE__*/React__default.createElement(LabelText, {
+    htmlFor: props.inputId,
+    status: props.error && 'error' || undefined,
+    isMandatory: props.isRequired
+  }, props.label)), /*#__PURE__*/React__default.createElement(Select, {
+    inputId: props.inputId,
+    styles: props.styles || getStyles(),
+    theme: customTheme,
+    components: allComponents,
+    options: props.options,
+    classNamePrefix: "react_select",
+    onChange: props.onChange,
+    onInputChange: props.onInputChange,
+    value: props.value,
+    placeholder: props.placeholder,
+    noOptionsMessage: getNoOptionsText,
+    menuPortalTarget: props.menuPortalTarget,
+    menuPlacement: props.menuPlacement,
+    isSearchable: Boolean(props.isSearchable),
+    isClearable: Boolean(props.isClearable),
+    isMulti: props.isMulti,
+    isDisabled: Boolean(props.isDisabled),
+    hideSelectedOptions: false,
+    closeMenuOnSelect: !props.isMulti,
+    errorState: props.error,
+    "aria-labelledby": props.error ? errorId : undefined
+  }), props.error && props.errorMessage && (/*#__PURE__*/React__default.createElement(ErrorMessage, {
+    id: errorId
+  }, props.errorMessage)))) : (/*#__PURE__*/React__default.createElement(PixelLoader, {
+    label: props.loadingLabel
+  }));
 };
 
 export { SelectBox as default };

package/build/es/components/Skeleton/Skeleton.js

@@ -3,65 +3,78 @@ import React__default from 'react';
 import { keyframes, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
-const shimmer = keyframes `
-    100% {
-        transform: translateX(100%);
-    }
-`;
+const shimmer = keyframes(["100%{transform:translateX(100%);}"]);
 const sandRgba = '248, 244, 241';
 const whiteRgba = '255, 255, 255';
-const getAnimationDelay = (carouselIndex) => {
-    switch (carouselIndex) {
-        case 1:
-            return '0s';
-        case 2:
-            return '0.6s';
-        case 3:
-            return '1.2s';
-        case 4:
-            return '1.9s';
-        case 5:
-            return '2.5s';
-        default:
-            return '0s';
-    }
+const getAnimationDelay = carouselIndex => {
+  switch (carouselIndex) {
+    case 1:
+      return '0s';
+    case 2:
+      return '0.6s';
+    case 3:
+      return '1.2s';
+    case 4:
+      return '1.9s';
+    case 5:
+      return '2.5s';
+    default:
+      return '0s';
+  }
 };
-const getBackgroundColor = (backgroundColor) => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
-const SkeletonWrapper = styled.div `
-    position: relative;
-    overflow: hidden;
-    background-color: ${({ $backgroundColor }) => $backgroundColor === 'sand'
-    ? theme.color.background.sand.E01
-    : theme.color.background.white.default};
-    opacity: ${({ $opacity }) => ($opacity ? $opacity / 100 : 1)};
-    width: ${({ $width }) => $width};
-    height: ${({ $height }) => $height};
-    ${({ $margin }) => $margin && `margin: ${$margin}`};
-    ${({ $padding }) => $padding && `padding: ${$padding}`};
-    border-radius: ${({ $borderRadius }) => theme.radius[$borderRadius || 's']};
-
-    &::after {
-        position: absolute;
-        inset: 0;
-        transform: translateX(-100%);
-        background: ${({ $backgroundColor }) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba)};
-
-        animation: ${shimmer} 1.5s infinite;
-        content: '';
-    }
-
-    @media (min-width: 600px) {
-        &::after {
-            animation: ${shimmer} 2.5s infinite;
-            animation-delay: ${({ $carouselIndex }) => getAnimationDelay($carouselIndex)};
-        }
-    }
-`;
-const Skeleton = (_a) => {
-    var { backgroundColor = 'sand', opacity = 100, width = '25rem', height = '6.25rem', borderRadius = 's', 'data-testid': dataTestId } = _a, props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
-    return (React__default.createElement(React__default.Fragment, null,
-        props.ariaLabel && (React__default.createElement("span", { id: props.id, "aria-label": props.ariaLabel, role: "status", "aria-atomic": "true", className: "visually-hidden" })),
-        React__default.createElement(SkeletonWrapper, { className: props.className, "data-testid": dataTestId, "aria-hidden": "true", tabIndex: -1, "$backgroundColor": backgroundColor, "$opacity": opacity, "$width": width, "$height": height, "$margin": props.margin, "$padding": props.padding, "$carouselIndex": props.carouselIndex, "$borderRadius": borderRadius })));
+const getBackgroundColor = backgroundColor => `linear-gradient(90deg,rgba(${backgroundColor}, 0) 0%,rgba(${backgroundColor}, 0.8) 50%,rgba(${backgroundColor}, 0) 100%)`;
+const SkeletonWrapper = styled.div.withConfig({
+  displayName: "Skeleton__SkeletonWrapper",
+  componentId: "sc-97h4ub-0"
+})(["position:relative;overflow:hidden;background-color:", ";opacity:", ";width:", ";height:", ";", ";", ";border-radius:", ";&::after{position:absolute;inset:0;transform:translateX(-100%);background:", ";animation:", " 1.5s infinite;content:'';}@media (min-width:600px){&::after{animation:", " 2.5s infinite;animation-delay:", ";}}"], ({
+  $backgroundColor
+}) => $backgroundColor === 'sand' ? theme.color.background.sand.E01 : theme.color.background.white.default, ({
+  $opacity
+}) => $opacity ? $opacity / 100 : 1, ({
+  $width
+}) => $width, ({
+  $height
+}) => $height, ({
+  $margin
+}) => $margin && `margin: ${$margin}`, ({
+  $padding
+}) => $padding && `padding: ${$padding}`, ({
+  $borderRadius
+}) => theme.radius[$borderRadius || 's'], ({
+  $backgroundColor
+}) => getBackgroundColor($backgroundColor === 'sand' ? whiteRgba : sandRgba), shimmer, shimmer, ({
+  $carouselIndex
+}) => getAnimationDelay($carouselIndex));
+const Skeleton = _a => {
+  var {
+      backgroundColor = 'sand',
+      opacity = 100,
+      width = '25rem',
+      height = '6.25rem',
+      borderRadius = 's',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["backgroundColor", "opacity", "width", "height", "borderRadius", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, props.ariaLabel && (/*#__PURE__*/React__default.createElement("span", {
+    id: props.id,
+    "aria-label": props.ariaLabel,
+    role: "status",
+    "aria-atomic": "true",
+    className: "visually-hidden"
+  })), /*#__PURE__*/React__default.createElement(SkeletonWrapper, {
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-hidden": "true",
+    tabIndex: -1,
+    "$backgroundColor": backgroundColor,
+    "$opacity": opacity,
+    "$width": width,
+    "$height": height,
+    "$margin": props.margin,
+    "$padding": props.padding,
+    "$carouselIndex": props.carouselIndex,
+    "$borderRadius": borderRadius
+  }));
 };
 
 export { Skeleton as default };