draft-components 1.10.1 → 1.11.0

package/cjs/components/checkbox/checkbox.cjs

@@ -4,13 +4,17 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const checkIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon", children: jsxRuntime.jsx("path", { d: "M6 12.5556L10.8 17L18 7", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dashIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon", children: jsxRuntime.jsx("path", { d: "M6 12H18", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }));
-const Checkbox = react.forwardRef(function Checkbox({ hasMixedState = false, style = {}, className = '', onChange, onToggle, ...props }, ref) {
+const Checkbox = react.forwardRef(function Checkbox({ hasMixedState = false, style, className, onChange, onToggle, ...props }, ref) {
     return (jsxRuntime.jsxs("label", { style: style, className: reactHelpers.classNames('dc-checkbox', className), children: [jsxRuntime.jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsxRuntime.jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? dashIcon : checkIcon })] }));
+                } }), jsxRuntime.jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? (jsxRuntime.jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" })) : (jsxRuntime.jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon" })) })] }));
 });
+function CheckIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsxRuntime.jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DashIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsxRuntime.jsx("path", { d: "M5 10H15", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round" }) }));
+}
 
 exports.Checkbox = Checkbox;

package/cjs/components/radio/radio.cjs

@@ -4,21 +4,25 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const checkIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-check-icon", children: jsxRuntime.jsx("path", { d: "M7 12.7222L11 16.5L17 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dotIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-dot-icon", children: jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }));
-const Radio = react.forwardRef(function Radio({ icon = 'dot', style = {}, className = '', onChange, onToggle, ...props }, ref) {
-    let renderedIcon;
+const Radio = react.forwardRef(function Radio({ icon = 'dot', style, className, onChange, onToggle, ...props }, ref) {
+    let iconElement;
     switch (icon) {
         case 'check':
-            renderedIcon = checkIcon;
+            iconElement = jsxRuntime.jsx(CheckIcon, { className: "dc-radio__icon", "data-testid": "radio-check-icon" });
             break;
         default:
-            renderedIcon = dotIcon;
+            iconElement = jsxRuntime.jsx(DotIcon, { className: "dc-radio__icon", "data-testid": "radio-dot-icon" });
     }
     return (jsxRuntime.jsxs("label", { style: style, className: reactHelpers.classNames('dc-radio', className), children: [jsxRuntime.jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__input", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsxRuntime.jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: renderedIcon })] }));
+                } }), jsxRuntime.jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: iconElement })] }));
 });
+function CheckIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsxRuntime.jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DotIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 4, fill: "currentColor" }) }));
+}
 
 exports.Radio = Radio;

package/cjs/components/switch/switch.cjs

@@ -4,12 +4,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const checkIcon = (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", className: "dc-switch__icon", "data-testid": "switch-check-icon", children: jsxRuntime.jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const Switch = react.forwardRef(function Switch({ style = {}, className = '', showCheckIcon = true, onChange, onToggle, ...props }, ref) {
+const Switch = react.forwardRef(function Switch({ showCheckIcon = true, style, className, onChange, onToggle, ...props }, ref) {
     return (jsxRuntime.jsxs("label", { style: style, className: reactHelpers.classNames('dc-switch', className), children: [jsxRuntime.jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsxRuntime.jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsxRuntime.jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && checkIcon }) })] }));
+                } }), jsxRuntime.jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsxRuntime.jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && (jsxRuntime.jsx(CheckIcon, { className: "dc-switch__icon", "data-testid": "switch-check-icon" })) }) })] }));
 });
+function CheckIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsxRuntime.jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 exports.Switch = Switch;

package/css/draft-components-utilities.css

@@ -1645,3 +1645,27 @@
   border: 0 !important;
   clip: rect(0, 0, 0, 0) !important;
 }
+
+.v-align-baseline {
+  vertical-align: baseline;
+}
+
+.v-align-top {
+  vertical-align: top;
+}
+
+.v-align-middle {
+  vertical-align: middle;
+}
+
+.v-align-bottom {
+  vertical-align: bottom;
+}
+
+.v-align-text-top {
+  vertical-align: text-top;
+}
+
+.v-align-text-bottom {
+  vertical-align: text-bottom;
+}

package/css/draft-components.css

@@ -1787,25 +1787,33 @@
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  position: relative;
   display: inline-flex;
+  flex-shrink: 0;
+  width: var(--dc-switch-width);
+  height: var(--dc-switch-height);
+  text-align: left;
 }
 
 .dc-switch__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .dc-switch__track {
-  font-size: 16px;
-  position: relative;
-  display: inline-flex;
+  display: inline-block;
   cursor: pointer;
   flex: none;
   box-sizing: border-box;
-  width: var(--dc-switch-width);
-  height: var(--dc-switch-height);
+  width: 100%;
+  height: 100%;
   transition-duration: 0.2s;
   transition-property: opacity, background-color;
   vertical-align: middle;
@@ -1817,7 +1825,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  display: inline-flex;
+  display: inline-block;
   align-items: center;
   justify-content: center;
   width: var(--dc-switch-thumb-size);
@@ -1837,6 +1845,8 @@
 .dc-switch__icon {
   color: var(--dc-switch-icon-color);
   opacity: 0;
+  width: var(--dc-switch-thumb-size);
+  height: var(--dc-switch-thumb-size);
   transition: opacity 0.2s;
 }
 
@@ -1894,26 +1904,28 @@
 
   color-scheme: light;
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  flex-shrink: 0;
   width: var(--dc-checkbox-size);
   height: var(--dc-checkbox-size);
+  text-align: left;
 }
 
 .dc-checkbox__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .dc-checkbox__check {
-  font-size: 16px;
-  position: absolute;
-  display: inline-flex;
+  display: inline-block;
   cursor: pointer;
-  flex: none;
-  align-items: center;
-  justify-content: center;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -1927,6 +1939,8 @@
 .dc-checkbox__icon {
   color: var(--dc-checkbox-icon-color);
   display: none;
+  width: 100%;
+  height: 100%;
 }
 
 .dc-checkbox__input:checked + .dc-checkbox__check {
@@ -1970,24 +1984,29 @@
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  position: relative;
   display: inline-flex;
+  flex-shrink: 0;
+  width: var(--dc-radio-size);
+  height: var(--dc-radio-size);
+  text-align: left;
 }
 
 .dc-radio__input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .dc-radio__check {
-  font-size: 16px;
-  position: relative;
-  display: inline-flex;
+  display: inline-block;
   cursor: pointer;
-  flex: none;
-  align-items: center;
-  justify-content: center;
   box-sizing: border-box;
   width: var(--dc-radio-size);
   height: var(--dc-radio-size);
@@ -2001,6 +2020,8 @@
 .dc-radio__icon {
   color: var(--dc-radio-color-icon);
   display: none;
+  width: 100%;
+  height: 100%;
 }
 
 .dc-radio__input:checked + .dc-radio__check {
@@ -3937,7 +3958,6 @@
 }
 
 .dc-filtered-search__filters {
-  z-index: var(--dc-overlay-z-index);
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
@@ -3984,6 +4004,7 @@
 .dc-filtered-search__list-box {
   font-size: var(--dc-filtered-search-font-size);
   position: absolute;
+  z-index: var(--dc-overlay-z-index);
   top: calc(100% + 8px);
   left: 0;
   box-sizing: border-box;

package/esm/components/checkbox/checkbox.js

@@ -1,14 +1,18 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const checkIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon", children: jsx("path", { d: "M6 12.5556L10.8 17L18 7", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dashIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon", children: jsx("path", { d: "M6 12H18", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }));
-const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style = {}, className = '', onChange, onToggle, ...props }, ref) {
+const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style, className, onChange, onToggle, ...props }, ref) {
     return (jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? dashIcon : checkIcon })] }));
+                } }), jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? (jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" })) : (jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon" })) })] }));
 });
+function CheckIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DashIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsx("path", { d: "M5 10H15", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round" }) }));
+}
 
 export { Checkbox };

package/esm/components/radio/radio.js

@@ -2,21 +2,25 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const checkIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-check-icon", children: jsx("path", { d: "M7 12.7222L11 16.5L17 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dotIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-dot-icon", children: jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }));
-const Radio = forwardRef(function Radio({ icon = 'dot', style = {}, className = '', onChange, onToggle, ...props }, ref) {
-    let renderedIcon;
+const Radio = forwardRef(function Radio({ icon = 'dot', style, className, onChange, onToggle, ...props }, ref) {
+    let iconElement;
     switch (icon) {
         case 'check':
-            renderedIcon = checkIcon;
+            iconElement = jsx(CheckIcon, { className: "dc-radio__icon", "data-testid": "radio-check-icon" });
             break;
         default:
-            renderedIcon = dotIcon;
+            iconElement = jsx(DotIcon, { className: "dc-radio__icon", "data-testid": "radio-dot-icon" });
     }
     return (jsxs("label", { style: style, className: classNames('dc-radio', className), children: [jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__input", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: renderedIcon })] }));
+                } }), jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: iconElement })] }));
 });
+function CheckIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DotIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsx("circle", { cx: 10, cy: 10, r: 4, fill: "currentColor" }) }));
+}
 
 export { Radio };

package/esm/components/switch/switch.js

@@ -1,13 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const checkIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", className: "dc-switch__icon", "data-testid": "switch-check-icon", children: jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const Switch = forwardRef(function Switch({ style = {}, className = '', showCheckIcon = true, onChange, onToggle, ...props }, ref) {
+const Switch = forwardRef(function Switch({ showCheckIcon = true, style, className, onChange, onToggle, ...props }, ref) {
     return (jsxs("label", { style: style, className: classNames('dc-switch', className), children: [jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && checkIcon }) })] }));
+                } }), jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && (jsx(CheckIcon, { className: "dc-switch__icon", "data-testid": "switch-check-icon" })) }) })] }));
 });
+function CheckIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 export { Switch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {