@dreamcommerce/aurora 3.0.0-99 → 3.0.0

package/build/cjs/packages/aurora/src/components/color_picker/hooks/use_color_picker.js

@@ -6,7 +6,11 @@ var React = require('react');
 var color_picker_context = require('../color_picker_context.js');
 
 var useColorPicker = function useColorPicker() {
-  return React.useContext(color_picker_context.ColorPickerContext);
+  var context = React.useContext(color_picker_context.ColorPickerContext);
+  if (!context) {
+    throw new Error('ColorPickerContext is missing');
+  }
+  return context;
 };
 
 exports.useColorPicker = useColorPicker;

package/build/cjs/packages/aurora/src/components/color_picker/hooks/use_color_picker.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;"}
+{"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;"}

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stack = require('../../stack/stack.js');
+var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
+var anchor_presets = require('../../anchor_presets/anchor_presets.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var AnchorPresetsControl = function AnchorPresetsControl(_ref) {
+  var label$1 = _ref.label,
+    value = _ref.value,
+    tooltip = _ref.tooltip,
+    helperText = _ref.helperText,
+    errors = _ref.errors,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    buttonClassName = _ref.buttonClassName;
+  return /*#__PURE__*/React__default['default'].createElement(control.Control, {
+    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, {
+    tooltip: tooltip,
+    className: "aurora-text"
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText) : null), /*#__PURE__*/React__default['default'].createElement(anchor_presets.AnchorPresets, {
+    value: value,
+    onChange: onChange,
+    className: className,
+    buttonClassName: buttonClassName
+  }), errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors
+  }) : null);
+};
+
+exports.AnchorPresetsControl = AnchorPresetsControl;
+//# sourceMappingURL=anchor_presets_control.js.map

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

@@ -0,0 +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;"}

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

@@ -4,10 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+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 control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var checkbox = require('../../checkbox/checkbox.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -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,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var color_picker = require('../../color_picker/color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "initialColor", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
+var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
 var ColorPickerControl = function ColorPickerControl(_ref) {
   var label$1 = _ref.label,
     tooltip = _ref.tooltip,
@@ -23,7 +24,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
-    initialColor = _ref.initialColor,
+    value = _ref.value,
     colorVariables = _ref.colorVariables,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
@@ -34,15 +35,14 @@ 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,
+    value: value,
     colorVariables: colorVariables,
     errors: errors,
     onChange: onChange,
@@ -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,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var input = require('../../input/input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["id", "name", "label", "helperText", "preElement", "postElement", "errors", "disabled", "defaultValue", "value", "placeholder", "readOnly", "type", "required", "tooltip", "onChange", "onKeyDown", "onKeyUp"];
-var InputControl = function InputControl(_ref) {
+var InputControl = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var id = _ref.id,
     name = _ref.name,
     label$1 = _ref.label,
@@ -37,15 +38,13 @@ var InputControl = function InputControl(_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,
-    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,
     value: value,
@@ -60,10 +59,12 @@ var InputControl = function InputControl(_ref) {
     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';
 
 exports.InputControl = InputControl;

package/build/cjs/packages/aurora/src/components/controls/input_control/input_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;"}

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

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var multiselect = require('../../multiselect/multiselect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,20 +30,23 @@ 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, {
+    onValueChange: onValueChange,
+    errors: errors
+  }, 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;AACA;"}

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

@@ -4,10 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var stack = require('../../stack/stack.js');
 var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var radio_group = require('../../radio_group/radio_group.js');
 var radio_group_item = require('../../radio_group/components/radio_group_item.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,
@@ -52,18 +57,18 @@ var RadioGroupControl = function RadioGroupControl(_ref) {
     onValueChange: onValueChange
   }, rest), items.map(function (item) {
     return /*#__PURE__*/React__default['default'].createElement(radio_group_item.RadioGroupItem, {
-      key: "radio-button-".concat(value),
+      key: "radio-button-".concat(item.value),
       value: item.value,
       id: item.id,
-      errors: !!errors,
+      errors: errors,
       disabled: disabled,
       label: item.label,
       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/segmented_control_control/segmented_control_control.js

@@ -0,0 +1,64 @@
+'use strict';
+
+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 segmented_control = require('../../segmented_control/segmented_control.js');
+var segmented_control_item = require('../../segmented_control/components/segmented_control_item.js');
+var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["id", "items", "label", "value", "defaultValue", "tooltip", "helperText", "errors", "disabled", "onValueChange"];
+var SegmentedControlControl = function SegmentedControlControl(_ref) {
+  var id = _ref.id,
+    items = _ref.items,
+    label$1 = _ref.label,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    tooltip = _ref.tooltip,
+    helperText = _ref.helperText,
+    errors = _ref.errors,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onValueChange = _ref.onValueChange,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default['default'].createElement(control.Control, {
+    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,
+    disabled: disabled,
+    tooltip: tooltip,
+    className: "aurora-text"
+  }, 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(segmented_control.SegmentedControl, _rollupPluginBabelHelpers.objectSpread2({
+    id: id,
+    value: value,
+    disabled: disabled,
+    onValueChange: onValueChange
+  }, rest), items.map(function (item) {
+    return /*#__PURE__*/React__default['default'].createElement(segmented_control_item.SegmentedControlItem, {
+      key: "radio-button-".concat(item.value),
+      value: item.value,
+      id: item.id,
+      disabled: disabled
+    }, item.label);
+  })), errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors
+  }) : null);
+};
+
+exports.SegmentedControlControl = SegmentedControlControl;
+//# sourceMappingURL=segmented_control_control.js.map

package/build/cjs/packages/aurora/src/components/{color_picker/components/color_picker_inputs/color_picker_inputs_hex.js.map → controls/segmented_control_control/segmented_control_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;"}
+{"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/select_control/select_control.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.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');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
 var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var select = require('../../select/select.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["options", "id", "name", "label", "helperText", "tooltip", "placeholder", "searchPlaceholder", "hasSearch", "hasClearValueButton", "errors", "disabled", "defaultValue", "onValueChange", "innerAdditionalContent", "required"];
+var _excluded = ["options", "id", "name", "label", "helperText", "tooltip", "placeholder", "searchPlaceholder", "hasSearch", "hasClearValueButton", "errors", "disabled", "value", "onValueChange", "onScroll", "innerAdditionalContent", "required"];
 var SelectControl = function SelectControl(_ref) {
   var options = _ref.options,
     id = _ref.id,
@@ -28,24 +29,21 @@ var SelectControl = function SelectControl(_ref) {
     hasClearValueButton = _ref.hasClearValueButton,
     errors = _ref.errors,
     disabled = _ref.disabled,
-    defaultValue = _ref.defaultValue,
+    value = _ref.value,
     onValueChange = _ref.onValueChange,
+    onScroll = _ref.onScroll,
     innerAdditionalContent = _ref.innerAdditionalContent,
     required = _ref.required,
     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,
     options: options,
     disabled: disabled,
     placeholder: placeholder,
@@ -53,11 +51,15 @@ var SelectControl = function SelectControl(_ref) {
     searchPlaceholder: searchPlaceholder,
     innerAdditionalContent: innerAdditionalContent,
     hasClearValueButton: hasClearValueButton,
-    hasError: !!errors,
-    onValueChange: onValueChange
-  }, props)), helperText && /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors,
+    value: value,
+    onValueChange: onValueChange,
+    onScroll: onScroll
+  }, 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/select_control/select_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;"}
+{"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;"}

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

@@ -4,11 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var label = require('../../label/label.js');
-var helper_text = require('../../helper_text/helper_text.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 control = require('../../control/control.js');
 var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
 var _switch = require('../../switch/switch.js');
-var control = require('../../control/control.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,24 +36,41 @@ 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({
+  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-gap-3"
+  }, /*#__PURE__*/React__default['default'].createElement(_switch.Switch, _rollupPluginBabelHelpers.objectSpread2({
     id: id,
     name: name,
     value: value,
     defaultChecked: defaultChecked,
     checked: checked,
     disabled: disabled,
-    onCheckedChange: onCheckedChange,
+    onCheckedChange: handleCheckedChange,
     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,
+    htmlFor: id,
     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, {
+    disabled: disabled,
+    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.SwitchControl = SwitchControl;