@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -8,60 +8,41 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const MenuContainer = /*#__PURE__*/_styled("div", {
   target: "ewug27g2"
-})("display:flex;flex-direction:column;", StyledTabButton, "{font-size:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.typography.bodySmall.fontSize;
-}, ";line-height:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.typography.bodySmall.lineHeight;
-}, ";font-weight:inherit;padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return `${theme.space['1']} ${theme.space['2']}`;
-}, ";border-bottom-width:1.5px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}}");
+})("display:flex;flex-direction:column;", StyledTabButton, "{font-size:", ({
+  theme
+}) => theme.typography.bodySmall.fontSize, ";line-height:", ({
+  theme
+}) => theme.typography.bodySmall.lineHeight, ";font-weight:inherit;padding:", ({
+  theme
+}) => `${theme.space['1']} ${theme.space['2']}`, ";border-bottom-width:1.5px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}}");
 
 // Migration to MenuV2 will not work as expected here.
 const StyledTabMenu = /*#__PURE__*/_styled(TabMenu, {
   target: "ewug27g1"
-})("position:sticky;right:0;top:0;bottom:0;background:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.background;
-}, ";box-shadow:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.shadows.menu;
-}, ";");
+})("position:sticky;right:0;top:0;bottom:0;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";box-shadow:", ({
+  theme
+}) => theme.shadows.menu, ";");
 const TabsContainer = /*#__PURE__*/_styled("div", {
   target: "ewug27g0"
-})("display:flex;flex-wrap:nowrap;overflow-x:scroll;position:relative;z-index:0;-ms-overflow-style:none;scrollbar-width:none;&::after{z-index:-1;content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.border;
-}, ";}&::-webkit-scrollbar{display:none;}");
+})("display:flex;flex-wrap:nowrap;overflow-x:scroll;position:relative;z-index:0;-ms-overflow-style:none;scrollbar-width:none;&::after{z-index:-1;content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:", ({
+  theme
+}) => theme.colors.neutral.border, ";}&::-webkit-scrollbar{display:none;}");
 const SHADOW_THRESHOLD = 10;
 
 /**
  * Tabs component is used to display a set of tabs with a single tab selected at a time.
  */
-const Tabs = _ref7 => {
-  let {
-    children = null,
-    onChange,
-    moreDisclosure = 'More',
-    selected,
-    className,
-    'data-testid': dataTestId,
-    ...props
-  } = _ref7;
+const Tabs = ({
+  children = null,
+  onChange,
+  moreDisclosure = 'More',
+  selected,
+  className,
+  'data-testid': dataTestId,
+  ...props
+}) => {
   const tabsRef = useRef({});
   const moreStaticRef = useRef(null);
   const [displayMore, setDisplayMore] = useState(false);

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

@@ -12,27 +12,16 @@ const COPY_DURATION = 2500;
 const StyledContainer = /*#__PURE__*/_styled('span', {
   shouldForwardProp: prop => !['sentiment', 'copiable'].includes(prop),
   target: "el6733p2"
-})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.default;
-}, ";padding:0 ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['1'];
-}, ";gap:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['1'];
-}, ";width:fit-content;height:24px;", _ref4 => {
-  let {
-    copiable,
-    theme
-  } = _ref4;
-  return copiable && `
+})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", ({
+  theme
+}) => theme.radii.default, ";padding:0 ", ({
+  theme
+}) => theme.space['1'], ";gap:", ({
+  theme
+}) => theme.space['1'], ";width:fit-content;height:24px;", ({
+  copiable,
+  theme
+}) => copiable && `
     &:hover, &:active {
       cursor: pointer;
       background: ${theme.colors.neutral.backgroundWeakHover};
@@ -42,12 +31,10 @@ const StyledContainer = /*#__PURE__*/_styled('span', {
     &:active {
       box-shadow: ${theme.shadows.focusNeutral};
     }
-  `;
-}, " ", _ref5 => {
-  let {
-    sentiment,
-    theme
-  } = _ref5;
+  `, " ", ({
+  sentiment,
+  theme
+}) => {
   if (sentiment === 'disabled') {
     return `
       color: ${theme.colors.neutral.textDisabled};
@@ -90,58 +77,54 @@ const StyledCloseButton = /*#__PURE__*/_styled(Button, {
   styles: "width:fit-content;height:fit-content;padding:2px",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const TagInner = _ref6 => {
-  let {
-    children,
-    isLoading = false,
-    onClose,
-    icon,
-    disabled = false
-  } = _ref6;
-  return jsxs(Fragment, {
-    children: [icon ? jsx(Icon, {
-      name: icon,
-      size: 16
-    }) : null, jsx(StyledText, {
-      as: "span",
-      variant: "caption",
-      oneLine: true,
-      "aria-disabled": disabled,
-      children: children
-    }), onClose && !isLoading ? jsx(StyledCloseButton, {
-      onClick: onClose,
-      disabled: disabled,
-      "aria-label": "Close tag",
-      "data-testid": "close-tag",
-      variant: "ghost",
-      sentiment: "neutral",
-      icon: "close",
-      size: "small"
-    }) : null, isLoading ? jsx(Loader, {
-      active: true,
-      size: 16
-    }) : null]
-  });
-};
+const TagInner = ({
+  children,
+  isLoading = false,
+  onClose,
+  icon,
+  disabled = false
+}) => jsxs(Fragment, {
+  children: [icon ? jsx(Icon, {
+    name: icon,
+    size: 16
+  }) : null, jsx(StyledText, {
+    as: "span",
+    variant: "caption",
+    oneLine: true,
+    "aria-disabled": disabled,
+    children: children
+  }), onClose && !isLoading ? jsx(StyledCloseButton, {
+    onClick: onClose,
+    disabled: disabled,
+    "aria-label": "Close tag",
+    "data-testid": "close-tag",
+    variant: "ghost",
+    sentiment: "neutral",
+    icon: "close",
+    size: "small"
+  }) : null, isLoading ? jsx(Loader, {
+    active: true,
+    size: 16
+  }) : null]
+});
 
 /**
  * Tag component is used to display a short text description of an item. It can be used to display a category
  * or any other metadata.
  */
-const Tag = _ref7 => {
-  let {
-    children,
-    isLoading,
-    onClose,
-    icon,
-    copiable = false,
-    copyText = 'Copy',
-    copiedText = 'Copied!',
-    disabled,
-    sentiment = 'neutral',
-    className,
-    'data-testid': dataTestId
-  } = _ref7;
+const Tag = ({
+  children,
+  isLoading,
+  onClose,
+  icon,
+  copiable = false,
+  copyText = 'Copy',
+  copiedText = 'Copied!',
+  disabled,
+  sentiment = 'neutral',
+  className,
+  'data-testid': dataTestId
+}) => {
   const [isCopied, setCopied] = useClipboard(typeof children === 'string' ? children : '', {
     successDuration: COPY_DURATION
   });

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

@@ -9,15 +9,13 @@ const STATUS = {
   LOADING: 'loading'
 };
 const variants = {
-  base: _ref => {
-    let {
-      theme: {
-        colors,
-        shadows,
-        radii
-      }
-    } = _ref;
-    return `
+  base: ({
+    theme: {
+      colors,
+      shadows,
+      radii
+    }
+  }) => `
     padding: 8px;
     cursor: text;
     border-radius: ${radii.default};
@@ -34,15 +32,12 @@ const variants = {
     & > * {
       margin: 6px;
     }
-  `;
-  },
-  bordered: _ref2 => {
-    let {
-      theme: {
-        shadows
-      }
-    } = _ref2;
-    return `
+  `,
+  bordered: ({
+    theme: {
+      shadows
+    }
+  }) => `
     margin-top: 0;
     padding: 8px 0;
 
@@ -56,15 +51,12 @@ const variants = {
         margin-right: 6px;
       }
     }
-  `;
-  },
-  'no-border': _ref3 => {
-    let {
-      theme: {
-        shadows
-      }
-    } = _ref3;
-    return `
+  `,
+  'no-border': ({
+    theme: {
+      shadows
+    }
+  }) => `
     &:focus-within {
       box-shadow: ${shadows.focusPrimary};
     }
@@ -73,59 +65,40 @@ const variants = {
       margin-right: 6px;
       margin-bottom: 6px;
     }
-  `;
-  }
+  `
 };
 const TagInputContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['variant'].includes(prop),
   target: "ea7vc6o1"
-})("display:flex;flex-wrap:wrap;background-color:", _ref4 => {
-  let {
-    theme: {
-      colors
-    }
-  } = _ref4;
-  return colors.neutral.background;
-}, ";", _ref5 => {
-  let {
-    variant,
-    theme
-  } = _ref5;
-  return variants[variant] ? variants[variant]({
-    theme
-  }) : variants.base({
-    theme
-  });
-}, ";");
+})("display:flex;flex-wrap:wrap;background-color:", ({
+  theme: {
+    colors
+  }
+}) => colors.neutral.background, ";", ({
+  variant,
+  theme
+}) => variants[variant] ? variants[variant]({
+  theme
+}) : variants.base({
+  theme
+}), ";");
 const StyledInput = /*#__PURE__*/_styled("input", {
   target: "ea7vc6o0"
-})("display:flex;flex:1;font-size:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.typography.body.fontSize;
-}, ";color:", _ref7 => {
-  let {
-    theme: {
-      colors
-    }
-  } = _ref7;
-  return colors.neutral.text;
-}, ";border:none;outline:none;background-color:", _ref8 => {
-  let {
-    theme: {
-      colors
-    }
-  } = _ref8;
-  return colors.neutral.background;
-}, ";&::placeholder{color:", _ref9 => {
-  let {
-    theme: {
-      colors
-    }
-  } = _ref9;
-  return colors.neutral.textWeak;
-}, ";}");
+})("display:flex;flex:1;font-size:", ({
+  theme
+}) => theme.typography.body.fontSize, ";color:", ({
+  theme: {
+    colors
+  }
+}) => colors.neutral.text, ";border:none;outline:none;background-color:", ({
+  theme: {
+    colors
+  }
+}) => colors.neutral.background, ";&::placeholder{color:", ({
+  theme: {
+    colors
+  }
+}) => colors.neutral.textWeak, ";}");
 const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) => typeof tag === 'object' ? {
   ...tag,
   index: getUUID(`tag-${index}`)
@@ -137,20 +110,19 @@ const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) =>
  * TagInput is a component that allows users to input tags.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const TagInput = _ref10 => {
-  let {
-    disabled = false,
-    id,
-    manualInput = true,
-    name,
-    onChange,
-    onChangeError,
-    placeholder,
-    tags,
-    variant = 'base',
-    className,
-    'data-testid': dataTestId
-  } = _ref10;
+const TagInput = ({
+  disabled = false,
+  id,
+  manualInput = true,
+  name,
+  onChange,
+  onChangeError,
+  placeholder,
+  tags,
+  variant = 'base',
+  className,
+  'data-testid': dataTestId
+}) => {
   const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(tags ?? []));
   const [input, setInput] = useState('');
   const [status, setStatus] = useState({});
@@ -194,12 +166,9 @@ const TagInput = _ref10 => {
     setStatus({
       [tagIndex]: STATUS.LOADING
     });
-    const findIndex = tagInputState.findIndex(_ref11 => {
-      let {
-        index
-      } = _ref11;
-      return index === tagIndex;
-    });
+    const findIndex = tagInputState.findIndex(({
+      index
+    }) => index === tagIndex);
     const newTagInput = [...tagInputState];
     newTagInput.splice(findIndex, 1);
     try {

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

@@ -17,49 +17,36 @@ const StyledContainer = /*#__PURE__*/_styled("div", {
 });
 const TagsWrapper = /*#__PURE__*/_styled("span", {
   target: "eb6op481"
-})("cursor:pointer;color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.primary.text;
-}, ";border:none;font-size:14px;align-self:center;max-width:350px;overflow:hidden;white-space:pre;text-overflow:ellipsis;background-color:transparent;padding-left:8px;padding-right:8px;");
+})("cursor:pointer;color:", ({
+  theme
+}) => theme.colors.primary.text, ";border:none;font-size:14px;align-self:center;max-width:350px;overflow:hidden;white-space:pre;text-overflow:ellipsis;background-color:transparent;padding-left:8px;padding-right:8px;");
 const StyledTagContainer = /*#__PURE__*/_styled("div", {
   target: "eb6op480"
-})("display:flex;align-items:center;color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.text;
-}, ";gap:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['1'];
-}, ";", _ref4 => {
-  let {
-    multiline
-  } = _ref4;
-  return multiline && `flex-wrap: wrap;`;
-}, ";");
+})("display:flex;align-items:center;color:", ({
+  theme
+}) => theme.colors.neutral.text, ";gap:", ({
+  theme
+}) => theme.space['1'], ";", ({
+  multiline
+}) => multiline && `flex-wrap: wrap;`, ";");
 const DEFAULT_TAGS = [];
 const getTagLabel = tag => typeof tag === 'object' ? tag.label : tag;
 
 /**
  * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
  */
-const TagList = _ref5 => {
-  let {
-    maxLength = 600,
-    tags = DEFAULT_TAGS,
-    threshold = 1,
-    multiline = false,
-    popoverTitle,
-    copiable,
-    copyText,
-    copiedText,
-    className,
-    'data-testid': dataTestId
-  } = _ref5;
+const TagList = ({
+  maxLength = 600,
+  tags = DEFAULT_TAGS,
+  threshold = 1,
+  multiline = false,
+  popoverTitle,
+  copiable,
+  copyText,
+  copiedText,
+  className,
+  'data-testid': dataTestId
+}) => {
   let tmpThreshold = threshold;
   if (tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), '').length > maxLength) {
     // If total tags length in characters is above maxLength,

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

@@ -16,18 +16,17 @@ const PROMINENCES = {
 /**
  * Generate all styles available for text based on prominence and variants
  */
-const generateStyles = _ref => {
-  let {
-    placement,
-    prominence,
-    sentiment,
-    variant,
-    theme,
-    oneLine,
-    disabled,
-    italic,
-    underline
-  } = _ref;
+const generateStyles = ({
+  placement,
+  prominence,
+  sentiment,
+  variant,
+  theme,
+  oneLine,
+  disabled,
+  italic,
+  underline
+}) => {
   // stronger is available only for neutral sentiment
   const definedProminence = sentiment !== 'neutral' && prominence === 'stronger' ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
   sentiment ? theme.colors[sentiment] : undefined;
@@ -60,25 +59,24 @@ const StyledText = /*#__PURE__*/_styled('div', {
 /**
  * Text component is used to display text with different variants and sentiments.
  */
-const Text = _ref2 => {
-  let {
-    variant,
-    children,
-    as,
-    color,
-    sentiment,
-    oneLine = false,
-    placement,
-    prominence = 'default',
-    className,
-    disabled = false,
-    italic = false,
-    underline = false,
-    id,
-    dir,
-    htmlFor,
-    'data-testid': dataTestId
-  } = _ref2;
+const Text = ({
+  variant,
+  children,
+  as,
+  color,
+  sentiment,
+  oneLine = false,
+  placement,
+  prominence = 'default',
+  className,
+  disabled = false,
+  italic = false,
+  underline = false,
+  id,
+  dir,
+  htmlFor,
+  'data-testid': dataTestId
+}) => {
   const computedSentiment = sentiment ?? color;
   const elementRef = useRef(null);
   const isOverflowing = useIsOverflowing(elementRef);