@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -39,16 +39,15 @@ const FOCUS_RING_KEY = {
 
 // VARIANTS
 
-const coreStyle = _ref => {
-  let {
-    theme,
-    size,
-    sentiment,
-    iconPosition,
-    fullWidth,
-    disabled,
-    iconOnly
-  } = _ref;
+const coreStyle = ({
+  theme,
+  size,
+  sentiment,
+  iconPosition,
+  fullWidth,
+  disabled,
+  iconOnly
+}) => {
   const font = size === 'large' ? theme.typography.bodyStrong : theme.typography.bodySmallStrong;
   let width = 'auto';
   if (fullWidth) {
@@ -94,25 +93,17 @@ const coreStyle = _ref => {
 const StyledFilledButton = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
   target: "e112qvla2"
-})(args => coreStyle(args), " background:", _ref2 => {
-  let {
-    theme,
-    sentiment
-  } = _ref2;
-  return theme.colors[sentiment].backgroundStrong;
-}, ";border:none;color:", _ref3 => {
-  let {
-    theme,
-    sentiment
-  } = _ref3;
-  return theme.colors[sentiment].textStrong;
-}, ";", _ref4 => {
-  let {
-    theme,
-    sentiment,
-    disabled
-  } = _ref4;
-  return disabled ? `
+})(args => coreStyle(args), " background:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment].backgroundStrong, ";border:none;color:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment].textStrong, ";", ({
+  theme,
+  sentiment,
+  disabled
+}) => disabled ? `
             background: ${theme.colors[sentiment].backgroundStrongDisabled};
             color:
               ${theme.colors[sentiment].textStrongDisabled};
@@ -123,30 +114,21 @@ const StyledFilledButton = /*#__PURE__*/_styled('button', {
                 color:
                 ${theme.colors[sentiment].textStrongHover};
             }
-  `;
-}, ";");
+  `, ";");
 const StyledOutlinedButton = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
   target: "e112qvla1"
-})(args => coreStyle(args), " background:none;border:1px solid ", _ref5 => {
-  let {
-    theme,
-    sentiment
-  } = _ref5;
-  return theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrong' : 'border'];
-}, ";color:", _ref6 => {
-  let {
-    theme,
-    sentiment
-  } = _ref6;
-  return theme.colors[sentiment].text;
-}, ";", _ref7 => {
-  let {
-    theme,
-    sentiment,
-    disabled
-  } = _ref7;
-  return disabled ? `
+})(args => coreStyle(args), " background:none;border:1px solid ", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrong' : 'border'], ";color:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment].text, ";", ({
+  theme,
+  sentiment,
+  disabled
+}) => disabled ? `
         color:
           ${theme.colors[sentiment].textDisabled};
         border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongDisabled' : 'borderDisabled']};
@@ -160,24 +142,18 @@ const StyledOutlinedButton = /*#__PURE__*/_styled('button', {
             border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongHover' : 'borderHover']};
 
         }
-`;
-}, ";");
+`, ";");
 const StyledGhostButton = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
   target: "e112qvla0"
-})(args => coreStyle(args), " background:none;border:none;color:", _ref8 => {
-  let {
-    theme,
-    sentiment
-  } = _ref8;
-  return theme.colors[sentiment].text;
-}, ";", _ref9 => {
-  let {
-    theme,
-    sentiment,
-    disabled
-  } = _ref9;
-  return disabled ? `
+})(args => coreStyle(args), " background:none;border:none;color:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment].text, ";", ({
+  theme,
+  sentiment,
+  disabled
+}) => disabled ? `
         color:
           ${theme.colors[sentiment].textDisabled};
       ` : `
@@ -187,8 +163,7 @@ const StyledGhostButton = /*#__PURE__*/_styled('button', {
             color:
               ${theme.colors[sentiment].textHover};
         }
-`;
-}, ";");
+`, ";");
 const VARIANTS_COMPONENTS = {
   filled: {
     button: StyledFilledButton,
@@ -216,38 +191,37 @@ const VARIANTS_COMPONENTS = {
  * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
  * canceling an action, or performing a delete operation.
  */
-const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
-  let {
-    type = 'button',
-    className,
-    'data-testid': dataTestId,
-    sentiment = 'primary',
-    variant = 'filled',
-    size = 'large',
-    disabled = false,
-    icon,
-    iconPosition = 'left',
-    fullWidth = false,
-    isLoading = false,
-    children,
-    onClick,
-    onMouseDown,
-    onMouseUp,
-    onMouseOut,
-    name,
-    'aria-label': ariaLabel,
-    'aria-current': ariaCurrent,
-    'aria-controls': ariaControls,
-    'aria-expanded': ariaExpanded,
-    'aria-haspopup': ariaHaspopup,
-    href,
-    download,
-    target,
-    role,
-    tooltip,
-    tabIndex,
-    autoFocus
-  } = _ref10;
+const Button = /*#__PURE__*/forwardRef(({
+  type = 'button',
+  className,
+  'data-testid': dataTestId,
+  sentiment = 'primary',
+  variant = 'filled',
+  size = 'large',
+  disabled = false,
+  icon,
+  iconPosition = 'left',
+  fullWidth = false,
+  isLoading = false,
+  children,
+  onClick,
+  onMouseDown,
+  onMouseUp,
+  onMouseOut,
+  name,
+  'aria-label': ariaLabel,
+  'aria-current': ariaCurrent,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup,
+  href,
+  download,
+  target,
+  role,
+  tooltip,
+  tabIndex,
+  autoFocus
+}, ref) => {
   const computeIsDisabled = disabled || isLoading;
   const content = jsxs(Fragment, {
     children: [!isLoading && icon ? jsx(Icon, {

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

@@ -17,69 +17,51 @@ const StyledStack = /*#__PURE__*/_styled(Stack, {
 });
 const BorderedBox = /*#__PURE__*/_styled("div", {
   target: "exwxj840"
-})("border:1px solid ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['3'];
-}, ";&[data-is-active='true']{border:1px solid ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.primary.border;
-}, ";}&[data-disabled='true']{border:1px solid ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.borderDisabled;
-}, ";}");
+})("border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";padding:", ({
+  theme
+}) => theme.space['3'], ";&[data-is-active='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.primary.border, ";}&[data-disabled='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";}");
 
 /**
  * Card component is a simple component to display content in a box with a border.
  */
-const Card = /*#__PURE__*/forwardRef((_ref6, ref) => {
-  let {
-    header,
-    disabled = false,
-    isActive = false,
-    children,
-    className,
-    'data-testid': dataTestId
-  } = _ref6;
-  return header ? jsxs(StyledStack, {
-    gap: 1,
-    className: className,
-    "data-testid": dataTestId,
-    "data-disabled": disabled,
-    ref: ref,
-    children: [typeof header === 'string' ? jsx(Text, {
-      variant: "heading",
-      as: "h2",
-      disabled: disabled,
-      children: header
-    }) : header, jsx(BorderedBox, {
-      "data-is-active": isActive,
-      "data-disabled": disabled,
-      children: children
-    })]
-  }) : jsx(BorderedBox, {
+const Card = /*#__PURE__*/forwardRef(({
+  header,
+  disabled = false,
+  isActive = false,
+  children,
+  className,
+  'data-testid': dataTestId
+}, ref) => header ? jsxs(StyledStack, {
+  gap: 1,
+  className: className,
+  "data-testid": dataTestId,
+  "data-disabled": disabled,
+  ref: ref,
+  children: [typeof header === 'string' ? jsx(Text, {
+    variant: "heading",
+    as: "h2",
+    disabled: disabled,
+    children: header
+  }) : header, jsx(BorderedBox, {
     "data-is-active": isActive,
     "data-disabled": disabled,
-    className: className,
-    "data-testid": dataTestId,
-    ref: ref,
     children: children
-  });
-});
+  })]
+}) : jsx(BorderedBox, {
+  "data-is-active": isActive,
+  "data-disabled": disabled,
+  className: className,
+  "data-testid": dataTestId,
+  ref: ref,
+  children: children
+}));
 
 export { Card };

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

@@ -15,72 +15,47 @@ const StyledWrapper = /*#__PURE__*/_styled("div", {
 });
 const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w03"
-})("position:absolute;width:100px;height:100%;content:'';background:linear-gradient(\n    -90deg,\n    ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.background;
-}, "ff,\n    ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.background;
-}, "\n  );cursor:w-resize;z-index:auto;");
+})("position:absolute;width:100px;height:100%;content:'';background:linear-gradient(\n    -90deg,\n    ", ({
+  theme
+}) => theme.colors.neutral.background, "ff,\n    ", ({
+  theme
+}) => theme.colors.neutral.background, "\n  );cursor:w-resize;z-index:auto;");
 const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w02"
-})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:0 100px;gap:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['2'];
-}, ";");
+})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:0 100px;gap:", ({
+  theme
+}) => theme.space['2'], ";");
 const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w01"
-})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.background;
-}, ",\n    ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.background;
-}, "ff\n  );");
+})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", ({
+  theme
+}) => theme.colors.neutral.background, ",\n    ", ({
+  theme
+}) => theme.colors.neutral.background, "ff\n  );");
 const StyledBorderWrapper = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['width'].includes(prop),
   target: "e1id70w00"
-})("display:flex;align-items:stretch;width:", _ref6 => {
-  let {
-    width
-  } = _ref6;
-  return width;
-}, ";max-width:", _ref7 => {
-  let {
-    width
-  } = _ref7;
-  return width;
-}, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
-const CarouselItem = _ref8 => {
-  let {
-    children,
-    width = '240px'
-  } = _ref8;
-  return jsx(StyledBorderWrapper, {
-    width: width,
-    draggable: "true",
-    children: children
-  });
-};
+})("display:flex;align-items:stretch;width:", ({
+  width
+}) => width, ";max-width:", ({
+  width
+}) => width, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
+const CarouselItem = ({
+  children,
+  width = '240px'
+}) => jsx(StyledBorderWrapper, {
+  width: width,
+  draggable: "true",
+  children: children
+});
 /**
  * Carousel component allows you to scroll horizontally through a list of items.
  */
-const Carousel = _ref9 => {
-  let {
-    children,
-    className,
-    'data-testid': dataTestId = 'scrollbar'
-  } = _ref9;
+const Carousel = ({
+  children,
+  className,
+  'data-testid': dataTestId = 'scrollbar'
+}) => {
   const scrollRef = useRef(null);
   let intervalLeft;
   let intervalRight;
@@ -98,10 +73,7 @@ const Carousel = _ref9 => {
       }
     }, 30);
   };
-  const handleScrollX = function (scrollX) {
-    if (scrollX === void 0) {
-      scrollX = 25;
-    }
+  const handleScrollX = (scrollX = 25) => {
     if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
       scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft + scrollX, 0);
     }