@amboss/design-system 4.9.4 → 4.11.0

package/build/esm/components/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from "react";
 import type { MQ } from "../../types";
 import type { DataTableColumn, DataTableColumnOrGroup, DataTableRow, DataTableRowProps, DataTableSlotProps } from "./types";
+import { defaultSortCompareFn } from "./useDataTableSort";
 import { DataTableToolbar } from "./DataTableToolbar/DataTableToolbar";
 type DataTablePropsBase = {
     /** Screen reader text for table caption */
@@ -143,7 +144,7 @@ export type DataTableProps = DataTablePropsBase & (DataTableSelectableProps | Da
 export declare function BaseDataTable({ caption, columns, rows, footer, currentlySortedByColumn, isFirstColumnSticky, isLastColumnSticky, "data-e2e-test-id": dataE2eTestId, isLoading, loadingStateScreenReaderText, isEmpty, slotProps, children, emptyTableContentHeight, layout, width, bodyCellVerticalPadding, emptyCellContent, maxHeight, isSelectable, selectedRowIds, allRowsSelected, selectAllRowsCheckboxAriaLabel, getRowProps, onRowSelectionChange, onAllRowsSelectionChange, isExpandable, expandedRowIds: expandedRowIdsProp, onRowExpansionChange, expandRowAriaLabel, collapseRowAriaLabel, onSort, ...ariaAttributes }: DataTableProps): ReactElement;
 export declare function DataTable({ children, ...rest }: DataTableProps): ReactElement;
 export declare namespace DataTable {
-    var sortCompareFn: (a: DataTableRow, b: DataTableRow, columnName: DataTableColumn["name"], desiredSortDirection: DataTableColumn["sortDirection"]) => number;
-    var Toolbar: typeof DataTableToolbar;
+    export { defaultSortCompareFn as sortCompareFn };
+    export { DataTableToolbar as Toolbar };
 }
 export {};

package/build/esm/components/DataTable/DataTable.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import React,{useCallback,useEffect,useRef,useState}from"react";import{useResponsiveValue}from"../../shared/mediaQueries";import{Container}from"../Container/Container";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{buildColumnSegments}from"./internal/buildColumnSegments";import{buildInternalColumns}from"./internal/buildInternalColumns";import TableHeader from"./header/TableHeader";import TableBody from"./TableBody";import TableColumnGroups from"./TableColumnGroups";import{useDataTableScrollContainerWidth}from"./useDataTableScrollContainer";import{defaultSortCompareFn}from"./useDataTableSort";import{DataTableToolbar}from"./DataTableToolbar/DataTableToolbar";function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}let TableContainer=styled("div",{target:"e1eldv6n0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...useResponsiveValue({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=styled("table",{target:"e1eldv6n1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...useResponsiveValue({width:tableWidth})})),StyledFooter=styled("div",{target:"e1eldv6n2",label:"StyledFooter"})(({theme})=>({padding:theme.variables.size.spacing.xs,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"})),NO_SELECTED_ROW_IDS=[];export function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=NO_SELECTED_ROW_IDS,allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=useState(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=useState(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=useState([]),tableRef=useRef(null),containerRef=useRef(null),containerWidth=useDataTableScrollContainerWidth(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,activeSelectedRowIds=isSelectable?selectedRowIds:NO_SELECTED_ROW_IDS,internalColumns=buildInternalColumns({columns,features:{selectable:isSelectable,expandable:isExpandable}}),columnSegments=buildColumnSegments(internalColumns),hasColumnGroups=columnSegments.some(({group})=>group),handleRowExpansionChange=useCallback(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=useCallback(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);useEffect(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?React.createElement(StyledFooter,null,footer):null;return React.createElement(React.Fragment,null,React.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},React.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},React.createElement(ScreenReaderText,{as:"caption"},caption),hasColumnGroups&&React.createElement(TableColumnGroups,{segments:columnSegments}),React.createElement(TableHeader,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:activeSelectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),React.createElement(TableBody,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:activeSelectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}export function DataTable({children,...rest}){return React.createElement(Container,{elevation:1},React.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=defaultSortCompareFn,DataTable.Toolbar=DataTableToolbar;
+import styled from"@emotion/styled";import React,{useCallback,useEffect,useRef,useState}from"react";import{useResponsiveValue}from"../../shared/mediaQueries";import{Container}from"../Container/Container";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{buildColumnSegments}from"./internal/buildColumnSegments";import{buildInternalColumns}from"./internal/buildInternalColumns";import TableHeader from"./header/TableHeader";import TableBody from"./TableBody";import TableColumnGroups from"./TableColumnGroups";import{useDataTableScrollContainerWidth}from"./useDataTableScrollContainer";import{defaultSortCompareFn}from"./useDataTableSort";import{DataTableToolbar}from"./DataTableToolbar/DataTableToolbar";function getTableScrolledToRight(elm){let elmRect=elm.getBoundingClientRect();return elm.scrollLeft+elmRect.width>=elm.scrollWidth}let TableContainer=styled("div",{target:"e17u2o1w0",label:"TableContainer"})(({theme,footer,maxHeight})=>({position:"relative",zIndex:0,overflow:"auto",backgroundColor:theme.values.color.background.primary.default,borderRadius:"inherit",...useResponsiveValue({maxHeight}),...footer&&{borderBottomLeftRadius:0,borderBottomRightRadius:0}})),StyledTable=styled("table",{target:"e17u2o1w1",label:"StyledTable"})(({layout,tableWidth})=>({borderSpacing:0,tableLayout:layout,...useResponsiveValue({width:tableWidth})})),StyledFooter=styled("div",{target:"e17u2o1w2",label:"StyledFooter"})(({theme})=>({padding:theme.variables.size.spacing.xs,backgroundColor:theme.values.color.background.primary.default,borderBottomLeftRadius:"inherit",borderBottomRightRadius:"inherit"})),NO_SELECTED_ROW_IDS=[];export function BaseDataTable({caption,columns,rows=[],footer,currentlySortedByColumn,isFirstColumnSticky=!0,isLastColumnSticky=!1,"data-e2e-test-id":dataE2eTestId,isLoading=!1,loadingStateScreenReaderText="Loading",isEmpty=!1,slotProps,children,emptyTableContentHeight="15rem",layout="auto",width="100%",bodyCellVerticalPadding="m",emptyCellContent="--",maxHeight,isSelectable,selectedRowIds=NO_SELECTED_ROW_IDS,allRowsSelected,selectAllRowsCheckboxAriaLabel,getRowProps=()=>({}),onRowSelectionChange,onAllRowsSelectionChange,isExpandable,expandedRowIds:expandedRowIdsProp,onRowExpansionChange,expandRowAriaLabel,collapseRowAriaLabel,onSort,...ariaAttributes}){let[isScrolledToRight,setIsScrolledToRight]=useState(isLastColumnSticky),[isScrolledToLeft,setIsScrolledToLeft]=useState(isFirstColumnSticky),[uncontrolledExpandedRowIds,setUncontrolledExpandedRowIds]=useState([]),tableRef=useRef(null),containerRef=useRef(null),containerWidth=useDataTableScrollContainerWidth(containerRef),isExpandedControlled=void 0!==expandedRowIdsProp,expandedRowIds=isExpandedControlled?expandedRowIdsProp:uncontrolledExpandedRowIds,activeSelectedRowIds=isSelectable?selectedRowIds:NO_SELECTED_ROW_IDS,internalColumns=buildInternalColumns({columns,features:{selectable:isSelectable,expandable:isExpandable}}),columnSegments=buildColumnSegments(internalColumns),hasColumnGroups=columnSegments.some(({group})=>group),handleRowExpansionChange=useCallback(nextExpandedRowIds=>{isExpandedControlled||setUncontrolledExpandedRowIds(nextExpandedRowIds),onRowExpansionChange?.(nextExpandedRowIds)},[isExpandedControlled,onRowExpansionChange]),handleScroll=useCallback(evt=>{let elm=evt.currentTarget;setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))},[]);useEffect(()=>{if("undefined"==typeof ResizeObserver||!containerRef.current)return;let elm=containerRef.current,observer=new ResizeObserver(()=>{setIsScrolledToLeft(0===elm.scrollLeft),setIsScrolledToRight(getTableScrolledToRight(elm))});return observer.observe(elm),()=>observer.disconnect()},[]);let footerElm=footer?React.createElement(StyledFooter,null,footer):null;return React.createElement(React.Fragment,null,React.createElement(TableContainer,{ref:containerRef,footer:footer,maxHeight:maxHeight,onScroll:handleScroll},React.createElement(StyledTable,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"DataTable",ref:tableRef,layout:layout,tableWidth:width,"aria-busy":isLoading||void 0,...ariaAttributes},React.createElement(ScreenReaderText,{as:"caption"},caption),hasColumnGroups&&React.createElement(TableColumnGroups,{segments:columnSegments}),React.createElement(TableHeader,{columns:internalColumns,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,currentlySortedByColumn:currentlySortedByColumn,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,maxHeight:maxHeight,allRowsSelected:allRowsSelected,selectedRowIds:activeSelectedRowIds,onAllRowsSelectionChange:onAllRowsSelectionChange,selectAllRowsCheckboxAriaLabel:selectAllRowsCheckboxAriaLabel,onSort:onSort}),React.createElement(TableBody,{columns:internalColumns,rows:rows,bodyCellVerticalPadding:bodyCellVerticalPadding,isTableScrolledToLeft:isScrolledToLeft,isTableScrolledToRight:isScrolledToRight,isEmpty:isEmpty,emptyState:slotProps?.emptyState,isLoading:isLoading,loadingStateScreenReaderText:loadingStateScreenReaderText,emptyTableContentHeight:emptyTableContentHeight,containerWidth:containerWidth,footer:footer,isFirstColumnSticky:isFirstColumnSticky,isLastColumnSticky:isLastColumnSticky,emptyCellContent:emptyCellContent,selectedRowIds:activeSelectedRowIds,onRowSelectionChange:onRowSelectionChange,getRowProps:getRowProps,expandedRowIds:expandedRowIds,isTableExpandable:isExpandable,expandRowAriaLabel:expandRowAriaLabel,collapseRowAriaLabel:collapseRowAriaLabel,onRowExpansionChange:handleRowExpansionChange},children))),footerElm)}export function DataTable({children,...rest}){return React.createElement(Container,{elevation:1},React.createElement(BaseDataTable,rest,children))}DataTable.sortCompareFn=defaultSortCompareFn,DataTable.Toolbar=DataTableToolbar;

package/build/esm/components/DataTable/TableCell.d.ts

@@ -17,5 +17,5 @@ declare const TableCell: import("@emotion/styled").StyledComponent<{
     isTableScrolledToLeft: boolean;
     isTableScrolledToRight: boolean;
     sticky?: "left" | "right" | false;
-} & Pick<DataTableRowProps, "isActive">, React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+} & Pick<DataTableRowProps, "isActive">, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
 export default TableCell;

package/build/esm/components/DataTable/internal/tablePrimitives.d.ts

@@ -10,14 +10,14 @@ type StyledTrProps = {
 export declare const StyledTr: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledTrProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+} & StyledTrProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
 type StyledTextProps = {
     alignColumn?: DataTableColumn["align"];
 };
 export declare const StyledText: import("@emotion/styled").StyledComponent<Omit<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & import("../../Typography/Text/Text").BaseTextProps & React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
+} & import("../../Typography/Text/Text").BaseTextProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement> & {
     theme?: import("@emotion/react").Theme;
 } & StyledTextProps, {}, {}>;
 export declare const StyledTd: import("@emotion/styled").StyledComponent<{
@@ -30,7 +30,7 @@ export declare const StyledTd: import("@emotion/styled").StyledComponent<{
     isTableScrolledToLeft: boolean;
     isTableScrolledToRight: boolean;
     sticky?: "left" | "right" | false;
-} & Pick<import("../types").DataTableRowProps, "isActive"> & React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & {
+} & Pick<import("../types").DataTableRowProps, "isActive"> & import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
     bodyCellVerticalPadding?: DataTableProps["bodyCellVerticalPadding"];

package/build/esm/components/EntityList/styled-components.d.ts

@@ -3,38 +3,38 @@ import type { EntityListItemProps, EntityListItemWrapperProps } from "./types";
 import type { ListSize } from "../../types";
 export declare const getOffsetMqStyle: (cssProp: string, { theme, size, }: {
     theme: Theme;
-} & Partial<EntityListItemWrapperProps>) => Record<string, (string | number) | {
+} & Partial<EntityListItemWrapperProps>) => Record<string, {
     [x: string]: string | number;
-}>;
+} | (string | number)>;
 export declare const StyledList: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledEntityItem: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledShowMore: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledWrapperOffset: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledEntityListItemWrapper: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
 } & {
     size: ListSize;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: Theme;
 } & EntityListItemWrapperProps, {}, {}>;
 export declare const StyledEntityListItemButton: import("@emotion/styled").StyledComponent<{
     theme?: Theme;
     as?: React.ElementType;
-} & Partial<EntityListItemProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Partial<EntityListItemProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/esm/components/Form/Checkbox/Checkbox.d.ts

@@ -35,11 +35,11 @@ export declare const CheckboxRaw: React.ForwardRefExoticComponent<{
     label?: string | React.ReactElement;
     indeterminate?: boolean;
     size?: CheckboxSizes;
-} & Omit<FormFieldProps, "label" | "hideLabel"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<FormFieldProps, "hideLabel" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     labelSize?: CheckboxSizes;
 } & React.RefAttributes<HTMLInputElement>>;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
     label?: string | React.ReactElement;
     indeterminate?: boolean;
     size?: CheckboxSizes;
-} & Omit<FormFieldProps, "label" | "hideLabel"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/Form/Combobox/SingleSelect.js

@@ -1 +1 @@
-import React,{useState,useRef,useMemo,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{useKeyboard}from"../../../shared/useKeyboard";import{InputRaw}from"../Input/Input";import{StyledContainer}from"./StyledSelectComponents";import{getOptionId,getOptionsListId,OptionsList}from"./OptionsList";let StyledInnerInputContainer=styled("div",{target:"eqabiiq0",label:"StyledInnerInputContainer"})({position:"relative",zIndex:1}),StyledInputWrap=styled("div",{target:"eqabiiq1",label:"StyledInputWrap"})(()=>({position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0})),HiddenSelectInput=styled("select",{target:"eqabiiq2",label:"HiddenSelectInput"})(()=>({display:"none"}));export const SingleSelect=({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange=()=>{},onBlur,onFocus,maxHeight,autoComplete,disabled,label,optionsListWidth,portalContainer,readOnly,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes})=>{let[isOpen,setIsOpen]=useState(!1),[innerValue,setInnerValue]=useState(""),[preselectedIndex,setPreselectedIndex]=useState(-1),initialValueOption=useMemo(()=>options.find(option=>option.value===value)||{value:"",label:""},[options,value]),[fakeSelectedOption,setFakeSelectedOption]=useState(initialValueOption),fakeSelectRef=useRef(null),innerInputRef=useRef(null),currentValueRef=useRef(value);currentValueRef.current=value;let forceChangeFakeSelect=useCallback(selectedOption=>{fakeSelectedOption.value!==selectedOption.value&&setFakeSelectedOption(selectedOption)},[fakeSelectedOption]),handleOpenDropdown=useCallback(()=>{readOnly||setIsOpen(!0)},[readOnly,setIsOpen]),closeDropdown=useCallback((noSelect=!1)=>{if(setIsOpen(!1),!noSelect){let selectedOption=options.find(option=>option.label.toLowerCase().trim()===innerValue.toLowerCase().trim());selectedOption&&forceChangeFakeSelect(selectedOption)}setInnerValue(""),setPreselectedIndex(-1),onBlur?.()},[onBlur,forceChangeFakeSelect,innerValue,options]);useEffect(()=>{fakeSelectRef.current&&currentValueRef.current!==fakeSelectedOption.value&&fakeSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[fakeSelectedOption,fakeSelectRef,currentValueRef]),useEffect(()=>{forceChangeFakeSelect(initialValueOption)},[initialValueOption]);let filteredOptions=useMemo(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]),displayValue=useMemo(()=>options.find(option=>option.value===value)?.label??"",[value,options]);useEffect(()=>{setPreselectedIndex(-1)},[filteredOptions]),useKeyboard({"ArrowUp ArrowDown":()=>{handleOpenDropdown()}},innerInputRef,!isOpen&&!disabled&&!readOnly);let optionsListId=getOptionsListId(name),pendingOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=isOpen&&pendingOption?getOptionId(name,pendingOption.value):"";return React.createElement(StyledContainer,{onBlur:()=>{isOpen&&pendingOption&&!pendingOption.disabled&&forceChangeFakeSelect(pendingOption),closeDropdown(!0)}},React.createElement(StyledInnerInputContainer,null,React.createElement(InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!(isOpen&&innerValue)||readOnly},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,readOnly:readOnly,onFocus:onFocus,onClick:handleOpenDropdown,onChange:e=>{e.currentTarget.value&&handleOpenDropdown(),setInnerValue(e.currentTarget.value)},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-haspopup":"listbox","aria-activedescendant":ariaActiveDescendant,"aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy})),React.createElement(StyledInputWrap,null,React.createElement(InputRaw,{"aria-hidden":!0,name:name,value:displayValue,onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",placeholder:placeholder,tabIndex:-1,hasError:hasError,autoComplete:"off",readOnly:readOnly})),React.createElement(OptionsList,{name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{setPreselectedIndex(index)},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),React.createElement(HiddenSelectInput,{onChange:onChange,value:fakeSelectedOption.value,ref:fakeSelectRef,autoComplete:"off"},React.createElement("option",{value:fakeSelectedOption.value},fakeSelectedOption.label)))};
+import React,{useState,useRef,useMemo,useEffect,useCallback}from"react";import styled from"@emotion/styled";import{useKeyboard}from"../../../shared/useKeyboard";import{InputRaw}from"../Input/Input";import{StyledContainer}from"./StyledSelectComponents";import{getOptionId,getOptionsListId,OptionsList}from"./OptionsList";let StyledInnerInputContainer=styled("div",{target:"e1jb8j290",label:"StyledInnerInputContainer"})({position:"relative",zIndex:1}),StyledInputWrap=styled("div",{target:"e1jb8j291",label:"StyledInputWrap"})(()=>({position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0})),HiddenSelectInput=styled("select",{target:"e1jb8j292",label:"HiddenSelectInput"})(()=>({display:"none"}));export const SingleSelect=({options,name,value,placeholder,emptyStateMessage,hasError,filterMethod,onChange=()=>{},onBlur,onFocus,maxHeight,autoComplete,disabled,label,optionsListWidth,portalContainer,readOnly,"aria-describedby":ariaDescribedBy,privateProps,...ariaAttributes})=>{let[isOpen,setIsOpen]=useState(!1),[innerValue,setInnerValue]=useState(""),[preselectedIndex,setPreselectedIndex]=useState(-1),initialValueOption=useMemo(()=>options.find(option=>option.value===value)||{value:"",label:""},[options,value]),[fakeSelectedOption,setFakeSelectedOption]=useState(initialValueOption),fakeSelectRef=useRef(null),innerInputRef=useRef(null),currentValueRef=useRef(value);currentValueRef.current=value;let forceChangeFakeSelect=useCallback(selectedOption=>{fakeSelectedOption.value!==selectedOption.value&&setFakeSelectedOption(selectedOption)},[fakeSelectedOption]),handleOpenDropdown=useCallback(()=>{readOnly||setIsOpen(!0)},[readOnly,setIsOpen]),closeDropdown=useCallback((noSelect=!1)=>{if(setIsOpen(!1),!noSelect){let selectedOption=options.find(option=>option.label.toLowerCase().trim()===innerValue.toLowerCase().trim());selectedOption&&forceChangeFakeSelect(selectedOption)}setInnerValue(""),setPreselectedIndex(-1),onBlur?.()},[onBlur,forceChangeFakeSelect,innerValue,options]);useEffect(()=>{fakeSelectRef.current&&currentValueRef.current!==fakeSelectedOption.value&&fakeSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[fakeSelectedOption,fakeSelectRef,currentValueRef]),useEffect(()=>{forceChangeFakeSelect(initialValueOption)},[initialValueOption]);let filteredOptions=useMemo(()=>innerValue?options.filter(option=>filterMethod(option,innerValue)):options,[options,filterMethod,innerValue]),displayValue=useMemo(()=>options.find(option=>option.value===value)?.label??"",[value,options]);useEffect(()=>{setPreselectedIndex(-1)},[filteredOptions]),useKeyboard({"ArrowUp ArrowDown":()=>{handleOpenDropdown()}},innerInputRef,!isOpen&&!disabled&&!readOnly);let optionsListId=getOptionsListId(name),pendingOption=filteredOptions[preselectedIndex]??null,ariaActiveDescendant=isOpen&&pendingOption?getOptionId(name,pendingOption.value):"";return React.createElement(StyledContainer,{onBlur:()=>{isOpen&&pendingOption&&!pendingOption.disabled&&forceChangeFakeSelect(pendingOption),closeDropdown(!0)}},React.createElement(StyledInnerInputContainer,null,React.createElement(InputRaw,{name:`${name}-innerInput`,value:innerValue,hasError:hasError,privateProps:{isTransparent:!(isOpen&&innerValue)||readOnly},icon:isOpen?"chevron-up":"chevron-down",disabled:disabled,readOnly:readOnly,onFocus:onFocus,onClick:handleOpenDropdown,onChange:e=>{e.currentTarget.value&&handleOpenDropdown(),setInnerValue(e.currentTarget.value)},ref:innerInputRef,autoComplete:autoComplete,...ariaAttributes,"aria-label":label,role:"combobox","aria-haspopup":"listbox","aria-activedescendant":ariaActiveDescendant,"aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen,"aria-describedby":ariaDescribedBy})),React.createElement(StyledInputWrap,null,React.createElement(InputRaw,{"aria-hidden":!0,name:name,value:displayValue,onChange:()=>null,icon:isOpen?"chevron-up":"chevron-down",placeholder:placeholder,tabIndex:-1,hasError:hasError,autoComplete:"off",readOnly:readOnly})),React.createElement(OptionsList,{name:name,isOpen:isOpen,options:filteredOptions,triggerRef:innerInputRef,onCloseDropdown:closeDropdown,portalContainer:portalContainer,selectedIndex:preselectedIndex,onSelectedIndexChange:index=>{setPreselectedIndex(index)},forceChangeFakeSelect:forceChangeFakeSelect,value:value,emptyStateMessage:emptyStateMessage,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth}),React.createElement(HiddenSelectInput,{onChange:onChange,value:fakeSelectedOption.value,ref:fakeSelectRef,autoComplete:"off"},React.createElement("option",{value:fakeSelectedOption.value},fakeSelectedOption.label)))};

package/build/esm/components/Form/Combobox/StyledSelectComponents.d.ts

@@ -1,7 +1,7 @@
 export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type StyledOptionProps = {
     active: boolean;
     preSelected: boolean;
@@ -10,13 +10,13 @@ type StyledOptionProps = {
 export declare const StyledOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & StyledOptionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & StyledOptionProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledFakeInputWrap: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/esm/components/Form/Combobox/StyledSelectComponents.js

@@ -1 +1 @@
-import styled from"@emotion/styled";import{usePortalChildZIndex}from"../../Portal/Portal";export const StyledContainer=styled("div",{target:"e1hs2c340",label:"StyledContainer"})(()=>({position:"relative",zIndex:0}));export const StyledOption=styled("div",{target:"e1hs2c341",label:"StyledOption"})(({theme,active,preSelected,disabled})=>{let hoverStyles={backgroundColor:theme.values.color.background.secondary.hover,borderRadius:0};return{padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,cursor:"pointer",borderRadius:theme.variables.size.borderRadius.xs,...active&&{backgroundColor:theme.values.color.background.secondary.active,borderRadius:0},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...!disabled&&{"&:hover":hoverStyles},...preSelected&&hoverStyles}});export const StyledFakeInputWrap=styled("div",{target:"e1hs2c342",label:"StyledFakeInputWrap"})(()=>({zIndex:0,position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0}));export const StyledDropdown=styled("div",{target:"e1hs2c343",label:"StyledDropdown"})(({theme})=>{let zIndex=usePortalChildZIndex(theme.variables.zIndex.dropdown);return{backgroundColor:theme.values.color.background.primary.default,position:"absolute",zIndex,borderRadius:theme.variables.size.borderRadius.xs,overflow:"hidden",boxShadow:theme.values.elevation[2],boxSizing:"border-box"}});
+import styled from"@emotion/styled";import{usePortalChildZIndex}from"../../Portal/Portal";export const StyledContainer=styled("div",{target:"ewra0900",label:"StyledContainer"})(()=>({position:"relative",zIndex:0}));export const StyledOption=styled("div",{target:"ewra0901",label:"StyledOption"})(({theme,active,preSelected,disabled})=>{let hoverStyles={backgroundColor:theme.values.color.background.secondary.hover,borderRadius:0};return{padding:`${theme.variables.size.spacing.xs} ${theme.variables.size.spacing.s}`,cursor:"pointer",borderRadius:theme.variables.size.borderRadius.xs,...active&&{backgroundColor:theme.values.color.background.secondary.active,borderRadius:0},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...!disabled&&{"&:hover":hoverStyles},...preSelected&&hoverStyles}});export const StyledFakeInputWrap=styled("div",{target:"ewra0902",label:"StyledFakeInputWrap"})(()=>({zIndex:0,position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0}));export const StyledDropdown=styled("div",{target:"ewra0903",label:"StyledDropdown"})(({theme})=>{let zIndex=usePortalChildZIndex(theme.variables.zIndex.dropdown);return{backgroundColor:theme.values.color.background.primary.default,position:"absolute",zIndex,borderRadius:theme.variables.size.borderRadius.xs,overflow:"hidden",boxShadow:theme.values.elevation[2],boxSizing:"border-box"}});

package/build/esm/components/Form/DatePicker/DatePicker.d.ts

@@ -27,7 +27,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<{
             formatAriaLabel: (monthName: string, year: number) => string;
         };
     };
-} & import("../FormField/FormField").FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+} & import("../FormField/FormField").FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
     value?: string;
     hasError?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/Form/Input/Input.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{FormField}from"../FormField/FormField";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";import{getInputTextStyles,getInputTextPlaceholder}from"../../../shared/mixins";let StyledContainer=styled("div",{target:"e16jtuij0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledIconContainer=styled("div",{target:"e16jtuij1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",right:theme.variables.size.spacing.xs})),StyledInput=styled("input",{target:"e16jtuij2",label:"StyledInput"})(({theme,privateProps,hasError,icon,readOnly,inputSize})=>({...getInputTextStyles({theme,size:inputSize,hasError,readOnly}),...getInputTextPlaceholder({theme}),...privateProps?.isTransparent?{backgroundColor:theme.values.color.background.transparent.default,borderColor:"transparent"}:{backgroundColor:theme.values.color.background.primary.default},...privateProps?.hideOutline&&{outline:"none"},"&.error":{borderColor:theme.values.color.border.error.default},"& svg":{pointerEvents:"none"},...icon&&{paddingRight:`calc(${theme.variables.size.spacing.s} + ${theme.variables.size.dimension.icon.m})`}}));export const InputRaw=React.forwardRef(({size="m",hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledInput,{...rest,type:type,inputSize:size,ref:ref,autoComplete:autoComplete,hasError:hasError,privateProps:privateProps,icon:icon,readOnly:readOnly,"aria-invalid":hasError}),icon&&React.createElement(StyledIconContainer,null,React.createElement(Text,{as:"span",color:"tertiary"},React.createElement(Icon,{name:icon,size:"m",color:readOnly?"quaternary":void 0})))));export const Input=React.forwardRef(({size="m",placeholder,hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-ds-id":"Input",disabled:disabled,"data-e2e-test-id":dataE2eTestId,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(InputRaw,{...rest,ref:ref,size:size,type:type,icon:icon,placeholder:readOnly?void 0:placeholder,hasError:hasError,disabled:disabled,autoComplete:autoComplete,privateProps:privateProps,readOnly:readOnly,...ariaDescribedByProp}))});
+import React from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{FormField}from"../FormField/FormField";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";import{getInputTextStyles,getInputTextPlaceholder}from"../../../shared/mixins";let StyledContainer=styled("div",{target:"e1owrw4k0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledIconContainer=styled("div",{target:"e1owrw4k1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",right:theme.variables.size.spacing.xs})),StyledInput=styled("input",{target:"e1owrw4k2",label:"StyledInput"})(({theme,privateProps,hasError,icon,readOnly,inputSize})=>({...getInputTextStyles({theme,size:inputSize,hasError,readOnly}),...getInputTextPlaceholder({theme}),...privateProps?.isTransparent?{backgroundColor:theme.values.color.background.transparent.default,borderColor:"transparent"}:{backgroundColor:theme.values.color.background.primary.default},...privateProps?.hideOutline&&{outline:"none"},"&.error":{borderColor:theme.values.color.border.error.default},"& svg":{pointerEvents:"none"},...icon&&{paddingRight:`calc(${theme.variables.size.spacing.s} + ${theme.variables.size.dimension.icon.m})`}}));export const InputRaw=React.forwardRef(({size="m",hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledInput,{...rest,type:type,inputSize:size,ref:ref,autoComplete:autoComplete,hasError:hasError,privateProps:privateProps,icon:icon,readOnly:readOnly,"aria-invalid":hasError}),icon&&React.createElement(StyledIconContainer,null,React.createElement(Text,{as:"span",color:"tertiary"},React.createElement(Icon,{name:icon,size:"m",color:readOnly?"quaternary":void 0})))));export const Input=React.forwardRef(({size="m",placeholder,hasError=!1,type="text",icon,autoComplete="on",privateProps={},readOnly,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-ds-id":"Input",disabled:disabled,"data-e2e-test-id":dataE2eTestId,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(InputRaw,{...rest,ref:ref,size:size,type:type,icon:icon,placeholder:readOnly?void 0:placeholder,hasError:hasError,disabled:disabled,autoComplete:autoComplete,privateProps:privateProps,readOnly:readOnly,...ariaDescribedByProp}))});

package/build/esm/components/Form/MaskedInput/MaskedInput.d.ts

@@ -20,4 +20,4 @@ export declare const MaskedInput: React.ForwardRefExoticComponent<{
     maskOptions: FactoryArg;
     onAccept?: (value: string, unmaskedValue: string, typedValue: string) => void;
     onComplete?: (value: string, unmaskedValue: string, typedValue: string) => void;
-} & Omit<InputProps, "type" | "onChange" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputProps, "onChange" | "size" | "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/Form/PasswordInput/PasswordInput.js

@@ -1 +1 @@
-import React,{useState,forwardRef}from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";import{PasswordInputButton}from"./PasswordInputButton";let handleBorderColor=({theme,hasError,readOnly})=>hasError?theme.values.color.border.error.default:readOnly?theme.values.color.border.primary.disabled:theme.values.color.border.primary.default,StyledContainer=styled("div",{target:"e1talrlh0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledPasswordInput=styled("input",{target:"e1talrlh1",label:"StyledPasswordInput"})(({theme,hasError=!1,readOnly=!1})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,borderRadius:theme.variables.size.borderRadius.xs,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`calc(${theme.variables.size.spacing.xs} - 1px) ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xxl,boxSizing:"border-box",color:theme.values.color.text.secondary.default,borderColor:handleBorderColor({theme,hasError,readOnly}),backgroundColor:theme.values.color.background.primary.default,"&.error":{borderColor:theme.values.color.border.error.default},"&.has-icon":{paddingRight:theme.variables.size.spacing.xs+theme.variables.size.dimension.icon.m},"&::placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default,opacity:theme.variables.opacity.visible},"&:-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},"&::-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`}}));export const PasswordInputRaw=forwardRef(({placeholder,hasError=!1,onIconClick,readOnly,disabled,slotProps:{toggleVisibility:{ariaLabelShow,ariaLabelHide}},...rest},ref)=>{let[isPasswordVisible,setIsPasswordVisible]=useState(!1);return React.createElement(StyledContainer,null,React.createElement(StyledPasswordInput,{...rest,type:isPasswordVisible?"text":"password",placeholder:readOnly?void 0:placeholder,ref:ref,hasError:hasError,readOnly:readOnly,disabled:disabled,"aria-invalid":hasError}),React.createElement(PasswordInputButton,{hasError:hasError,disabled:disabled,onIconClick:onIconClick,isPasswordVisible:isPasswordVisible,readOnly:readOnly,ariaLabel:isPasswordVisible?ariaLabelHide:ariaLabelShow,onToggle:()=>setIsPasswordVisible(prev=>!prev)}))});export const PasswordInput=React.forwardRef(({placeholder="••••••••",hasError=!1,onIconClick,autoComplete="on",slotProps,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PasswordInput",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(PasswordInputRaw,{...rest,ref:ref,placeholder:placeholder,hasError:hasError,disabled:disabled,onIconClick:onIconClick,autoComplete:autoComplete,slotProps:slotProps,...ariaDescribedByProp}))});
+import React,{useState,forwardRef}from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";import{PasswordInputButton}from"./PasswordInputButton";let handleBorderColor=({theme,hasError,readOnly})=>hasError?theme.values.color.border.error.default:readOnly?theme.values.color.border.primary.disabled:theme.values.color.border.primary.default,StyledContainer=styled("div",{target:"expgvjt0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledPasswordInput=styled("input",{target:"expgvjt1",label:"StyledPasswordInput"})(({theme,hasError=!1,readOnly=!1})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,borderRadius:theme.variables.size.borderRadius.xs,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`calc(${theme.variables.size.spacing.xs} - 1px) ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xxl,boxSizing:"border-box",color:theme.values.color.text.secondary.default,borderColor:handleBorderColor({theme,hasError,readOnly}),backgroundColor:theme.values.color.background.primary.default,"&.error":{borderColor:theme.values.color.border.error.default},"&.has-icon":{paddingRight:theme.variables.size.spacing.xs+theme.variables.size.dimension.icon.m},"&::placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default,opacity:theme.variables.opacity.visible},"&:-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},"&::-ms-input-placeholder":{fontStyle:"italic",color:theme.values.color.text.tertiary.default},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`}}));export const PasswordInputRaw=forwardRef(({placeholder,hasError=!1,onIconClick,readOnly,disabled,slotProps:{toggleVisibility:{ariaLabelShow,ariaLabelHide}},...rest},ref)=>{let[isPasswordVisible,setIsPasswordVisible]=useState(!1);return React.createElement(StyledContainer,null,React.createElement(StyledPasswordInput,{...rest,type:isPasswordVisible?"text":"password",placeholder:readOnly?void 0:placeholder,ref:ref,hasError:hasError,readOnly:readOnly,disabled:disabled,"aria-invalid":hasError}),React.createElement(PasswordInputButton,{hasError:hasError,disabled:disabled,onIconClick:onIconClick,isPasswordVisible:isPasswordVisible,readOnly:readOnly,ariaLabel:isPasswordVisible?ariaLabelHide:ariaLabelShow,onToggle:()=>setIsPasswordVisible(prev=>!prev)}))});export const PasswordInput=React.forwardRef(({placeholder="••••••••",hasError=!1,onIconClick,autoComplete="on",slotProps,disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"PasswordInput",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(PasswordInputRaw,{...rest,ref:ref,placeholder:placeholder,hasError:hasError,disabled:disabled,onIconClick:onIconClick,autoComplete:autoComplete,slotProps:slotProps,...ariaDescribedByProp}))});

package/build/esm/components/Form/Radio/Radio.d.ts

@@ -18,7 +18,7 @@ export declare const RadioRaw: React.ForwardRefExoticComponent<{
     /** Display hint below the label specific for the radio */
     labelHint?: string | React.ReactElement;
     size?: RadioSizes;
-} & Omit<FormFieldProps, "label" | "labelHint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<FormFieldProps, "hideLabel" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     labelSize?: RadioSizes;
 } & React.RefAttributes<HTMLInputElement>>;
 export declare const Radio: React.ForwardRefExoticComponent<{
@@ -26,5 +26,5 @@ export declare const Radio: React.ForwardRefExoticComponent<{
     /** Display hint below the label specific for the radio */
     labelHint?: string | React.ReactElement;
     size?: RadioSizes;
-} & Omit<FormFieldProps, "label" | "labelHint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/esm/components/Form/RadioButton/RadioButton.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"e1ddt1cz0",label:"StyledContainer"})(()=>({userSelect:"none",display:"block",position:"relative",width:"100%",boxSizing:"border-box"})),StyledRealInput=styled("input",{target:"e1ddt1cz1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"e1ddt1cz2",label:"StyledFakeInput"})(({theme})=>({cursor:"pointer",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:not(:checked) + &":{border:`1px solid ${theme.values.color.border.secondary.default}`,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},"input:checked + & ":{border:`1px solid ${theme.values.color.border.accent.default}`,backgroundColor:theme.values.color.background.accentSubtle.default,color:theme.values.color.text.accent.default}}));export function RadioButton({name,value="",checked,label="",icon,disabled=!1,onChange,onClick,onBlur,onFocus,...rest}){return React.createElement(FormField,{"data-ds-id":"RadioButton",...rest,disabled:disabled},React.createElement(StyledContainer,null,React.createElement(StyledRealInput,{type:"radio",name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",noWrap:!0},label,icon&&React.createElement(Icon,{name:icon})))))}
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"erfbmk0",label:"StyledContainer"})(()=>({userSelect:"none",display:"block",position:"relative",width:"100%",boxSizing:"border-box"})),StyledRealInput=styled("input",{target:"erfbmk1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"erfbmk2",label:"StyledFakeInput"})(({theme})=>({cursor:"pointer",textTransform:"none",textDecoration:"none",borderRadius:theme.variables.size.borderRadius.xs,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,padding:`${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,"input: focus-visible + &":{outlineWidth:"2px",outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio:0)":{"input: focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}},"input:not(:checked) + &":{border:`1px solid ${theme.values.color.border.secondary.default}`,backgroundColor:theme.values.color.background.primary.default,color:theme.values.color.text.secondary.default,"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},"input:checked + & ":{border:`1px solid ${theme.values.color.border.accent.default}`,backgroundColor:theme.values.color.background.accentSubtle.default,color:theme.values.color.text.accent.default}}));export function RadioButton({name,value="",checked,label="",icon,disabled=!1,onChange,onClick,onBlur,onFocus,...rest}){return React.createElement(FormField,{"data-ds-id":"RadioButton",...rest,disabled:disabled},React.createElement(StyledContainer,null,React.createElement(StyledRealInput,{type:"radio",name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",noWrap:!0},label,icon&&React.createElement(Icon,{name:icon})))))}

package/build/esm/components/Form/RangeInput/RangeInput.d.ts

@@ -9,4 +9,4 @@ export declare const RangeInput: React.ForwardRefExoticComponent<{
     /** The step size for each change in the range input's value. */
     hasError?: boolean;
     onSlideStart?: (e: React.FormEvent<HTMLInputElement>) => void;
-} & FormFieldProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+} & FormFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.js

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"e13oprls0",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"e13oprls1",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"e13oprls2",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${breakpoints.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=styled("div",{target:"e13oprls3",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"e13oprls4",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&getPressedStyles({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel||displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});export function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?React.createElement(StyledIconContainer,null,iconAccessibleName?React.createElement(Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):React.createElement(Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=React.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?React.createElement(React.Fragment,null,iconElm,React.createElement(ScreenReaderText,null,label)):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?React.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return React.createElement(React.Fragment,null,React.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},React.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&React.createElement(Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}
+import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"enpc8r20",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"enpc8r21",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"enpc8r22",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${breakpoints.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=styled("div",{target:"enpc8r23",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"enpc8r24",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&getPressedStyles({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel||displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});export function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?React.createElement(StyledIconContainer,null,iconAccessibleName?React.createElement(Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):React.createElement(Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=React.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?React.createElement(React.Fragment,null,iconElm,React.createElement(ScreenReaderText,null,label)):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?React.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return React.createElement(React.Fragment,null,React.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},React.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&React.createElement(Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}

package/build/esm/components/Form/Select/Select.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{SelectWithCustomTrigger}from"./SelectWithCustomTrigger";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{TextClamped}from"../../Typography/TextClamped/TextClamped";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledButton=styled("button",{target:"emffu2u0",label:"StyledButton"})(({theme,hasError,isPlaceholderVisible,readOnly,size})=>({'&[type="button"]':{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},display:"inline-block",margin:0,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.background.primary.default,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`${"s"===size?`calc(${theme.variables.size.spacing.xxs} + 1px)`:`calc(${theme.variables.size.spacing.xs} - 1px)`} ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xs,boxSizing:"border-box",borderColor:theme.values.color.border.primary.default,...readOnly&&{borderColor:theme.values.color.border.primary.disabled},...isPlaceholderVisible&&{fontStyle:"italic"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,borderColor:theme.values.color.border.error.default}})),StyledTriggerIcon=styled(Icon,{target:"emffu2u1",label:"StyledTriggerIcon"})(()=>({pointerEvents:"none"}));function TriggerButton({triggerRef,disabled,isOpen,hasError,isPlaceholderVisible,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,readOnly,size,onFocus,onBlur,children,...ariaAttributes}){return React.createElement(StyledButton,{type:"button",ref:triggerRef,disabled:disabled,hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,...ariaAttributes,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":ariaLabel,"aria-invalid":hasError,"aria-describedby":ariaDescribedBy,readOnly:readOnly,size:size,onFocus:onFocus,onBlur:onBlur},React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",space:"xxs",noWrap:!0},React.createElement(TextClamped,{color:isPlaceholderVisible?"tertiary":"primary",size:size},readOnly&&isPlaceholderVisible?null:children),React.createElement(StyledTriggerIcon,{size:size,name:isOpen?"chevron-up":"chevron-down",color:readOnly?"quaternary":"tertiary"})))}export function Select({options,name,value,placeholder,hasError,optionsListWidth,maxHeight,disabled=!1,portalContainer,readOnly=!1,excludeFromFormData,label,labelHint,hideLabel,hint,errorMessages,size="m","data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,onChange,onFocus,onBlur,...ariaAttributes}){let selectedOption=options?.find(option=>option.value===value),isPlaceholderVisible=!!placeholder&&!value,{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(SelectWithCustomTrigger,{options:options,value:value,name:name,optionsListWidth:optionsListWidth,maxHeight:maxHeight,portalContainer:portalContainer,disabled:disabled,readOnly:readOnly,excludeFromFormData:excludeFromFormData,onChange:onChange,renderTrigger:({triggerRef,isOpen,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant})=>React.createElement(FormField,{disabled:disabled,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Select"},React.createElement(TriggerButton,{hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,size:size,triggerRef:triggerRef,isOpen:isOpen,disabled:disabled,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":label,...ariaAttributes,...ariaDescribedByProp,readOnly:readOnly,onFocus:onFocus,onBlur:onBlur},selectedOption?selectedOption.label:placeholder??""))})}
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{SelectWithCustomTrigger}from"./SelectWithCustomTrigger";import{Icon}from"../../Icon/Icon";import{Inline}from"../../Inline/Inline";import{TextClamped}from"../../Typography/TextClamped/TextClamped";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledButton=styled("button",{target:"eaelaza0",label:"StyledButton"})(({theme,hasError,isPlaceholderVisible,readOnly,size})=>({'&[type="button"]':{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},display:"inline-block",margin:0,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.background.primary.default,borderWidth:"1px",borderStyle:"solid",width:"100%",padding:`${"s"===size?`calc(${theme.variables.size.spacing.xxs} + 1px)`:`calc(${theme.variables.size.spacing.xs} - 1px)`} ${theme.variables.size.spacing.s}`,paddingRight:theme.variables.size.spacing.xs,boxSizing:"border-box",borderColor:theme.values.color.border.primary.default,...readOnly&&{borderColor:theme.values.color.border.primary.disabled},...isPlaceholderVisible&&{fontStyle:"italic"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,borderColor:theme.values.color.border.error.default}})),StyledTriggerIcon=styled(Icon,{target:"eaelaza1",label:"StyledTriggerIcon"})(()=>({pointerEvents:"none"}));function TriggerButton({triggerRef,disabled,isOpen,hasError,isPlaceholderVisible,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,readOnly,size,onFocus,onBlur,children,...ariaAttributes}){return React.createElement(StyledButton,{type:"button",ref:triggerRef,disabled:disabled,hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,...ariaAttributes,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":ariaLabel,"aria-invalid":hasError,"aria-describedby":ariaDescribedBy,readOnly:readOnly,size:size,onFocus:onFocus,onBlur:onBlur},React.createElement(Inline,{vAlignItems:"center",alignItems:"spaceBetween",space:"xxs",noWrap:!0},React.createElement(TextClamped,{color:isPlaceholderVisible?"tertiary":"primary",size:size},readOnly&&isPlaceholderVisible?null:children),React.createElement(StyledTriggerIcon,{size:size,name:isOpen?"chevron-up":"chevron-down",color:readOnly?"quaternary":"tertiary"})))}export function Select({options,name,value,placeholder,hasError,optionsListWidth,maxHeight,disabled=!1,portalContainer,readOnly=!1,excludeFromFormData,label,labelHint,hideLabel,hint,errorMessages,size="m","data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,onChange,onFocus,onBlur,...ariaAttributes}){let selectedOption=options?.find(option=>option.value===value),isPlaceholderVisible=!!placeholder&&!value,{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(SelectWithCustomTrigger,{options:options,value:value,name:name,optionsListWidth:optionsListWidth,maxHeight:maxHeight,portalContainer:portalContainer,disabled:disabled,readOnly:readOnly,excludeFromFormData:excludeFromFormData,onChange:onChange,renderTrigger:({triggerRef,isOpen,role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant})=>React.createElement(FormField,{disabled:disabled,hideLabel:hideLabel,label:label,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Select"},React.createElement(TriggerButton,{hasError:hasError,isPlaceholderVisible:isPlaceholderVisible,size:size,triggerRef:triggerRef,isOpen:isOpen,disabled:disabled,role:role,"aria-expanded":ariaExpanded,"aria-controls":ariaControls,"aria-activedescendant":ariaActiveDescendant,"aria-label":label,...ariaAttributes,...ariaDescribedByProp,readOnly:readOnly,onFocus:onFocus,onBlur:onBlur},selectedOption?selectedOption.label:placeholder??""))})}

package/build/esm/components/Form/Textarea/Textarea.d.ts

@@ -14,12 +14,12 @@ export declare const TextareaRaw: React.ForwardRefExoticComponent<{
      */
     hasError?: boolean;
     resize?: "none" | "horizontal" | "vertical" | "both";
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export declare const Textarea: React.ForwardRefExoticComponent<FormFieldProps & {
     /**
      * Set to true to toggle error state
      */
     hasError?: boolean;
     resize?: "none" | "horizontal" | "vertical" | "both";
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+} & TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/build/esm/components/Form/Textarea/Textarea.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledTextarea=styled("textarea",{target:"e1ibutd00",label:"StyledTextarea"})(({theme,resize,hasError})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,minHeight:theme.variables.size.dimension.textarea.minHeight.m,borderRadius:theme.variables.size.borderRadius.xs,border:"1px solid",width:"100%",padding:theme.variables.size.spacing.xs,boxSizing:"border-box",color:theme.values.color.text.primary.default,borderColor:hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.primary.default,...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`},resize})),StyledContainer=styled("div",{target:"e1ibutd01",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"}));export const TextareaRaw=React.forwardRef(({autoComplete="on",rows=5,maxLength=256,resize="none",disabled,hasError,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledTextarea,{...rest,ref:ref,hasError:hasError,autoComplete:autoComplete,disabled:disabled,rows:rows,maxLength:maxLength,resize:resize,"aria-invalid":hasError})));export const Textarea=React.forwardRef(({disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Textarea",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(TextareaRaw,{...rest,ref:ref,disabled:disabled,...ariaDescribedByProp}))});
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledTextarea=styled("textarea",{target:"e15fuuq00",label:"StyledTextarea"})(({theme,resize,hasError})=>({fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,minHeight:theme.variables.size.dimension.textarea.minHeight.m,borderRadius:theme.variables.size.borderRadius.xs,border:"1px solid",width:"100%",padding:theme.variables.size.spacing.xs,boxSizing:"border-box",color:theme.values.color.text.primary.default,borderColor:hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,backgroundColor:theme.values.color.background.primary.default,...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`},resize})),StyledContainer=styled("div",{target:"e15fuuq01",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"}));export const TextareaRaw=React.forwardRef(({autoComplete="on",rows=5,maxLength=256,resize="none",disabled,hasError,...rest},ref)=>React.createElement(StyledContainer,null,React.createElement(StyledTextarea,{...rest,ref:ref,hasError:hasError,autoComplete:autoComplete,disabled:disabled,rows:rows,maxLength:maxLength,resize:resize,"aria-invalid":hasError})));export const Textarea=React.forwardRef(({disabled,label,labelHint,hideLabel,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Textarea",disabled:disabled,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(TextareaRaw,{...rest,ref:ref,disabled:disabled,...ariaDescribedByProp}))});

package/build/esm/components/Form/Toggle/Toggle.d.ts

@@ -9,7 +9,7 @@ type ToggleRawProps = {
 export declare const ToggleRaw: React.ForwardRefExoticComponent<{
     size?: ToggleSize;
     isHighlighted?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & React.RefAttributes<HTMLInputElement>>;
 export type ToggleProps = ToggleRawProps & {
     /** Controls label alignment with respect to toggle */
     alignLabel?: "before" | "after";
@@ -20,11 +20,11 @@ export type ToggleProps = ToggleRawProps & {
 export declare const Toggle: React.ForwardRefExoticComponent<{
     size?: ToggleSize;
     isHighlighted?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Controls label alignment with respect to toggle */
     alignLabel?: "before" | "after";
     /** Display hint below the label specific for the toggle */
     labelHint?: string | React.ReactElement;
     alignItems?: InlineProps["alignItems"];
-} & Omit<FormFieldProps, "labelHint" | "hideLabel"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "hideLabel" | "labelHint"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/esm/components/Form/ToggleButton/ToggleButton.d.ts

@@ -7,4 +7,4 @@ export type ToggleButtonProps = {
 export declare const ToggleButton: React.ForwardRefExoticComponent<{
     label: string;
     subLabel?: string;
-} & Omit<FormFieldProps, "label" | "labelHint" | "errorMessages" | "hint" | "hideLabel"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<FormFieldProps, "errorMessages" | "hideLabel" | "hint" | "label" | "labelHint"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/build/esm/components/Grid/Grid.d.ts

@@ -32,5 +32,5 @@ export type GridProps = {
 } & HTMLAttributes<HTMLDivElement>;
 export declare function Grid({ columnGap, rowGap, "data-e2e-test-id": dataE2eTestId, children, ...rest }: GridProps): React.ReactElement;
 export declare namespace Grid {
-    var Item: typeof GridItem;
+    export { GridItem as Item };
 }

package/build/esm/components/Grid/Grid.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{GridItem}from"./GridItem";let StyledContainer=styled("div",{target:"e1l758so0",label:"StyledContainer"})(({theme,templateColumns,templateRows,autoRows,templateAreas,inline,columnGap,alignItems,justifyItems,isSubgrid})=>{function getTrackSize(size){return`calc((100% - 11 * ${theme.variables.size.spacing[size??"zero"]}) / 12)`}return{width:"100%",display:inline?"inline-grid":"grid",gridAutoFlow:"row",...useResponsiveValue({gridTemplateColumns:templateColumns||(isSubgrid?"subgrid":Array.isArray(columnGap)?columnGap.map(value=>`repeat(12, ${getTrackSize(value)})`):`repeat(12, ${getTrackSize(columnGap)})`),gridTemplateRows:templateRows,gridAutoRows:autoRows,gridTemplateAreas:templateAreas,alignItems,justifyItems})}},({theme,columnGap,rowGap})=>useResponsiveStyles({gridColumnGap:[columnGap,theme.variables.size.spacing],gridRowGap:[rowGap,theme.variables.size.spacing]}));export function Grid({columnGap="m",rowGap="m","data-e2e-test-id":dataE2eTestId,children,...rest}){return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Grid",columnGap:columnGap,rowGap:rowGap,...rest},children)}Grid.Item=GridItem;
+import React from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{GridItem}from"./GridItem";let StyledContainer=styled("div",{target:"efhrkze0",label:"StyledContainer"})(({theme,templateColumns,templateRows,autoRows,templateAreas,inline,columnGap,alignItems,justifyItems,isSubgrid})=>{function getTrackSize(size){return`calc((100% - 11 * ${theme.variables.size.spacing[size??"zero"]}) / 12)`}return{width:"100%",display:inline?"inline-grid":"grid",gridAutoFlow:"row",...useResponsiveValue({gridTemplateColumns:templateColumns||(isSubgrid?"subgrid":Array.isArray(columnGap)?columnGap.map(value=>`repeat(12, ${getTrackSize(value)})`):`repeat(12, ${getTrackSize(columnGap)})`),gridTemplateRows:templateRows,gridAutoRows:autoRows,gridTemplateAreas:templateAreas,alignItems,justifyItems})}},({theme,columnGap,rowGap})=>useResponsiveStyles({gridColumnGap:[columnGap,theme.variables.size.spacing],gridRowGap:[rowGap,theme.variables.size.spacing]}));export function Grid({columnGap="m",rowGap="m","data-e2e-test-id":dataE2eTestId,children,...rest}){return React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Grid",columnGap:columnGap,rowGap:rowGap,...rest},children)}Grid.Item=GridItem;

package/build/esm/components/IconTile/IconTile.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Icon}from"../Icon/Icon";import{Box}from"../Box/Box";let IconTileWrapper=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"en9pfw00",label:"IconTileWrapper"})(({theme,color})=>({display:"inline-block",borderRadius:theme.variables.size.borderRadius.full,border:"1px solid",borderColor:color?theme.values.color.badge.borderSubtle[color]:theme.values.color.badge.borderSubtle.default,backgroundColor:color?theme.values.color.badge.background[color]:theme.values.color.badge.background.default,color:color?theme.values.color.badge.foreground[color]:theme.values.color.badge.foreground.gray}));export const IconTile=({icon,color,"data-color":dataColor,"data-e2e-test-id":dataE2eTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...ariaAttributes})=>{let hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(IconTileWrapper,{color:color,"data-e2e-test-id":dataE2eTestId,"data-color":dataColor,"data-ds-id":"IconTile","aria-hidden":!hasAccessibleName||void 0,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:role,...ariaAttributes},React.createElement(Box,{space:"s"},React.createElement(Icon,{name:icon,size:"m"})))};
+import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Icon}from"../Icon/Icon";import{Box}from"../Box/Box";let IconTileWrapper=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e1af4gik0",label:"IconTileWrapper"})(({theme,color})=>({display:"inline-block",borderRadius:theme.variables.size.borderRadius.full,border:"1px solid",borderColor:color?theme.values.color.badge.borderSubtle[color]:theme.values.color.badge.borderSubtle.default,backgroundColor:color?theme.values.color.badge.background[color]:theme.values.color.badge.background.default,color:color?theme.values.color.badge.foreground[color]:theme.values.color.badge.foreground.gray}));export const IconTile=({icon,color,"data-color":dataColor,"data-e2e-test-id":dataE2eTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...ariaAttributes})=>{let hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(IconTileWrapper,{color:color,"data-e2e-test-id":dataE2eTestId,"data-color":dataColor,"data-ds-id":"IconTile","aria-hidden":!hasAccessibleName||void 0,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:role,...ariaAttributes},React.createElement(Box,{space:"s"},React.createElement(Icon,{name:icon,size:"m"})))};

package/build/esm/components/Internal/Drawer/Drawer.js

@@ -1,13 +1,13 @@
-import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"./useExitAnimation";let StyledViewportLayer=styled("div",{target:"e11o9pe90",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
+import React,{useCallback,useEffect,useRef}from"react";import styled from"@emotion/styled";import{keyframes}from"@emotion/react";import{useOutsideClickDeactivatesWithinPortal}from"../../../shared/useOutsideClickDeactivatesWithinPortal";import{useDocument}from"../../../shared/useDocument";import{FOCUSABLE_SELECTOR}from"../../../shared/focusableSelector";import{Portal,usePortalContainerElement}from"../../Portal/Portal";import{FocusTrapWrapper}from"../../../shared/FocusTrapWrapper";import{DialogContext}from"../../Patterns/Dialog/DialogContext";import{Backdrop}from"../../Utilities/Backdrop/Backdrop";import{useExitAnimation}from"../../../shared/useExitAnimation";let StyledViewportLayer=styled("div",{target:"e1elpaa00",label:"StyledViewportLayer"})(({theme,isLeaving})=>{let{hidden,visible}=theme.variables.opacity,fadeIn=keyframes`
       from { opacity: ${hidden}; }
       to { opacity: ${visible}; }
     `,fadeOut=keyframes`
       from { opacity: ${visible}; }
       to { opacity: ${hidden}; }
-    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e11o9pe91",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
+    `,{duration,timingFunction}=theme.variables.animation.modalBackdrop.open;return{position:"fixed",top:0,left:0,zIndex:theme.variables.zIndex.modal,width:"100%",height:"100dvh",animation:`${isLeaving?fadeOut:fadeIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledContent=styled("div",{target:"e1elpaa01",label:"StyledContent"})(({theme,positionX,positionY,isLeaving})=>{let restX=positionX?"0%":"-50%",restY=positionY?"0%":"-50%",{x:fromX,y:fromY}="left"===positionX?{x:"-100%",y:restY}:"right"===positionX?{x:"100%",y:restY}:"top"===positionY?{x:restX,y:"-100%"}:"bottom"===positionY?{x:restX,y:"100%"}:{x:restX,y:restY},resting=`translate(${restX}, ${restY})`,offscreen=`translate(${fromX}, ${fromY})`,slideIn=keyframes`
       from { transform: ${offscreen}; }
       to { transform: ${resting}; }
     `,slideOut=keyframes`
       from { transform: ${resting}; }
       to { transform: ${offscreen}; }
-    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e11o9pe92",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}
+    `,{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"fixed",...{..."left"===positionX&&{left:0},..."right"===positionX&&{right:0},...!positionX&&{left:"50%"},..."top"===positionY&&{top:0},..."bottom"===positionY&&{bottom:0},...!positionY&&{top:"50%"}},transform:resting,willChange:"transform",animation:`${isLeaving?slideOut:slideIn} ${duration} ${timingFunction} both`,"@media (prefers-reduced-motion: reduce)":{animation:"none"}}}),StyledBackdrop=styled(Backdrop,{target:"e1elpaa02",label:"StyledBackdrop"})({pointerEvents:"none"});function getFocusTarget(container,document){return container?.querySelector(FOCUSABLE_SELECTOR)??container??document.body}export function Drawer({backdropRef,portalContainer,initialFocus,isDismissible=!0,isVisible=!0,onUnmount,hasBackdrop=!0,positionX,positionY,children,handleClose,privateProps:{skipPortal}={skipPortal:!1},...rest}){let portalContainerElement=usePortalContainerElement(portalContainer),contentRef=useRef(null),document=useDocument(),{isMounted,isLeaving,onAnimationEnd}=useExitAnimation(isVisible),wasMounted=useRef(isMounted);useEffect(()=>{wasMounted.current&&!isMounted&&onUnmount?.(),wasMounted.current=isMounted},[isMounted,onUnmount]);let layerRef=useRef(null),setLayerNode=useCallback(node=>{layerRef.current=node,backdropRef&&(backdropRef.current=node)},[backdropRef]),handleClickOutsideDeactivates=useOutsideClickDeactivatesWithinPortal({portalContainerElement,outerRef:layerRef,isDismissible});if(!isMounted)return null;let content=React.createElement(StyledViewportLayer,{ref:setLayerNode,"data-ds-id":"Drawer",isLeaving:isLeaving},hasBackdrop&&React.createElement(StyledBackdrop,{"data-ds-id":"DrawerBackdrop"}),React.createElement(FocusTrapWrapper,{active:isVisible,focusTrapOptions:{allowOutsideClick:!0,clickOutsideDeactivates:handleClickOutsideDeactivates,escapeDeactivates:isDismissible,preventScroll:!0,initialFocus:()=>{var container;return container=contentRef.current,"string"==typeof initialFocus?initialFocus:initialFocus?.current??getFocusTarget(container,document)},fallbackFocus:()=>getFocusTarget(contentRef.current,document),onPostDeactivate:()=>handleClose?.()}},React.createElement(StyledContent,{...rest,ref:contentRef,positionX:positionX,positionY:positionY,isLeaving:isLeaving,onAnimationEnd:onAnimationEnd,role:"dialog","aria-modal":"true"},children)));return skipPortal?content:React.createElement(DialogContext.Provider,{value:!0},React.createElement(Portal,{portalContainer:portalContainer},content))}

package/build/esm/components/Internal/Float/Float.js

@@ -1 +1 @@
-import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{AMBOSS_DS_FLOAT_PORTAL,Portal}from"../../Portal/Portal";import{useFloatingPosition}from"../../Utilities/FloatingPosition/useFloatingPosition";import{useDocument}from"../../../shared/useDocument";let StyledContainer=styled("div",{target:"e1gevmfu0",label:"StyledContainer"})(({floatingStyles,isPositioned,bottomBarHeight})=>({...floatingStyles,visibility:isPositioned?"visible":"hidden",...bottomBarHeight&&{translate:`0 calc(-1 * ${bottomBarHeight})`}}));export function Float(props){let{children,...viewportPosition}=props,theme=useTheme(),document=useDocument(),{setFloating,floatingStyles,isPositioned}=useFloatingPosition({mode:"viewport",...viewportPosition,offset:parseInt(theme.variables.size.spacing.m,10)}),bottomBarHeight="bottom"===props.positionY?theme.variables.layout.bottomBar.height.default:void 0,portalContainer=document?document.querySelector(`.${AMBOSS_DS_FLOAT_PORTAL}`):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-ds-id":"Float",ref:setFloating,floatingStyles:floatingStyles,isPositioned:isPositioned,bottomBarHeight:bottomBarHeight},children))}
+import React from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{AMBOSS_DS_FLOAT_PORTAL,Portal}from"../../Portal/Portal";import{useFloatingPosition}from"../../Utilities/FloatingPosition/useFloatingPosition";import{useDocument}from"../../../shared/useDocument";let StyledContainer=styled("div",{target:"ewzfx030",label:"StyledContainer"})(({floatingStyles,isPositioned,bottomBarHeight})=>({...floatingStyles,visibility:isPositioned?"visible":"hidden",...bottomBarHeight&&{translate:`0 calc(-1 * ${bottomBarHeight})`}}));export function Float(props){let{children,...viewportPosition}=props,theme=useTheme(),document=useDocument(),{setFloating,floatingStyles,isPositioned}=useFloatingPosition({mode:"viewport",...viewportPosition,offset:parseInt(theme.variables.size.spacing.m,10)}),bottomBarHeight="bottom"===props.positionY?theme.variables.layout.bottomBar.height.default:void 0,portalContainer=document?document.querySelector(`.${AMBOSS_DS_FLOAT_PORTAL}`):null;return React.createElement(Portal,{portalContainer:portalContainer},React.createElement(StyledContainer,{"data-ds-id":"Float",ref:setFloating,floatingStyles:floatingStyles,isPositioned:isPositioned,bottomBarHeight:bottomBarHeight},children))}

package/build/esm/components/Internal/LayoutFloat/LayoutFloat.d.ts

@@ -13,4 +13,16 @@ export type LayoutFloatProps = {
     hostRef: (el: HTMLDivElement | null) => void;
     "data-e2e-test-id"?: string;
 };
-export declare const LayoutFloat: React.MemoExoticComponent<({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement>;
+/**
+ * The floating shell hosting a layout panel's content while its variant is
+ * `"float"`. Pins to the bottom-right viewport corner via the internal
+ * `Float` positioner, then becomes freely draggable by its header across the
+ * viewport (clamped to `spacing.m` from the edges, matching `Float`'s inset).
+ * The header carries the `useMove` handle; this float owns the drag geometry
+ * and publishes its move handlers via `useLayoutFloatDrag` for the header to drive.
+ * Purely presentational otherwise: the content arrives by the panel's persistent
+ * host node being appended into `hostRef`'s element.
+ */
+declare const LayoutFloatBase: ({ width, height, hostRef, "data-e2e-test-id": dataE2eTestId, }: LayoutFloatProps) => React.ReactElement;
+export declare const LayoutFloat: React.MemoExoticComponent<typeof LayoutFloatBase>;
+export {};

package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDrag.d.ts

@@ -10,7 +10,7 @@ export type LayoutFloatDragContextValue = {
     /** Publish/clear the handlers - for the float. */
     setHandlers: (handlers: LayoutFloatDragHandlers) => void;
 };
-export declare const LayoutFloatDragContext: React.Context<LayoutFloatDragContextValue>;
+export declare const LayoutFloatDragContext: import("react").Context<LayoutFloatDragContextValue>;
 /** Read the float-drag channel. Outside a `LayoutFloatDragProvider` the handlers are
  *  `null` and the setter a no-op, so consumers need no existence checks. */
 export declare const useLayoutFloatDrag: () => LayoutFloatDragContextValue;

package/build/esm/components/Internal/Panel/Panel.d.ts

@@ -3,6 +3,8 @@ import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanel
 /** A size: plain number = pixels; unitless string = percentage ("10%"). */
 type Size = number | string;
 export type PanelItem = {
+    /** Leave a transparent spacing token before this panel's column. */
+    gapBefore?: boolean;
     /** Stable id — used by react-resizable-panels to track the panel and persist
      *  its size, and passed back to `onResize`/`onCollapse`. */
     id: string;
@@ -15,9 +17,9 @@ export type PanelItem = {
     maxSize?: Size;
     /** Allow drag-to-collapse; collapsing fires `onCollapse(id)`. */
     collapsible?: boolean;
-    /** When `false`, this panel is fixed: it can't be resized directly or by a
-     *  neighbour. Separators beside it stay usable as long as a resizable panel
-     *  remains on each of their sides - the drag just passes this panel by. */
+    /** When `false`, user input can't resize this panel directly or through a
+     *  neighbour. Container resizing still applies. Separators stay usable if a
+     *  resizable panel remains on each side - the drag passes this panel by. */
     resizable?: boolean;
     /** Hold this panel's width when the window (or the containing group) is
      *  resized, rather than its share of the group - so the change lands on the

package/build/esm/components/Internal/Panel/Panel.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"ervy0ss0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=styled("div",{target:"ervy0ss1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize;export const groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size";let canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(Separator,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}
+import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e1qc2hi70",label:"CustomGroup"})({height:"100%",width:"100%"}),CustomSeparator=styled(Separator,{target:"e1qc2hi71",label:"CustomSeparator"})(({theme})=>({flexShrink:0,width:theme.variables.size.spacing.xxs})),StyledPanelChild=styled("div",{target:"e1qc2hi72",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize;export const groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size";let canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);export function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];"number"==typeof pct&&collapsible&&pct<.5&&onCollapse(id)}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index}),SeparatorComponent=item.gapBefore?CustomSeparator:Separator;return React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(SeparatorComponent,{disabled:isSeparatorDisabled}),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,onResize:size=>{!shouldSuppressLayoutCallback?.()&&(size.asPercentage<.5||onResize(item.id,size))},panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},React.createElement(StyledPanelChild,null,item.child)))}))}