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

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = 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 = 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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/react/subnav/index.d.ts

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

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

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

package/react/switch/index.d.ts

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

package/react/system-banner/index.d.ts

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

package/react/system-banner-item/index.d.ts

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

package/react/tab/index.d.ts

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

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

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

package/react/tab-panel/index.d.ts

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

package/react/table/index.d.ts

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

package/react/table-cell/index.d.ts

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

package/react/table-head/index.d.ts

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

package/react/table-of-contents/index.d.ts

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

package/react/table-row/index.d.ts

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

package/react/textarea/index.d.ts

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

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

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

package/react/toast/index.d.ts

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

package/react/toast-container/index.d.ts

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

package/react/tooltip/index.d.ts

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

package/styles/form-check.js

@@ -1,6 +1,6 @@
 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/styles/form-hint.js

@@ -1,6 +1,6 @@
 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/styles/form-label.js

@@ -1,6 +1,6 @@
 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/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = 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 = 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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map