@instructure/ui-color-picker 11.7.8 → 11.7.9-snapshot-1

package/lib/ColorMixer/v1/Slider/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _emotion = require("@instructure/emotion");
 var _v11_ = require("@instructure/ui-view/v11_6");
 var _props = require("./props.js");
@@ -103,8 +103,8 @@ let Slider = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       e.currentTarget.focus();
     }
     this.handleChange(e);
-    this._mouseMoveListener = (0, _addEventListener.addEventListener)(window, 'mousemove', this.handleChange);
-    this._mouseUpListener = (0, _addEventListener.addEventListener)(window, 'mouseup', this.handleMouseUp);
+    this._mouseMoveListener = (0, _uiDomUtils.addEventListener)(window, 'mousemove', this.handleChange);
+    this._mouseUpListener = (0, _uiDomUtils.addEventListener)(window, 'mouseup', this.handleMouseUp);
   }
   handleChange = e => {
     if (this.props.disabled) return;

package/lib/ColorMixer/v1/index.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColorMixer = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _console = require("@instructure/console");
 var _index = _interopRequireDefault(require("./ColorPalette/index.js"));
 var _index2 = _interopRequireDefault(require("./Slider/index.js"));
@@ -81,9 +80,9 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
   };
   componentDidMount() {
     this.props.makeStyles?.();
-    (0, _console.logWarn)((0, _isValid.isValid)(this.props.value), `[ColorMixer] The passed color value is not valid.`);
+    (0, _console.logWarn)((0, _uiColorUtils.isValid)(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ..._uiColorUtils.default.colorToHsva(this.props.value)
+      ...(0, _uiColorUtils.colorToHsva)(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -95,21 +94,21 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       a
     } = this.state;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(_uiColorUtils.default.colorToHex8({
+      this.props.onChange((0, _uiColorUtils.colorToHex8)({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && _uiColorUtils.default.colorToHex8({
+    if (prevProps.value !== this.props.value && (0, _uiColorUtils.colorToHex8)({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ..._uiColorUtils.default.colorToHsva(this.props.value)
+        ...(0, _uiColorUtils.colorToHsva)(this.props.value)
       });
     }
   }
@@ -133,14 +132,14 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       a
     } = this.state;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorMixer.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorMixer.allowedProps),
       "aria-disabled": disabled,
       ref: this.handleRef,
       css: styles?.colorMixer,
       "data-cid": "ColorMixer",
       children: [(0, _jsxRuntime.jsxs)("span", {
         css: styles?.sliderAndPaletteContainer,
-        "aria-label": `${_uiColorUtils.default.colorToHex8({
+        "aria-label": `${(0, _uiColorUtils.colorToHex8)({
           h,
           s,
           v,
@@ -174,7 +173,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
           value: h,
           minValue: 0,
           maxValue: 359,
-          color: _uiColorUtils.default.colorToHex8({
+          color: (0, _uiColorUtils.colorToHex8)({
             h,
             s,
             v,
@@ -191,7 +190,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
           width: this._width,
           height: this._sliderHeight,
           indicatorRadius: this._sliderIndicatorRadius,
-          color: _uiColorUtils.default.colorToHex8({
+          color: (0, _uiColorUtils.colorToHex8)({
             h,
             s,
             v
@@ -208,14 +207,14 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
         disabled: disabled,
         label: withAlpha ? 'RGBA' : 'RGB',
         width: this._width,
-        value: _uiColorUtils.default.colorToRGB({
+        value: (0, _uiColorUtils.colorToRGB)({
           h,
           s,
           v,
           a
         }),
         onChange: color => this.setState({
-          ..._uiColorUtils.default.colorToHsva(color)
+          ...(0, _uiColorUtils.colorToHsva)(color)
         }),
         withAlpha: withAlpha,
         rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/lib/ColorMixer/v2/ColorPalette/index.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
-var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _latest = require("@instructure/ui-view/latest");
-var _px = require("@instructure/ui-utils/lib/px.js");
-var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _uiUtils = require("@instructure/ui-utils");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _shallowCompare = _interopRequireDefault(require("../utils/shallowCompare.js"));
 var _props = require("./props.js");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -44,7 +44,7 @@ var _dec, _dec2, _class;
 private: true
 ---
 **/
-let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default, 'Palette'), _dec(_class = _dec2(_class = class ColorPalette extends _react.Component {
+let ColorPalette = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default, 'Palette'), _dec(_class = _dec2(_class = class ColorPalette extends _react.Component {
   static displayName = 'ColorPalette';
   static allowedProps = _props.allowedProps;
   static componentId = 'ColorMixer.Palette';
@@ -64,7 +64,7 @@ let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
   _paletteRef = null;
   _mouseMoveListener;
   _mouseUpListener;
-  _paletteOffset = (0, _px.px)(this.props.styles?.paletteOffset);
+  _paletteOffset = (0, _uiUtils.px)(this.props.styles?.paletteOffset);
   handleRef = el => {
     const {
       elementRef
@@ -120,8 +120,8 @@ let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
       e.currentTarget.focus();
     }
     this.handleChange(e);
-    this._mouseMoveListener = (0, _addEventListener.addEventListener)(window, 'mousemove', this.handleChange);
-    this._mouseUpListener = (0, _addEventListener.addEventListener)(window, 'mouseup', this.handleMouseUp);
+    this._mouseMoveListener = (0, _uiDomUtils.addEventListener)(window, 'mousemove', this.handleChange);
+    this._mouseUpListener = (0, _uiDomUtils.addEventListener)(window, 'mouseup', this.handleMouseUp);
   }
   handleMouseUp = () => {
     this.removeEventListeners();

package/lib/ColorMixer/v2/ColorPalette/styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _px = require("@instructure/ui-utils/lib/px.js");
+var _uiUtils = require("@instructure/ui-utils");
 /*
  * The MIT License (MIT)
  *
@@ -54,8 +54,8 @@ const generateStyle = (componentTheme, props, _sharedTokens, state) => {
       borderStyle: 'solid',
       borderWidth: componentTheme.indicatorBorderWidth,
       borderColor: componentTheme.indicatorBorderColor,
-      top: `${state?.colorPosition?.y - (0, _px.px)(`${props.indicatorRadius / 16}rem`)}px`,
-      left: `${state?.colorPosition?.x - (0, _px.px)(`${props.indicatorRadius / 16}rem`)}px`
+      top: `${state?.colorPosition?.y - (0, _uiUtils.px)(`${props.indicatorRadius / 16}rem`)}px`,
+      left: `${state?.colorPosition?.x - (0, _uiUtils.px)(`${props.indicatorRadius / 16}rem`)}px`
     },
     palette: {
       label: 'ColorPalette__palette',

package/lib/ColorMixer/v2/RGBAInput/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _shallowCompare = _interopRequireDefault(require("../utils/shallowCompare.js"));
-var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _latest = require("@instructure/ui-text-input/latest");
 var _props = require("./props.js");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -113,7 +113,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'RgbaInput')
             disabled: disabled,
             value: `${this.state.value.r}`,
             onChange: e => this.handleChange('r', e),
-            renderLabel: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+            renderLabel: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
               children: this.props.rgbRedInputScreenReaderLabel
             })
           })
@@ -123,7 +123,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'RgbaInput')
             disabled: disabled,
             value: `${this.state.value.g}`,
             onChange: e => this.handleChange('g', e),
-            renderLabel: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+            renderLabel: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
               children: this.props.rgbGreenInputScreenReaderLabel
             })
           })
@@ -133,7 +133,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'RgbaInput')
             disabled: disabled,
             value: `${this.state.value.b}`,
             onChange: e => this.handleChange('b', e),
-            renderLabel: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+            renderLabel: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
               children: this.props.rgbBlueInputScreenReaderLabel
             })
           })
@@ -149,7 +149,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'RgbaInput')
               role: "presentation",
               children: "%"
             }),
-            renderLabel: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+            renderLabel: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
               children: this.props.rgbAlphaInputScreenReaderLabel
             })
           })

package/lib/ColorMixer/v2/Slider/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _emotion = require("@instructure/emotion");
 var _latest = require("@instructure/ui-view/latest");
 var _props = require("./props.js");
@@ -103,8 +103,8 @@ let Slider = (_dec = (0, _emotion.withStyleNew)(_styles.default, 'Slider'), _dec
       e.currentTarget.focus();
     }
     this.handleChange(e);
-    this._mouseMoveListener = (0, _addEventListener.addEventListener)(window, 'mousemove', this.handleChange);
-    this._mouseUpListener = (0, _addEventListener.addEventListener)(window, 'mouseup', this.handleMouseUp);
+    this._mouseMoveListener = (0, _uiDomUtils.addEventListener)(window, 'mousemove', this.handleChange);
+    this._mouseUpListener = (0, _uiDomUtils.addEventListener)(window, 'mouseup', this.handleMouseUp);
   }
   handleChange = e => {
     if (this.props.disabled) return;

package/lib/ColorMixer/v2/index.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColorMixer = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _console = require("@instructure/console");
 var _index = _interopRequireDefault(require("./ColorPalette/index.js"));
 var _index2 = _interopRequireDefault(require("./Slider/index.js"));
@@ -81,9 +80,9 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
   };
   componentDidMount() {
     this.props.makeStyles?.();
-    (0, _console.logWarn)((0, _isValid.isValid)(this.props.value), `[ColorMixer] The passed color value is not valid.`);
+    (0, _console.logWarn)((0, _uiColorUtils.isValid)(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ..._uiColorUtils.default.colorToHsva(this.props.value)
+      ...(0, _uiColorUtils.colorToHsva)(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -95,21 +94,21 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
       a
     } = this.state;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(_uiColorUtils.default.colorToHex8({
+      this.props.onChange((0, _uiColorUtils.colorToHex8)({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && _uiColorUtils.default.colorToHex8({
+    if (prevProps.value !== this.props.value && (0, _uiColorUtils.colorToHex8)({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ..._uiColorUtils.default.colorToHsva(this.props.value)
+        ...(0, _uiColorUtils.colorToHsva)(this.props.value)
       });
     }
   }
@@ -133,14 +132,14 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
       a
     } = this.state;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorMixer.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorMixer.allowedProps),
       "aria-disabled": disabled,
       ref: this.handleRef,
       css: styles?.colorMixer,
       "data-cid": "ColorMixer",
       children: [(0, _jsxRuntime.jsxs)("span", {
         css: styles?.sliderAndPaletteContainer,
-        "aria-label": `${_uiColorUtils.default.colorToHex8({
+        "aria-label": `${(0, _uiColorUtils.colorToHex8)({
           h,
           s,
           v,
@@ -174,7 +173,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
           value: h,
           minValue: 0,
           maxValue: 359,
-          color: _uiColorUtils.default.colorToHex8({
+          color: (0, _uiColorUtils.colorToHex8)({
             h,
             s,
             v,
@@ -191,7 +190,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
           width: this._width,
           height: this._sliderHeight,
           indicatorRadius: this._sliderIndicatorRadius,
-          color: _uiColorUtils.default.colorToHex8({
+          color: (0, _uiColorUtils.colorToHex8)({
             h,
             s,
             v
@@ -208,14 +207,14 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyleNew)(_styles
         disabled: disabled,
         label: withAlpha ? 'RGBA' : 'RGB',
         width: this._width,
-        value: _uiColorUtils.default.colorToRGB({
+        value: (0, _uiColorUtils.colorToRGB)({
           h,
           s,
           v,
           a
         }),
         onChange: color => this.setState({
-          ..._uiColorUtils.default.colorToHsva(color)
+          ...(0, _uiColorUtils.colorToHsva)(color)
         }),
         withAlpha: withAlpha,
         rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/lib/ColorPicker/v1/index.js

@@ -8,18 +8,13 @@ exports.default = exports.ColorPicker = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _console = require("@instructure/console");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
-var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _v11_ = require("@instructure/ui-text-input/v11_6");
 var _v11_2 = require("@instructure/ui-tooltip/v11_6");
 var _v11_3 = require("@instructure/ui-buttons/v11_6");
 var _v11_4 = require("@instructure/ui-popover/v11_6");
-var _IconCheckDarkLine = require("@instructure/ui-icons/lib/generated/IconCheckDarkLine.js");
-var _IconWarningLine = require("@instructure/ui-icons/lib/generated/IconWarningLine.js");
-var _IconTroubleLine = require("@instructure/ui-icons/lib/generated/IconTroubleLine.js");
-var _IconInfoLine = require("@instructure/ui-icons/lib/generated/IconInfoLine.js");
+var _uiIcons = require("@instructure/ui-icons");
 var _index = _interopRequireDefault(require("../../ColorIndicator/v1/index.js"));
 var _index2 = _interopRequireDefault(require("../../ColorMixer/v1/index.js"));
 var _index3 = _interopRequireDefault(require("../../ColorContrast/v1/index.js"));
@@ -230,7 +225,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       hexCode,
       showHelperErrorMessages
     } = this.state;
-    const isValidHex = (0, _isValid.isValid)(hexCode);
+    const isValidHex = (0, _uiColorUtils.isValid)(hexCode);
     const {
       checkContrast,
       renderMessages,
@@ -238,7 +233,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       renderIsRequiredMessage,
       isRequired
     } = this.props;
-    const contrast = isValidHex ? (0, _contrast.contrast)(this.props.checkContrast?.contrastAgainst || '#fff', hexCode, 2) : undefined;
+    const contrast = isValidHex ? (0, _uiColorUtils.contrast)(this.props.checkContrast?.contrastAgainst || '#fff', hexCode, 2) : undefined;
     const contrastStrength = checkContrast?.contrastStrength ? checkContrast.contrastStrength : 'mid';
     const minContrast = this.getMinContrast(contrastStrength);
     let invalidColorMessages = [];
@@ -295,18 +290,18 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
     const {
       hexCode
     } = this.state;
-    if (checkContrast && (0, _isValid.isValid)(hexCode)) {
-      const contrast = (0, _contrast.contrast)(checkContrast.contrastAgainst || '#fff', hexCode, 2);
+    if (checkContrast && (0, _uiColorUtils.isValid)(hexCode)) {
+      const contrast = (0, _uiColorUtils.contrast)(checkContrast.contrastAgainst || '#fff', hexCode, 2);
       const minContrast = this.getMinContrast(checkContrast.contrastStrength ? checkContrast.contrastStrength : 'mid');
       if (minContrast >= contrast) {
         return (0, _jsxRuntime.jsx)("div", {
           css: styles?.errorIcons,
-          children: checkContrast.isStrict ? (0, _jsxRuntime.jsx)(_IconTroubleLine.IconTroubleLine, {}) : (0, _jsxRuntime.jsx)(_IconWarningLine.IconWarningLine, {})
+          children: checkContrast.isStrict ? (0, _jsxRuntime.jsx)(_uiIcons.IconTroubleLine, {}) : (0, _jsxRuntime.jsx)(_uiIcons.IconWarningLine, {})
         });
       }
       return (0, _jsxRuntime.jsx)("div", {
         css: styles?.successIcon,
-        children: (0, _jsxRuntime.jsx)(_IconCheckDarkLine.IconCheckDarkLine, {})
+        children: (0, _jsxRuntime.jsx)(_uiIcons.IconCheckDarkLine, {})
       });
     }
     return null;
@@ -341,7 +336,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
     const selectionStart = input.selectionStart ?? currentHex.length;
     const selectionEnd = input.selectionEnd ?? currentHex.length;
     const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
-    if ((0, _isValid.isValid)(newHex)) {
+    if ((0, _uiColorUtils.isValid)(newHex)) {
       if (typeof this.props.onChange === 'function') {
         this.props.onChange(`#${newHex}`);
       } else {
@@ -389,7 +384,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
               size: "small",
               shape: "circle",
               width: "auto",
-              renderIcon: _IconInfoLine.IconInfoLine
+              renderIcon: _uiIcons.IconInfoLine
             })
           })
         })
@@ -440,7 +435,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
     return (0, _jsxRuntime.jsx)("div", {
       children: typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
+          mixedColor: (0, _uiColorUtils.colorToHex8)(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -462,7 +457,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       children: [this.props?.colorMixerSettings?.colorMixer && (0, _jsxRuntime.jsx)(_index2.default, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
+          mixedColor: (0, _uiColorUtils.colorToHex8)(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
@@ -540,7 +535,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       inputRef
     } = this.props;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorPicker.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorPicker.allowedProps),
       css: this.props.styles?.colorPicker,
       ref: this.handleRef,
       "data-cid": "ColorPicker",

package/lib/ColorPicker/v2/index.js

@@ -8,10 +8,8 @@ exports.default = exports.ColorPicker = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _console = require("@instructure/console");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
-var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _latest = require("@instructure/ui-text-input/latest");
 var _latest2 = require("@instructure/ui-tooltip/latest");
 var _latest3 = require("@instructure/ui-buttons/latest");
@@ -226,7 +224,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
       hexCode,
       showHelperErrorMessages
     } = this.state;
-    const isValidHex = (0, _isValid.isValid)(hexCode);
+    const isValidHex = (0, _uiColorUtils.isValid)(hexCode);
     const {
       checkContrast,
       renderMessages,
@@ -234,7 +232,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
       renderIsRequiredMessage,
       isRequired
     } = this.props;
-    const contrast = isValidHex ? (0, _contrast.contrast)(this.props.checkContrast?.contrastAgainst || '#fff', hexCode, 2) : undefined;
+    const contrast = isValidHex ? (0, _uiColorUtils.contrast)(this.props.checkContrast?.contrastAgainst || '#fff', hexCode, 2) : undefined;
     const contrastStrength = checkContrast?.contrastStrength ? checkContrast.contrastStrength : 'mid';
     const minContrast = this.getMinContrast(contrastStrength);
     let invalidColorMessages = [];
@@ -291,8 +289,8 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
     const {
       hexCode
     } = this.state;
-    if (checkContrast && (0, _isValid.isValid)(hexCode)) {
-      const contrast = (0, _contrast.contrast)(checkContrast.contrastAgainst || '#fff', hexCode, 2);
+    if (checkContrast && (0, _uiColorUtils.isValid)(hexCode)) {
+      const contrast = (0, _uiColorUtils.contrast)(checkContrast.contrastAgainst || '#fff', hexCode, 2);
       const minContrast = this.getMinContrast(checkContrast.contrastStrength ? checkContrast.contrastStrength : 'mid');
       if (minContrast >= contrast) {
         return (0, _jsxRuntime.jsx)("div", {
@@ -343,7 +341,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
     const selectionStart = input.selectionStart ?? currentHex.length;
     const selectionEnd = input.selectionEnd ?? currentHex.length;
     const newHex = currentHex.slice(0, selectionStart) + toPaste + currentHex.slice(selectionEnd);
-    if ((0, _isValid.isValid)(newHex)) {
+    if ((0, _uiColorUtils.isValid)(newHex)) {
       if (typeof this.props.onChange === 'function') {
         this.props.onChange(`#${newHex}`);
       } else {
@@ -444,7 +442,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
     return (0, _jsxRuntime.jsx)("div", {
       children: typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
+          mixedColor: (0, _uiColorUtils.colorToHex8)(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -466,7 +464,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
       children: [this.props?.colorMixerSettings?.colorMixer && (0, _jsxRuntime.jsx)(_index2.default, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
+          mixedColor: (0, _uiColorUtils.colorToHex8)(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
@@ -544,7 +542,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyleNew)(_styl
       inputRef
     } = this.props;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorPicker.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorPicker.allowedProps),
       css: this.props.styles?.colorPicker,
       ref: this.handleRef,
       "data-cid": "ColorPicker",

package/lib/ColorPreset/v1/index.js

@@ -7,16 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColorPreset = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _v11_ = require("@instructure/ui-buttons/v11_6");
 var _v11_2 = require("@instructure/ui-view/v11_6");
 var _v11_3 = require("@instructure/ui-tooltip/v11_6");
 var _v11_4 = require("@instructure/ui-popover/v11_6");
 var _v11_5 = require("@instructure/ui-text/v11_6");
 var _v11_6 = require("@instructure/ui-drilldown/v11_6");
-var _IconAddLine = require("@instructure/ui-icons/lib/generated/IconAddLine.js");
-var _IconCheckDarkSolid = require("@instructure/ui-icons/lib/generated/IconCheckDarkSolid.js");
+var _uiIcons = require("@instructure/ui-icons");
 var _index = require("../../ColorIndicator/v1/index.js");
 var _index2 = require("../../ColorMixer/v1/index.js");
 var _index3 = require("../../ColorContrast/v1/index.js");
@@ -96,7 +95,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
     const {
       selected
     } = this.props;
-    return !!selected && _uiColorUtils.default.colorToHex8(selected) === _uiColorUtils.default.colorToHex8(color);
+    return !!selected && (0, _uiColorUtils.colorToHex8)(selected) === (0, _uiColorUtils.colorToHex8)(color);
   }
   onMenuItemSelected = color => (_e, args) => {
     if (args.value === 'select') {
@@ -112,7 +111,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       children: (0, _jsxRuntime.jsx)(_v11_.IconButton, {
         disabled: this.props.disabled,
         screenReaderLabel: this.props.colorMixerSettings.addNewPresetButtonScreenReaderLabel,
-        children: (0, _jsxRuntime.jsx)(_IconAddLine.IconAddLine, {})
+        children: (0, _jsxRuntime.jsx)(_uiIcons.IconAddLine, {})
       })
     }),
     isShowingContent: this.state.openAddNew,
@@ -137,9 +136,9 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
     children: [(0, _jsxRuntime.jsxs)("div", {
       css: this.props.styles?.popoverContent,
       children: [(0, _jsxRuntime.jsx)(_index2.ColorMixer, {
-        value: _uiColorUtils.default.colorToHex8(this.state.newColor),
+        value: (0, _uiColorUtils.colorToHex8)(this.state.newColor),
         onChange: newColor => this.setState({
-          newColor: _uiColorUtils.default.colorToRGB(newColor)
+          newColor: (0, _uiColorUtils.colorToRGB)(newColor)
         }),
         withAlpha: this.props?.colorMixerSettings?.colorMixer?.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
@@ -153,7 +152,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
         css: this.props.styles?.popoverContrastBlock,
         children: (0, _jsxRuntime.jsx)(_index3.ColorContrast, {
           firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
-          secondColor: _uiColorUtils.default.colorToHex8(this.state.newColor),
+          secondColor: (0, _uiColorUtils.colorToHex8)(this.state.newColor),
           label: this.props.colorMixerSettings.colorContrast.label,
           successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
           failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -168,7 +167,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       css: this.props.styles?.popoverFooter,
       children: [(0, _jsxRuntime.jsx)(_v11_.Button, {
         onClick: () => {
-          this.props?.colorMixerSettings?.onPresetChange([_uiColorUtils.default.colorToHex8(this.state.newColor), ...this.props.colors]);
+          this.props?.colorMixerSettings?.onPresetChange([(0, _uiColorUtils.colorToHex8)(this.state.newColor), ...this.props.colors]);
           this.setState({
             openAddNew: false
           });
@@ -219,7 +218,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
           role: "presentation"
         }), this.isSelectedColor(color) && (0, _jsxRuntime.jsx)("div", {
           css: this.props?.styles?.selectedIndicator,
-          children: (0, _jsxRuntime.jsx)(_IconCheckDarkSolid.IconCheckDarkSolid, {
+          children: (0, _jsxRuntime.jsx)(_uiIcons.IconCheckDarkSolid, {
             themeOverride: {
               sizeXSmall: '0.8rem'
             },
@@ -277,7 +276,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       return null;
     }
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorPreset.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorPreset.allowedProps),
       ref: this.handleRef,
       css: styles?.colorPreset,
       "data-cid": "ColorPreset",