@loomhq/lens 10.60.0 → 10.61.0

package/dist/colors.js

@@ -104,12 +104,12 @@ export const hslaBaseColors = {
 };
 export const hslaGreys = {
     grey8: { h: 0, s: 0, l: 13, a: 1 },
-    grey7: { h: 242, s: 21, l: 28, a: 1 },
+    grey7: { h: 246, s: 16, l: 26, a: 1 },
     grey6: { h: 252, s: 13, l: 46, a: 1 },
     grey5: { h: 240, s: 7, l: 62, a: 1 },
-    grey4: { h: 240, s: 5.8, l: 76.3, a: 1 },
-    grey3: { h: 240, s: 6, l: 87, a: 1 },
-    grey2: { h: 240, s: 8, l: 93, a: 1 },
+    grey4: { h: 259, s: 12, l: 75, a: 1 },
+    grey3: { h: 260, s: 11, l: 85, a: 1 },
+    grey2: { h: 260, s: 11, l: 95, a: 1 },
     grey1: { h: 240, s: 7, l: 97, a: 1 },
     white: { h: 240, s: 7, l: 100, a: 1 },
 };

package/dist/components/checkbox/checkbox.js

@@ -16,7 +16,7 @@ const SvgCheckboxCheck = props => (React.createElement("svg", Object.assign({ wi
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L4 6.586 10.293.293a1 1 0 011.414 0z", fill: "currentColor" })));
 const SvgCheckboxMinus = props => (React.createElement("svg", Object.assign({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 1a1 1 0 011-1h10a1 1 0 110 2H1a1 1 0 01-1-1z", fill: "currentColor" })));
-const CheckboxLabel = styled.label `
+const CheckboxWrapper = styled.div `
   display: block;
   position: relative;
 `;
@@ -85,8 +85,8 @@ const Checkbox = forwardRef((_a, ref) => {
     useEffect(() => {
         checkboxRef.current.indeterminate = isIndeterminate;
     });
-    return (React.createElement(CheckboxLabel, null,
-        React.createElement(CheckboxInput, Object.assign({ type: "checkbox", disabled: isDisabled, checked: isChecked, onFocus: onFocus, onChange: onChange, onBlur: onBlur, ref: checkboxRef }, props)),
+    return (React.createElement(CheckboxWrapper, null,
+        React.createElement(CheckboxInput, Object.assign({ role: "checkbox", type: "checkbox", disabled: isDisabled, checked: isChecked, onFocus: onFocus, onChange: onChange, onBlur: onBlur, ref: checkboxRef, "aria-checked": isChecked }, props)),
         React.createElement(CheckboxBox, { className: "CheckboxBox" },
             React.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }),
             React.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor }))));

package/dist/components/switch/switch.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 declare const SwitchInput: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SwitchInputProps, object>;
-declare const Switch: ({ isActive, isDisabled, onChange, size, ...props }: SwitchProps & Omit<React.ComponentProps<typeof SwitchInput>, 'size'>) => JSX.Element;
+declare const Switch: ({ isActive, isDisabled, onChange, size, ariaLabelledby, ariaLabel, ...props }: SwitchProps & Omit<React.ComponentProps<typeof SwitchInput>, 'size'>) => JSX.Element;
 declare type SwitchProps = {
     isActive?: boolean;
     isDisabled?: boolean;
     onChange?: React.ReactEventHandler;
     size?: 'medium' | 'large';
+    ariaLabelledby?: string;
+    ariaLabel?: string;
 };
 declare type SwitchInputProps = {
     switchSize?: 'medium' | 'large';

package/dist/components/switch/switch.js

@@ -53,7 +53,7 @@ const getKnobSize = props => {
     return (sizes[props.switchSize].switchHeight -
         sizes[props.switchSize].knobOffset * 2);
 };
-const SwitchLabel = styled.label `
+const SwitchWrapper = styled.div `
   display: block;
   position: relative;
 `;
@@ -113,9 +113,12 @@ const SwitchBox = styled.div `
   }
 `;
 const Switch = (_a) => {
-    var { isActive, isDisabled, onChange, size = 'medium' } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size"]);
-    return (React.createElement(SwitchLabel, null,
-        React.createElement(SwitchInput, Object.assign({}, props, { checked: isActive, disabled: isDisabled, onChange: onChange, type: "checkbox", switchSize: size })),
+    var { isActive, isDisabled, onChange, size = 'medium', ariaLabelledby, ariaLabel } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size", "ariaLabelledby", "ariaLabel"]);
+    if (ariaLabelledby && ariaLabel) {
+        throw new Error('ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs. ');
+    }
+    return (React.createElement(SwitchWrapper, null,
+        React.createElement(SwitchInput, Object.assign({}, props, { role: "switch", type: "checkbox", checked: isActive, disabled: isDisabled, onChange: onChange, switchSize: size, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-checked": isActive })),
         React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size })));
 };
 export default Switch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.60.0",
+  "version": "10.61.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",