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

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
+
+**Note:** Version bump only for package @instructure/ui-color-picker
+
+
+
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorIndicator/v1/styles.js

@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 
-import conversions from '@instructure/ui-color-utils';
-import { isValid } from '@instructure/ui-color-utils';
+import { colorToRGB, isValid } from '@instructure/ui-color-utils';
 const calcBlendedColor = (c1, c2) => {
   // 0.4 as decided by design
   const c2Alpha = c2.a * 0.4;
@@ -63,7 +62,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor(conversions.colorToRGB(componentTheme.colorIndicatorBorderColor), conversions.colorToRGB(isValid(color) ? color : '#fff'))
+      borderColor: calcBlendedColor(colorToRGB(componentTheme.colorIndicatorBorderColor), colorToRGB(isValid(color) ? color : '#fff'))
     }
   };
 };

package/es/ColorIndicator/v2/styles.js

@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 
-import conversions from '@instructure/ui-color-utils';
-import { isValid } from '@instructure/ui-color-utils';
+import { colorToRGB, isValid } from '@instructure/ui-color-utils';
 const calcBlendedColor = (c1, c2) => {
   // 0.4 as decided by design
   const c2Alpha = c2.a * 0.4;
@@ -63,7 +62,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor(conversions.colorToRGB(componentTheme.colorIndicatorBorderColor), conversions.colorToRGB(isValid(color) ? color : '#fff'))
+      borderColor: calcBlendedColor(colorToRGB(componentTheme.colorIndicatorBorderColor), colorToRGB(isValid(color) ? color : '#fff'))
     }
   };
 };

package/es/ColorMixer/v1/index.js

@@ -26,8 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import { isValid } from '@instructure/ui-color-utils';
-import conversions from '@instructure/ui-color-utils';
+import { isValid, colorToHsva, colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
 import { logWarn as warn } from '@instructure/console';
 import ColorPalette from './ColorPalette/index.js';
 import Slider from './Slider/index.js';
@@ -78,7 +77,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
     this.props.makeStyles?.();
     warn(isValid(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ...conversions.colorToHsva(this.props.value)
+      ...colorToHsva(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -90,21 +89,21 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
       a
     } = this.state;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(conversions.colorToHex8({
+      this.props.onChange(colorToHex8({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && conversions.colorToHex8({
+    if (prevProps.value !== this.props.value && colorToHex8({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ...conversions.colorToHsva(this.props.value)
+        ...colorToHsva(this.props.value)
       });
     }
   }
@@ -135,7 +134,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
       "data-cid": "ColorMixer",
       children: [_jsxs("span", {
         css: styles?.sliderAndPaletteContainer,
-        "aria-label": `${conversions.colorToHex8({
+        "aria-label": `${colorToHex8({
           h,
           s,
           v,
@@ -169,7 +168,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
           value: h,
           minValue: 0,
           maxValue: 359,
-          color: conversions.colorToHex8({
+          color: colorToHex8({
             h,
             s,
             v,
@@ -186,7 +185,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
           width: this._width,
           height: this._sliderHeight,
           indicatorRadius: this._sliderIndicatorRadius,
-          color: conversions.colorToHex8({
+          color: colorToHex8({
             h,
             s,
             v
@@ -203,14 +202,14 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec(_class = class Col
         disabled: disabled,
         label: withAlpha ? 'RGBA' : 'RGB',
         width: this._width,
-        value: conversions.colorToRGB({
+        value: colorToRGB({
           h,
           s,
           v,
           a
         }),
         onChange: color => this.setState({
-          ...conversions.colorToHsva(color)
+          ...colorToHsva(color)
         }),
         withAlpha: withAlpha,
         rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/es/ColorMixer/v2/index.js

@@ -26,8 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { withStyleNew } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import { isValid } from '@instructure/ui-color-utils';
-import conversions from '@instructure/ui-color-utils';
+import { isValid, colorToHsva, colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
 import { logWarn as warn } from '@instructure/console';
 import ColorPalette from './ColorPalette/index.js';
 import Slider from './Slider/index.js';
@@ -78,7 +77,7 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
     this.props.makeStyles?.();
     warn(isValid(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ...conversions.colorToHsva(this.props.value)
+      ...colorToHsva(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -90,21 +89,21 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
       a
     } = this.state;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(conversions.colorToHex8({
+      this.props.onChange(colorToHex8({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && conversions.colorToHex8({
+    if (prevProps.value !== this.props.value && colorToHex8({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ...conversions.colorToHsva(this.props.value)
+        ...colorToHsva(this.props.value)
       });
     }
   }
@@ -135,7 +134,7 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
       "data-cid": "ColorMixer",
       children: [_jsxs("span", {
         css: styles?.sliderAndPaletteContainer,
-        "aria-label": `${conversions.colorToHex8({
+        "aria-label": `${colorToHex8({
           h,
           s,
           v,
@@ -169,7 +168,7 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
           value: h,
           minValue: 0,
           maxValue: 359,
-          color: conversions.colorToHex8({
+          color: colorToHex8({
             h,
             s,
             v,
@@ -186,7 +185,7 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
           width: this._width,
           height: this._sliderHeight,
           indicatorRadius: this._sliderIndicatorRadius,
-          color: conversions.colorToHex8({
+          color: colorToHex8({
             h,
             s,
             v
@@ -203,14 +202,14 @@ let ColorMixer = (_dec = withStyleNew(generateStyle), _dec(_class = class ColorM
         disabled: disabled,
         label: withAlpha ? 'RGBA' : 'RGB',
         width: this._width,
-        value: conversions.colorToRGB({
+        value: colorToRGB({
           h,
           s,
           v,
           a
         }),
         onChange: color => this.setState({
-          ...conversions.colorToHsva(color)
+          ...colorToHsva(color)
         }),
         withAlpha: withAlpha,
         rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/es/ColorPicker/v1/index.js

@@ -27,8 +27,7 @@ import { Component } from 'react';
 import { withStyle, InstUISettingsProvider } from '@instructure/emotion';
 import { warn, error } from '@instructure/console';
 import { omitProps } from '@instructure/ui-react-utils';
-import { isValid, contrast as getContrast } from '@instructure/ui-color-utils';
-import conversions from '@instructure/ui-color-utils';
+import { isValid, contrast as getContrast, colorToHex8 } from '@instructure/ui-color-utils';
 import { TextInput } from '@instructure/ui-text-input/v11_6';
 import { Tooltip } from '@instructure/ui-tooltip/v11_6';
 import { Button, IconButton } from '@instructure/ui-buttons/v11_6';
@@ -430,7 +429,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     return _jsx("div", {
       children: typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: conversions.colorToHex8(newColor).slice(1)
+          mixedColor: colorToHex8(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -452,7 +451,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       children: [this.props?.colorMixerSettings?.colorMixer && _jsx(ColorMixer, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: conversions.colorToHex8(newColor).slice(1)
+          mixedColor: colorToHex8(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,

package/es/ColorPicker/v2/index.js

@@ -27,8 +27,7 @@ import { Component } from 'react';
 import { withStyleNew, InstUISettingsProvider } from '@instructure/emotion';
 import { warn, error } from '@instructure/console';
 import { omitProps } from '@instructure/ui-react-utils';
-import { isValid, contrast as getContrast } from '@instructure/ui-color-utils';
-import conversions from '@instructure/ui-color-utils';
+import { isValid, contrast as getContrast, colorToHex8 } from '@instructure/ui-color-utils';
 import { TextInput } from '@instructure/ui-text-input/latest';
 import { Tooltip } from '@instructure/ui-tooltip/latest';
 import { Button, IconButton } from '@instructure/ui-buttons/latest';
@@ -437,7 +436,7 @@ let ColorPicker = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
     return _jsx("div", {
       children: typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: conversions.colorToHex8(newColor).slice(1)
+          mixedColor: colorToHex8(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -459,7 +458,7 @@ let ColorPicker = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
       children: [this.props?.colorMixerSettings?.colorMixer && _jsx(ColorMixer, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: conversions.colorToHex8(newColor).slice(1)
+          mixedColor: colorToHex8(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,

package/es/ColorPreset/v1/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { withStyle } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import conversions from '@instructure/ui-color-utils';
+import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
 import { IconButton, Button } from '@instructure/ui-buttons/v11_6';
 import { View } from '@instructure/ui-view/v11_6';
 import { Tooltip } from '@instructure/ui-tooltip/v11_6';
@@ -90,7 +90,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     const {
       selected
     } = this.props;
-    return !!selected && conversions.colorToHex8(selected) === conversions.colorToHex8(color);
+    return !!selected && colorToHex8(selected) === colorToHex8(color);
   }
   onMenuItemSelected = color => (_e, args) => {
     if (args.value === 'select') {
@@ -131,9 +131,9 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     children: [_jsxs("div", {
       css: this.props.styles?.popoverContent,
       children: [_jsx(ColorMixer, {
-        value: conversions.colorToHex8(this.state.newColor),
+        value: colorToHex8(this.state.newColor),
         onChange: newColor => this.setState({
-          newColor: conversions.colorToRGB(newColor)
+          newColor: colorToRGB(newColor)
         }),
         withAlpha: this.props?.colorMixerSettings?.colorMixer?.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
@@ -147,7 +147,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         css: this.props.styles?.popoverContrastBlock,
         children: _jsx(ColorContrast, {
           firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
-          secondColor: conversions.colorToHex8(this.state.newColor),
+          secondColor: colorToHex8(this.state.newColor),
           label: this.props.colorMixerSettings.colorContrast.label,
           successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
           failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -162,7 +162,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       css: this.props.styles?.popoverFooter,
       children: [_jsx(Button, {
         onClick: () => {
-          this.props?.colorMixerSettings?.onPresetChange([conversions.colorToHex8(this.state.newColor), ...this.props.colors]);
+          this.props?.colorMixerSettings?.onPresetChange([colorToHex8(this.state.newColor), ...this.props.colors]);
           this.setState({
             openAddNew: false
           });

package/es/ColorPreset/v2/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { withStyleNew } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import conversions from '@instructure/ui-color-utils';
+import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
 import { IconButton, Button } from '@instructure/ui-buttons/latest';
 import { View } from '@instructure/ui-view/latest';
 import { Tooltip } from '@instructure/ui-tooltip/latest';
@@ -89,7 +89,7 @@ let ColorPreset = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
     const {
       selected
     } = this.props;
-    return !!selected && conversions.colorToHex8(selected) === conversions.colorToHex8(color);
+    return !!selected && colorToHex8(selected) === colorToHex8(color);
   }
   onMenuItemSelected = color => (_e, args) => {
     if (args.value === 'select') {
@@ -130,9 +130,9 @@ let ColorPreset = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
     children: [_jsxs("div", {
       css: this.props.styles?.popoverContent,
       children: [_jsx(ColorMixer, {
-        value: conversions.colorToHex8(this.state.newColor),
+        value: colorToHex8(this.state.newColor),
         onChange: newColor => this.setState({
-          newColor: conversions.colorToRGB(newColor)
+          newColor: colorToRGB(newColor)
         }),
         withAlpha: this.props?.colorMixerSettings?.colorMixer?.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
@@ -146,7 +146,7 @@ let ColorPreset = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
         css: this.props.styles?.popoverContrastBlock,
         children: _jsx(ColorContrast, {
           firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
-          secondColor: conversions.colorToHex8(this.state.newColor),
+          secondColor: colorToHex8(this.state.newColor),
           label: this.props.colorMixerSettings.colorContrast.label,
           successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
           failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -161,7 +161,7 @@ let ColorPreset = (_dec = withStyleNew(generateStyle), _dec(_class = class Color
       css: this.props.styles?.popoverFooter,
       children: [_jsx(Button, {
         onClick: () => {
-          this.props?.colorMixerSettings?.onPresetChange([conversions.colorToHex8(this.state.newColor), ...this.props.colors]);
+          this.props?.colorMixerSettings?.onPresetChange([colorToHex8(this.state.newColor), ...this.props.colors]);
           this.setState({
             openAddNew: false
           });

package/lib/ColorContrast/v1/index.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorContrast = void 0;
 var _react = require("react");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _console = require("@instructure/console");
-var _contrastWithAlpha = require("@instructure/ui-color-utils/lib/contrastWithAlpha.js");
-var _validateContrast = require("@instructure/ui-color-utils/lib/validateContrast.js");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _emotion = require("@instructure/emotion");
 var _v11_ = require("@instructure/ui-text/v11_6");
 var _v11_2 = require("@instructure/ui-heading/v11_6");
@@ -158,10 +157,10 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
     });
   }
   calcState() {
-    const contrast = (0, _contrastWithAlpha.contrastWithAlpha)(this.props.firstColor, this.props.secondColor);
+    const contrast = (0, _uiColorUtils.contrastWithAlpha)(this.props.firstColor, this.props.secondColor);
     const newState = {
       contrast,
-      ...(0, _validateContrast.validateContrast)(contrast, this.props.validationLevel)
+      ...(0, _uiColorUtils.validateContrast)(contrast, this.props.validationLevel)
     };
     this.setState(newState);
     return newState;
@@ -182,7 +181,7 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       isValidGraphicsText
     } = this.state;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorContrast.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorContrast.allowedProps),
       ref: this.handleRef,
       css: styles?.colorContrast,
       "data-cid": "ColorContrast",

package/lib/ColorContrast/v2/index.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorContrast = void 0;
 var _react = require("react");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _console = require("@instructure/console");
-var _contrastWithAlpha = require("@instructure/ui-color-utils/lib/contrastWithAlpha.js");
-var _validateContrast = require("@instructure/ui-color-utils/lib/validateContrast.js");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 var _emotion = require("@instructure/emotion");
 var _latest = require("@instructure/ui-text/latest");
 var _latest2 = require("@instructure/ui-heading/latest");
@@ -157,10 +156,10 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyleNew)(_
     });
   }
   calcState() {
-    const contrast = (0, _contrastWithAlpha.contrastWithAlpha)(this.props.firstColor, this.props.secondColor);
+    const contrast = (0, _uiColorUtils.contrastWithAlpha)(this.props.firstColor, this.props.secondColor);
     const newState = {
       contrast,
-      ...(0, _validateContrast.validateContrast)(contrast, this.props.validationLevel)
+      ...(0, _uiColorUtils.validateContrast)(contrast, this.props.validationLevel)
     };
     this.setState(newState);
     return newState;
@@ -181,7 +180,7 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyleNew)(_
       isValidGraphicsText
     } = this.state;
     return (0, _jsxRuntime.jsxs)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorContrast.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorContrast.allowedProps),
       ref: this.handleRef,
       css: styles?.colorContrast,
       "data-cid": "ColorContrast",

package/lib/ColorIndicator/v1/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorIndicator = void 0;
 var _react = require("react");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
@@ -69,7 +69,7 @@ let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyle)(_s
       styles
     } = this.props;
     return (0, _jsxRuntime.jsx)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorIndicator.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorIndicator.allowedProps),
       ref: this.handleRef,
       css: styles?.colorIndicator,
       "data-cid": "ColorIndicator"

package/lib/ColorIndicator/v1/styles.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 /*
  * The MIT License (MIT)
  *
@@ -70,7 +68,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor(_uiColorUtils.default.colorToRGB(componentTheme.colorIndicatorBorderColor), _uiColorUtils.default.colorToRGB((0, _isValid.isValid)(color) ? color : '#fff'))
+      borderColor: calcBlendedColor((0, _uiColorUtils.colorToRGB)(componentTheme.colorIndicatorBorderColor), (0, _uiColorUtils.colorToRGB)((0, _uiColorUtils.isValid)(color) ? color : '#fff'))
     }
   };
 };

package/lib/ColorIndicator/v2/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorIndicator = void 0;
 var _react = require("react");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _uiReactUtils = require("@instructure/ui-react-utils");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _props = require("./props.js");
@@ -68,7 +68,7 @@ let ColorIndicator = exports.ColorIndicator = (_dec = (0, _emotion.withStyleNew)
       styles
     } = this.props;
     return (0, _jsxRuntime.jsx)("div", {
-      ...(0, _omitProps.omitProps)(this.props, ColorIndicator.allowedProps),
+      ...(0, _uiReactUtils.omitProps)(this.props, ColorIndicator.allowedProps),
       ref: this.handleRef,
       css: styles?.colorIndicator,
       "data-cid": "ColorIndicator"

package/lib/ColorIndicator/v2/styles.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
-var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
+var _uiColorUtils = require("@instructure/ui-color-utils");
 /*
  * The MIT License (MIT)
  *
@@ -70,7 +68,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor(_uiColorUtils.default.colorToRGB(componentTheme.colorIndicatorBorderColor), _uiColorUtils.default.colorToRGB((0, _isValid.isValid)(color) ? color : '#fff'))
+      borderColor: calcBlendedColor((0, _uiColorUtils.colorToRGB)(componentTheme.colorIndicatorBorderColor), (0, _uiColorUtils.colorToRGB)((0, _uiColorUtils.isValid)(color) ? color : '#fff'))
     }
   };
 };

package/lib/ColorMixer/v1/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 _v11_ = require("@instructure/ui-view/v11_6");
-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"));
@@ -45,7 +45,7 @@ var _dec, _dec2, _class;
 private: true
 ---
 **/
-let ColorPalette = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class ColorPalette extends _react.Component {
+let ColorPalette = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _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/v1/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, 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/v1/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 _v11_ = require("@instructure/ui-text-input/v11_6");
 var _props = require("./props.js");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -113,7 +113,7 @@ let RGBAInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
             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.withStyle)(_styles.default, _theme.default)
             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.withStyle)(_styles.default, _theme.default)
             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.withStyle)(_styles.default, _theme.default)
               role: "presentation",
               children: "%"
             }),
-            renderLabel: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+            renderLabel: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
               children: this.props.rgbAlphaInputScreenReaderLabel
             })
           })