@itcase/ui 1.0.95 → 1.0.97

package/dist/components/FormField.js

@@ -15,7 +15,7 @@ require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 var index$4 = require('./Switch.js');
-var SelectContainer = require('../SelectContainer-umrbJtB5.js');
+var index$5 = require('./Select.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/width.js');
 require('lodash/maxBy');
@@ -44,8 +44,8 @@ require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
 require('react-select');
-require('../defineProperty-ujK-k7aM.js');
 require('react-dom');
+require('../floating-ui.dom-D_Zct5p2.js');
 require('./Badge.js');
 require('./Group.js');
 require('../constants/componentProps/stacking.js');
@@ -529,7 +529,7 @@ function SelectField(props) {
     selectInputTextSize,
     selectInputTextColor
   } = props;
-  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(SelectContainer.SelectInput, {
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$5.SelectInput, {
     className: clsx__default.default(selectInputClass, className),
     fill: selectFill,
     shape: selectShape,

package/dist/components/Grid.js

@@ -36,6 +36,7 @@ function Grid(props) {
     children,
     className,
     horizontalResizing,
+    scroll,
     onClick,
     type,
     useGridSystem,
@@ -101,7 +102,7 @@ function Grid(props) {
     gridWrapperInner: gridWrapperInnerStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, scroll && `grid_scroll_${scroll}`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
     "data-tour": dataTour,
     id: id,
     style: gridStyles,
@@ -831,6 +832,7 @@ function GridItem(props) {
   const {
     styles: gridItemStyles
   } = useStyles.useStyles(props);
+  console.log(justifySelfClass);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     "data-tour": dataTour,

package/dist/components/Group.js

@@ -26,8 +26,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const groupConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    groupConfig.appearance = newComponent;
+  }
+};
 function Group(props) {
   const {
+    appearance,
     id,
     children,
     className,
@@ -116,7 +123,7 @@ function Group(props) {
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass || groupConfig.appearance[appearance] && `group_direction_${groupConfig.appearance[appearance].direction}`.replace(/([A-Z])/g, '-$1').toLowerCase(), alignClass, fillClass || groupConfig.appearance[appearance] && `fill_${groupConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || groupConfig.appearance[appearance] && `fill_hover_${groupConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass || groupConfig.appearance[appearance] && `border-color_${groupConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass || groupConfig.appearance[appearance] && `border-width_${groupConfig.appearance[appearance].borderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     id: id,
@@ -305,3 +312,4 @@ Group.__docgenInfo = {
 };
 
 exports.Group = Group;
+exports.groupConfig = groupConfig;

package/dist/components/Input.js

@@ -20,10 +20,15 @@ const inputConfig = {
   state: {},
   setState: newComponent => {
     inputConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputConfig.appearance = newComponent;
   }
 };
 const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
   const {
+    appearance,
     state,
     id,
     index,
@@ -109,7 +114,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
   // }
 
   return /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass, textSizeClass, weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass, !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputConfig.appearance[appearance] && `input_shape_${inputConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputConfig.appearance[appearance] && `text_size_${inputConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputConfig.appearance[appearance] && `input_size_${inputConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputConfig.appearance[appearance]?.borderColor && `border-color_${inputConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.appearance[appearance]?.textColor && `text-color_${inputConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: type,
     id: id,
     index: index,

package/dist/components/InputPassword.js

@@ -48,10 +48,15 @@ const inputPasswordConfig = {
   state: {},
   setState: newComponent => {
     inputPasswordConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputPasswordConfig.appearance = newComponent;
   }
 };
 function InputPassword(props) {
   const {
+    appearance,
     state,
     id,
     iconFill,
@@ -125,7 +130,7 @@ function InputPassword(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "input-password"
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass, textSizeClass, weightClass, widthClass, borderWidthClass, sizeClass, borderColorClass || inputPasswordConfig.state[state]?.borderColor && `border-color_${inputPasswordConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputPasswordConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputPasswordConfig.state[state]?.textColor && `text-color_${inputPasswordConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass || inputPasswordConfig.appearance[appearance] && `input-password__input_shape_${inputPasswordConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputPasswordConfig.appearance[appearance] && `text_size_${inputPasswordConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, borderWidthClass, sizeClass || inputPasswordConfig.appearance[appearance] && `input-password__input_size_${inputPasswordConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputPasswordConfig.state[state]?.borderColor && `border-color_${inputPasswordConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.borderColor && `border-color_${inputPasswordConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputPasswordConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputPasswordConfig.state[state]?.textColor && `text-color_${inputPasswordConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.textColor && `text-color_${inputPasswordConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
     type: inputType,
     id: id,
     disabled: disabled,

package/dist/components/Label.js

@@ -48,6 +48,7 @@ function Label(props) {
     labelTextWrap,
     labelTextColor,
     labelTextColorHover,
+    labelTextWeight,
     mode,
     set,
     before,
@@ -116,6 +117,7 @@ function Label(props) {
     size: labelTextSize,
     textColor: labelTextColor || labelConfig.appearance[appearance]?.labelTextColor,
     textColorHover: labelTextColorHover || labelConfig.appearance[appearance]?.labelTextColorHover,
+    textWeight: labelTextWeight || labelConfig.appearance[appearance]?.labelTextWeight,
     textWrap: labelTextWrap
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__label"

package/dist/components/RadioButton.js

@@ -32,10 +32,15 @@ const radioButtonConfig = {
   state: {},
   setState: newComponent => {
     radioButtonConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    radioButtonConfig.appearance = newComponent;
   }
 };
 function RadioButton(props) {
   const {
+    appearance,
     state,
     id,
     className,
@@ -96,7 +101,7 @@ function RadioButton(props) {
     htmlFor: id,
     className: clsx__default.default(className, 'radio-button', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass)
+    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass || radioButtonConfig.appearance[appearance] && `radio-button_checkmark_fill_${radioButtonConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
     className: "radio-button__input",
@@ -105,18 +110,18 @@ function RadioButton(props) {
     type: "radio",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateBorderColorHoverClass, stateShapeClass, stateBorderWidthClass)
+    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioButtonConfig.appearance[appearance] && `border-color_${radioButtonConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioButtonConfig.appearance[appearance] && `radio-button__state_shape_${radioButtonConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioButtonConfig.appearance[appearance] && `border-width_${radioButtonConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "radio-button__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "radio-button__label",
-    size: labelTextSize,
-    textWeight: labelTextWidth,
-    textColor: labelTextColor
+    size: labelTextSize || radioButtonConfig.appearance[appearance].labelTextSize,
+    textColor: labelTextColor || radioButtonConfig.appearance[appearance].labelTextColor,
+    textWeight: labelTextWidth
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "radio-button__desc",
-    size: descTextSize,
-    textColor: descTextColor,
+    size: descTextSize || radioButtonConfig.appearance[appearance].descTextSize,
+    textColor: descTextColor || radioButtonConfig.appearance[appearance].descTextColor,
     textWeight: descTextWidth
   }, desc));
 }

package/dist/components/Segmented.js

@@ -30,8 +30,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const segmentedConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    segmentedConfig.appearance = newComponent;
+  }
+};
 const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
   const {
+    appearance,
     name,
     className,
     type,
@@ -96,14 +103,14 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     propsKey: 'fillHover'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && `segmented_size_${size}`, type && `segmented_type_${type}`, borderColorClass, borderWidthClass, borderTypeClass),
+    className: clsx__default.default(className, 'segmented', shapeClass || segmentedConfig.appearance[appearance]?.shape && `segmented_shape_${segmentedConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || segmentedConfig.appearance[appearance]?.fill && `fill_${segmentedConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass || segmentedConfig.appearance[appearance]?.width && `segmented_width_${segmentedConfig.appearance[appearance].width}`.replace(/([A-Z])/g, '-$1').toLowerCase(), size && `segmented_size_${size}`, type && `segmented_type_${type}`, borderColorClass, borderWidthClass, borderTypeClass),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('segmented__wrapper-inner')
   }, segments?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('segmented__item', fillHoverClass, item.value === activeSegment.value && 'segmented__item_active'),
+    className: clsx__default.default('segmented__item', fillHoverClass || segmentedConfig.appearance[appearance]?.fillHover && `fill_hover_${segmentedConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), item.value === activeSegment.value && 'segmented__item_active'),
     key: item.value,
     ref: segmentsRefs.get(item.value)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -119,10 +126,10 @@ const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) =>
     htmlFor: item.label
   }, /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: clsx__default.default('segmented__item-label-text', labelTextWrap && `word-wrap_${labelTextWrap}`),
-    size: labelTextSize,
-    textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor
+    size: labelTextSize || segmentedConfig.appearance[appearance]?.labelTextSize,
+    textColor: item.value === activeSegment.value ? labelTextActiveColor || segmentedConfig.appearance[appearance]?.labelTextActiveColor : labelTextColor || segmentedConfig.appearance[appearance]?.labelTextColor
   }, item.label)))), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('segmented__indicator', indicatorFillClass)
+    className: clsx__default.default('segmented__indicator', indicatorFillClass || segmentedConfig.appearance[appearance]?.indicatorFill && `fill_${segmentedConfig.appearance[appearance].indicatorFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"))));
 });
 Segmented.displayName = 'Segmented';
@@ -141,7 +148,8 @@ Segmented.propTypes = {
   type: PropTypes__default.default.string
 };
 Segmented.defaultProps = {
-  activeSegment: {}
+  activeSegment: {},
+  size: 'normal'
 };
 Segmented.__docgenInfo = {
   "description": "",
@@ -159,6 +167,13 @@ Segmented.__docgenInfo = {
       },
       "required": false
     },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {
@@ -223,3 +238,4 @@ Segmented.__docgenInfo = {
 };
 
 exports.Segmented = Segmented;
+exports.segmentedConfig = segmentedConfig;