@govtechsg/sgds-web-component 3.19.0-rc.0 → 3.19.0-rc.3

package/react/components/Switch/switch.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
+var css_248z = lit.css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=switch.cjs.js.map

package/react/components/Switch/switch.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
+var css_248z = css`input{margin:0}.form-check{align-items:center;display:flex;gap:var(--sgds-form-gap-lg)}.form-check-input{--sgds-switch-width:var(--sgds-form-width-xl);--sgds-switch-height:var(--sgds-form-height-md);--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.5 12c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12-12-5.373-12-12Z" fill="%23fff"/></svg>');appearance:none;background-color:var(--sgds-form-surface-subtle);background-image:var(--sgds-switch-bg-image);background-position:left var(--sgds-form-padding-inline-sm) center;background-repeat:no-repeat;background-size:var(--sgds-form-width-xs) var(--sgds-form-height-sm);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-full);height:var(--sgds-switch-height);padding:0 var(--sgds-form-padding-inline-sm);transition:background-position .15s ease-in-out;width:var(--sgds-switch-width)}.form-check-input:focus,.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis)}.form-check-input:focus-visible{background-color:var(--sgds-form-surface-emphasis);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:0}.form-check-input:not([disabled]):hover{background-color:var(--sgds-form-surface-emphasis)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);background-position:right var(--sgds-form-padding-inline-sm) center}.form-check-input:not([disabled])[checked]:focus-visible,.form-check-input:not([disabled])[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([size=sm]) .form-check{font-size:var(--sgds-font-size-14)}:host([size=sm]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-md);--sgds-switch-height:var(--sgds-form-height-sm);background-size:var(--sgds-form-width-2-xs) var(--sgds-form-height-2-xs)}:host([size=lg]) .form-check{font-size:var(--sgds-font-size-20)}:host([size=lg]) .form-check-input{--sgds-switch-width:var(--sgds-form-width-3-xl);--sgds-switch-height:var(--sgds-form-height-lg);background-size:var(--sgds-form-width-sm) var(--sgds-form-height-md)}@media (prefers-reduced-motion:reduce){.form-check .form-check-input{transition:none}}:host([icon]) .form-check-input[checked]{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Zm8.94-21.778a.776.776 0 0 0-.424-.424.781.781 0 0 0-.854.17L13.261 20.372l-4.924-4.925a.783.783 0 1 0-1.108 1.108l5.478 5.478a.777.777 0 0 0 .692.217.787.787 0 0 0 .416-.217L24.77 11.076a.777.777 0 0 0 .17-.854Z" fill="%23fff"/></svg>')}:host([icon]) .form-check-input{--sgds-switch-bg-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16ZM10.164 9.416a.75.75 0 0 0-.53 1.28L14.937 16l-5.303 5.303a.75.75 0 0 0 1.06 1.061l5.304-5.303 5.303 5.303a.75.75 0 1 0 1.06-1.06L17.06 16l5.303-5.303a.75.75 0 0 0-1.06-1.061l-5.304 5.304-5.303-5.304a.75.75 0 0 0-.53-.22Z" fill="%23fff"/></svg>')}.d-none{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=switch.js.map

package/react/components/Tab/tab.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = lit.css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=tab.cjs.js.map

package/react/components/Tab/tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=tab.js.map

package/react/components/Table/table.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.table>:not(caption) td>div,.table>:not(caption) th>div{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}:host([tableBorder]) .table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-bottom:0}:host([tableBorder]) .table.no-border{border:0}:host([headerBackground]) th{background-color:var(--sgds-surface-raised)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+var css_248z = lit.css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;table-layout:fixed;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.table>:not(caption) td>div,.table>:not(caption) th>div{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}:host([tableBorder]) .table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-bottom:0}:host([tableBorder]) .table.no-border{border:0}:host([headerBackground]) th{background-color:var(--sgds-surface-raised)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=table.cjs.js.map

package/react/components/Table/table.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.table>:not(caption) td>div,.table>:not(caption) th>div{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}:host([tableBorder]) .table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-bottom:0}:host([tableBorder]) .table.no-border{border:0}:host([headerBackground]) th{background-color:var(--sgds-surface-raised)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;table-layout:fixed;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.table>:not(caption) td>div,.table>:not(caption) th>div{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}:host([tableBorder]) .table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-bottom:0}:host([tableBorder]) .table.no-border{border:0}:host([headerBackground]) th{background-color:var(--sgds-surface-raised)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=table.js.map

package/react/components/Textarea/textarea.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
+var css_248z = lit.css`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=textarea.cjs.js.map

package/react/components/Textarea/textarea.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
+var css_248z = css`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
 
 export { css_248z as default };
 //# sourceMappingURL=textarea.js.map

package/react/datepicker/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDatepickerProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDatepickerProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/description-list/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDescriptionListProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDescriptionListProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/description-list-group/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDescriptionListGroupProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDescriptionListGroupProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/divider/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDividerProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDividerProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/drawer/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDrawerProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDrawerProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/dropdown/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDropdownProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDropdownProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/dropdown-item/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsDropdownItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsDropdownItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/file-upload/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsFileUploadProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsFileUploadProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/footer/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsFooterProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsFooterProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/footer-item/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsFooterItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsFooterItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/icon/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsIconProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsIconProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/icon-button/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsIconButtonProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsIconButtonProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/icon-card/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsIconCardProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsIconCardProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/icon-list/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsIconListProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsIconListProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/image-card/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsImageCardProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsImageCardProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/index.cjs.js

@@ -10,8 +10,8 @@ var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
 var index$5 = require('./breadcrumb-item/index.cjs.js');
 var index$6 = require('./breadcrumb/index.cjs.js');
-var index$7 = require('./button/index.cjs.js');
-var index$8 = require('./card/index.cjs.js');
+var index$7 = require('./card/index.cjs.js');
+var index$8 = require('./button/index.cjs.js');
 var index$9 = require('./checkbox-group/index.cjs.js');
 var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
@@ -86,8 +86,8 @@ exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
 exports.SgdsBreadcrumbItem = index$5["default"];
 exports.SgdsBreadcrumb = index$6["default"];
-exports.SgdsButton = index$7["default"];
-exports.SgdsCard = index$8["default"];
+exports.SgdsCard = index$7["default"];
+exports.SgdsButton = index$8["default"];
 exports.SgdsCheckboxGroup = index$9["default"];
 exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];

package/react/index.d.ts

@@ -5,8 +5,8 @@ export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
-export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
+export { default as SgdsButton } from './button';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';

package/react/index.js

@@ -6,8 +6,8 @@ export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
-export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';

package/react/input/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsInputProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsInputProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/link/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsLinkProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsLinkProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/mainnav/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsMainnavProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMainnavProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/mainnav-dropdown/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsMainnavDropdownProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMainnavDropdownProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/mainnav-item/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsMainnavItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMainnavItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/masthead/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsMastheadProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMastheadProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/modal/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsModalProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsModalProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/overflow-menu/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsOverflowMenuProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsOverflowMenuProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/pagination/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsPaginationProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsPaginationProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/progress-bar/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsProgressBarProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsProgressBarProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/quantity-toggle/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsQuantityToggleProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsQuantityToggleProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/radio/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsRadioProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsRadioProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/radio-group/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsRadioGroupProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsRadioGroupProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/select/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSelectProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSelectProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/select-option/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSelectOptionProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSelectOptionProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidebar/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidebarProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidebarProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidebar-group/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidebarGroupProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidebarGroupProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidebar-item/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidebarItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidebarItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidebar-section/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidebarSectionProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidebarSectionProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidenav/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidenavProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidenavProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidenav-item/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidenavItemProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidenavItemProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/sidenav-link/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSidenavLinkProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSidenavLinkProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/skeleton/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSkeletonProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSkeletonProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/spinner/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsSpinnerProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsSpinnerProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/step/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsStepProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsStepProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/stepper/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: React.ForwardRefExoticComponent<any>;
+import type { SgdsStepperProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsStepperProps> & React.RefAttributes<HTMLElement>>;
 export default _default;

package/react/styles/form-check.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-check.cjs.js.map

package/react/styles/form-check.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-check.js.map

package/react/styles/form-hint.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-hint.cjs.js.map

package/react/styles/form-hint.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-hint.js.map

package/react/styles/form-label.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-label.cjs.js.map

package/react/styles/form-label.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-24);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map