@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,284 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useRef, useImperativeHandle, useId, useCallback, useMemo } from 'react';
-import { Button } from '../Button/index.js';
-import { Row } from '../Row/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.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 SIZES = {
-  small: '30px',
-  medium: '38px',
-  large: '46px'
-};
-const SideContainer = /*#__PURE__*/_styled(Stack, {
-  target: "e1b9qdjy4"
-})("padding:", ({
-  theme
-}) => `${theme.space['0.25']} ${theme.space['1']}`, ";&[data-size='small']{height:", SIZES.small, ";}&[data-size='medium']{height:", SIZES.medium, ";}&[data-size='large']{height:", SIZES.large, ";padding:", ({
-  theme
-}) => `${theme.space['0.5']} ${theme.space['1']}`, ";}");
-const InputContainer = /*#__PURE__*/_styled(Row, {
-  target: "e1b9qdjy3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "v1pgyp",
-  styles: "border-width:0 1px 0 1px;border-style:solid;border-color:inherit;background:inherit;width:100%"
-} : {
-  name: "v1pgyp",
-  styles: "border-width:0 1px 0 1px;border-style:solid;border-color:inherit;background:inherit;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Unit = /*#__PURE__*/_styled(Text, {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "e1b9qdjy2"
-})("display:flex;align-items:center;padding:", ({
-  theme
-}) => theme.space['1'], ";height:", ({
-  size
-}) => SIZES[size], ";");
-const Input = /*#__PURE__*/_styled("input", {
-  target: "e1b9qdjy1"
-})("outline:none;border:none;padding:0;width:100%;color:", ({
-  theme
-}) => theme.colors.neutral.text, ";font-size:", ({
-  theme
-}) => theme.typography.body.fontSize, ";font-family:", ({
-  theme
-}) => theme.typography.body.fontFamily, ";font-weight:", ({
-  theme
-}) => theme.typography.body.fontWeight, ";line-height:", ({
-  theme
-}) => theme.typography.body.lineHeight, ";text-align:center;padding:", ({
-  theme
-}) => theme.space['1'], ";background:none;&[data-has-unit='true']{text-align:left;padding:", ({
-  theme
-}) => `${theme.space['1']} 0 ${theme.space['1']} ${theme.space['1']}`, ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&{-moz-appearance:textfield;}&[data-size='small']{height:", SIZES.small, ";}&[data-size='medium']{height:", SIZES.medium, ";}&[data-size='large']{height:", SIZES.large, ";}&:read-only{color:", ({
-  theme
-}) => theme.colors.neutral.text, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";&~", Unit, "{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";}}&:disabled{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;&~", Unit, "{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;user-select:none;}}&:placeholder-shown~", Unit, "{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";}");
-const Container = /*#__PURE__*/_styled("div", {
-  target: "e1b9qdjy0"
-})("display:flex;align-items:center;justify-content:space-between;flex-direction:row;border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";&:focus-within{border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";}&[data-success='true']{border-color:", ({
-  theme
-}) => theme.colors.success.border, ";}&[data-error='true']{border-color:", ({
-  theme
-}) => theme.colors.danger.border, ";}&:hover{border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";}&[data-readonly='true']{border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";cursor:not-allowed;}&[data-disabled='true']{border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}");
-/**
- * NumberInputV2 component is used to increment / decrement a number value by clicking on + / - buttons or
- * by typing into input. If the value is out of the min / max range, the input will automatically be the min / max value on blur.
- */
-const NumberInputV2 = /*#__PURE__*/forwardRef(({
-  disabled = false,
-  max = Number.MAX_SAFE_INTEGER,
-  min = 0,
-  name,
-  onChange,
-  onFocus,
-  onBlur,
-  size = 'large',
-  step,
-  unit,
-  value,
-  tooltip,
-  className,
-  label,
-  labelDescription,
-  id,
-  placeholder = '',
-  error,
-  success,
-  helper,
-  'aria-label': ariaLabel,
-  'data-testid': dataTestId,
-  required,
-  autoFocus,
-  readOnly
-}, ref) => {
-  const localRef = useRef(null);
-  useImperativeHandle(ref, () => localRef.current);
-  const uniqueId = useId();
-  const localId = id ?? uniqueId;
-  const onClickSideButton = useCallback(direction => () => {
-    if (direction === 'up') {
-      localRef.current?.stepUp();
-    } else if (direction === 'down') {
-      localRef.current?.stepDown();
-    }
-    onChange?.(parseInt(localRef.current?.value ?? '', 10) ?? min);
-  }, [localRef, min, onChange]);
-  const isMinusDisabled = useMemo(() => {
-    if (!localRef?.current?.value || localRef?.current?.value === '') {
-      return false;
-    }
-    const numericValue = Number(localRef?.current?.value);
-    if (Number.isNaN(numericValue)) return false;
-    const minValue = typeof min === 'number' ? min : Number(min);
-    return Number.isNaN(numericValue) || numericValue <= minValue;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [localRef?.current?.value, min]);
-  const isPlusDisabled = useMemo(() => {
-    if (!localRef?.current?.value || localRef?.current?.value === '') {
-      return false;
-    }
-    const numericValue = Number(localRef?.current?.value);
-    if (Number.isNaN(numericValue)) return false;
-    const maxValue = typeof max === 'number' ? max : Number(max);
-    return numericValue >= maxValue;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [localRef?.current?.value, max]);
-  const helperSentiment = useMemo(() => {
-    if (error) {
-      return 'danger';
-    }
-    if (success) {
-      return 'success';
-    }
-    return 'neutral';
-  }, [error, success]);
-  let inputValue;
-  if (value !== undefined) {
-    inputValue = value !== null && Number.isInteger(value) ? value.toString() : '';
-  }
-  return jsxs(Stack, {
-    gap: "0.5",
-    className: className,
-    children: [label || labelDescription ? jsxs(Stack, {
-      direction: "row",
-      gap: "1",
-      alignItems: "center",
-      children: [label ? jsxs(Stack, {
-        direction: "row",
-        gap: "0.5",
-        alignItems: "start",
-        children: [jsx(Text, {
-          as: "label",
-          variant: "bodyStrong",
-          sentiment: "neutral",
-          htmlFor: id ?? localId,
-          children: label
-        }), required ? jsx(Icon, {
-          name: "asterisk",
-          color: "danger",
-          size: 8
-        }) : null]
-      }) : null, labelDescription ?? null]
-    }) : null, jsx("div", {
-      children: jsx(Tooltip, {
-        text: tooltip,
-        children: jsxs(Container, {
-          "data-disabled": disabled,
-          "data-readonly": readOnly,
-          "data-error": !!error,
-          "data-success": !!success,
-          "data-unit": !!unit,
-          children: [jsx(SideContainer, {
-            justifyContent: "center",
-            alignItems: "center",
-            "data-size": size,
-            children: jsx(Button, {
-              sentiment: "neutral",
-              variant: "ghost",
-              icon: "minus",
-              size: size === 'small' ? 'xsmall' : 'small',
-              disabled: disabled || readOnly || isMinusDisabled,
-              onClick: onClickSideButton('down'),
-              "aria-label": "minus"
-            })
-          }), jsxs(InputContainer, {
-            justifyContent: "space-between",
-            alignItems: "center",
-            templateColumns: "1fr auto",
-            children: [jsx(Input, {
-              ref: localRef,
-              type: "number",
-              name: name,
-              id: localId,
-              placeholder: placeholder,
-              onChange: onChange ? event => {
-                const newNumber = parseInt(event.target.value, 10);
-                onChange(Number.isNaN(newNumber) ? null : newNumber);
-              } : undefined,
-              value: inputValue,
-              onFocus: onFocus,
-              onBlur: onBlur,
-              "data-size": size,
-              step: step,
-              disabled: disabled,
-              "aria-label": ariaLabel,
-              "data-testid": dataTestId,
-              min: min,
-              max: max,
-              required: required,
-              autoFocus: autoFocus,
-              readOnly: readOnly,
-              "data-has-unit": !!unit
-            }), unit ? jsx(Unit, {
-              variant: "body",
-              sentiment: "neutral",
-              as: "span",
-              disabled: disabled,
-              size: size,
-              children: unit
-            }) : null]
-          }), jsx(SideContainer, {
-            justifyContent: "center",
-            alignItems: "center",
-            "data-size": size,
-            children: jsx(Button, {
-              sentiment: "neutral",
-              variant: "ghost",
-              icon: "plus",
-              size: size === 'small' ? 'xsmall' : 'small',
-              disabled: disabled || readOnly || isPlusDisabled,
-              onClick: onClickSideButton('up'),
-              "aria-label": "plus"
-            })
-          })]
-        })
-      })
-    }), error || typeof success === 'string' || typeof helper === 'string' ? jsx(Text, {
-      variant: "caption",
-      as: "span",
-      prominence: !error && !success ? 'weak' : undefined,
-      sentiment: helperSentiment,
-      disabled: disabled || readOnly,
-      children: error || success || helper
-    }) : null, !error && !success && typeof helper !== 'string' && helper ? helper : null]
-  });
-});
-
-export { NumberInputV2 };

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

@@ -1,117 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useCallback, useMemo, useEffect } from 'react';
-import { Button } from '../Button/index.js';
-import { getPageNumbers } from './getPageNumbers.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 PageNumbersContainer = /*#__PURE__*/_styled("div", {
-  target: "e5s692s2"
-})("display:flex;gap:", ({
-  theme
-}) => theme.space['2'], ";margin:0 ", ({
-  theme
-}) => theme.space['2'], ";");
-const PageSwitchContainer = /*#__PURE__*/_styled("div", {
-  target: "e5s692s1"
-})("display:flex;gap:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e5s692s0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
- * and a list of buttons to go to a specific page.
- */
-const Pagination = ({
-  disabled = false,
-  page,
-  pageCount,
-  onChange,
-  pageTabCount = 5,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const goToFirstPage = useCallback(() => {
-    onChange(1);
-  }, [onChange]);
-  const goToLastPage = useCallback(() => {
-    onChange(pageCount);
-  }, [onChange, pageCount]);
-  const goToNextPage = useCallback(() => {
-    onChange(page + 1);
-  }, [onChange, page]);
-  const goToPreviousPage = useCallback(() => {
-    onChange(page - 1);
-  }, [onChange, page]);
-  const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1], [page, pageCount, pageTabCount]);
-  const handlePageClick = useCallback(pageNumber => () => {
-    onChange(pageNumber);
-  }, [onChange]);
-  useEffect(() => {
-    if (page < 1) {
-      onChange(1);
-    }
-    if (page > pageCount) {
-      onChange(pageCount);
-    }
-  }, [page, pageCount, onChange]);
-  return jsxs(StyledContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsxs(PageSwitchContainer, {
-      children: [jsx(Button, {
-        "aria-label": "First",
-        disabled: page <= 1 || disabled,
-        variant: "outlined",
-        sentiment: "primary",
-        onClick: goToFirstPage,
-        icon: "arrow-left-double"
-      }), jsx(Button, {
-        "aria-label": "Back",
-        disabled: page <= 1 || disabled,
-        variant: "outlined",
-        sentiment: "primary",
-        onClick: goToPreviousPage,
-        icon: "arrow-left"
-      })]
-    }), jsx(PageNumbersContainer, {
-      children: pageNumbersToDisplay.map(pageNumber => jsx(Button, {
-        "aria-label": `Page ${pageNumber}`,
-        "aria-current": pageNumber === page,
-        disabled: disabled,
-        variant: "outlined",
-        sentiment: pageNumber === page ? 'primary' : 'neutral',
-        onClick: handlePageClick(pageNumber),
-        type: "button",
-        children: pageNumber
-      }, `pagination-page-${pageNumber}`))
-    }), jsxs(PageSwitchContainer, {
-      children: [jsx(Button, {
-        "aria-label": "Next",
-        disabled: page >= pageCount || disabled,
-        variant: "outlined",
-        sentiment: "primary",
-        onClick: goToNextPage,
-        icon: "arrow-right"
-      }), jsx(Button, {
-        "aria-label": "Last",
-        disabled: page >= pageCount || disabled,
-        variant: "outlined",
-        sentiment: "primary",
-        onClick: goToLastPage,
-        icon: "arrow-right-double"
-      })]
-    })]
-  });
-};
-
-export { Pagination };

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

@@ -1,41 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const PasswordCheckContainer = /*#__PURE__*/_styled("div", {
-  target: "eunxap90"
-})("display:grid;grid-template-columns:repeat(2, 1fr);gap:", ({
-  theme
-}) => theme.space['1'], ";");
-
-/**
- * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
- * of the rule.
- */
-const PasswordCheck = ({
-  rules,
-  className,
-  'data-testid': dataTestId
-}) => jsx(PasswordCheckContainer, {
-  className: className,
-  "data-testid": dataTestId,
-  children: rules.map(rule => jsxs(Stack, {
-    direction: "row",
-    gap: 1,
-    alignItems: "center",
-    children: [jsx(Icon, {
-      name: rule.valid ? 'checkbox-circle-outline' : 'close-circle-outline',
-      color: rule.valid ? 'success' : 'neutral',
-      prominence: "weak",
-      size: 20
-    }), jsx(Text, {
-      as: "p",
-      variant: "bodySmall",
-      children: rule.text
-    })]
-  }, rule.name))
-});
-
-export { PasswordCheck };

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

@@ -1,102 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-import { useState, useCallback, useEffect } from 'react';
-import { Text } from '../Text/index.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 StyledTitle = /*#__PURE__*/_styled(Text, {
-  target: "e1uv9umu3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1gbhlwb",
-  styles: "display:inline-block;vertical-align:top;line-height:22px"
-} : {
-  name: "1gbhlwb",
-  styles: "display:inline-block;vertical-align:top;line-height:22px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledStrength = /*#__PURE__*/_styled(Text, {
-  target: "e1uv9umu2"
-})("float:right;vertical-align:top;color:", ({
-  strength
-}) => strength.color, ";");
-const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1uv9umu1"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:8px;margin-top:", ({
-  theme
-}) => theme.space['1'], ";margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";");
-const StyledMeter = /*#__PURE__*/_styled("div", {
-  target: "e1uv9umu0"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:100%;transition:all 0.5s;");
-const DEFAULT_ESTIMATE = () => ({
-  score: 0
-});
-const DEFAULT_FORBIDDEN_WORDS = [];
-
-/**
- * PasswordStrengthMeter is a component that displays a password strength meter.
- * @deprecated use Meter component instead
- */
-const PasswordStrengthMeter = ({
-  password = '',
-  onChange,
-  strength,
-  title,
-  estimate = DEFAULT_ESTIMATE,
-  forbiddenInputs = DEFAULT_FORBIDDEN_WORDS,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const [score, setScore] = useState(0);
-  const theme = useTheme();
-  const [backgroundColor, setBackgroundColor] = useState(strength[0]?.color || theme.colors.success.backgroundStrong);
-  const [width, setWidth] = useState(0);
-  const getScore = useCallback(async passwordToTest => {
-    const {
-      score: internalScore = 0
-    } = await estimate(passwordToTest || '', forbiddenInputs);
-    return internalScore;
-  }, [estimate, forbiddenInputs]);
-  const handleChange = useCallback(e => onChange?.(e), [onChange]);
-  useEffect(() => {
-    setBackgroundColor(strength[score].color);
-    handleChange(score);
-    getScore(password).then(s => setScore(s)).catch(() => null);
-    const toValue = (score + 1) / strength.length * 100;
-    setWidth(`${toValue}%`);
-  }, [getScore, handleChange, password, score, strength]);
-  return jsxs("div", {
-    title: title,
-    role: "alert",
-    "aria-live": "polite",
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsx(StyledTitle, {
-      variant: "bodySmallStrong",
-      as: "p",
-      children: title
-    }), jsx(StyledStrength, {
-      as: "span",
-      variant: "bodySmallStrong",
-      strength: strength[score],
-      children: strength[score]?.t
-    }), jsx(StyledWrapper, {
-      children: jsx(StyledMeter, {
-        style: {
-          backgroundColor,
-          width
-        }
-      })
-    })]
-  });
-};
-
-export { PasswordStrengthMeter };

package/dist/src/components/PieChart/Legends.js

@@ -1,138 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes, css } from '@emotion/react';
-import { Tooltip } from '../Tooltip/index.js';
-import TooltipContainer from './Tooltip.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 bulletFlashAnim = keyframes`
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const animationFlash = isFocused => isFocused ? /*#__PURE__*/css(bulletFlashAnim.styles, " animation:", bulletFlashAnim.name, " linear 1500ms infinite;") : '';
-const List = /*#__PURE__*/_styled("ul", {
-  target: "e12qyakg8"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1yalzuy",
-  styles: "font-size:14px;list-style-type:none;display:flex;flex:1;flex-direction:column;max-height:100%;overflow-y:auto"
-} : {
-  name: "1yalzuy",
-  styles: "font-size:14px;list-style-type:none;display:flex;flex:1;flex-direction:column;max-height:100%;overflow-y:auto",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ListItem = /*#__PURE__*/_styled("li", {
-  target: "e12qyakg7"
-})("display:flex;align-items:center;margin-top:", ({
-  theme
-}) => theme.space['1'], ";width:100%;color:", ({
-  isFocused,
-  theme
-}) => isFocused ? theme.colors.primary.text : theme.colors.neutral.text, ";");
-const Bullet = /*#__PURE__*/_styled("div", {
-  target: "e12qyakg6"
-})("display:inline-block;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";width:10px;height:10px;margin:0 ", ({
-  theme
-}) => theme.space['1'], ";background:", ({
-  color
-}) => color, ";", ({
-  isFocused
-}) => animationFlash(isFocused), ";");
-const Label = /*#__PURE__*/_styled("div", {
-  target: "e12qyakg5"
-})(process.env.NODE_ENV === "production" ? {
-  name: "lvt6sf",
-  styles: "display:flex;flex:1;align-items:baseline"
-} : {
-  name: "lvt6sf",
-  styles: "display:flex;flex:1;align-items:baseline",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Value = /*#__PURE__*/_styled("div", {
-  target: "e12qyakg4"
-})("margin-left:6px;font-weight:", ({
-  isFocused
-}) => isFocused ? 500 : 400, ";");
-const Text = /*#__PURE__*/_styled("span", {
-  target: "e12qyakg3"
-})("flex:none;margin-right:6px;font-weight:", ({
-  isFocused
-}) => isFocused ? 500 : 400, ";");
-const ToggleBox = /*#__PURE__*/_styled("div", {
-  target: "e12qyakg2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ki8u62",
-  styles: "width:250px;height:21px;position:absolute"
-} : {
-  name: "ki8u62",
-  styles: "width:250px;height:21px;position:absolute",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Line = /*#__PURE__*/_styled("span", {
-  target: "e12qyakg1"
-})("border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";position:relative;width:100%;");
-const ProgressiveLine = /*#__PURE__*/_styled("span", {
-  target: "e12qyakg0"
-})("border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";position:absolute;left:0;top:0;bottom:-1px;transition:width 500ms ease;width:", ({
-  isFocused
-}) => isFocused ? 100 : 0, "%;");
-const Legends = ({
-  focused,
-  data,
-  onFocusChange,
-  colors
-}) => jsx(List, {
-  children: data?.map((item, index) => {
-    const isSegmentFocused = focused !== undefined && item.id === focused;
-    const id = `chart-legend-${item.id}`;
-    return jsx(Tooltip, {
-      visible: isSegmentFocused,
-      id: id,
-      text: jsx(TooltipContainer, {
-        data: item
-      }),
-      children: jsxs(ListItem, {
-        isFocused: isSegmentFocused,
-        children: [jsx(ToggleBox, {
-          "data-testid": id,
-          onMouseOver: () => onFocusChange(item.id),
-          onFocus: () => onFocusChange(item.id),
-          onMouseOut: () => onFocusChange(),
-          onBlur: () => onFocusChange()
-        }), jsx(Bullet, {
-          color: colors[index],
-          isFocused: isSegmentFocused,
-          needPattern: item.needPattern,
-          id: `chart-legend-${item.id}`
-        }), jsxs(Label, {
-          children: [jsx(Text, {
-            isFocused: isSegmentFocused,
-            children: item.name
-          }), jsx(Line, {
-            children: jsx(ProgressiveLine, {
-              isFocused: isSegmentFocused
-            })
-          })]
-        }), jsx(Value, {
-          isFocused: isSegmentFocused,
-          children: item.value
-        })]
-      })
-    }, item.id);
-  })
-});
-var Legends$1 = Legends;
-
-export { Legends$1 as default };