@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/Accordion/Accordion.js

@@ -5,63 +5,75 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import AccordionItem from '../AccordionItem/AccordionItem.js';
 
-const AccordionContainer = styled.div `
-    ${p => p.type === 'box' &&
-    css `
-            & > * {
-                margin: ${getMultipliedSize(theme.base.baseHeight, 1)} 0;
-            }
-
-            & > *:first-of-type {
-                margin-top: 0;
-            }
-
-            & > *:last-of-type {
-                margin-bottom: 0;
-            }
-        `}
-`;
+const AccordionContainer = styled.div.withConfig({
+  displayName: "Accordion__AccordionContainer",
+  componentId: "sc-3uv127-0"
+})(["", ""], p => p.type === 'box' && css(["& > *{margin:", " 0;}& > *:first-of-type{margin-top:0;}& > *:last-of-type{margin-bottom:0;}"], getMultipliedSize(theme.base.baseHeight, 1)));
 /** @visibleName Accordion */
-const Accordion = (_a) => {
-    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
-    const initialItemList = {};
-    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
-    if (props.isExpanded) {
-        Children.map(props.children, (child, index) => {
-            if (isValidElement(child) && child.type === AccordionItem) {
-                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
-            }
-        });
-    }
-    const [itemList, setItemList] = useState(initialItemList);
-    const toggleExpanded = (currentItemId) => {
-        if (currentItemId) {
-            const currentItemState = itemList[currentItemId];
-            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
-        }
-    };
-    const handleClick = (e) => {
-        var _a, _b;
-        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-        }
-    };
-    const accordionItems = Children.map(props.children, (child, index) => {
-        if (isValidElement(child) && child.type === AccordionItem) {
-            const id = getAccordionItemId(index, child.props.title);
-            return (React__default.createElement(AccordionItem, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
-        }
-        return null;
+const Accordion = _a => {
+  var {
+      type = 'box',
+      autoCollapsible = false,
+      highlightSelected = type === 'panel',
+      hasCloseButton = false
+    } = _a,
+    props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
+  const initialItemList = {};
+  const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
+  if (props.isExpanded) {
+    Children.map(props.children, (child, index) => {
+      if (/*#__PURE__*/isValidElement(child) && child.type === AccordionItem) {
+        initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+      }
     });
-    if (!accordionItems) {
-        return null;
+  }
+  const [itemList, setItemList] = useState(initialItemList);
+  const toggleExpanded = currentItemId => {
+    if (currentItemId) {
+      const currentItemState = itemList[currentItemId];
+      setItemList(Object.assign(Object.assign({}, autoCollapsible ? {} : itemList), {
+        [currentItemId]: !currentItemState
+      }));
+    }
+  };
+  const handleClick = e => {
+    var _a, _b;
+    toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+  };
+  const handleKeyDown = e => {
+    var _a, _b;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+    }
+  };
+  const accordionItems = Children.map(props.children, (child, index) => {
+    if (/*#__PURE__*/isValidElement(child) && child.type === AccordionItem) {
+      const id = getAccordionItemId(index, child.props.title);
+      return /*#__PURE__*/React__default.createElement(AccordionItem, {
+        id: id,
+        key: id,
+        type: type,
+        title: child.props.title,
+        isExpanded: itemList[id],
+        highlightSelected: highlightSelected,
+        hasCloseButton: hasCloseButton,
+        openLabel: props.openLabel,
+        closeLabel: props.closeLabel,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: child.props.className
+      }, child.props.children);
     }
-    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+    return null;
+  });
+  if (!accordionItems) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(AccordionContainer, {
+    type: type,
+    className: props.className
+  }, accordionItems);
 };
 
 export { Accordion as default };

package/build/es/components/AccordionItem/AccordionItem.js

@@ -8,80 +8,101 @@ import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
 
-const AccordionItemContainer = styled.div `
-    ${p => p.type === 'panel' &&
-    css `
-            border-bottom: 1px solid ${theme.color.line.L02};
-        `}
-`;
-const AccordionItemTitle = styled.div `
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    cursor: ${p => (p.$showPointer ? 'pointer' : 'default')};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)}
-        ${getMultipliedSize(theme.base.baseHeight, 2)};
-    color: ${p => p.$isExpanded && p.$highlightSelected
-    ? theme.color.default.pink
-    : theme.color.default.black};
-    transition: color 0.2s;
-    ${p => p.$highlightSelected &&
-    css `
-            &:hover,
-            &:active {
-                color: ${theme.color.default.pink};
-                text-decoration: none;
-            }
-        `}
-`;
-const AccordionItemContentWrapper = styled.div `
-    overflow: hidden;
-    transition: all 0.2s ease;
-    height: ${p => (p.$isExpanded ? p.$maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
-    visibility: ${p => (p.$isExpanded ? 'visible' : 'hidden')};
-`;
-const AccordionItemContent = styled.div `
-    padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-`;
-const AccordionItemCloseButton = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    line-height: ${theme.lineHeight.default};
-    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
-    gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    cursor: pointer;
-`;
+const AccordionItemContainer = styled.div.withConfig({
+  displayName: "AccordionItem__AccordionItemContainer",
+  componentId: "sc-1xo11yu-0"
+})(["", ""], p => p.type === 'panel' && css(["border-bottom:1px solid ", ";"], theme.color.line.L02));
+const AccordionItemTitle = styled.div.withConfig({
+  displayName: "AccordionItem__AccordionItemTitle",
+  componentId: "sc-1xo11yu-1"
+})(["font-size:", ";line-height:", ";font-weight:", ";display:flex;justify-content:space-between;flex-direction:row;cursor:", ";padding:", " ", ";color:", ";transition:color 0.2s;", ""], theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.bold, p => p.$showPointer ? 'pointer' : 'default', getMultipliedSize(theme.base.baseHeight, 1.6), getMultipliedSize(theme.base.baseHeight, 2), p => p.$isExpanded && p.$highlightSelected ? theme.color.default.pink : theme.color.default.black, p => p.$highlightSelected && css(["&:hover,&:active{color:", ";text-decoration:none;}"], theme.color.default.pink));
+const AccordionItemContentWrapper = styled.div.withConfig({
+  displayName: "AccordionItem__AccordionItemContentWrapper",
+  componentId: "sc-1xo11yu-2"
+})(["overflow:hidden;transition:all 0.2s ease;height:", "rem;padding:0 ", ";visibility:", ";"], p => p.$isExpanded ? p.$maxHeight / 16 + 1.25 : 0, getMultipliedSize(theme.base.baseHeight, 2), p => p.$isExpanded ? 'visible' : 'hidden');
+const AccordionItemContent = styled.div.withConfig({
+  displayName: "AccordionItem__AccordionItemContent",
+  componentId: "sc-1xo11yu-3"
+})(["padding-bottom:", ";"], getMultipliedSize(theme.base.baseHeight, 1.6));
+const AccordionItemCloseButton = styled.div.withConfig({
+  displayName: "AccordionItem__AccordionItemCloseButton",
+  componentId: "sc-1xo11yu-4"
+})(["display:flex;justify-content:flex-end;line-height:", ";margin-bottom:", ";padding:0 ", ";gap:", ";cursor:pointer;"], theme.lineHeight.default, getMultipliedSize(theme.base.baseHeight, 1.6), getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 1));
 /** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var _b, _c;
-    var { 'data-testid': dataTestId = 'accordion-item', type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ['data-testid', "type", "hasCloseButton", "highlightSelected"]);
-    const contentRef = useRef(null);
-    const accordionButtonRef = useRef(null);
-    // Get height when element dimensions change
-    const { height: contentHeight } = useResizeObserver(contentRef);
-    const accordionContentId = `accordion-content-id-${(_b = props.id) !== null && _b !== void 0 ? _b : ''}`;
-    const accordionButtonId = `accordion-button-id-${(_c = props.id) !== null && _c !== void 0 ? _c : ''}`;
-    const handleInteraction = (callback, event) => {
-        callback === null || callback === void 0 ? void 0 : callback(event);
-        if (accordionButtonRef.current)
-            accordionButtonRef.current.focus();
-    };
-    const hasFunctionality = Boolean(props.onClick || props.onKeyDown);
-    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(AccordionItemTitle, { ref: accordionButtonRef, id: accordionButtonId, tabIndex: hasFunctionality ? 0 : -1, onClick: props.onClick, onKeyDown: props.onKeyDown, "$isExpanded": Boolean(props.isExpanded), "$highlightSelected": highlightSelected, "aria-expanded": Boolean(props.isExpanded), "aria-controls": accordionContentId, "$showPointer": hasFunctionality, "data-testid": `${dataTestId}-title`, role: "button" },
-            props.title,
-            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.createElement(AccordionItemContentWrapper, { "$maxHeight": contentHeight, "$isExpanded": props.isExpanded, "aria-labelledby": accordionButtonId, "aria-hidden": !props.isExpanded, "data-testid": `${dataTestId}-content`, role: "region" },
-            React__default.createElement(AccordionItemContent, { id: accordionContentId, ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: e => handleInteraction(props.onClick, e), onKeyDown: e => handleInteraction(props.onKeyDown, e), "aria-label": props.closeLabel, "data-testid": `${dataTestId}-close-button`, role: "button" },
-            React__default.createElement("span", null, props.closeLabel),
-            React__default.createElement(Icon, { icon: Close })))));
-    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+const AccordionItem = _a => {
+  var _b, _c;
+  var {
+      'data-testid': dataTestId = 'accordion-item',
+      type = 'box',
+      hasCloseButton = false,
+      highlightSelected = type === 'panel'
+    } = _a,
+    props = __rest(_a, ['data-testid', "type", "hasCloseButton", "highlightSelected"]);
+  const contentRef = useRef(null);
+  const accordionButtonRef = useRef(null);
+  // Get height when element dimensions change
+  const {
+    height: contentHeight
+  } = useResizeObserver(contentRef);
+  const accordionContentId = `accordion-content-id-${(_b = props.id) !== null && _b !== void 0 ? _b : ''}`;
+  const accordionButtonId = `accordion-button-id-${(_c = props.id) !== null && _c !== void 0 ? _c : ''}`;
+  const handleInteraction = (callback, event) => {
+    callback === null || callback === void 0 ? void 0 : callback(event);
+    if (accordionButtonRef.current) accordionButtonRef.current.focus();
+  };
+  const hasFunctionality = Boolean(props.onClick || props.onKeyDown);
+  const itemContent = /*#__PURE__*/React__default.createElement(AccordionItemContainer, {
+    id: props.id,
+    type: type,
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(AccordionItemTitle, {
+    ref: accordionButtonRef,
+    id: accordionButtonId,
+    tabIndex: hasFunctionality ? 0 : -1,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    "$isExpanded": Boolean(props.isExpanded),
+    "$highlightSelected": highlightSelected,
+    "aria-expanded": Boolean(props.isExpanded),
+    "aria-controls": accordionContentId,
+    "$showPointer": hasFunctionality,
+    "data-testid": `${dataTestId}-title`,
+    role: "button"
+  }, props.title, props.isExpanded ? (/*#__PURE__*/React__default.createElement(Icon, {
+    icon: ChevronUp,
+    color: theme.color.default.black,
+    position: "right",
+    "aria-label": props.closeLabel
+  })) : (/*#__PURE__*/React__default.createElement(Icon, {
+    icon: ChevronDown,
+    color: theme.color.default.black,
+    position: "right",
+    "aria-label": props.openLabel
+  }))), /*#__PURE__*/React__default.createElement(AccordionItemContentWrapper, {
+    "$maxHeight": contentHeight,
+    "$isExpanded": props.isExpanded,
+    "aria-labelledby": accordionButtonId,
+    "aria-hidden": !props.isExpanded,
+    "data-testid": `${dataTestId}-content`,
+    role: "region"
+  }, /*#__PURE__*/React__default.createElement(AccordionItemContent, {
+    id: accordionContentId,
+    ref: contentRef
+  }, props.children)), hasCloseButton && props.isExpanded && (/*#__PURE__*/React__default.createElement(AccordionItemCloseButton, {
+    tabIndex: 0,
+    onClick: e => handleInteraction(props.onClick, e),
+    onKeyDown: e => handleInteraction(props.onKeyDown, e),
+    "aria-label": props.closeLabel,
+    "data-testid": `${dataTestId}-close-button`,
+    role: "button"
+  }, /*#__PURE__*/React__default.createElement("span", null, props.closeLabel), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: Close
+  }))));
+  return type === 'box' ? (/*#__PURE__*/React__default.createElement(Box, {
+    elevation: props.isExpanded ? 'low' : 'none',
+    padding: "0"
+  }, itemContent)) : itemContent;
 };
 
 export { AccordionItem as default };

package/build/es/components/AmountSelector/AmountSelector.js

@@ -6,147 +6,134 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonArrow from '../ButtonArrow/ButtonArrow.js';
 
-const Container = styled.div `
-    display: flex;
-    width: ${getMultipliedSize(theme.base.baseWidth, 12)};
-`;
-const Button = styled(ButtonArrow) `
-    display: inline-flex;
-    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
-    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    border-radius: 0;
-
-    &:first-of-type {
-        border-top-left-radius: ${theme.radius.s};
-        border-bottom-left-radius: ${theme.radius.s};
-
-        &:focus {
-            z-index: 2;
-        }
+const Container = styled.div.withConfig({
+  displayName: "AmountSelector__Container",
+  componentId: "sc-1m6b253-0"
+})(["display:flex;width:", ";"], getMultipliedSize(theme.base.baseWidth, 12));
+const Button = styled(ButtonArrow).withConfig({
+  displayName: "AmountSelector__Button",
+  componentId: "sc-1m6b253-1"
+})(["display:inline-flex;width:", ";height:", ";border-radius:0;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";&:focus{z-index:2;}}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:disabled,&[disabled]{background-color:", ";border:1px solid ", ";pointer-events:auto;cursor:not-allowed;svg{opacity:0.3;}}"], getMultipliedSize(theme.base.baseWidth, 4), getMultipliedSize(theme.base.baseHeight, 4), theme.radius.s, theme.radius.s, theme.radius.s, theme.radius.s, theme.color.background.sand.E02 + theme.color.transparency.T30, theme.color.line.L01);
+const Input = styled.input.withConfig({
+  displayName: "AmountSelector__Input",
+  componentId: "sc-1m6b253-2"
+})(["width:", ";height:", ";font-family:", ";font-size:", ";text-align:center;border:0 none;border-radius:0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:focus{border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";outline:none;z-index:2;}&:disabled,&[disabled]{background-color:", ";border:1px solid ", ";svg{opacity:0.3;}}&:read-only{pointer-events:none;}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{display:none;}-webkit-appearance:none;-moz-appearance:textfield;"], getMultipliedSize(theme.base.baseWidth, 4), getMultipliedSize(theme.base.baseHeight, 4), theme.fontFamily.default, theme.fontSize.default, theme.color.line.L01, theme.color.line.L01, theme.color.focus.light, theme.color.focus.dark, theme.color.background.sand.E02 + theme.color.transparency.T30, theme.color.transparency.T30 + theme.color.line.L01);
+/** @visibleName Amount Selector */
+const AmountSelector = _a => {
+  var {
+      onChange,
+      value = 1,
+      step = 1,
+      min = 1,
+      max,
+      disabled = false,
+      readonly = true,
+      'data-testid': dataTestId,
+      increaseButtonAriaLabel,
+      decreaseButtonAriaLabel,
+      removeButtonAriaLabel,
+      inputAriaLabel
+    } = _a,
+    props = __rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid', "increaseButtonAriaLabel", "decreaseButtonAriaLabel", "removeButtonAriaLabel", "inputAriaLabel"]);
+  const isMinReached = val => val < min;
+  const isMaxReached = val => Boolean(max && val > max);
+  const isInRange = val => !isMinReached(val) && !isMaxReached(val);
+  const increase = () => {
+    const newValue = value + step;
+    if (!isMaxReached(newValue) && !disabled) {
+      onChange(newValue);
     }
-
-    &:last-of-type {
-        border-top-right-radius: ${theme.radius.s};
-        border-bottom-right-radius: ${theme.radius.s};
+  };
+  const decrease = () => {
+    const newValue = value - step;
+    if (!disabled && (!isMinReached(newValue) || props.removable)) {
+      onChange(newValue);
     }
-
-    &:disabled,
-    &[disabled] {
-        background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
-        border: 1px solid ${theme.color.line.L01};
-        pointer-events: auto;
-        cursor: not-allowed;
-        svg {
-            opacity: 0.3;
-        }
+  };
+  const handleChange = event => {
+    if (event.target.value) {
+      const integerInputValue = parseInt(event.target.value, 10);
+      if (isInRange(integerInputValue)) {
+        onChange(integerInputValue);
+      } else {
+        onChange(max && isMaxReached(integerInputValue) ? max : min);
+      }
+    } else {
+      onChange(min);
     }
-`;
-const Input = styled.input `
-    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
-    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    text-align: center;
-    border: 0 none;
-    border-radius: 0;
-    border-top: 1px solid ${theme.color.line.L01};
-    border-bottom: 1px solid ${theme.color.line.L01};
-
-    &:focus {
-        border: 2px solid ${theme.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-        outline: none;
-        z-index: 2;
+  };
+  const getMinButtonAriaLabel = () => {
+    if (props.removable && isMinReached(value - step)) {
+      return removeButtonAriaLabel;
     }
-
-    &:disabled,
-    &[disabled] {
-        background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
-        border: 1px solid ${theme.color.transparency.T30 + theme.color.line.L01};
-        svg {
-            opacity: 0.3;
-        }
+    if (decreaseButtonAriaLabel) {
+      return decreaseButtonAriaLabel;
     }
-
-    &:read-only {
-        pointer-events: none;
+    return undefined;
+  };
+  const handleKeyDown = e => {
+    const allowedKeys = new Set(['Tab', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight']);
+    if (/^[0-9]$/.test(e.key) || allowedKeys.has(e.key)) {
+      return;
     }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        display: none;
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (!isMaxReached(value + step)) {
+        onChange(value + step);
+      }
+      return;
     }
-
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-`;
-/** @visibleName Amount Selector */
-const AmountSelector = (_a) => {
-    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, increaseButtonAriaLabel, decreaseButtonAriaLabel, removeButtonAriaLabel, inputAriaLabel } = _a, props = __rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid', "increaseButtonAriaLabel", "decreaseButtonAriaLabel", "removeButtonAriaLabel", "inputAriaLabel"]);
-    const isMinReached = (val) => val < min;
-    const isMaxReached = (val) => Boolean(max && val > max);
-    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
-    const increase = () => {
-        const newValue = value + step;
-        if (!isMaxReached(newValue) && !disabled) {
-            onChange(newValue);
-        }
-    };
-    const decrease = () => {
-        const newValue = value - step;
-        if (!disabled && (!isMinReached(newValue) || props.removable)) {
-            onChange(newValue);
-        }
-    };
-    const handleChange = (event) => {
-        if (event.target.value) {
-            const integerInputValue = parseInt(event.target.value, 10);
-            if (isInRange(integerInputValue)) {
-                onChange(integerInputValue);
-            }
-            else {
-                onChange(max && isMaxReached(integerInputValue) ? max : min);
-            }
-        }
-        else {
-            onChange(min);
-        }
-    };
-    const getMinButtonAriaLabel = () => {
-        if (props.removable && isMinReached(value - step)) {
-            return removeButtonAriaLabel;
-        }
-        if (decreaseButtonAriaLabel) {
-            return decreaseButtonAriaLabel;
-        }
-        return undefined;
-    };
-    const handleKeyDown = (e) => {
-        const allowedKeys = new Set(['Tab', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight']);
-        if (/^[0-9]$/.test(e.key) || allowedKeys.has(e.key)) {
-            return;
-        }
-        if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            if (!isMaxReached(value + step)) {
-                onChange(value + step);
-            }
-            return;
-        }
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            if (!isMinReached(value - step)) {
-                onChange(value - step);
-            }
-            return;
-        }
-        e.preventDefault();
-    };
-    return (React__default.createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default.createElement(Button, { icon: props.removable && isMinReached(value - step) ? (React__default.createElement(Trash, { size: getMultipliedSize(theme.base.baseWidth, 2) })) : (React__default.createElement(Minus, { size: getMultipliedSize(theme.base.baseWidth, 2) })), variant: "secondary", onClick: decrease, disabled: disabled || (isMinReached(value - step) && !props.removable), type: "button", "aria-label": getMinButtonAriaLabel(), "data-testid": dataTestId &&
-                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, min: min, max: max, step: step, readOnly: readonly || disabled, disabled: disabled, "aria-label": inputAriaLabel, onKeyDown: handleKeyDown, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }),
-        React__default.createElement(Button, { icon: React__default.createElement(Plus, { size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled || isMaxReached(value + step), type: "button", "aria-label": increaseButtonAriaLabel || undefined, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!isMinReached(value - step)) {
+        onChange(value - step);
+      }
+      return;
+    }
+    e.preventDefault();
+  };
+  return /*#__PURE__*/React__default.createElement(Container, {
+    "data-testid": dataTestId,
+    className: props.className
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    icon: props.removable && isMinReached(value - step) ? (/*#__PURE__*/React__default.createElement(Trash, {
+      size: getMultipliedSize(theme.base.baseWidth, 2)
+    })) : (/*#__PURE__*/React__default.createElement(Minus, {
+      size: getMultipliedSize(theme.base.baseWidth, 2)
+    })),
+    variant: "secondary",
+    onClick: decrease,
+    disabled: disabled || isMinReached(value - step) && !props.removable,
+    type: "button",
+    "aria-label": getMinButtonAriaLabel(),
+    "data-testid": dataTestId && `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}`
+  }), /*#__PURE__*/React__default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: "number",
+    onChange: handleChange,
+    value: value,
+    min: min,
+    max: max,
+    step: step,
+    readOnly: readonly || disabled,
+    disabled: disabled,
+    "aria-label": inputAriaLabel,
+    onKeyDown: handleKeyDown,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    icon: /*#__PURE__*/React__default.createElement(Plus, {
+      size: getMultipliedSize(theme.base.baseWidth, 2)
+    }),
+    variant: "secondary",
+    onClick: increase,
+    disabled: disabled || isMaxReached(value + step),
+    type: "button",
+    "aria-label": increaseButtonAriaLabel || undefined,
+    "data-testid": dataTestId ? `${dataTestId}-increase` : undefined
+  }));
 };
 
 export { AmountSelector as default };

package/build/es/components/Box/Box.js

@@ -5,19 +5,44 @@ import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const BoxWrapper = styled.div `
-    border: 1px solid ${theme.color.line.L04};
-    ${({ width }) => width && `width: ${width}`};
-    ${({ height }) => height && `height: ${height}`};
-    ${({ $margin }) => $margin && `margin: ${$margin}`};
-    padding: ${({ $padding }) => $padding || getMultipliedSize(theme.base.baseHeight, 2)};
-    background-color: ${theme.color.default.white};
-    border-radius: ${theme.radius.default};
-    ${({ $elevation, $shadow }) => $elevation !== 'none' && getElevationShadow({ elevation: $elevation, shadow: $shadow })}
-`;
-const Box = (_a) => {
-    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["elevation", 'data-testid']);
-    return (React__default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, "$shadow": props.shadow, "$margin": props.margin, "$padding": props.padding, width: props.width, height: props.height, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel, "aria-live": props.ariaLive }, props.children));
+const BoxWrapper = styled.div.withConfig({
+  displayName: "Box__BoxWrapper",
+  componentId: "sc-d3vc67-0"
+})(["border:1px solid ", ";", ";", ";", ";padding:", ";background-color:", ";border-radius:", ";", ""], theme.color.line.L04, ({
+  width
+}) => width && `width: ${width}`, ({
+  height
+}) => height && `height: ${height}`, ({
+  $margin
+}) => $margin && `margin: ${$margin}`, ({
+  $padding
+}) => $padding || getMultipliedSize(theme.base.baseHeight, 2), theme.color.default.white, theme.radius.default, ({
+  $elevation,
+  $shadow
+}) => $elevation !== 'none' && getElevationShadow({
+  elevation: $elevation,
+  shadow: $shadow
+}));
+const Box = _a => {
+  var {
+      elevation = 'none',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["elevation", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(BoxWrapper, {
+    id: props.id,
+    "$elevation": elevation,
+    "$shadow": props.shadow,
+    "$margin": props.margin,
+    "$padding": props.padding,
+    width: props.width,
+    height: props.height,
+    className: props.className,
+    "data-testid": dataTestId,
+    role: props.role,
+    "aria-label": props.ariaLabel,
+    "aria-live": props.ariaLive
+  }, props.children);
 };
 
 export { Box as default };