@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -21,153 +21,92 @@ const iconSizes = {
 const BASE_INPUT_WIDTH = 34;
 const StyledSelectButton = /*#__PURE__*/_styled(Button, {
   target: "exvap484"
-})("margin:0 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";width:32px;height:32px;");
+})("margin:0 ", ({
+  theme
+}) => theme.space['1'], ";width:32px;height:32px;");
 const StyledCenterBox = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "exvap483"
-})("display:flex;flex:1;flex-direction:row;height:", _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return size === 'small' ? '24px' : '32px';
-}, ";align-items:center;outline:none;justify-content:center;border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";border:1px solid transparent;max-width:100%;");
+})("display:flex;flex:1;flex-direction:row;height:", ({
+  size
+}) => size === 'small' ? '24px' : '32px', ";align-items:center;outline:none;justify-content:center;border-radius:", ({
+  theme
+}) => theme.radii.default, ";border:1px solid transparent;max-width:100%;");
 const StyledInput = /*#__PURE__*/_styled("input", {
   target: "exvap482"
-})("color:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.text;
-}, ";background-color:transparent;font-size:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.typography.bodyStrong.fontSize;
-}, ";border:none;outline:none;position:relative;margin-right:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space['0.5'];
-}, ";max-width:100%;font-weight:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.typography.bodyStrong.weight;
-}, ";text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}::placeholder{color:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.neutral.textWeak;
-}, ";}-moz-appearance:textfield;&[disabled]{color:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.neutral.textDisabled;
-}, ";cursor:not-allowed;}");
+})("color:", ({
+  theme
+}) => theme.colors.neutral.text, ";background-color:transparent;font-size:", ({
+  theme
+}) => theme.typography.bodyStrong.fontSize, ";border:none;outline:none;position:relative;margin-right:", ({
+  theme
+}) => theme.space['0.5'], ";max-width:100%;font-weight:", ({
+  theme
+}) => theme.typography.bodyStrong.weight, ";text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}::placeholder{color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";}-moz-appearance:textfield;&[disabled]{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}");
 const StyledText = /*#__PURE__*/_styled('span', {
   shouldForwardProp: prop => !['disabled'].includes(prop),
   target: "exvap481"
-})("color:", _ref10 => {
-  let {
-    theme,
-    disabled
-  } = _ref10;
-  return disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text;
-}, ";user-select:none;margin-right:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space['1'];
-}, ";");
+})("color:", ({
+  theme,
+  disabled
+}) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text, ";user-select:none;margin-right:", ({
+  theme
+}) => theme.space['1'], ";");
 const StyledContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "exvap480"
-})("background-color:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.neutral.background;
-}, ";display:flex;flex-direction:row;align-items:center;align-self:stretch;font-weight:500;height:", _ref13 => {
-  let {
-    size
-  } = _ref13;
-  return containerSizes[size];
-}, "px;border:1px solid ", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.radii.default;
-}, ";&[data-error='true']{border:1px solid ", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.danger.border;
-}, ";}&[aria-disabled='true']{background:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";cursor:not-allowed;}&:not([aria-disabled='true']){", StyledCenterBox, ":hover,", StyledCenterBox, ":focus{border:1px solid ", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.borderHover;
-}, ";}", StyledCenterBox, ":focus-within{box-shadow:", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.shadows.focusPrimary;
-}, ";border:1px solid ", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.primary.borderHover;
-}, ";}}");
+})("background-color:", ({
+  theme
+}) => theme.colors.neutral.background, ";display:flex;flex-direction:row;align-items:center;align-self:stretch;font-weight:500;height:", ({
+  size
+}) => containerSizes[size], "px;border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";&[data-error='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.danger.border, ";}&[aria-disabled='true']{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}&:not([aria-disabled='true']){", StyledCenterBox, ":hover,", StyledCenterBox, ":focus{border:1px solid ", ({
+  theme
+}) => theme.colors.primary.borderHover, ";}", StyledCenterBox, ":focus-within{box-shadow:", ({
+  theme
+}) => theme.shadows.focusPrimary, ";border:1px solid ", ({
+  theme
+}) => theme.colors.primary.borderHover, ";}}");
 /**
  * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
  * by typing into input.
  */
-const NumberInput = _ref21 => {
-  let {
-    disabled = false,
-    maxValue,
-    minValue = 0,
-    name = 'numberinput',
-    onChange,
-    onFocus,
-    onBlur,
-    onMaxCrossed,
-    onMinCrossed,
-    size = 'large',
-    step = 1,
-    text,
-    defaultValue,
-    value,
-    disabledTooltip,
-    className,
-    label,
-    id,
-    placeholder,
-    error,
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'data-testid': dataTestId
-  } = _ref21;
+const NumberInput = ({
+  disabled = false,
+  maxValue,
+  minValue = 0,
+  name = 'numberinput',
+  onChange,
+  onFocus,
+  onBlur,
+  onMaxCrossed,
+  onMinCrossed,
+  size = 'large',
+  step = 1,
+  text,
+  defaultValue,
+  value,
+  disabledTooltip,
+  className,
+  label,
+  id,
+  placeholder,
+  error,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'data-testid': dataTestId
+}) => {
   const inputRef = useRef();
   const uniqueId = useId();
 
@@ -182,14 +121,11 @@ const NumberInput = _ref21 => {
     return defaultValue;
   });
   const currentValue = value !== undefined && value !== null ? value : inputValue;
-  const setValue = function (newValue,
+  const setValue = (newValue,
   /**
    * If true, will check if newValue is between minValue and maxValue and set it to minValue or maxValue if it's not.
    */
-  hasMinMaxVerification) {
-    if (hasMinMaxVerification === void 0) {
-      hasMinMaxVerification = true;
-    }
+  hasMinMaxVerification = true) => {
     let nextValue = newValue;
     if (value === undefined && hasMinMaxVerification) {
       if (newValue !== undefined && newValue < minValue) {

package/dist/src/components/Pagination/getPageNumbers.js

@@ -5,10 +5,7 @@
  * @param range The number of pages wanted
  * @returns List of page numbers around currentPage
  */
-const getPageNumbers = function (currentPage, pageCount, range) {
-  if (range === void 0) {
-    range = 5;
-  }
+const getPageNumbers = (currentPage, pageCount, range = 5) => {
   const gap = Math.floor(range / 2);
   let end = currentPage + gap;
   let remaining = 0;

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

@@ -7,25 +7,16 @@ 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 PageNumbersContainer = /*#__PURE__*/_styled("div", {
   target: "e5s692s2"
-})("display:flex;gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";margin:0 ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";");
+})("display:flex;gap:", ({
+  theme
+}) => theme.space['2'], ";margin:0 ", ({
+  theme
+}) => theme.space['2'], ";");
 const PageSwitchContainer = /*#__PURE__*/_styled("div", {
   target: "e5s692s1"
-})("display:flex;gap:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['1'];
-}, ";");
+})("display:flex;gap:", ({
+  theme
+}) => theme.space['1'], ";");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e5s692s0"
 })(process.env.NODE_ENV === "production" ? {
@@ -40,16 +31,15 @@ const StyledContainer = /*#__PURE__*/_styled("div", {
  * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
  * and a list of buttons to go to a specific page.
  */
-const Pagination = _ref4 => {
-  let {
-    disabled = false,
-    page,
-    pageCount,
-    onChange,
-    pageTabCount = 5,
-    className,
-    'data-testid': dataTestId
-  } = _ref4;
+const Pagination = ({
+  disabled = false,
+  page,
+  pageCount,
+  onChange,
+  pageTabCount = 5,
+  className,
+  'data-testid': dataTestId
+}) => {
   const goToFirstPage = useCallback(() => {
     onChange(1);
   }, [onChange]);

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

@@ -6,42 +6,36 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const PasswordCheckContainer = /*#__PURE__*/_styled("div", {
   target: "eunxap90"
-})("display:grid;grid-template-columns:repeat(2, 1fr);gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";");
+})("display:grid;grid-template-columns:repeat(2, 1fr);gap:", ({
+  theme
+}) => theme.space['1'], ";");
 
 /**
  * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
  * of the rule.
  */
-const PasswordCheck = _ref2 => {
-  let {
-    rules,
-    className,
-    'data-testid': dataTestId
-  } = _ref2;
-  return jsx(PasswordCheckContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    children: rules.map(rule => jsxs(Stack, {
-      direction: "row",
-      gap: 1,
-      alignItems: "center",
-      children: [jsx(Icon, {
-        name: rule.valid ? 'checkbox-circle-outline' : 'close-circle-outline',
-        color: rule.valid ? 'success' : 'neutral',
-        prominence: "weak",
-        size: 20
-      }), jsx(Text, {
-        as: "p",
-        variant: "bodySmall",
-        children: rule.text
-      })]
-    }, rule.name))
-  });
-};
+const PasswordCheck = ({
+  rules,
+  className,
+  'data-testid': dataTestId
+}) => jsx(PasswordCheckContainer, {
+  className: className,
+  "data-testid": dataTestId,
+  children: rules.map(rule => jsxs(Stack, {
+    direction: "row",
+    gap: 1,
+    alignItems: "center",
+    children: [jsx(Icon, {
+      name: rule.valid ? 'checkbox-circle-outline' : 'close-circle-outline',
+      color: rule.valid ? 'success' : 'neutral',
+      prominence: "weak",
+      size: 20
+    }), jsx(Text, {
+      as: "p",
+      variant: "bodySmall",
+      children: rule.text
+    })]
+  }, rule.name))
+});
 
 export { PasswordCheck };

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

@@ -17,43 +17,25 @@ const StyledTitle = /*#__PURE__*/_styled(Text, {
 });
 const StyledStrength = /*#__PURE__*/_styled(Text, {
   target: "e1uv9umu2"
-})("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: "e1uv9umu1"
-})("background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";height:8px;margin-top:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['1'];
-}, ";margin-bottom:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['2'];
-}, ";");
+})("background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";height:8px;margin-top:", ({
+  theme
+}) => theme.space['1'], ";margin-bottom:", ({
+  theme
+}) => theme.space['2'], ";");
 const StyledMeter = /*#__PURE__*/_styled("div", {
   target: "e1uv9umu0"
-})("border-radius:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.radii.default;
-}, ";height:100%;transition:all 0.5s;");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";height:100%;transition:all 0.5s;");
 const DEFAULT_ESTIMATE = () => ({
   score: 0
 });
@@ -63,17 +45,16 @@ const DEFAULT_FORBIDDEN_WORDS = [];
  * PasswordStrengthMeter is a component that displays a password strength meter.
  * @deprecated use Meter component instead
  */
-const PasswordStrengthMeter = _ref7 => {
-  let {
-    password = '',
-    onChange,
-    strength,
-    title,
-    estimate = DEFAULT_ESTIMATE,
-    forbiddenInputs = DEFAULT_FORBIDDEN_WORDS,
-    className,
-    'data-testid': dataTestId
-  } = _ref7;
+const PasswordStrengthMeter = ({
+  password = '',
+  onChange,
+  strength,
+  title,
+  estimate = DEFAULT_ESTIMATE,
+  forbiddenInputs = DEFAULT_FORBIDDEN_WORDS,
+  className,
+  'data-testid': dataTestId
+}) => {
   const [score, setScore] = useState(0);
   const theme = useTheme();
   const [backgroundColor, setBackgroundColor] = useState(strength[0]?.color || theme.colors.success.backgroundStrong);