@ultraviolet/ui 1.51.1 → 1.51.2

package/dist/src/components/SelectInputV2/findOptionInOptions.js

@@ -1,11 +0,0 @@
-const findOptionInOptions = (options, optionValue) => {
-  let flatOptions = [];
-  if (!Array.isArray(options)) {
-    flatOptions = Object.keys(options).map(group => options[group]).flat();
-  } else {
-    flatOptions = options;
-  }
-  return flatOptions.find(option => option.value === optionValue);
-};
-
-export { findOptionInOptions };

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

@@ -1,137 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useRef } from 'react';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Dropdown } from './Dropdown.js';
-import { SelectBar } from './SelectBar.js';
-import { SelectInputProvider } from './SelectInputProvider.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 SelectInputContainer = /*#__PURE__*/_styled("div", {
-  target: "ebdnz3x1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const HelperText = /*#__PURE__*/_styled(Text, {
-  target: "ebdnz3x0"
-})("padding-top:", ({
-  theme
-}) => theme.space['0.5'], ";");
-
-/**
- * SelectInputV2 component is used to select one or many elements from a selection.
- */
-const SelectInputV2 = ({
-  name,
-  id,
-  onBlur,
-  onFocus,
-  onChange,
-  'aria-label': ariaLabel,
-  value,
-  label,
-  helper,
-  options,
-  size = 'large',
-  emptyState,
-  descriptionDirection = 'column',
-  success,
-  error,
-  'data-testid': dataTestId,
-  className,
-  footer,
-  placeholderSearch = 'Search in list',
-  placeholder = 'Select item',
-  searchable = true,
-  disabled = false,
-  readOnly = false,
-  clearable = true,
-  multiselect = false,
-  required = false,
-  labelDescription,
-  autofocus,
-  loadMore,
-  optionalInfoPlacement = 'right',
-  isLoading,
-  selectAll,
-  selectAllGroup = false
-}) => {
-  const ref = useRef(null);
-  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.filter(option => !option.disabled).length, 0);
-  return jsx(SelectInputProvider, {
-    options: options,
-    multiselect: multiselect,
-    selectAll: selectAll,
-    value: value,
-    selectAllGroup: selectAllGroup,
-    numberOfOptions: numberOfOptions,
-    onChange: onChange,
-    children: jsxs(SelectInputContainer, {
-      id: id,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      "data-testid": dataTestId,
-      className: className,
-      "aria-label": name,
-      children: [jsx(Dropdown, {
-        emptyState: emptyState,
-        descriptionDirection: descriptionDirection,
-        searchable: searchable,
-        placeholder: placeholderSearch,
-        footer: footer,
-        refSelect: ref,
-        loadMore: loadMore,
-        optionalInfoPlacement: optionalInfoPlacement,
-        isLoading: isLoading,
-        children: jsxs(Stack, {
-          gap: 0.5,
-          "aria-label": ariaLabel,
-          children: [jsxs(Stack, {
-            direction: "row",
-            gap: 0.5,
-            children: [label ? jsx(Text, {
-              as: "label",
-              variant: size === 'large' ? 'bodyStrong' : 'bodySmallStrong',
-              children: label
-            }) : null, required && label ? jsx(Icon, {
-              name: "asterisk",
-              sentiment: "danger",
-              size: 8
-            }) : null, labelDescription ?? null]
-          }), jsx(SelectBar, {
-            size: size,
-            clearable: clearable,
-            readOnly: readOnly,
-            disabled: disabled,
-            placeholder: placeholder,
-            success: success,
-            error: error,
-            autoFocus: autofocus,
-            innerRef: ref
-          })]
-        })
-      }), !error && !success ? jsx(HelperText, {
-        variant: "caption",
-        as: "p",
-        sentiment: "neutral",
-        prominence: "default",
-        children: helper
-      }) : null, error || success ? jsx(HelperText, {
-        variant: "caption",
-        as: "p",
-        sentiment: error ? 'danger' : 'success',
-        prominence: "default",
-        children: error || success
-      }) : null]
-    })
-  });
-};
-
-export { SelectInputV2 };

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

@@ -1,175 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useRef, useCallback } from 'react';
-import { Checkbox } from '../Checkbox/index.js';
-import { Radio } from '../Radio/index.js';
-import { Stack } from '../Stack/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-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 Container = /*#__PURE__*/_styled(Stack, {
-  target: "e1s5n3hj3"
-})("&[data-has-label='false']>:first-child{margin-bottom:-", ({
-  theme
-}) => theme.space['0.5'], ";}padding:", ({
-  theme
-}) => theme.space['2'], ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";&[data-checked='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";}&[data-error='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.danger.border, ";}&[data-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", ({
-  theme
-}) => theme.colors.primary.border, ";&[data-cheked='false']{box-shadow:", ({
-  theme
-}) => theme.shadows.hoverPrimary, ";}}}");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1s5n3hj2"
-})("&[data-has-label='true']{padding-left:", ({
-  theme
-}) => theme.space['4'], ";}&[data-has-label='false']{display:contents;}");
-const StyledElement = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
-  target: "e1s5n3hj1"
-})("display:inline-flex;align-items:start;&[data-checked='true']{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}&[data-error='true']{color:", ({
-  theme
-}) => theme.colors.danger.text, ";}&[aria-disabled='true']{color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";}input+svg{", ({
-  showTick
-}) => !showTick ? `display: none;` : null, ";}label{", ({
-  showTick,
-  hasLabel
-}) => !showTick && !hasLabel ? `display: none;` : null, ";}");
-const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
-  target: "e1s5n3hj4"
-});
-const OverloadedCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
-  target: "e1s5n3hj5"
-});
-const StyledCheckbox = /*#__PURE__*/_styled(OverloadedCheckbox, {
-  target: "e1s5n3hj0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1wopizl",
-  styles: "label{width:100%;}pointer-events:none"
-} : {
-  name: "1wopizl",
-  styles: "label{width:100%;}pointer-events:none",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * SelectableCard is a component that can be used to create a radio or checkbox card.
- * It can be used to create a list of selectable items or a single selectable item.
- */
-const SelectableCard = /*#__PURE__*/forwardRef(({
-  name,
-  value,
-  onChange,
-  showTick = false,
-  type = 'radio',
-  checked = false,
-  disabled = false,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  'data-testid': dataTestId
-}, ref) => {
-  const innerRef = useRef(null);
-  const ParentContainer = useCallback(({
-    children: subChildren
-  }) => {
-    if (tooltip) {
-      return jsx(Stack, {
-        flex: 1,
-        children: jsx(Tooltip, {
-          text: tooltip,
-          children: subChildren
-        })
-      });
-    }
-    return jsx(Tooltip, {
-      children: subChildren
-    });
-  }, [tooltip]);
-  return jsx(ParentContainer, {
-    children: jsxs(Container, {
-      onClick: () => {
-        if (innerRef?.current) {
-          innerRef.current.click();
-        }
-      },
-      className: className,
-      "data-checked": checked,
-      "data-disabled": disabled,
-      "data-error": isError,
-      "data-testid": dataTestId,
-      "data-type": type,
-      "data-has-label": !!label,
-      ref: ref,
-      alignItems: "start",
-      direction: "column",
-      gap: 0.5,
-      flex: 1,
-      children: [type === 'radio' ? jsx(StyledRadio, {
-        name: name,
-        value: value,
-        onChange: onChange,
-        showTick: showTick,
-        checked: checked,
-        disabled: disabled,
-        error: isError,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        hasLabel: !!label,
-        id: id,
-        ref: innerRef,
-        "data-error": isError,
-        label: label
-      }) : jsx(StyledCheckbox, {
-        name: name,
-        value: value,
-        onChange: onChange,
-        showTick: showTick,
-        checked: checked,
-        disabled: disabled,
-        error: isError,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        hasLabel: !!label,
-        id: id,
-        ref: innerRef,
-        "data-error": isError,
-        children: label
-      }), children ? jsx(StyledStack, {
-        "data-has-label": !!label && showTick,
-        width: "100%",
-        children: typeof children === 'function' ? children({
-          checked,
-          disabled
-        }) : children
-      }) : null]
-    })
-  });
-});
-
-export { SelectableCard };

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

@@ -1,141 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { useMemo, createContext, useContext } from 'react';
-import { Row } from '../Row/index.js';
-import { SelectableCard } from '../SelectableCard/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { jsx, jsxs, Fragment } 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 SelectableCardGroupContext = /*#__PURE__*/createContext(undefined);
-const CardSelectableCard = ({
-  value,
-  disabled,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  'data-testid': dataTestId
-}) => {
-  const context = useContext(SelectableCardGroupContext);
-  if (!context) {
-    throw new Error('SelectableCardGroup.Card can only be used inside a SelectableCardGroup');
-  }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    type,
-    showTick
-  } = context;
-  return jsx(SelectableCard, {
-    name: groupName,
-    value: value,
-    showTick: showTick,
-    type: type,
-    disabled: disabled,
-    className: className,
-    isError: isError,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    tooltip: tooltip,
-    id: id,
-    label: label,
-    onChange: onChange,
-    checked: typeof groupValue === 'object' ? groupValue.includes(value) : groupValue === value,
-    "data-testid": dataTestId,
-    children: children
-  });
-};
-const FieldSet = /*#__PURE__*/_styled("fieldset", {
-  target: "e1cxe6lb1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0"
-} : {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1cxe6lb0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1nglpc5",
-  styles: "vertical-align:super"
-} : {
-  name: "1nglpc5",
-  styles: "vertical-align:super",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
- */
-const SelectableCardGroup = ({
-  legend,
-  value,
-  className,
-  helper,
-  error,
-  columns = 1,
-  children,
-  onChange,
-  name,
-  required = false,
-  type,
-  showTick = false
-}) => {
-  const contextValue = useMemo(() => ({
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required,
-    type,
-    showTick
-  }), [name, value, onChange, required, type, showTick]);
-  return jsx(SelectableCardGroupContext.Provider, {
-    value: contextValue,
-    children: jsxs(Stack, {
-      gap: 1,
-      children: [jsx(FieldSet, {
-        className: className,
-        children: jsxs(Stack, {
-          gap: 1.5,
-          children: [legend ? jsxs(Text, {
-            as: "legend",
-            variant: "bodyStrong",
-            children: [legend && jsxs(Fragment, {
-              children: [legend, " \xA0"]
-            }), required ? jsx(StyledRequiredIcon, {
-              name: "asterisk",
-              color: "danger",
-              size: 8
-            }) : null]
-          }) : null, jsx(Row, {
-            gap: 2,
-            templateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-            children: children
-          })]
-        })
-      }), helper ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        prominence: "weak",
-        sentiment: "neutral",
-        children: helper
-      }) : null, error ? jsx(Text, {
-        as: "span",
-        variant: "caption",
-        sentiment: "danger",
-        children: error
-      }) : null]
-    })
-  });
-};
-SelectableCardGroup.Card = CardSelectableCard;
-
-export { SelectableCardGroup };

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

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

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