@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,35 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Fragment } from 'react';
-import { IconSkeleton } from './IconSkeleton.js';
-import { Line } from './Line.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledLine = /*#__PURE__*/_styled("li", {
-  target: "ez87ex11"
-})("display:flex;align-items:center;padding:", ({
-  theme
-}) => `${theme.space['3']} ${theme.space['2']}`, ";");
-const StyledList = /*#__PURE__*/_styled("ul", {
-  target: "ez87ex10"
-})("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
-}) => jsx(StyledList, {
-  children: Array.from({
-    length
-  }, (_, i) => jsx(Fragment, {
-    children: jsxs(StyledLine, {
-      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-    })
-  }, `skeleton-block-${i}`))
-});
-
-export { Block };

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

@@ -1,34 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { IconSkeleton } from './IconSkeleton.js';
-import { Line } from './Line.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "esrnljb1"
-})("display:grid;grid-template-columns:repeat(", ({
-  col
-}) => col, ", 1fr);gap:", ({
-  theme
-}) => theme.space['2'], ";");
-const Block = /*#__PURE__*/_styled("div", {
-  target: "esrnljb0"
-})("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
-}) => jsx(StyledContainer, {
-  col: col,
-  children: Array.from({
-    length
-  }, (_, i) => jsxs(Block, {
-    children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-  }, `skeleton-blocks-${i}`))
-});
-
-export { Blocks };

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

@@ -1,32 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { IconSkeleton } from './IconSkeleton.js';
-import { Line } from './Line.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e18cng8b1"
-})("display:grid;grid-template-columns:repeat(", ({
-  col
-}) => col, ", 1fr);gap:", ({
-  theme
-}) => theme.space['2'], ";");
-const Block = /*#__PURE__*/_styled("div", {
-  target: "e18cng8b0"
-})("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
-}) => jsx(StyledContainer, {
-  col: col,
-  children: Array.from({
-    length
-  }, (_, i) => jsxs(Block, {
-    children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-  }, `skeleton-box-${i}`))
-});
-
-export { BoxWithIcon };

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

@@ -1,55 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Line } from './Line.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 CIRCLE_SIZE = 206;
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e1bu753f3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledSVG = /*#__PURE__*/_styled("svg", {
-  target: "e1bu753f2"
-})("height:", CIRCLE_SIZE, "px;width:", CIRCLE_SIZE, "px;transform:rotate(-90deg);");
-const StyledCircle = /*#__PURE__*/_styled("circle", {
-  target: "e1bu753f1"
-})("transform-origin:50% 50%;stroke:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";stroke-width:18;stroke-linecap:butt;fill:none;");
-const LineList = /*#__PURE__*/_styled("ul", {
-  target: "e1bu753f0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "pct5nu",
-  styles: "display:grid;list-style:none;gap:16px"
-} : {
-  name: "pct5nu",
-  styles: "display:grid;list-style:none;gap:16px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Donut = () => jsxs(StyledContainer, {
-  children: [jsx(StyledSVG, {
-    children: jsx(StyledCircle, {
-      cx: CIRCLE_SIZE / 2,
-      cy: CIRCLE_SIZE / 2,
-      r: "90"
-    })
-  }), jsxs(LineList, {
-    children: [jsx("li", {
-      children: jsx(Line, {})
-    }), jsx("li", {
-      children: jsx(Line, {})
-    }), jsx("li", {
-      children: jsx(Line, {})
-    }), jsx("li", {
-      children: jsx(Line, {})
-    })]
-  })]
-});
-
-export { Donut };

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

@@ -1,19 +0,0 @@
-import _styled from '@emotion/styled/base';
-
-const IconSkeleton = /*#__PURE__*/_styled("div", {
-  target: "e1kubpd30"
-})("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/src/components/Skeleton/Line.js

@@ -1,13 +0,0 @@
-import _styled from '@emotion/styled/base';
-
-const sizes = [80, 120, 160, 200];
-const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
-const Line = /*#__PURE__*/_styled("div", {
-  target: "e1denkbe0"
-})("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/src/components/Skeleton/List.js

@@ -1,51 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Line } from './Line.js';
-import { 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 StyledItem = /*#__PURE__*/_styled("li", {
-  target: "e639qnr2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1t7ed8m",
-  styles: "display:flex;align-items:center;height:48px;padding:4px 8px"
-} : {
-  name: "1t7ed8m",
-  styles: "display:flex;align-items:center;height:48px;padding:4px 8px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledLine = /*#__PURE__*/_styled("div", {
-  target: "e639qnr1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "82a6rk",
-  styles: "flex:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledList = /*#__PURE__*/_styled("ul", {
-  target: "e639qnr0"
-})("list-style:none;padding:0;margin:0;>", StyledItem, ":nth-of-type(even){background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";}");
-const Item = ({
-  col = 3
-}) => jsx(StyledItem, {
-  children: Array.from({
-    length: col
-  }, (_, i) => jsx(StyledLine, {
-    children: jsx(Line, {})
-  }, `skeleton-list-col-${i}`))
-});
-const List = ({
-  length = 3,
-  col = 3
-}) => jsx(StyledList, {
-  children: Array.from({
-    length
-  }, (_, i) => jsx(Item, {
-    col: col
-  }, `skeleton-list-${i}`))
-});
-
-export { List };

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

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

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

@@ -1,9 +0,0 @@
-import _styled from '@emotion/styled/base';
-
-const Square = /*#__PURE__*/_styled("div", {
-  target: "e1uz28830"
-})("height:100%;width:100%;max-width:100%;background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";");
-
-export { Square };

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 };