@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -9,27 +9,15 @@ 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:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.default;
-}, ";background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.background;
-}, ";color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.text;
-}, ";box-shadow:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.shadows.dropdown;
-}, ";");
+})("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" ? {
@@ -66,41 +54,28 @@ const arrowPlacementStyles = {
 };
 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:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";display:flex;flex-direction:column;text-align:center;justify-content:center;color:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.text;
-}, ";border-radius:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.radii.default;
-}, ";position:relative;", _ref8 => {
-  let {
-    placement,
-    theme,
-    hasArrow
-  } = _ref8;
-  return hasArrow && arrowPlacementStyles[placement]?.(theme);
-}, ";");
-const FwdMenu = /*#__PURE__*/forwardRef((_ref9, ref) => {
-  let {
-    ariaLabel = 'Menu',
-    id,
-    children,
-    disclosure,
-    hasArrow = true,
-    placement = 'bottom',
-    visible = false,
-    className,
-    'data-testid': dataTestId
-  } = _ref9;
+})("&: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,

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

@@ -3,14 +3,12 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const itemCoreStyle = _ref => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref;
-  return `
+const itemCoreStyle = ({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => `
   display: inline-block;
   font-size: ${theme.typography.bodySmall.fontSize};
   line-height: ${theme.typography.bodySmall.lineHeight};
@@ -37,53 +35,45 @@ const itemCoreStyle = _ref => {
             }
           }`}
   `;
-};
 const StyledItem = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
   target: "ei26g5y1"
-})(_ref2 => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref2;
-  return itemCoreStyle({
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  });
-}, " background:none;");
+})(({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => itemCoreStyle({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}), " background:none;");
 const StyledLinkItem = /*#__PURE__*/_styled('a', {
   shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
   target: "ei26g5y0"
-})(_ref3 => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref3;
-  return itemCoreStyle({
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  });
-}, " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
-  let {
-    borderless = false,
-    disabled = false,
-    onClick,
-    sentiment = 'neutral',
-    href,
-    children,
-    tooltip,
-    className,
-    'data-testid': dataTestId
-  } = _ref4;
+})(({
+  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,

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

@@ -7,55 +7,36 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
   target: "e1jn11gg1"
-})("background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.background;
-}, ";box-shadow:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.shadows.menu;
-}, ";padding:0;&[data-has-arrow='true']{&::after{border-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.background;
-}, " transparent transparent transparent;}}");
+})("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;}}");
 const MenuList = /*#__PURE__*/_styled(Stack, {
   target: "e1jn11gg0"
-})("&: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:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.text;
-}, ";border-radius:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.radii.default;
-}, ";position:relative;");
-const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
-  let {
-    id,
-    ariaLabel = 'Menu',
-    children,
-    disclosure,
-    hasArrow = true,
-    placement = 'bottom',
-    visible = false,
-    className,
-    'data-testid': dataTestId,
-    maxHeight,
-    maxWidth,
-    portalTarget
-  } = _ref7;
+})("&: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 = true,
+  placement = 'bottom',
+  visible = false,
+  className,
+  'data-testid': dataTestId,
+  maxHeight,
+  maxWidth,
+  portalTarget
+}, ref) => {
   const [isVisible, setIsVisible] = useState(visible);
   const popupRef = useRef(null);
   const disclosureRef = useRef(null);

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

@@ -5,60 +5,38 @@ 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:", _ref => {
-  let {
-    strength
-  } = _ref;
-  return strength.color;
-}, ";");
+})("float:right;vertical-align:top;color:", ({
+  strength
+}) => strength.color, ";");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
   target: "e157fc5l1"
-})("background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";height:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['1'];
-}, ";margin-top:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['1'];
-}, ";margin-bottom:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space['2'];
-}, ";");
+})("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:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.radii.default;
-}, ";height:100%;transition:all 0.5s;");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";height:100%;transition:all 0.5s;");
 /**
  * Show strength of a password based on different criteria.
  */
-const Meter = _ref8 => {
-  let {
-    strength,
-    title,
-    value,
-    className,
-    'data-testid': dataTestId,
-    id
-  } = _ref8;
+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;

package/dist/src/components/Modal/Dialog.js

@@ -6,72 +6,47 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledBackdrop = /*#__PURE__*/_styled("div", {
   target: "e1cqen9h1"
-})("position:fixed;top:0;right:0;height:0;width:0;overflow:hidden;background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.overlay;
-}, ";z-index:1;&[data-open='true']{padding:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
+})("position:fixed;top:0;right:0;height:0;width:0;overflow:hidden;background-color:", ({
+  theme
+}) => theme.colors.overlay, ";z-index:1;&[data-open='true']{padding:", ({
+  theme
+}) => theme.space['2'], ";overflow:auto;display:flex;bottom:0;left:0;height:100%;width:100%;}");
 const StyledDialog = /*#__PURE__*/_styled("dialog", {
   target: "e1cqen9h0"
-})("background-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";position:relative;border-radius:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.radii.default;
-}, ";border:0;padding:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['3'];
-}, ";width:", MODAL_WIDTH.medium, "px;box-shadow:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.shadows.modal;
-}, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(_ref7 => {
-  let [size, value] = _ref7;
-  return `
+})("background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeakElevated, ";position:relative;border-radius:", ({
+  theme
+}) => theme.radii.default, ";border:0;padding:", ({
+  theme
+}) => theme.space['3'], ";width:", MODAL_WIDTH.medium, "px;box-shadow:", ({
+  theme
+}) => theme.shadows.modal, ";", /*#__PURE__*/Object.entries(MODAL_WIDTH).map(([size, value]) => `
       &[data-size="${size}"] {
         width: ${value}px;
       }
-      `;
-}), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(_ref8 => {
-  let [placement, value] = _ref8;
-  return `
+      `), " ", /*#__PURE__*/Object.entries(MODAL_PLACEMENT).map(([placement, value]) => `
         &[data-placement="${placement}"] {
           ${value}
         }
-        `;
-}), ";");
-const Dialog = _ref9 => {
-  let {
-    children,
-    open,
-    placement,
-    onClose,
-    hideOnClickOutside,
-    size,
-    id,
-    ariaLabel,
-    className,
-    'data-testid': dataTestId,
-    preventBodyScroll,
-    hideOnEsc,
-    backdropClassName,
-    dialogCss,
-    backdropCss
-  } = _ref9;
+        `), ";");
+const Dialog = ({
+  children,
+  open,
+  placement,
+  onClose,
+  hideOnClickOutside,
+  size,
+  id,
+  ariaLabel,
+  className,
+  'data-testid': dataTestId,
+  preventBodyScroll,
+  hideOnEsc,
+  backdropClassName,
+  dialogCss,
+  backdropCss
+}) => {
   const containerRef = useRef(document.createElement('div'));
   const dialogRef = useRef(null);
   const onCloseRef = useRef(onClose);

package/dist/src/components/Modal/Disclosure.js

@@ -1,14 +1,13 @@
 import { useEffect, useMemo, isValidElement, cloneElement, createRef } from 'react';
 
-const Disclosure = _ref => {
-  let {
-    disclosure,
-    handleOpen,
-    visible,
-    handleClose,
-    toggle,
-    id
-  } = _ref;
+const Disclosure = ({
+  disclosure,
+  handleOpen,
+  visible,
+  handleClose,
+  toggle,
+  id
+}) => {
   const disclosureRef = /*#__PURE__*/createRef();
   useEffect(() => {
     const element = disclosureRef.current;

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

@@ -7,44 +7,37 @@ import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "ebywm9u0"
-})("position:absolute;top:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";right:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";");
+})("position:absolute;top:", ({
+  theme
+}) => theme.space['2'], ";right:", ({
+  theme
+}) => theme.space['2'], ";");
 
 /**
  * Modal is a component that allows you to display content on top of other content.
  * It is often used to display a dialog with additional information or to ask for a confirmation.
  */
-const Modal = _ref3 => {
-  let {
-    ariaLabel = 'modal',
-    id,
-    children,
-    disclosure,
-    hideOnClickOutside = true,
-    hideOnEsc = true,
-    isClosable = true,
-    onClose,
-    onBeforeClose,
-    opened = false,
-    placement = 'center',
-    preventBodyScroll = true,
-    size,
-    className,
-    'data-testid': dataTestId,
-    backdropClassName,
-    width = 'small',
-    customDialogStyles,
-    customDialogBackdropStyles
-  } = _ref3;
+const Modal = ({
+  ariaLabel = 'modal',
+  id,
+  children,
+  disclosure,
+  hideOnClickOutside = true,
+  hideOnEsc = true,
+  isClosable = true,
+  onClose,
+  onBeforeClose,
+  opened = false,
+  placement = 'center',
+  preventBodyScroll = true,
+  size,
+  className,
+  'data-testid': dataTestId,
+  backdropClassName,
+  width = 'small',
+  customDialogStyles,
+  customDialogBackdropStyles
+}) => {
   const [visible, setVisible] = useState(opened);
   const controlId = useId();
   const handleOpen = useCallback(() => {

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

@@ -5,36 +5,30 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledSpan = /*#__PURE__*/_styled(Text, {
   target: "e19pqvs30"
-})("display:flex;align-items:center;gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";");
+})("display:flex;align-items:center;gap:", ({
+  theme
+}) => theme.space['1'], ";");
 
 /**
  * A Notice is used to display a short message to the user.
  */
-const Notice = _ref2 => {
-  let {
-    children,
-    className,
-    'data-testid': dataTestId
-  } = _ref2;
-  return jsxs(StyledSpan, {
-    as: "span",
-    variant: "caption",
-    sentiment: "neutral",
-    prominence: "weak",
-    "data-testid": dataTestId,
-    className: className,
-    children: [jsx(Icon, {
-      name: "information-outline",
-      size: 16,
-      color: "neutral",
-      prominence: "weak"
-    }), children]
-  });
-};
+const Notice = ({
+  children,
+  className,
+  'data-testid': dataTestId
+}) => jsxs(StyledSpan, {
+  as: "span",
+  variant: "caption",
+  sentiment: "neutral",
+  prominence: "weak",
+  "data-testid": dataTestId,
+  className: className,
+  children: [jsx(Icon, {
+    name: "information-outline",
+    size: 16,
+    color: "neutral",
+    prominence: "weak"
+  }), children]
+});
 
 export { Notice };