@dreamcommerce/aurora 3.0.0-166 → 3.0.0-167

package/build/cjs/packages/aurora/src/components/accordion/components/accordion_item.js

@@ -14,7 +14,7 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(AccordionPrimitive.Item, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
-    className: cn.cn('aurora-border-t last:aurora-border-b', _rollupPluginBabelHelpers.defineProperty({}, "aurora-border-".concat(borderStyle), !!borderStyle), className)
+    className: cn.cn('aurora-border-t last:aurora-border-b data-[state=open]:aurora-border-b-0', _rollupPluginBabelHelpers.defineProperty({}, "aurora-border-".concat(borderStyle), !!borderStyle), className)
   }, props));
 });
 AccordionItem.displayName = 'AccordionItem';

package/build/cjs/packages/aurora/src/components/checkbox/checkbox.js

@@ -25,8 +25,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: id,
     name: name,
     ref: ref,
-    className: cn.cn('aurora-peer aurora-h-5 aurora-w-5 aurora-shrink-0 aurora-rounded-4 aurora-bg-neutral-0 aurora-border hover:aurora-border-strong focus data-[state=checked]:aurora-bg-primary', {
-      'aurora-border-danger aurora-border-2': errors && errors.length > 0,
+    className: cn.cn('aurora-peer aurora-rounded-4 aurora-h-[20px] aurora-w-[20px] aurora-transition-all aurora-bg hover:aurora-border-strong focus data-[state=unchecked]:aurora-border data-[state=checked]:aurora-bg-primary not-disabled:data-[state=checked]:aurora-border-primary', {
+      'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
       'disabled:aurora-cursor-not-allowed': disabled,
       '!aurora-bg-active': disabled && checked
     }, className),
@@ -36,7 +36,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultChecked: defaultChecked,
     onCheckedChange: onCheckedChange
   }, props), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
-    className: cn.cn('aurora-flex aurora-items-center aurora-justify-center aurora-text-current')
+    className: cn.cn('aurora-rounded-4 aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full')
   }, /*#__PURE__*/React.createElement(check_icon.CheckLineIcon, {
     className: cn.cn('aurora-w-3.5 aurora-h-3.5 aurora-fill-inverse', {
       'aurora-fill-inverse-disabled': disabled && checked

package/build/cjs/packages/aurora/src/components/controls/checkbox_control/checkbox_control.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var cn = require('../../../utilities/cn.js');
+var stack = require('../../stack/stack.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -31,30 +34,41 @@ var CheckboxControl = function CheckboxControl(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     onCheckedChange = _ref.onCheckedChange,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React__default['default'].useState(checked),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    _checked = _React$useState2[0],
+    setChecked = _React$useState2[1];
+  var handleCheckedChange = function handleCheckedChange(checked) {
+    setChecked(checked);
+    onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(checked);
+  };
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
-    classname: "aurora-items-center"
+    classname: "aurora-items-start aurora-gap-3"
   }, /*#__PURE__*/React__default['default'].createElement(checkbox.Checkbox, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     value: value,
     checked: checked,
-    onCheckedChange: onCheckedChange,
+    onCheckedChange: handleCheckedChange,
     required: required,
     disabled: disabled,
     errors: errors
-  }, rest)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-ml-2 aurora-flex aurora-flex-col aurora-gap-1"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-mb-1"
-  }, /*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, rest)), /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
     required: required,
     disabled: disabled,
     tooltip: tooltip,
-    className: "aurora-text"
-  }, label$1))), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    className: cn.cn({
+      'aurora-font-semibold': _checked
+    })
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  })));
+  }) : null));
 };
 
 exports.CheckboxControl = CheckboxControl;

package/build/cjs/packages/aurora/src/components/controls/checkbox_control/checkbox_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -34,12 +35,11 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
     tooltip: tooltip,
-    required: required,
-    className: "aurora-pb-1 aurora-text"
-  }, label$1)), /*#__PURE__*/React__default['default'].createElement(color_picker.ColorPicker, _rollupPluginBabelHelpers.objectSpread2({
+    required: required
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(color_picker.ColorPicker, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     initialColor: initialColor,
@@ -50,9 +50,11 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     onSave: onSave,
     withGradient: withGradient,
     disabled: disabled
-  }, rest)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, rest)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  }));
+  }) : null);
 };
 ColorPickerControl.displayName = 'ColorPickerControl';
 

package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/input_control/input_control.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -37,15 +38,12 @@ var InputControl = /*#__PURE__*/React__default['default'].forwardRef(function (_
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-mb-1"
-  }, /*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
-    className: "aurora-text",
     required: required,
     tooltip: tooltip,
     disabled: disabled
-  }, label$1))), /*#__PURE__*/React__default['default'].createElement(input.Input, _rollupPluginBabelHelpers.objectSpread2({
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(input.Input, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref,
     id: id,
     name: name,
@@ -61,9 +59,11 @@ var InputControl = /*#__PURE__*/React__default['default'].forwardRef(function (_
     onChange: onChange,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp
-  }, props)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, props)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  }));
+  }) : null);
 });
 InputControl.displayName = 'InputControl';
 

package/build/cjs/packages/aurora/src/components/controls/multiselect_control/multiselect_control.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -29,20 +30,22 @@ var MultiSelectControl = function MultiSelectControl(_ref) {
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
-    className: "aurora-pb-1 aurora-text",
+    required: required,
     tooltip: tooltip,
-    required: required
-  }, label$1)), /*#__PURE__*/React__default['default'].createElement(multiselect.MultiSelect, _rollupPluginBabelHelpers.objectSpread2({
+    disabled: disabled
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(multiselect.MultiSelect, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     options: options,
     placeholder: placeholder,
     disabled: disabled,
     onValueChange: onValueChange
-  }, props)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, props)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  }));
+  }) : null);
 };
 MultiSelectControl.displayName = 'MultiSelectControl';
 

package/build/cjs/packages/aurora/src/components/controls/multiselect_control/multiselect_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/radio_group_control/radio_group_control.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var stack = require('../../stack/stack.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -33,16 +35,19 @@ var RadioGroupControl = function RadioGroupControl(_ref) {
     onValueChange = _ref.onValueChange,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
-    classname: "aurora-flex-col"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-mb-2"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+    classname: "aurora-flex-col aurora-gap-3"
+  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
     required: required,
     disabled: disabled,
     tooltip: tooltip,
     className: "aurora-text"
-  }, label$1)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText)), /*#__PURE__*/React__default['default'].createElement(radio_group.RadioGroup, _rollupPluginBabelHelpers.objectSpread2({
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null), /*#__PURE__*/React__default['default'].createElement(radio_group.RadioGroup, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     value: value,
@@ -61,9 +66,9 @@ var RadioGroupControl = function RadioGroupControl(_ref) {
       helperText: item.helperText,
       tooltip: item.tooltip
     });
-  })), /*#__PURE__*/React__default['default'].createElement("div", null, errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  })), errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  })));
+  }) : null);
 };
 
 exports.RadioGroupControl = RadioGroupControl;

package/build/cjs/packages/aurora/src/components/controls/radio_group_control/radio_group_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/select_control/select_control.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -36,14 +37,11 @@ var SelectControl = function SelectControl(_ref) {
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-mb-1"
-  }, /*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
     tooltip: tooltip,
-    required: required,
-    className: "aurora-text"
-  }, label$1))), /*#__PURE__*/React__default['default'].createElement(select.Select, _rollupPluginBabelHelpers.objectSpread2({
+    required: required
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(select.Select, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     defaultValue: defaultValue,
@@ -57,9 +55,11 @@ var SelectControl = function SelectControl(_ref) {
     hasError: !!errors,
     onValueChange: onValueChange,
     onScroll: onScroll
-  }, props)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, props)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  }));
+  }) : null);
 };
 SelectControl.displayName = 'SelectControl';
 

package/build/cjs/packages/aurora/src/components/controls/switch_control/switch_control.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var stack = require('../../stack/stack.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -33,7 +35,9 @@ var SwitchControl = function SwitchControl(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     onCheckedChange = _ref.onCheckedChange,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default['default'].createElement(control.Control, null, /*#__PURE__*/React__default['default'].createElement(_switch.Switch, _rollupPluginBabelHelpers.objectSpread2({
+  return /*#__PURE__*/React__default['default'].createElement(control.Control, {
+    classname: "aurora-gap-3"
+  }, /*#__PURE__*/React__default['default'].createElement(_switch.Switch, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     value: value,
@@ -42,15 +46,18 @@ var SwitchControl = function SwitchControl(_ref) {
     disabled: disabled,
     onCheckedChange: onCheckedChange,
     errors: errors
-  }, rest)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-ml-2 aurora-flex aurora-justify-center aurora-flex-col aurora-gap-1"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, rest)), /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     required: required,
     tooltip: tooltip,
     disabled: disabled
-  }, label$1)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  })));
+  }) : null));
 };
 
 exports.SwitchControl = SwitchControl;

package/build/cjs/packages/aurora/src/components/controls/switch_control/switch_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/text_area_control/text_area_control.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -32,13 +33,13 @@ var TextAreaControl = function TextAreaControl(_ref) {
     onChange = _ref.onChange,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
-    classname: "aurora-flex aurora-flex-col aurora-gap-2"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+    classname: "aurora-flex-col"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
     required: required,
     tooltip: tooltip,
     disabled: disabled
-  }, label$1)), /*#__PURE__*/React__default['default'].createElement(text_area.TextArea, _rollupPluginBabelHelpers.objectSpread2({
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(text_area.TextArea, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     placeholder: placeholder,
@@ -48,9 +49,11 @@ var TextAreaControl = function TextAreaControl(_ref) {
     readOnly: readOnly,
     errors: errors,
     onChange: onChange
-  }, props)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }, props)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
-  }));
+  }) : null);
 };
 TextAreaControl.displayName = 'TextAreaControl';
 

package/build/cjs/packages/aurora/src/components/controls/text_area_control/text_area_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var label = require('../../label/label.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var error_list = require('../../error_list/error_list.js');
@@ -26,13 +27,14 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     isLocked = _ref.isLocked,
     onLock = _ref.onLock,
     onChange = _ref.onChange,
+    disabled = _ref.disabled,
     helperText = _ref.helperText;
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
-    required: required,
-    tooltip: tooltip
-  }, label$1)), /*#__PURE__*/React__default['default'].createElement(values_syncer.ValuesSyncer, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+    tooltip: tooltip,
+    required: required
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(values_syncer.ValuesSyncer, {
     firstControl: firstControl,
     secondControl: secondControl,
     initialFirstValue: initialFirstValue,
@@ -40,10 +42,11 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     isLocked: isLocked,
     onLock: onLock,
     onChange: onChange
-  }), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
-    errors: errors,
-    className: "aurora-text-danger aurora-text-sm"
-  }));
+  }), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors
+  }) : null);
 };
 ValuesSyncerControl.displayName = 'ValuesSyncerControl';
 

package/build/cjs/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js

@@ -46,11 +46,11 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
   };
   return /*#__PURE__*/React__default['default'].createElement(control.Control, {
     classname: "aurora-flex-col"
-  }, label$1 && (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
     htmlFor: id,
-    required: required,
-    tooltip: tooltip
-  }, label$1)), /*#__PURE__*/React__default['default'].createElement(xhr_image_picker.XhrImagePicker, {
+    tooltip: tooltip,
+    required: required
+  }, label$1)) : null, /*#__PURE__*/React__default['default'].createElement(xhr_image_picker.XhrImagePicker, {
     url: url,
     id: id,
     name: name,
@@ -63,7 +63,7 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     onUploaded: onUploaded,
     onImageSizeUpdated: onImageSizeUpdated,
     ImageEditor: ImageEditor
-  }), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText));
+  }), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText) : null);
 };
 
 exports.XhrImagePickerControl = XhrImagePickerControl;

package/build/cjs/packages/aurora/src/components/error_list/components/error_list_item.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var cn = require('../../../utilities/cn.js');
-var error_list_item_variants = require('./error_list_item_variants.js');
+var typography = require('../../typography/typography.js');
 
 var _excluded = ["children", "className"];
 var ErrorListItem = function ErrorListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.objectSpread2({
-    className: cn.cn(error_list_item_variants.errorListItemVariants(), className)
-  }, props), children);
+  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.objectSpread2({}, props), /*#__PURE__*/React.createElement(typography.Typography, {
+    color: "danger",
+    size: "s"
+  }, children));
 };
 
 exports.ErrorListItem = ErrorListItem;

package/build/cjs/packages/aurora/src/components/helper_text/helper_text.js

@@ -4,16 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var cn = require('../../utilities/cn.js');
-var helper_text_variants = require('./helper_text_variants.js');
+var typography = require('../typography/typography.js');
 
-var _excluded = ["className"];
+var _excluded = ["className", "children", "color"];
 var HelperText = function HelperText(_ref) {
   var className = _ref.className,
+    children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'subtle' : _ref$color,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("p", _rollupPluginBabelHelpers.objectSpread2({
-    className: cn.cn(helper_text_variants.helperTextVariants(), className)
-  }, props));
+  return /*#__PURE__*/React.createElement(typography.Typography, _rollupPluginBabelHelpers.objectSpread2({
+    size: "s",
+    color: color
+  }, props), children);
 };
 
 exports.HelperText = HelperText;

package/build/cjs/packages/aurora/src/components/helper_text/helper_text.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/label/label.js

@@ -6,13 +6,12 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../utilities/cn.js');
 var stack = require('../stack/stack.js');
+var typography = require('../typography/typography.js');
 var tooltip = require('../tooltip/tooltip.js');
 var tooltip_trigger = require('../tooltip/components/tooltip_trigger.js');
 var tooltip_content = require('../tooltip/components/tooltip_content.js');
 var tooltip_provider = require('../tooltip/context/tooltip_provider.js');
 var LabelPrimitive = require('@radix-ui/react-label');
-var label_content = require('./components/label_content.js');
-var label_variants = require('./label_variants.js');
 
 var _excluded = ["className", "tooltip", "required", "disabled", "children"];
 var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -22,25 +21,25 @@ var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     children = _ref.children,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var content = /*#__PURE__*/React.createElement(stack.Stack, {
-    align: "baseline",
-    spacing: "0.5",
-    inline: true,
-    className: cn.cn(label_variants.labelVariants(), "".concat(disabled ? 'aurora-cursor-not-allowed aurora-text-subtle-light' : '', " ").concat(className))
-  }, required && /*#__PURE__*/React.createElement("span", {
-    className: "aurora-text-interactive"
-  }, "*"), children);
-  if (tooltip$1) {
-    return /*#__PURE__*/React.createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React.createElement(label_content.LabelContent, _rollupPluginBabelHelpers.objectSpread2({
-      tooltip: /*#__PURE__*/React.createElement(tooltip.Tooltip, null, /*#__PURE__*/React.createElement(tooltip_trigger.TooltipTrigger, null), /*#__PURE__*/React.createElement(tooltip_content.TooltipContent, {
-        variant: "dark"
-      }, /*#__PURE__*/React.createElement("p", null, tooltip$1))),
-      ref: ref
-    }, props), content));
-  }
-  return /*#__PURE__*/React.createElement(label_content.LabelContent, _rollupPluginBabelHelpers.objectSpread2({
+  return /*#__PURE__*/React.createElement(LabelPrimitive.Root, _rollupPluginBabelHelpers.objectSpread2({
     ref: ref
-  }, props), content);
+  }, props), /*#__PURE__*/React.createElement(stack.Stack, {
+    align: "center",
+    spacing: "1.5",
+    className: cn.cn({
+      'aurora-cursor-not-allowed aurora-text-subtle-light': disabled
+    })
+  }, /*#__PURE__*/React.createElement(typography.Typography, {
+    lineHeight: "xs",
+    size: "s",
+    weight: "medium",
+    as: "p",
+    className: className
+  }, required ? /*#__PURE__*/React.createElement("span", {
+    className: "aurora-text-interactive"
+  }, "*") : null, children), tooltip$1 ? (/*#__PURE__*/React.createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React.createElement(tooltip.Tooltip, null, /*#__PURE__*/React.createElement(tooltip_trigger.TooltipTrigger, null), /*#__PURE__*/React.createElement(tooltip_content.TooltipContent, {
+    variant: "dark"
+  }, /*#__PURE__*/React.createElement("p", null, tooltip$1))))) : null));
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 

package/build/cjs/packages/aurora/src/components/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}