draft-components 1.10.2 → 1.12.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/slide-over/slide-over-header.cjs

@@ -6,13 +6,13 @@ require('../button/button.cjs');
 const iconButton = require('../button/icon-button.cjs');
 const slideOverContext = require('./slide-over-context.cjs');
 
-function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
     const { titleId, descriptionId, closePanel } = slideOverContext.useSlideOverContext();
     const onCloseButtonClicked = (ev) => {
         closePanel('close-button');
         onClickCloseButton?.(ev);
     };
-    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxRuntime.jsxs("div", { className: "dc-slide-over-header__title", children: [jsxRuntime.jsx("h2", { id: titleId, children: title }), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxRuntime.jsxs("div", { className: "dc-slide-over-header__title", children: [jsxRuntime.jsx("h2", { id: titleId, children: title }), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (jsxRuntime.jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
 }
 function XMarkIcon(props) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));

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

@@ -1275,6 +1275,12 @@
   margin-top: 4px;
 }
 
+.dc-slide-over-header__content {
+  font: var(--dc-text-md);
+  color: var(--dc-slide-over-text-color);
+  margin-top: 8px;
+}
+
 .dc-slide-over-body {
   color: var(--dc-slide-over-text-color);
   overflow: auto;
@@ -1787,25 +1793,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 +1831,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 +1851,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 +1910,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 +1945,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 +1990,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 +2026,8 @@
 .dc-radio__icon {
   color: var(--dc-radio-color-icon);
   display: none;
+  width: 100%;
+  height: 100%;
 }
 
 .dc-radio__input:checked + .dc-radio__check {

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/slide-over/slide-over-header.js

@@ -4,13 +4,13 @@ import '../button/button.js';
 import { IconButton } from '../button/icon-button.js';
 import { useSlideOverContext } from './slide-over-context.js';
 
-function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
     const { titleId, descriptionId, closePanel } = useSlideOverContext();
     const onCloseButtonClicked = (ev) => {
         closePanel('close-button');
         onClickCloseButton?.(ev);
     };
-    return (jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxs("div", { className: "dc-slide-over-header__title", children: [jsx("h2", { id: titleId, children: title }), jsx(IconButton, { icon: jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+    return (jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxs("div", { className: "dc-slide-over-header__title", children: [jsx("h2", { id: titleId, children: title }), jsx(IconButton, { icon: jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
 }
 function XMarkIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));

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.2",
+  "version": "1.12.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/slide-over/slide-over-header.d.ts

@@ -8,4 +8,4 @@ export type SlideOverHeaderProps = {
     closeButtonAccessibleName?: string;
     onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
 } & SlideOverHeaderBaseProps;
-export declare function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;