@itcase/ui 1.0.16 → 1.0.18

package/dist/components/Select.js

@@ -2,18 +2,14 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var clsx = require('clsx');
+var index$1 = require('./Icon.js');
 var Select$1 = require('react-select');
+var clsx = require('clsx');
 var defineProperty = require('../defineProperty-f9e5e1f3.js');
 var ReactDOM = require('react-dom');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$1 = require('./Icon.js');
 var index$2 = require('./Text.js');
-require('lodash/castArray');
-require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
+var index$3 = require('./Group.js');
 require('react-inlinesvg');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/iconSize.js');
@@ -21,9 +17,13 @@ require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
 require('../useStyles-e4accb53.js');
+require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
@@ -31,8 +31,13 @@ require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
+require('lodash/castArray');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/stacking.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/width.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -56,8 +61,27 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var Select__default = /*#__PURE__*/_interopDefault(Select$1);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var SelectClearIndicator = function SelectClearIndicator(props) {
+  var _props$selectProps = props.selectProps,
+    clearIcon = _props$selectProps.clearIcon,
+    clearIconFill = _props$selectProps.clearIconFill,
+    clearIconStroke = _props$selectProps.clearIconStroke;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ClearIndicator, props, clearIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+    SvgImage: clearIcon,
+    iconFill: clearIconFill,
+    iconStroke: clearIconStroke
+  }) : props.children);
+};
+SelectClearIndicator.propTypes = {
+  selectProps: PropTypes__default.default.shape({
+    clearIcon: PropTypes__default.default.string,
+    clearIconFill: PropTypes__default.default.string,
+    clearIconStroke: PropTypes__default.default.string
+  })
+};
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -7494,8 +7518,12 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var CreatableSelect$1 = CreatableSelect;
 
 var SelectControl = function SelectControl(props) {
+  var _props$selectProps = props.selectProps,
+    inputFill = _props$selectProps.inputFill,
+    inputShape = _props$selectProps.inputShape,
+    inputBorderColor = _props$selectProps.inputBorderColor;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
-    className: clsx__default.default(props.selectProps.inputFill, props.selectProps.inputShape, props.selectProps.inputBorderColor && "border-color_" + props.selectProps.inputBorderColor)
+    className: clsx__default.default(inputFill, inputShape, inputBorderColor && "border-color_" + inputBorderColor)
   }));
 };
 SelectControl.propTypes = {
@@ -7506,27 +7534,15 @@ SelectControl.propTypes = {
   })
 };
 
-var SelectClearIndicator = function SelectClearIndicator(props) {
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ClearIndicator, props, props.selectProps.clearIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
-    SvgImage: props.selectProps.clearIcon,
-    iconFill: props.selectProps.clearIconFill,
-    iconStroke: props.selectProps.clearIconStroke
-  }) : props.children);
-};
-SelectClearIndicator.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    clearIcon: PropTypes__default.default.string,
-    clearIconFill: PropTypes__default.default.string,
-    clearIconStroke: PropTypes__default.default.string
-  }),
-  children: PropTypes__default.default.any
-};
-
 var SelectDropdownIndicator = function SelectDropdownIndicator(props) {
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, props.selectProps.dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
-    SvgImage: props.selectProps.dropdownIcon,
-    iconFill: props.selectProps.dropdownIconFill,
-    iconStroke: props.selectProps.dropdownIconStroke
+  var _props$selectProps = props.selectProps,
+    dropdownIcon = _props$selectProps.dropdownIcon,
+    dropdownIconFill = _props$selectProps.dropdownIconFill,
+    dropdownIconStroke = _props$selectProps.dropdownIconStroke;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+    SvgImage: dropdownIcon,
+    iconFill: dropdownIconFill,
+    iconStroke: dropdownIconStroke
   }) : props.children);
 };
 SelectDropdownIndicator.propTypes = {
@@ -7534,13 +7550,33 @@ SelectDropdownIndicator.propTypes = {
     dropdownIcon: PropTypes__default.default.string,
     dropdownIconFill: PropTypes__default.default.string,
     dropdownIconStroke: PropTypes__default.default.string
-  }),
-  children: PropTypes__default.default.any
+  })
+};
+
+var SelectGroupHeading = function SelectGroupHeading(props) {
+  var _props$selectProps = props.selectProps,
+    headingFill = _props$selectProps.headingFill,
+    headingFillHover = _props$selectProps.headingFillHover,
+    headingTextSize = _props$selectProps.headingTextSize,
+    headingTextColor = _props$selectProps.headingTextColor;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
+    className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover)
+  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+    size: headingTextSize,
+    textColor: headingTextColor
+  }, props.data.label));
+};
+SelectGroupHeading.propTypes = {
+  selectProps: PropTypes__default.default.shape({})
 };
 
 var SelectInput = function SelectInput(props) {
+  var _props$selectProps = props.selectProps,
+    inputTextSize = _props$selectProps.inputTextSize,
+    inputTextColor = _props$selectProps.inputTextColor,
+    inputCaretColor = _props$selectProps.inputCaretColor;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Input, Object.assign({}, props, {
-    className: clsx__default.default(props.selectProps.inputTextSize && "text_size_" + props.selectProps.inputTextSize, props.selectProps.inputTextColor && "text-color_" + props.selectProps.inputTextColor, props.selectProps.inputCaretColor && "caret-color_" + props.selectProps.inputCaretColor)
+    className: clsx__default.default(inputTextSize && "text_size_" + inputTextSize, inputTextColor && "text-color_" + inputTextColor, inputCaretColor && "caret-color_" + inputCaretColor)
   }));
 };
 SelectInput.propTypes = {
@@ -7565,6 +7601,66 @@ SelectMenu.propTypes = {
   children: PropTypes__default.default.any
 };
 
+var SelectMultiValueContainer = function SelectMultiValueContainer(props) {
+  var _props$selectProps = props.selectProps,
+    multipleItemFill = _props$selectProps.multipleItemFill,
+    multipleItemFillHover = _props$selectProps.multipleItemFillHover;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Group, {
+    className: "select__multi-value-wrapper",
+    direction: "horizontal",
+    alignItems: "center",
+    gap: "4",
+    fill: multipleItemFill,
+    fillHover: multipleItemFillHover
+  }, props.children));
+};
+
+var SelectMultiValueLabel = function SelectMultiValueLabel(props) {
+  var _props$selectProps = props.selectProps,
+    multipleItemTextSize = _props$selectProps.multipleItemTextSize,
+    multipleItemTextColor = _props$selectProps.multipleItemTextColor;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+    size: multipleItemTextSize,
+    textColor: multipleItemTextColor
+  }, props.data.label));
+};
+SelectMultiValueLabel.propTypes = {};
+
+var SelectMultiValueRemove = function SelectMultiValueRemove(props) {
+  var _props$selectProps = props.selectProps,
+    multipleItemIcon = _props$selectProps.multipleItemIcon,
+    multipleItemIconFill = _props$selectProps.multipleItemIconFill;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueRemove, props, /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+    SvgImage: multipleItemIcon,
+    iconFill: multipleItemIconFill
+  }));
+};
+SelectMultiValueRemove.propTypes = {};
+
+var SelectNoOptions = function SelectNoOptions(props) {
+  var _props$selectProps = props.selectProps,
+    optionFill = _props$selectProps.optionFill,
+    optionBorder = _props$selectProps.optionBorder,
+    optionBorderType = _props$selectProps.optionBorderType,
+    noOptionsTextSize = _props$selectProps.noOptionsTextSize,
+    noOptionsTextColor = _props$selectProps.noOptionsTextColor,
+    noOptionsText = _props$selectProps.noOptionsText;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
+    className: clsx__default.default(optionFill, optionBorder, optionBorderType)
+  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
+    size: noOptionsTextSize,
+    textColor: noOptionsTextColor
+  }, noOptionsText));
+};
+SelectNoOptions.propTypes = {
+  selectProps: PropTypes__default.default.shape({
+    noOptionsTextSize: PropTypes__default.default.string,
+    noOptionsTextColor: PropTypes__default.default.string,
+    noOptionsText: PropTypes__default.default.string
+  }),
+  children: PropTypes__default.default.any
+};
+
 var SelectOption = function SelectOption(props) {
   var label = props.label,
     isSelected = props.isSelected,
@@ -7600,9 +7696,12 @@ SelectOption.propTypes = {
 };
 
 var SelectPlaceholder = function SelectPlaceholder(props) {
+  var _props$selectProps = props.selectProps,
+    placeholderTextSize = _props$selectProps.placeholderTextSize,
+    placeholderTextColor = _props$selectProps.placeholderTextColor;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
-    size: props.selectProps.placeholderTextSize,
-    textColor: props.selectProps.placeholderTextColor
+    size: placeholderTextSize,
+    textColor: placeholderTextColor
   }, props.children));
 };
 SelectPlaceholder.propTypes = {
@@ -7615,9 +7714,12 @@ SelectPlaceholder.propTypes = {
 
 var SelectSingleValue = function SelectSingleValue(props) {
   var data = props.data;
+  var _props$selectProps = props.selectProps,
+    inputTextSize = _props$selectProps.inputTextSize,
+    inputTextColor = _props$selectProps.inputTextColor;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
-    size: props.selectProps.inputTextSize,
-    textColor: props.selectProps.inputTextColor
+    size: inputTextSize,
+    textColor: inputTextColor
   }, props.children), data.optionAfter);
 };
 SelectSingleValue.propTypes = {
@@ -7644,44 +7746,6 @@ SelectValueContainer.propTypes = {
   })
 };
 
-var SelectNoOptions = function SelectNoOptions(props) {
-  var _props$selectProps = props.selectProps,
-    optionFill = _props$selectProps.optionFill,
-    optionBorder = _props$selectProps.optionBorder,
-    optionBorderType = _props$selectProps.optionBorderType;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
-    className: clsx__default.default(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$2.Text, {
-    size: props.selectProps.noOptionsTextSize,
-    textColor: props.selectProps.noOptionsTextColor
-  }, props.selectProps.noOptionsText));
-};
-SelectNoOptions.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    noOptionsTextSize: PropTypes__default.default.string,
-    noOptionsTextColor: PropTypes__default.default.string,
-    noOptionsText: PropTypes__default.default.string
-  }),
-  children: PropTypes__default.default.any
-};
-
-var SelectGroupHeading = function SelectGroupHeading(props) {
-  var _props$selectProps = props.selectProps,
-    headingFill = _props$selectProps.headingFill,
-    headingFillHover = _props$selectProps.headingFillHover,
-    headingBorder = _props$selectProps.headingBorder,
-    headingBorderType = _props$selectProps.headingBorderType,
-    headingTextSize = _props$selectProps.headingTextSize,
-    headingTextColor = _props$selectProps.headingTextColor,
-    headingShape = _props$selectProps.headingShape;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
-    className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover, headingBorder, headingBorderType, headingTextSize, headingTextColor, headingShape)
-  }));
-};
-SelectGroupHeading.propTypes = {
-  selectProps: PropTypes__default.default.shape({})
-};
-
 var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function SelectContainer(props, ref) {
   var clearStyle = React.useMemo(function () {
     return new Proxy({}, {
@@ -7698,6 +7762,10 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     dropdownIcon = props.dropdownIcon,
     dropdownIconFill = props.dropdownIconFill,
     dropdownIconStroke = props.dropdownIconStroke,
+    multipleItemIcon = props.multipleItemIcon,
+    multipleItemIconFill = props.multipleItemIconFill,
+    multipleItemFill = props.multipleItemFill,
+    multipleItemFillHover = props.multipleItemFillHover,
     filterOption = props.filterOption,
     key = props.key,
     initialValue = props.initialValue,
@@ -7773,6 +7841,12 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
   var inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'inputTextColor'
   });
+  var multipleItemTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'multipleItemTextSize'
+  });
+  var multipleItemTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'multipleItemTextColor'
+  });
   var inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'inputBorderColor'
   });
@@ -7799,23 +7873,12 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     prefix: 'fill_hover_',
     propsKey: 'headingFillHover'
   });
-  var headingBorderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'headingBorder'
-  });
-  var headingBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_',
-    propsKey: 'headingBorderType'
-  });
   var headingTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'headingTextSize'
   });
   var headingTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'headingTextColor'
   });
-  var headingShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'headingShape'
-  });
   var SelectComponent = React.useMemo(function () {
     return isCreatable ? CreatableSelect$1 : Select__default.default;
   }, [isCreatable]);
@@ -7867,9 +7930,12 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
     headingFillHover: headingFillHoverClass,
     headingTextSize: headingTextSizeClass,
     headingTextColor: headingTextColorClass,
-    headingShape: headingShapeClass,
-    headingBorder: headingBorderClass,
-    headingBorderType: headingBorderTypeClass,
+    multipleItemFill: multipleItemFill,
+    multipleItemFillHover: multipleItemFillHover,
+    multipleItemTextSize: multipleItemTextSizeClass,
+    multipleItemTextColor: multipleItemTextColorClass,
+    multipleItemIcon: multipleItemIcon,
+    multipleItemIconFill: multipleItemIconFill,
     options: options,
     ref: ref,
     components: {
@@ -7881,6 +7947,9 @@ var SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function
       },
       Input: SelectInput,
       Menu: SelectMenu,
+      MultiValueContainer: SelectMultiValueContainer,
+      MultiValueRemove: SelectMultiValueRemove,
+      MultiValueLabel: SelectMultiValueLabel,
       Option: SelectOption,
       SingleValue: SelectSingleValue,
       Placeholder: SelectPlaceholder,
@@ -7924,6 +7993,9 @@ exports.SelectDropdownIndicator = SelectDropdownIndicator;
 exports.SelectGroupHeading = SelectGroupHeading;
 exports.SelectInput = SelectInput;
 exports.SelectMenu = SelectMenu;
+exports.SelectMultiValueContainer = SelectMultiValueContainer;
+exports.SelectMultiValueLabel = SelectMultiValueLabel;
+exports.SelectMultiValueRemove = SelectMultiValueRemove;
 exports.SelectOption = SelectOption;
 exports.SelectPlaceholder = SelectPlaceholder;
 exports.SelectSingleValue = SelectSingleValue;

package/dist/components/Tab.js

@@ -3,9 +3,10 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
+var index$2 = require('./Badge.js');
 var index$1 = require('./Text.js');
 var index = require('./Link.js');
-var index$2 = require('./Divider.js');
+var index$3 = require('./Divider.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
 var textColorActive = require('../constants/componentProps/textColorActive.js');
@@ -23,6 +24,7 @@ var direction = require('../constants/componentProps/direction.js');
 var stacking = require('../constants/componentProps/stacking.js');
 var wrap = require('../constants/componentProps/wrap.js');
 var width = require('../constants/componentProps/width.js');
+require('../constants/componentProps/borderType.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -75,13 +77,12 @@ function Tab(props) {
     dividerSize = props.dividerSize,
     dividerDirection = props.dividerDirection,
     onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter;
-    props.badge;
-    props.badgeSize;
-    props.badgeFill;
-    props.badgeTextColor;
-    props.badgeTextSize;
-    props.badgeValue;
+    onMouseEnter = props.onMouseEnter,
+    badgeSize = props.badgeSize,
+    badgeFill = props.badgeFill,
+    badgeTextColor = props.badgeTextColor,
+    badgeTextSize = props.badgeTextSize,
+    badgeValue = props.badgeValue;
   var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
@@ -146,7 +147,9 @@ function Tab(props) {
     fill: linkFillClass,
     target: target,
     rel: rel
-  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "tab__wrapper"
+  }, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tab__label",
     textColorActive: isActive && labelColorActive || appearance && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textGradient: labelTextGradient,
@@ -156,7 +159,13 @@ function Tab(props) {
     textWrap: labelTextWrap,
     textColorHover: labelTextColorHover,
     textStyle: labelTextStyle
-  }, dividerFillActive, " ", label), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
+  }, dividerFillActive, " ", label), badgeValue && /*#__PURE__*/React__default.default.createElement(index$2.Badge, {
+    size: badgeSize,
+    fill: badgeFill,
+    textColor: badgeTextColor,
+    textSize: badgeTextSize,
+    value: badgeValue
+  })), /*#__PURE__*/React__default.default.createElement(index$3.Divider, {
     width: "fill",
     fill: dividerFill || appearance && tabConfig.appearance[appearance].dividerFill.replace(/([A-Z])/g, '-$1').toLowerCase(),
     fillHover: isHover && (dividerFillHover || appearance && tabConfig.appearance[appearance].dividerFillHover.replace(/([A-Z])/g, '-$1').toLowerCase()),

package/dist/css/components/Code/Code.css

@@ -0,0 +1,55 @@
+.code {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  &__group {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    ^&__input {
+      text-align: center;
+    }
+  }
+}
+.code {
+  &__group {
+    ^&__input {
+      @each $size in tiny, middle, large {
+        &.input_size_$(size) {
+          max-width: var(--code-input-size-$(size)-width);
+          max-height: var(--code-input-size-$(size)-height);
+          min-width: var(--code-input-size-$(size)-width);
+          min-height: var(--code-input-size-$(size)-height);
+          padding: var(--code-input-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}
+.code {
+  &__group {
+    ^&__input {
+      &.input_shape {
+        &_rounded {
+          border-radius: 8px;
+        }
+        &_circular {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+:root {
+  --code-input-size-tiny-width: 24px;
+  --code-input-size-tiny-height: 24px;
+  --code-input-size-tiny-padding: 5px;
+
+  --code-input-size-middle-width: 48px;
+  --code-input-size-middle-height: 48px;
+  --code-input-size-middle-padding: 10px 12px;
+}