@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,100 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-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 VIEWBOX_WIDTH = 100;
-const VIEWBOX_HEIGHT = 100;
-const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
-const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
-const StyledSvg = /*#__PURE__*/_styled('svg', {
-  shouldForwardProp: prop => !['active'].includes(prop),
-  target: "e1y1n78x1"
-})(({
-  active
-}) => active ? `
-        animation: spin 0.75s linear infinite;
-
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      ` : '', ";");
-const Text = /*#__PURE__*/_styled('text', {
-  shouldForwardProp: prop => !['color'].includes(prop),
-  target: "e1y1n78x0"
-})("fill:", ({
-  theme,
-  color
-}) => theme.colors[color]?.backgroundStrong || color, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
-
-/**
- * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
- */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s"
-} : {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const Loader = ({
-  percentage = 20,
-  text,
-  size = 40,
-  strokeWidth = 16,
-  color = 'primary',
-  trailColor = 'neutral',
-  active = false,
-  label = 'Loading'
-}) => {
-  const theme = useTheme();
-  const circleRadius = HALF_VIEWBOX_HEIGHT - strokeWidth / 2;
-  const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;
-  const circleDiameter = Math.PI * 2 * circleRadius;
-  return jsxs(StyledSvg, {
-    active: active,
-    role: "progressbar",
-    "aria-label": label,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": percentage,
-    "aria-valuetext": `${percentage}%`,
-    viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
-    style: {
-      height: typeof size === 'string' ? size : `${size}px`,
-      width: typeof size === 'string' ? size : `${size}px`
-    },
-    children: [jsx("circle", {
-      cx: HALF_VIEWBOX_WIDTH,
-      cy: HALF_VIEWBOX_HEIGHT,
-      r: circleRadius,
-      fill: "none",
-      strokeWidth: strokeWidth,
-      stroke: theme.colors[trailColor]?.border || trailColor
-    }), jsx("circle", {
-      css: _ref,
-      cx: HALF_VIEWBOX_WIDTH,
-      cy: HALF_VIEWBOX_HEIGHT,
-      r: circleRadius,
-      fill: "none",
-      strokeWidth: strokeWidth,
-      strokeDasharray: circleDiameter,
-      strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
-      stroke: theme.colors[color]?.backgroundStrong || color,
-      strokeLinecap: "round"
-    }), text ? jsx(Text, {
-      color: color,
-      x: HALF_VIEWBOX_WIDTH,
-      y: HALF_VIEWBOX_HEIGHT,
-      children: text
-    }) : null]
-  });
-};
-
-export { Loader };

package/dist/src/components/Menu/Item.js

@@ -1,112 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const itemCoreStyle = ({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => `
-  display: inline-block;
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
-  cursor: pointer;
-  min-width: 110px;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${disabled ? `
-        cursor: not-allowed;
-      ` : `
-          &:hover,
-          &:focus {
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`}
-  `;
-const StyledItem = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "e10f690h1"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " background:none;");
-const StyledLinkItem = /*#__PURE__*/_styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "e10f690h0"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef(({
-  borderless = false,
-  disabled = false,
-  onClick,
-  sentiment = 'neutral',
-  href,
-  children,
-  tooltip,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  if (href && !disabled) {
-    return jsx(Tooltip, {
-      text: tooltip,
-      children: jsx(StyledLinkItem, {
-        borderless: true,
-        href: href,
-        ref: ref,
-        onClick: disabled ? undefined : onClick,
-        role: "menuitem",
-        disabled: disabled,
-        sentiment: sentiment,
-        className: className,
-        "data-testid": dataTestId,
-        children: children
-      })
-    });
-  }
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsx(StyledItem, {
-      type: "button",
-      ref: ref,
-      role: "menuitem",
-      disabled: disabled,
-      onClick: onClick,
-      borderless: borderless,
-      sentiment: sentiment,
-      className: className,
-      "data-testid": dataTestId,
-      children: children
-    })
-  });
-});
-var Item$1 = Item;
-
-export { Item$1 as default };

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

@@ -1,129 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { forwardRef, isValidElement, useRef, useImperativeHandle, cloneElement } from 'react';
-import { usePopoverState, PopoverDisclosure, Popover } from 'reakit/Popover';
-import { Portal } from 'reakit/Portal';
-import Item from './Item.js';
-import { jsxs, Fragment, 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 StyledPopover = /*#__PURE__*/_styled(Popover, {
-  target: "e1hqs9p51"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";box-shadow:", ({
-  theme
-}) => theme.shadows.dropdown, ";");
-const bottomStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{bottom:100%;}&:after{border-bottom-color:", theme.colors.neutral.background, ";}&:before{border-bottom-color:transparent;}");
-const topStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{top:100%;}&:after{border-top-color:", theme.colors.neutral.background, ";}&:before{border-top-color:rgba(165, 165, 205, 0.4);}");
-const endStyles = process.env.NODE_ENV === "production" ? {
-  name: "15zu3sa",
-  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}"
-} : {
-  name: "15zu3sa",
-  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const startStyles = process.env.NODE_ENV === "production" ? {
-  name: "17k88rr",
-  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}"
-} : {
-  name: "17k88rr",
-  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const centerStyles = process.env.NODE_ENV === "production" ? {
-  name: "1qzrhtz",
-  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}"
-} : {
-  name: "1qzrhtz",
-  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const arrowPlacementStyles = {
-  bottom: theme => /*#__PURE__*/css(centerStyles, ";", bottomStyles(theme), ";"),
-  'bottom-end': theme => /*#__PURE__*/css(endStyles, ";", bottomStyles(theme), ";"),
-  'bottom-start': theme => /*#__PURE__*/css(startStyles, ";", bottomStyles(theme), ";"),
-  top: theme => /*#__PURE__*/css(centerStyles, ";", topStyles(theme), ";"),
-  'top-end': theme => /*#__PURE__*/css(endStyles, ";", topStyles(theme), ";"),
-  'top-start': theme => /*#__PURE__*/css(startStyles, ";", topStyles(theme), ";")
-};
-const MenuList = /*#__PURE__*/_styled("div", {
-  target: "e1hqs9p50"
-})("&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";display:flex;flex-direction:column;text-align:center;justify-content:center;color:", ({
-  theme
-}) => theme.colors.neutral.text, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";position:relative;", ({
-  placement,
-  theme,
-  hasArrow
-}) => hasArrow && arrowPlacementStyles[placement]?.(theme), ";");
-const FwdMenu = /*#__PURE__*/forwardRef(({
-  ariaLabel = 'Menu',
-  id,
-  children,
-  disclosure,
-  hasArrow = true,
-  placement = 'bottom',
-  visible = false,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  const popover = usePopoverState({
-    baseId: id,
-    placement,
-    visible
-  });
-
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(popover);
-  const innerRef = useRef(target);
-  useImperativeHandle(ref, () => innerRef.current);
-  return jsxs(Fragment, {
-    children: [disclosure &&
-    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
-    jsx(PopoverDisclosure, {
-      ...popover,
-      onClick: event => {
-        target?.props?.onClick?.(event);
-      },
-      ref: innerRef,
-      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
-    }), jsx(Portal, {
-      children: jsx(StyledPopover, {
-        ...popover,
-        "aria-label": ariaLabel,
-        className: className,
-        children: /* Required to avoid loading menu content if not visible */
-        popover.visible ? jsx(MenuList, {
-          "data-testid": dataTestId,
-          className: className,
-          hasArrow: hasArrow,
-          placement: popover.placement,
-          role: "menu",
-          children: typeof children === 'function' ? children(popover) : children
-        }) : null
-      })
-    })]
-  });
-});
-
-/**
- * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
- * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
- * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
- * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
- * @deprecated use MenuV2 component instead
- */
-const Menu = /*#__PURE__*/Object.assign(FwdMenu, {
-  Item
-});
-
-export { Menu };

package/dist/src/components/MenuV2/Group.js

@@ -1,25 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-const Container = /*#__PURE__*/_styled("span", {
-  target: "e7u2rl20"
-})("padding:", ({
-  theme
-}) => `${theme.space['0.5']} ${theme.space['1.5']}`, ";text-align:left;");
-const Group = ({
-  label,
-  children
-}) => jsxs(Fragment, {
-  children: [jsx(Container, {
-    children: jsx(Text, {
-      variant: "captionStrong",
-      as: "span",
-      prominence: "weak",
-      sentiment: "neutral",
-      children: label
-    })
-  }), children]
-});
-
-export { Group };

package/dist/src/components/MenuV2/Item.js

@@ -1,139 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const ANIMATION_DURATION = 200; // in ms
-
-const itemCoreStyle = ({
-  theme,
-  sentiment,
-  disabled
-}) => `
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  min-height: 32px;
-  max-height: 44px;
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  cursor: pointer;
-  min-width: 110px;
-  width: 100%;
-  border-radius: ${theme.radii.default};
-  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${disabled ? `
-        cursor: not-allowed;
-      ` : `
-          &:hover,
-          &:focus, &[data-active='true'] {
-            background-color: ${theme.colors[sentiment].backgroundHover};
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`}
-  `;
-const Container = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['borderless'].includes(prop),
-  target: "ei26g5y2"
-})(({
-  theme,
-  borderless
-}) => borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`, " padding:", ({
-  theme,
-  borderless
-}) => `${borderless ? theme.space['0.25'] : theme.space['0.5']} ${theme.space['0.5']}`, ";&:last-child{border:none;}");
-const StyledItem = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "ei26g5y1"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " background:none;");
-const StyledLinkItem = /*#__PURE__*/_styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "ei26g5y0"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef(({
-  borderless = false,
-  disabled = false,
-  onClick,
-  sentiment = 'neutral',
-  href,
-  children,
-  tooltip,
-  active,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  if (href && !disabled) {
-    return jsx(Container, {
-      borderless: borderless,
-      children: jsx(Tooltip, {
-        text: tooltip,
-        children: jsx(StyledLinkItem, {
-          "data-active": active,
-          borderless: true,
-          href: href,
-          ref: ref,
-          onClick: disabled ? undefined : onClick,
-          role: "menuitem",
-          disabled: disabled,
-          sentiment: sentiment,
-          className: className,
-          "data-testid": dataTestId,
-          children: children
-        })
-      })
-    });
-  }
-  return jsx(Container, {
-    borderless: borderless,
-    children: jsx(Tooltip, {
-      text: tooltip,
-      children: jsx(StyledItem, {
-        type: "button",
-        ref: ref,
-        role: "menuitem",
-        disabled: disabled,
-        onClick: onClick,
-        borderless: borderless,
-        sentiment: sentiment,
-        className: className,
-        "data-testid": dataTestId,
-        "data-active": active,
-        children: children
-      })
-    })
-  });
-});
-var Item$1 = Item;
-
-export { Item$1 as default };

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

@@ -1,116 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
-import { Popup } from '../Popup/index.js';
-import { Stack } from '../Stack/index.js';
-import { Group } from './Group.js';
-import Item from './Item.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const SIZES = {
-  small: '180px',
-  medium: '280px',
-  large: '380px'
-};
-const StyledPopup = /*#__PURE__*/_styled(Popup, {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "e1jn11gg1"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";box-shadow:", ({
-  theme
-}) => theme.shadows.menu, ";padding:0;&[data-has-arrow='true']{&::after{border-color:", ({
-  theme
-}) => theme.colors.neutral.background, " transparent transparent transparent;}}width:", ({
-  size
-}) => SIZES[size], ";max-width:none;padding:", ({
-  theme
-}) => `${theme.space['0.25']} 0`, ";");
-const MenuList = /*#__PURE__*/_styled(Stack, {
-  target: "e1jn11gg0"
-})("overflow-y:auto;overflow-x:hidden;&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";position:relative;");
-const FwdMenu = /*#__PURE__*/forwardRef(({
-  id,
-  ariaLabel = 'Menu',
-  children,
-  disclosure,
-  hasArrow = false,
-  placement = 'bottom',
-  visible = false,
-  className,
-  'data-testid': dataTestId,
-  maxHeight,
-  maxWidth,
-  portalTarget,
-  size = 'small',
-  triggerMethod = 'click'
-}, ref) => {
-  const [isVisible, setIsVisible] = useState(visible);
-  const popupRef = useRef(null);
-  const disclosureRef = useRef(null);
-  const tempId = useId();
-  const finalId = `menu-${id ?? tempId}`;
-
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure({
-    visible: isVisible
-  });
-  const innerRef = useRef(target);
-  useImperativeHandle(ref, () => innerRef.current);
-  const finalDisclosure = /*#__PURE__*/cloneElement(target, {
-    onClick: event => {
-      target.props.onClick?.(event);
-      setIsVisible(!isVisible);
-    },
-    'aria-haspopup': 'dialog',
-    'aria-expanded': isVisible,
-    // @ts-expect-error not sure how to fix this
-    ref: disclosureRef
-  });
-  return jsx(StyledPopup, {
-    debounceDelay: triggerMethod === 'hover' ? 250 : 0,
-    hideOnClickOutside: true,
-    "aria-label": ariaLabel,
-    className: className,
-    visible: triggerMethod === 'click' ? isVisible : undefined,
-    placement: placement,
-    hasArrow: hasArrow,
-    "data-has-arrow": hasArrow,
-    role: "dialog",
-    id: finalId,
-    ref: popupRef,
-    onClose: () => setIsVisible(false),
-    tabIndex: -1,
-    maxHeight: maxHeight ?? '480px',
-    maxWidth: maxWidth,
-    size: size,
-    text: jsx(MenuList, {
-      "data-testid": dataTestId,
-      className: className,
-      role: "menu",
-      children: typeof children === 'function' ? children({
-        toggle: () => setIsVisible(!isVisible)
-      }) : children
-    }),
-    portalTarget: portalTarget,
-    children: finalDisclosure
-  });
-});
-
-/**
- * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
- * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
- * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
- * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
- */
-const MenuV2 = /*#__PURE__*/Object.assign(FwdMenu, {
-  Item,
-  Group
-});
-
-export { MenuV2 };

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

@@ -1,76 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledStrength = /*#__PURE__*/_styled(Text, {
-  shouldForwardProp: prop => !['color'].includes(prop),
-  target: "e157fc5l2"
-})("float:right;vertical-align:top;color:", ({
-  strength
-}) => strength.color, ";");
-const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e157fc5l1"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:", ({
-  theme
-}) => theme.space['1'], ";margin-top:", ({
-  theme
-}) => theme.space['1'], ";margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";");
-const StyledMeter = /*#__PURE__*/_styled("div", {
-  target: "e157fc5l0"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";height:100%;transition:all 0.5s;");
-/**
- * Show strength of a password based on different criteria.
- */
-const Meter = ({
-  strength,
-  title,
-  value,
-  className,
-  'data-testid': dataTestId,
-  id
-}) => {
-  const toValue = (value + 1) / strength.length * 100;
-  const width = `${toValue}%`;
-  const backgroundColor = strength[value]?.color ?? strength[0].color;
-  const text = strength[value]?.text ?? strength[0].text;
-  return jsxs("div", {
-    "aria-live": "polite",
-    "aria-valuemax": strength.length ?? 0,
-    "aria-valuemin": 0,
-    "aria-valuenow": value,
-    className: className,
-    "data-testid": dataTestId,
-    id: id,
-    role: "meter",
-    title: title,
-    "aria-labelledby": "meter-label",
-    children: [jsxs(Text, {
-      id: "meter-label",
-      variant: "bodySmallStrong",
-      as: "p",
-      children: [title, jsx(StyledStrength, {
-        as: "span",
-        variant: "bodySmallStrong",
-        strength: strength[value],
-        children: text
-      })]
-    }), jsx(StyledWrapper, {
-      children: jsx(StyledMeter, {
-        style: {
-          backgroundColor,
-          width
-        }
-      })
-    })]
-  });
-};
-
-export { Meter };