@instructure/ui-color-picker 8.33.1 → 8.33.2-snapshot-5

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.
 
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
+
+**Note:** Version bump only for package @instructure/ui-color-picker
+
+
+
+
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorContrast/ColorContrastLocator.js

@@ -23,20 +23,20 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { find } from '@instructure/ui-test-queries';
+
 /* eslint-disable no-restricted-imports */
 // @ts-expect-error bypass no type definition found error
-
 import { PillLocator } from '@instructure/ui-pill/es/Pill/PillLocator';
 /* eslint-enable no-restricted-imports */
 
-import { ColorContrast } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { ColorContrast } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ColorContrastLocator = locator(ColorContrast.selector, {
   findPreview: function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return find('[class$=-colorContrast__colorPreview]', ...args);
   },
   findNormalTextCheckPill: async () => {

package/es/ColorContrast/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +24,6 @@ var _dec, _dec2, _class, _class2;
  */
 
 /** @jsx jsx */
-
 /** @jsxFrag React.Fragment */
 import React, { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -39,32 +37,29 @@ import ColorIndicator from '../ColorIndicator';
 import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorContrast extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.renderStatus = (pass, description) => {
       const _this$props = this.props,
-            successLabel = _this$props.successLabel,
-            failureLabel = _this$props.failureLabel,
-            styles = _this$props.styles;
+        successLabel = _this$props.successLabel,
+        failureLabel = _this$props.failureLabel,
+        styles = _this$props.styles;
       return jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.statusWrapper
       }, jsx("div", {
@@ -75,10 +70,8 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         color: pass ? 'success' : 'danger'
       }, pass ? successLabel : failureLabel)));
     };
-
     this.renderColorIndicator = (color, label) => {
       var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
       return jsx(React.Fragment, null, jsx("div", null, jsx("div", {
         css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.colorIndicator
       }, jsx(ColorIndicator, {
@@ -89,7 +82,6 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pickedColorHex
       }, color)));
     };
-
     this.calcBlendedColor = (c1, c2) => {
       const alpha = 1 - (1 - c1.a) * (1 - c2.a);
       return {
@@ -100,36 +92,28 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       };
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
-
   renderPreview() {
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          withoutColorPreview = _this$props4.withoutColorPreview,
-          firstColor = _this$props4.firstColor,
-          secondColor = _this$props4.secondColor,
-          firstColorLabel = _this$props4.firstColorLabel,
-          secondColorLabel = _this$props4.secondColorLabel;
-
+      styles = _this$props4.styles,
+      withoutColorPreview = _this$props4.withoutColorPreview,
+      firstColor = _this$props4.firstColor,
+      secondColor = _this$props4.secondColor,
+      firstColorLabel = _this$props4.firstColorLabel,
+      secondColorLabel = _this$props4.secondColorLabel;
     if (withoutColorPreview) {
       return null;
     }
-
     if (!firstColorLabel || !secondColorLabel) {
       error(false, 'When `withoutColorPreview` is not set to true, the properties `firstColorLabel` and `secondColorLabel` are required!');
     }
-
     return !withoutColorPreview && jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.colorPreview
     }, jsx("div", {
@@ -138,7 +122,6 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       css: styles === null || styles === void 0 ? void 0 : styles.secondColorPreview
     }, this.renderColorIndicator(secondColor, secondColorLabel || '')));
   }
-
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
@@ -153,14 +136,13 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
     return getContrast(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2);
   }
-
   render() {
     const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          label = _this$props5.label,
-          normalTextLabel = _this$props5.normalTextLabel,
-          largeTextLabel = _this$props5.largeTextLabel,
-          graphicsTextLabel = _this$props5.graphicsTextLabel;
+      styles = _this$props5.styles,
+      label = _this$props5.label,
+      normalTextLabel = _this$props5.normalTextLabel,
+      largeTextLabel = _this$props5.largeTextLabel,
+      graphicsTextLabel = _this$props5.graphicsTextLabel;
     const contrast = this.calcContrast;
     return jsx("div", Object.assign({}, omitProps(this.props, ColorContrast.allowedProps), {
       ref: this.handleRef,
@@ -174,7 +156,6 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       size: "x-large"
     }, contrast, ":1"), this.renderPreview(), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
   }
-
 }, _class2.displayName = "ColorContrast", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorContrast', _class2.defaultProps = {
   withoutColorPreview: false
 }, _class2)) || _class) || _class);

package/es/ColorContrast/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   elementRef: PropTypes.func,

package/es/ColorContrast/styles.js

@@ -38,7 +38,6 @@ const generateStyle = componentTheme => {
     flex: 1,
     color: pass ? componentTheme.successColor : componentTheme.failureColor
   });
-
   return {
     colorContrast: {
       label: 'colorContrast',
@@ -95,5 +94,4 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 export default generateStyle;

package/es/ColorContrast/theme.js

@@ -29,9 +29,9 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    typography = theme.typography,
+    spacing = theme.spacing,
+    borders = theme.borders;
   const componentVariables = {
     width: '17rem',
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
@@ -48,8 +48,8 @@ const generateComponentTheme = theme => {
     failureColor: colors.crimson,
     pickedHexColor: colors.ash
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/ColorIndicator/ColorIndicatorLocator.js

@@ -23,17 +23,16 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { ColorIndicator } from './index';
-import { colorToRGB } from '@instructure/ui-color-utils'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { colorToRGB } from '@instructure/ui-color-utils';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ColorIndicatorLocator = locator(ColorIndicator.selector, {
   getColorRGBA: element => {
     const _getComputedStyle = getComputedStyle(element),
-          boxShadow = _getComputedStyle.boxShadow;
-
+      boxShadow = _getComputedStyle.boxShadow;
     if (boxShadow === 'none') {
       return boxShadow;
     }
-
     const shadowColor = /rgba?\(\d+,\s\d+,\s\d+(,\s.+)?\)/.exec(boxShadow)[0];
     return colorToRGB(shadowColor);
   }

package/es/ColorIndicator/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,40 +31,33 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorIndicator extends Component {
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     const styles = this.props.styles;
     return jsx("div", Object.assign({}, omitProps(this.props, ColorIndicator.allowedProps), {
@@ -73,7 +65,6 @@ let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _
       css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator
     }));
   }
-
 }, _class2.displayName = "ColorIndicator", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorIndicator', _class2.defaultProps = {
   shape: 'circle'
 }, _class2)) || _class) || _class);

package/es/ColorIndicator/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   color: PropTypes.string,

package/es/ColorIndicator/styles.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { colorToRGB, 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;
@@ -44,11 +44,9 @@ const calcBlendedColor = (c1, c2) => {
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-
-
 const generateStyle = (componentTheme, props) => {
   const color = props.color,
-        shape = props.shape;
+    shape = props.shape;
   return {
     colorIndicator: {
       label: 'colorIndicator',
@@ -66,5 +64,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/ColorIndicator/theme.js

@@ -21,17 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export const colorIndicatorBorderColor = '#384A5899';
+
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        borders = theme.borders,
-        spacing = theme.spacing;
+    borders = theme.borders,
+    spacing = theme.spacing;
   const componentVariables = {
     borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     backgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
@@ -46,8 +47,8 @@ const generateComponentTheme = theme => {
     rectangularIndicatorBorderRadius: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
     rectangularIndicatorBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/ColorMixer/ColorMixerLocator.js

@@ -29,37 +29,32 @@ const customMethos = {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return find('[id^=TextInput_]', ...args);
   },
   findColorPalette: function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     return find('[aria-label*="color palette"]', ...args);
   },
   findColorSlider: function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     return find('[aria-label*="color slider"]', ...args);
   },
   findAlphaSlider: function () {
     for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       args[_key4] = arguments[_key4];
     }
-
     return find('[aria-label*="alpha slider"]', ...args);
   },
   findIndicator: function () {
     for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
       args[_key5] = arguments[_key5];
     }
-
     return find('[clas*=__indicator]', ...args);
   }
-}; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-
+};
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ColorMixerLocator = locator(ColorMixer.selector, customMethos);

package/es/ColorMixer/ColorPalette/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -34,50 +33,41 @@ import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { px } from '@instructure/ui-utils';
+
 /**
 ---
 private: true
 ---
 @tsProps
 **/
-
 let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ColorPalette extends Component {
   constructor(props) {
     var _this$props$styles;
-
     super(props);
     this.ref = null;
     this._paletteRef = null;
     this._mouseMoveListener = void 0;
     this._mouseUpListener = void 0;
     this._paletteOffset = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.paletteOffset);
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.calcSaturation = position => Math.round(position / this.paletteWidth * 100) / 100;
-
     this.calcLuminance = position => Math.round((this.paletteHeight - position) / this.paletteHeight * 100) / 100;
-
     this.handleMouseUp = () => {
       this.removeEventListeners();
     };
-
     this.handleChange = e => {
       if (this.props.disabled) return;
       const clientX = e.clientX,
-            clientY = e.clientY;
-
+        clientY = e.clientY;
       const _this$calcColorPositi = this.calcColorPosition(clientX, clientY),
-            newXPosition = _this$calcColorPositi.newXPosition,
-            newYPosition = _this$calcColorPositi.newYPosition;
-
+        newXPosition = _this$calcColorPositi.newXPosition,
+        newYPosition = _this$calcColorPositi.newYPosition;
       this.setState({
         colorPosition: {
           x: newXPosition,
@@ -90,7 +80,6 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         v: this.calcLuminance(newYPosition)
       });
     };
-
     this.state = {
       colorPosition: {
         x: 0,
@@ -98,43 +87,34 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
     this.setState({
       colorPosition: this.calcPositionFromColor(this.props.color)
     });
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.state);
-
     if (shallowCompare(prevProps.color, this.props.color)) {
       this.setState({
         colorPosition: this.calcPositionFromColor(this.props.color)
       });
     }
   }
-
   componentWillUnmount() {
     this.removeEventListeners();
   }
-
   get paletteWidth() {
     return this._paletteRef.getBoundingClientRect().width - this._paletteOffset;
   }
-
   get paletteHeight() {
     return this._paletteRef.getBoundingClientRect().height - this._paletteOffset;
   }
-
   calcPositionFromColor(hsv) {
     const s = hsv.s,
-          v = hsv.v;
+      v = hsv.v;
     const x = s * this.paletteWidth;
     const y = (1 - v) * this.paletteHeight;
     return {
@@ -142,54 +122,42 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       y
     };
   }
-
   handlePaletteMouseDown(e) {
     this.handleChange(e);
     this._mouseMoveListener = addEventListener(window, 'mousemove', this.handleChange);
     this._mouseUpListener = addEventListener(window, 'mouseup', this.handleMouseUp);
   }
-
   removeEventListeners() {
     var _this$_mouseMoveListe, _this$_mouseUpListene;
-
     (_this$_mouseMoveListe = this._mouseMoveListener) === null || _this$_mouseMoveListe === void 0 ? void 0 : _this$_mouseMoveListe.remove();
     (_this$_mouseUpListene = this._mouseUpListener) === null || _this$_mouseUpListene === void 0 ? void 0 : _this$_mouseUpListene.remove();
   }
-
   calcColorPosition(clientX, clientY) {
     const _getBoundingClientRec = this._paletteRef.getBoundingClientRect(),
-          x = _getBoundingClientRec.x,
-          y = _getBoundingClientRec.y;
-
+      x = _getBoundingClientRec.x,
+      y = _getBoundingClientRec.y;
     return this.applyBoundaries(clientX - x, clientY - y);
   }
-
   applyBoundaries(x, y) {
     let newXPosition = x;
     let newYPosition = y;
-
     if (x > this.paletteWidth) {
       newXPosition = this.paletteWidth;
     }
-
     if (x < 0) {
       newXPosition = 0;
     }
-
     if (y > this.paletteHeight) {
       newYPosition = this.paletteHeight;
     }
-
     if (y < 0) {
       newYPosition = 0;
     }
-
     return {
       newXPosition,
       newYPosition
     };
   }
-
   handleKeyDown(e) {
     if (this.props.disabled) return;
     const key = e.key;
@@ -197,27 +165,21 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     e.preventDefault();
     let deltaX = 0;
     let deltaY = 0;
-
     if (key === 'ArrowLeft' || key === 'a') {
       deltaX = -2;
     }
-
     if (key === 'ArrowRight' || key === 'd') {
       deltaX = 2;
     }
-
     if (key === 'ArrowUp' || key === 'w') {
       deltaY = -2;
     }
-
     if (key === 'ArrowDown' || key === 's') {
       deltaY = 2;
     }
-
     const _this$applyBoundaries = this.applyBoundaries(this.state.colorPosition.x + deltaX, this.state.colorPosition.y + deltaY),
-          newXPosition = _this$applyBoundaries.newXPosition,
-          newYPosition = _this$applyBoundaries.newYPosition;
-
+      newXPosition = _this$applyBoundaries.newXPosition,
+      newYPosition = _this$applyBoundaries.newYPosition;
     this.setState({
       colorPosition: {
         x: newXPosition,
@@ -230,10 +192,8 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       v: this.calcLuminance(newYPosition)
     });
   }
-
   render() {
     var _this$props$styles2, _this$props$styles3, _this$props$styles4;
-
     return jsx(View, {
       elementRef: this.handleRef,
       disabled: this.props.disabled,
@@ -259,6 +219,5 @@ let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     }));
   }
-
 }, _class2.displayName = "ColorPalette", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorMixer.Palette', _class2)) || _class);
 export default ColorPalette;

package/es/ColorMixer/ColorPalette/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   disabled: PropTypes.bool,

package/es/ColorMixer/ColorPalette/styles.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { px } from '@instructure/ui-utils';
+
 /**
  * ---
  * private: true
@@ -32,10 +34,8 @@ import { px } from '@instructure/ui-utils';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-
 const generateStyle = (componentTheme, props, state) => {
   var _state$colorPosition, _state$colorPosition2;
-
   return {
     ColorPalette: {
       label: 'ColorPalette'
@@ -78,5 +78,4 @@ const generateStyle = (componentTheme, props, state) => {
     paletteOffset: componentTheme.paletteOffset
   };
 };
-
 export default generateStyle;