@amboss/design-system 4.8.2-canary.1 → 4.9.1

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

@@ -1 +1 @@
-import React,{useRef,useEffect,useLayoutEffect,useMemo}from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{useKeyboard}from"../../../shared/useKeyboard";import{useWindow}from"../../../shared/useWindow";import{usePopupMenu}from"../../../shared/popupMenu/usePopupMenu";import{VirtualScrollList}from"../../VirtualScrollList/VirtualScrollList";import{Text}from"../../Typography/Text/Text";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{StyledDropdown,StyledOption}from"./StyledSelectComponents";import{dropdownContainerStyle}from"./constants";import{Stack}from"../../Stack/Stack";import{CheckboxRaw}from"../Checkbox/Checkbox";import{Portal}from"../../Portal/Portal";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";export const OPTIONS_LIST_SELECTOR='[role="listbox"], [role="option"]';export function getOptionId(selectName,optionValue){return`${selectName}Option${optionValue}`}export function getOptionsListId(selectName){return`${selectName}OptionsList`}let scrollToItem=({list,itemIndex,behavior})=>{list[itemIndex]?.scrollIntoView?.({behavior,block:"nearest"})},CustomOption=styled(StyledOption,{target:"eubbn5p0",label:"CustomOption"})(({theme})=>({paddingTop:0,paddingBottom:0,"& > div":{paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs},"& > div *":{marginTop:0}})),StyledListContainer=styled("div",{target:"eubbn5p1",label:"StyledListContainer"})(({theme,maxHeight})=>({maxHeight,boxSizing:"border-box",overflow:"auto",padding:`${theme.variables.size.spacing.xxs} 0`}));export function OptionsList({isOpen,isMultiSelect=!1,value,disabled,options,portalContainer,triggerRef,triggerWrapperRef,maxHeight,emptyStateMessage="No options available",selectedIndex,optionsListWidth,isVirtualized=!0,name,onCloseDropdown,onSelectedIndexChange,forceChangeFakeSelect}){let optionsListRef=useRef(null),listContainerRef=useRef(null),listItemsRef=useRef(null),refForPositioning=triggerWrapperRef||triggerRef,activeItemIndex=useMemo(()=>options.findIndex(option=>isMultiSelect?value.includes(option.value):option.value===value),[options,isMultiSelect,value]),{menuStyle:optionsListStyle,calculateStyle}=usePopupMenu({triggerRef:refForPositioning,menuRef:optionsListRef,isOpen}),win=useWindow(),{variables}=useTheme(),effectiveMaxHeight=useMemo(()=>{if(!win||!optionsListStyle.top)return maxHeight;let menuViewportMargin=parseInt(variables.size.spacing.xs,10),menuTopInViewport=optionsListStyle.top-(win.scrollY??0),spaceBelow=win.innerHeight-menuTopInViewport-menuViewportMargin;return!Number.isFinite(spaceBelow)||spaceBelow<=0?maxHeight:maxHeight?Math.min(maxHeight,spaceBelow):spaceBelow},[maxHeight,optionsListStyle,win,variables]);useLayoutEffect(()=>{if(isOpen&&listContainerRef.current&&!isVirtualized&&optionsListStyle.top){let listElm=listContainerRef.current;listElm.clientHeight<listElm.scrollHeight&&(listItemsRef.current=listElm.querySelectorAll("[data-list-item]"),scrollToItem({list:listItemsRef.current,itemIndex:activeItemIndex,behavior:"instant"}))}else listItemsRef.current=null},[isOpen,isVirtualized,listContainerRef,options,maxHeight,optionsListStyle,activeItemIndex]),useEffect(()=>{listItemsRef.current&&scrollToItem({list:listItemsRef.current,itemIndex:selectedIndex,behavior:"smooth"})},[listItemsRef,selectedIndex]),useKeyboard({Escape:()=>onCloseDropdown(!0),Enter:()=>{let preselectedOption=options[selectedIndex];if(!preselectedOption?.disabled){if(preselectedOption){forceChangeFakeSelect(preselectedOption),isMultiSelect||onCloseDropdown(!0);return}isMultiSelect||onCloseDropdown()}},ArrowUp:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex>0&&(newIndex-=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)},ArrowDown:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex<options.length-1&&(newIndex+=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)}},triggerRef,isOpen&&!disabled);let renderItem=index=>{let option=options[index],id=getOptionId(name,option.value);if(isMultiSelect){let isActive=value.includes(option.value);return React.createElement(CustomOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||forceChangeFakeSelect(option)},onClick:evt=>evt.stopPropagation()},React.createElement(CheckboxRaw,{name:"",disabled:option.disabled,checked:isActive,size:"s",label:option.label,onChange:()=>null,labelHint:option?.description}))}let isActive=value===option.value,optionText=React.createElement(Stack,{space:"zero"},React.createElement(Text,{color:"primary",size:"m"},option.label),option.description&&React.createElement(Text,{color:"tertiary",size:"s"},option.description));return React.createElement(StyledOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||(forceChangeFakeSelect(option),onCloseDropdown(!0))}},isActive?React.createElement(Inline,{noWrap:!0,alignItems:"spaceBetween"},optionText,React.createElement(Box,{space:"zero",tSpace:"xxxs"},React.createElement(Icon,{name:"check",size:"s",color:"accent"}))):optionText)},listStyle={...optionsListStyle,width:optionsListWidth||refForPositioning.current?.getBoundingClientRect().width},listElm=React.createElement(StyledDropdown,{style:listStyle,ref:optionsListRef,onMouseDown:e=>e.preventDefault(),"data-e2e-test-id":"optionsList"},isVirtualized?React.createElement(VirtualScrollList,{id:getOptionsListId(name),maxHeight:effectiveMaxHeight,itemHeight:36,itemAmount:options.length,emptyState:()=>null,containerStyle:dropdownContainerStyle,itemInView:selectedIndex,itemTemplate:renderItem,onContentHeightChange:calculateStyle,role:"listbox"}):React.createElement(StyledListContainer,{maxHeight:effectiveMaxHeight,role:"listbox",id:getOptionsListId(name),ref:listContainerRef},options.map((_option,index)=>renderItem(index))));if(!isOpen)return null;let listPortal=options.length?React.createElement(Portal,{portalContainer:portalContainer},listElm):null;return React.createElement(React.Fragment,null,React.createElement(ScreenReaderText,{role:"status","aria-live":"polite"},options.length?"":emptyStateMessage),listPortal)}
+import React,{useRef,useEffect,useLayoutEffect,useMemo}from"react";import{useTheme}from"@emotion/react";import styled from"@emotion/styled";import{useKeyboard}from"../../../shared/useKeyboard";import{useWindow}from"../../../shared/useWindow";import{usePopupMenu}from"../../../shared/popupMenu/usePopupMenu";import{VirtualScrollList}from"../../VirtualScrollList/VirtualScrollList";import{Text}from"../../Typography/Text/Text";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{StyledDropdown,StyledOption}from"./StyledSelectComponents";import{dropdownContainerStyle}from"./constants";import{Stack}from"../../Stack/Stack";import{CheckboxRaw}from"../Checkbox/Checkbox";import{Portal}from"../../Portal/Portal";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";export const OPTIONS_LIST_SELECTOR='[role="listbox"], [role="option"]';export function getOptionId(selectName,optionValue){return`${selectName}Option${optionValue}`}export function getOptionsListId(selectName){return`${selectName}OptionsList`}let scrollToItem=({list,itemIndex,behavior})=>{list[itemIndex]?.scrollIntoView?.({behavior,block:"nearest"})},CustomOption=styled(StyledOption,{target:"e1bzrm20",label:"CustomOption"})(({theme})=>({paddingTop:0,paddingBottom:0,"& > div":{paddingTop:theme.variables.size.spacing.xs,paddingBottom:theme.variables.size.spacing.xs},"& > div *":{marginTop:0}})),StyledListContainer=styled("div",{target:"e1bzrm21",label:"StyledListContainer"})(({theme,maxHeight})=>({maxHeight,boxSizing:"border-box",overflow:"auto",padding:`${theme.variables.size.spacing.xxs} 0`}));export function OptionsList({isOpen,isMultiSelect=!1,value,disabled,options=[],portalContainer,triggerRef,triggerWrapperRef,maxHeight,emptyStateMessage="No options available",selectedIndex,optionsListWidth,isVirtualized=!0,name,onCloseDropdown,onSelectedIndexChange,forceChangeFakeSelect}){let optionsListRef=useRef(null),listContainerRef=useRef(null),listItemsRef=useRef(null),refForPositioning=triggerWrapperRef||triggerRef,activeItemIndex=useMemo(()=>options.findIndex(option=>isMultiSelect?value.includes(option.value):option.value===value),[options,isMultiSelect,value]),{menuStyle:optionsListStyle,calculateStyle}=usePopupMenu({triggerRef:refForPositioning,menuRef:optionsListRef,isOpen}),win=useWindow(),{variables}=useTheme(),effectiveMaxHeight=useMemo(()=>{if(!win||!optionsListStyle.top)return maxHeight;let menuViewportMargin=parseInt(variables.size.spacing.xs,10),menuTopInViewport=optionsListStyle.top-(win.scrollY??0),spaceBelow=win.innerHeight-menuTopInViewport-menuViewportMargin;return!Number.isFinite(spaceBelow)||spaceBelow<=0?maxHeight:maxHeight?Math.min(maxHeight,spaceBelow):spaceBelow},[maxHeight,optionsListStyle,win,variables]);useLayoutEffect(()=>{if(isOpen&&listContainerRef.current&&!isVirtualized&&optionsListStyle.top){let listElm=listContainerRef.current;listElm.clientHeight<listElm.scrollHeight&&(listItemsRef.current=listElm.querySelectorAll("[data-list-item]"),scrollToItem({list:listItemsRef.current,itemIndex:activeItemIndex,behavior:"instant"}))}else listItemsRef.current=null},[isOpen,isVirtualized,listContainerRef,options,maxHeight,optionsListStyle,activeItemIndex]),useEffect(()=>{listItemsRef.current&&scrollToItem({list:listItemsRef.current,itemIndex:selectedIndex,behavior:"smooth"})},[listItemsRef,selectedIndex]),useKeyboard({Escape:()=>onCloseDropdown(!0),Enter:()=>{let preselectedOption=options[selectedIndex];if(!preselectedOption?.disabled){if(preselectedOption){forceChangeFakeSelect(preselectedOption),isMultiSelect||onCloseDropdown(!0);return}isMultiSelect||onCloseDropdown()}},ArrowUp:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex>0&&(newIndex-=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)},ArrowDown:()=>{let newIndex=-1===selectedIndex?activeItemIndex:selectedIndex;for(;newIndex<options.length-1&&(newIndex+=1,options[newIndex]?.disabled););options[newIndex]?.disabled||onSelectedIndexChange(newIndex)}},triggerRef,isOpen&&!disabled);let renderItem=index=>{let option=options[index],id=getOptionId(name,option.value);if(isMultiSelect){let isActive=value.includes(option.value);return React.createElement(CustomOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled??!1,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||forceChangeFakeSelect(option)},onClick:evt=>evt.stopPropagation()},React.createElement(CheckboxRaw,{name:"",disabled:option.disabled,checked:isActive,size:"s",label:option.label,onChange:()=>null,labelHint:option?.description}))}let isActive=value===option.value,optionText=React.createElement(Stack,{space:"zero"},React.createElement(Text,{color:"primary",size:"m"},option.label),option.description&&React.createElement(Text,{color:"tertiary",size:"s"},option.description));return React.createElement(StyledOption,{role:"option","aria-selected":isActive,"aria-disabled":option.disabled,id:id,key:option.value,active:isActive,disabled:option.disabled??!1,preSelected:selectedIndex===index,"data-list-item":!0,onMouseDown:()=>{option.disabled||(forceChangeFakeSelect(option),onCloseDropdown(!0))}},isActive?React.createElement(Inline,{noWrap:!0,alignItems:"spaceBetween"},optionText,React.createElement(Box,{space:"zero",tSpace:"xxxs"},React.createElement(Icon,{name:"check",size:"s",color:"accent"}))):optionText)},listStyle={...optionsListStyle,width:optionsListWidth||refForPositioning.current?.getBoundingClientRect().width},listElm=React.createElement(StyledDropdown,{style:listStyle,ref:optionsListRef,onMouseDown:e=>e.preventDefault(),"data-e2e-test-id":"optionsList"},isVirtualized?React.createElement(VirtualScrollList,{id:getOptionsListId(name),maxHeight:effectiveMaxHeight,itemHeight:36,itemAmount:options.length,emptyState:()=>null,containerStyle:dropdownContainerStyle,itemInView:selectedIndex,itemTemplate:renderItem,onContentHeightChange:calculateStyle,role:"listbox"}):React.createElement(StyledListContainer,{maxHeight:effectiveMaxHeight,role:"listbox",id:getOptionsListId(name),ref:listContainerRef},options.map((_option,index)=>renderItem(index))));if(!isOpen)return null;let listPortal=options.length?React.createElement(Portal,{portalContainer:portalContainer},listElm):null;return React.createElement(React.Fragment,null,React.createElement(ScreenReaderText,{role:"status","aria-live":"polite"},options.length?"":emptyStateMessage),listPortal)}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { CommonSelectProps } from "./Combobox";
 import type { FormFieldProps } from "../FormField/FormField";
-type SingleSelectProps = CommonSelectProps & Pick<FormFieldProps, "label"> & {
+type SingleSelectProps = Omit<CommonSelectProps, "value" | "onChange" | "options" | "filterMethod" | "maxHeight"> & Required<Pick<CommonSelectProps, "options" | "filterMethod" | "maxHeight">> & Pick<FormFieldProps, "label"> & {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };

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:"e14osuid0",label:"StyledInnerInputContainer"})({position:"relative",zIndex:1}),StyledInputWrap=styled("div",{target:"e14osuid1",label:"StyledInputWrap"})(()=>({position:"absolute",pointerEvents:"none",width:"100%",bottom:0,left:0})),HiddenSelectInput=styled("select",{target:"e14osuid2",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.some(option=>option.value===value)?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:"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)))};

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

@@ -1 +1 @@
-import sizes from"../../../web-tokens/_sizes.json";let xxs=sizes.find(({subitemName})=>"xxs"===subitemName).original;export const dropdownContainerStyle={paddingTop:xxs,paddingBottom:xxs};
+import sizes from"../../../web-tokens/_sizes.json";let xxs=sizes.find(({subitemName})=>"xxs"===subitemName)?.original;export const dropdownContainerStyle={paddingTop:xxs,paddingBottom:xxs};

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

@@ -1 +1 @@
-import React,{useEffect,useRef,useState,useId}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Stack}from"../../Stack/Stack";import{Text}from"../../Typography/Text/Text";import{FormErrorMessages}from"../FormErrorMessages/FormErrorMessages";import{FormLabelText}from"../FormLabelText/FormLabelText";import{flattenChildren}from"../../../shared/flattenChildren";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{useResponsiveStyles}from"../../../shared/mediaQueries";let StyledFieldset=styled("fieldset",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e1o8e6w80",label:"StyledFieldset"})(({isObserverDone,disabled})=>({border:0,margin:0,padding:0,visibility:isObserverDone?"visible":"hidden",...disabled&&{cursor:"not-allowed"}})),InlineChildren=styled("div",{target:"e1o8e6w81",label:"InlineChildren"})({display:"flex",flexDirection:"row",flexWrap:"nowrap"}),FormChildren=styled("div",{target:"e1o8e6w82",label:"FormChildren"})(({theme,shouldLabelWrap,space})=>({...useResponsiveStyles({marginRight:[space,theme.variables.size.spacing]}),whiteSpace:shouldLabelWrap?"normal":"nowrap"})),StyledTextContainer=styled("div",{target:"e1o8e6w83",label:"StyledTextContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}})),StyledLabelContainer=styled("div",{target:"e1o8e6w84",label:"StyledLabelContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}}));export function FormFieldGroup({children,label="",labelAs="div",isLabelHidden=!1,labelHint="",errorMessages=[],hint="",disabled=!1,inline=!1,space="xl","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let messageId=useId(),radioGroupRef=useRef(null),[isOverflowing,setIsOverflowing]=useState(!1),[isObserverDone,setIsObserverDone]=useState(!inline),[shouldLabelWrap,setShouldLabelWrap]=useState(!1);useEffect(()=>{let observer;return inline&&"undefined"!=typeof IntersectionObserver&&radioGroupRef&&radioGroupRef.current&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{entry.isIntersecting||(setIsOverflowing(!0),setShouldLabelWrap(!0)),setIsObserverDone(!0)}),{root:radioGroupRef.current,threshold:1}),Object.entries(radioGroupRef.current.children).forEach(radio=>{let radioElement=radio[1];observer.observe(radioElement)})),()=>{observer&&observer.disconnect()}},[inline]);let validErrorMessages=errorMessages.filter(message=>message),messagesElm=(!!validErrorMessages.length||hint)&&React.createElement(Stack,{space:"xxs",id:messageId},!!validErrorMessages.length&&React.createElement(StyledTextContainer,{disabled:disabled},React.createElement(FormErrorMessages,{messages:validErrorMessages})),hint&&React.createElement(StyledTextContainer,{disabled:disabled},React.createElement(Text,{size:"s",color:"tertiary"},hint))),ariaDescribedBy=messagesElm?{"aria-describedby":messageId}:{},renderChild=child=>React.isValidElement(child)?React.cloneElement(child,{disabled:disabled||child.props.disabled}):null;return React.createElement(StyledFieldset,{disabled:disabled,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"FormFieldGroup",isObserverDone:isObserverDone,...ariaAttributes,...ariaDescribedBy},React.createElement(ScreenReaderText,{as:"legend"},label),React.createElement(Stack,{space:"xs"},label&&!isLabelHidden&&React.createElement(StyledLabelContainer,{disabled:disabled},React.createElement(FormLabelText,{labelHint:labelHint,labelAs:labelAs},label)),inline&&!isOverflowing?React.createElement(InlineChildren,{ref:radioGroupRef},React.Children.map(flattenChildren(children),child=>child?React.createElement(FormChildren,{shouldLabelWrap:shouldLabelWrap,space:space},renderChild(child)):null)):React.Children.map(flattenChildren(children),renderChild),messagesElm))}
+import React,{useEffect,useRef,useState,useId}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{Stack}from"../../Stack/Stack";import{Text}from"../../Typography/Text/Text";import{FormErrorMessages}from"../FormErrorMessages/FormErrorMessages";import{FormLabelText}from"../FormLabelText/FormLabelText";import{flattenChildren}from"../../../shared/flattenChildren";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{useResponsiveStyles}from"../../../shared/mediaQueries";let StyledFieldset=styled("fieldset",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"ec2mc9r0",label:"StyledFieldset"})(({isObserverDone,disabled})=>({border:0,margin:0,padding:0,visibility:isObserverDone?"visible":"hidden",...disabled&&{cursor:"not-allowed"}})),InlineChildren=styled("div",{target:"ec2mc9r1",label:"InlineChildren"})({display:"flex",flexDirection:"row",flexWrap:"nowrap"}),FormChildren=styled("div",{target:"ec2mc9r2",label:"FormChildren"})(({theme,shouldLabelWrap,space})=>({...useResponsiveStyles({marginRight:[space,theme.variables.size.spacing]}),whiteSpace:shouldLabelWrap?"normal":"nowrap"})),StyledTextContainer=styled("div",{target:"ec2mc9r3",label:"StyledTextContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}})),StyledLabelContainer=styled("div",{target:"ec2mc9r4",label:"StyledLabelContainer"})(({theme,disabled})=>({...disabled&&{opacity:theme.variables.opacity.disabled,pointerEvents:"none"}}));export function FormFieldGroup({children,label="",labelAs="div",isLabelHidden=!1,labelHint="",errorMessages=[],hint="",disabled=!1,inline=!1,space="xl","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let messageId=useId(),radioGroupRef=useRef(null),[isOverflowing,setIsOverflowing]=useState(!1),[isObserverDone,setIsObserverDone]=useState(!inline),[shouldLabelWrap,setShouldLabelWrap]=useState(!1);useEffect(()=>{let observer;return inline&&"undefined"!=typeof IntersectionObserver&&radioGroupRef&&radioGroupRef.current&&(observer=new IntersectionObserver(entries=>entries.forEach(entry=>{entry.isIntersecting||(setIsOverflowing(!0),setShouldLabelWrap(!0)),setIsObserverDone(!0)}),{root:radioGroupRef.current,threshold:1}),Object.entries(radioGroupRef.current.children).forEach(radio=>{let radioElement=radio[1];observer.observe(radioElement)})),()=>{observer&&observer.disconnect()}},[inline]);let validErrorMessages=errorMessages.filter(message=>message),messagesElm=(!!validErrorMessages.length||hint)&&React.createElement(Stack,{space:"xxs",id:messageId},!!validErrorMessages.length&&React.createElement(StyledTextContainer,{disabled:disabled},React.createElement(FormErrorMessages,{messages:validErrorMessages})),hint&&React.createElement(StyledTextContainer,{disabled:disabled},React.createElement(Text,{size:"s",color:"tertiary"},hint))),ariaDescribedBy=messagesElm?{"aria-describedby":messageId}:{},renderChild=child=>React.isValidElement(child)?React.cloneElement(child,{disabled:disabled||child.props.disabled}):null;return React.createElement(StyledFieldset,{disabled:disabled,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"FormFieldGroup",isObserverDone:isObserverDone,...ariaAttributes,...ariaDescribedBy},React.createElement(ScreenReaderText,{as:"legend"},label),React.createElement(Stack,{space:"xs"},label&&!isLabelHidden&&React.createElement(StyledLabelContainer,{disabled:disabled},React.createElement(FormLabelText,{labelHint:labelHint,labelAs:labelAs},label)),inline&&!isOverflowing?React.createElement(InlineChildren,{ref:radioGroupRef},React.Children.map(flattenChildren(children),child=>child?React.createElement(FormChildren,{shouldLabelWrap:shouldLabelWrap,space:space},renderChild(child)):null)):React.Children.map(flattenChildren(children),renderChild),messagesElm))}

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:"e20qv3c0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledIconContainer=styled("div",{target:"e20qv3c1",label:"StyledIconContainer"})(({theme})=>({position:"absolute",right:theme.variables.size.spacing.xs})),StyledInput=styled("input",{target:"e20qv3c2",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&&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:"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}))});

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:"e136axgx0",label:"StyledContainer"})(()=>({width:"100%",display:"flex",alignItems:"center",flexDirection:"row",position:"relative"})),StyledPasswordInput=styled("input",{target:"e136axgx1",label:"StyledPasswordInput"})(({theme,hasError,readOnly})=>({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&&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:"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}))});

package/build/esm/components/Form/PasswordInput/PasswordInputButton.d.ts

@@ -3,8 +3,8 @@ import React from "react";
 type PasswordInputButtonProps = {
     onIconClick?: (e: React.MouseEvent) => void;
     hasError: boolean;
-    disabled: boolean;
-    readOnly: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
     ariaLabel: string;
     isPasswordVisible: boolean;
     onToggle: () => void;

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

@@ -1 +1 @@
-import React,{useId,useState}from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";let handleIconBorderColor=(theme,hasError)=>hasError?theme.values.color.icon.error.default:"transparent",handleIconLeftBorderColor=(theme,hasError)=>hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,handleClick=({e,disabled,onIconClick,onToggle})=>{disabled&&e.preventDefault(),onIconClick?.(e),onToggle()},StyledIconBtn=styled("button",{target:"edrbxqz0",label:"StyledIconBtn"})(({theme,hasError})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},position:"absolute",top:0,right:0,border:"1px solid",borderColor:handleIconBorderColor(theme,hasError),borderLeftColor:handleIconLeftBorderColor(theme,hasError),padding:`calc(${theme.variables.size.spacing.s} - 1px) ${theme.variables.size.spacing.s}`,borderRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:"0",borderTopLeftRadius:"0",color:theme.values.color.text.secondary.default,backgroundColor:"inherit",cursor:"pointer","&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.primary.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active,borderColor:theme.values.color.border.primary.active},"&:disabled":{backgroundColor:theme.values.color.background.transparent.default,borderLeftColor:theme.values.color.border.primary.disabled,pointerEvents:"none"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,"&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.error.default}},"& svg":{pointerEvents:"none"}}));export const PasswordInputButton=({hasError,disabled,onIconClick,readOnly,ariaLabel,isPasswordVisible,onToggle})=>{let[isButtonFocused,setIsButtonFocused]=useState(!1),screenReaderTextId=useId();return React.createElement(React.Fragment,null,React.createElement(ScreenReaderText,{id:screenReaderTextId},isButtonFocused?ariaLabel:""),React.createElement(StyledIconBtn,{onClick:e=>handleClick({e,disabled,onIconClick,onToggle}),hasError:hasError,onFocus:()=>setIsButtonFocused(!0),onBlur:()=>setIsButtonFocused(!1),disabled:readOnly||disabled,type:"button","aria-labelledby":screenReaderTextId},React.createElement(Icon,{name:isPasswordVisible?"eye":"eye-off",size:"s",color:readOnly?"quaternary":"tertiary"})))};
+import React,{useId,useState}from"react";import styled from"@emotion/styled";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";let handleIconBorderColor=(theme,hasError)=>hasError?theme.values.color.icon.error.default:"transparent",handleIconLeftBorderColor=(theme,hasError)=>hasError?theme.values.color.border.error.default:theme.values.color.border.primary.default,handleClick=({e,disabled,onIconClick,onToggle})=>{disabled&&e.preventDefault(),onIconClick?.(e),onToggle()},StyledIconBtn=styled("button",{target:"eyjrml0",label:"StyledIconBtn"})(({theme,hasError=!1})=>({"&[type='button']":{appearance:"none",MozAppearance:"none",WebkitAppearance:"none"},position:"absolute",top:0,right:0,border:"1px solid",borderColor:handleIconBorderColor(theme,hasError),borderLeftColor:handleIconLeftBorderColor(theme,hasError),padding:`calc(${theme.variables.size.spacing.s} - 1px) ${theme.variables.size.spacing.s}`,borderRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:"0",borderTopLeftRadius:"0",color:theme.values.color.text.secondary.default,backgroundColor:"inherit",cursor:"pointer","&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.primary.hover},"&:active":{color:theme.values.color.text.primary.default,backgroundColor:theme.values.color.background.transparent.active,borderColor:theme.values.color.border.primary.active},"&:disabled":{backgroundColor:theme.values.color.background.transparent.default,borderLeftColor:theme.values.color.border.primary.disabled,pointerEvents:"none"},...hasError&&{boxShadow:`0 0 0 1px inset ${theme.values.color.border.error.default}`,"&:hover":{backgroundColor:theme.values.color.background.transparent.hover,borderColor:theme.values.color.border.error.default}},"& svg":{pointerEvents:"none"}}));export const PasswordInputButton=({hasError,disabled,onIconClick,readOnly,ariaLabel,isPasswordVisible,onToggle})=>{let[isButtonFocused,setIsButtonFocused]=useState(!1),screenReaderTextId=useId();return React.createElement(React.Fragment,null,React.createElement(ScreenReaderText,{id:screenReaderTextId},isButtonFocused?ariaLabel:""),React.createElement(StyledIconBtn,{onClick:e=>handleClick({e,disabled,onIconClick,onToggle}),hasError:hasError,onFocus:()=>setIsButtonFocused(!0),onBlur:()=>setIsButtonFocused(!1),disabled:readOnly||disabled,type:"button","aria-labelledby":screenReaderTextId},React.createElement(Icon,{name:isPasswordVisible?"eye":"eye-off",size:"s",color:readOnly?"quaternary":"tertiary"})))};

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text,getTextLineHeight}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"e1jwbonf0",label:"StyledInputContainer"})(({theme,vSize,hSize})=>({userSelect:"none",display:"flex",position:"relative",width:theme.variables.size.dimension.radio[hSize],height:`calc(${theme.variables.size.font[vSize]} * ${getTextLineHeight({size:vSize,theme})})`,boxSizing:"border-box",alignItems:"center"})),StyledRealInput=styled("input",{target:"e1jwbonf1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",position:"absolute",width:0,height:0})),StyledFakeInput=styled("span",{target:"e1jwbonf2",label:"StyledFakeInput"})(({theme,size})=>({boxSizing:"border-box",width:theme.variables.size.dimension.radio[size],height:theme.variables.size.dimension.radio[size],borderRadius:theme.variables.size.borderRadius.m,border:"2px solid",top:"50%",left:0,transform:"translate(0, -50%)",display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",background:theme.values.color.background.primary.default,borderColor:theme.values.color.border.primary.default,"& div":{opacity:theme.variables.opacity.hidden,borderRadius:theme.variables.size.borderRadius.full,width:theme.variables.size.dimension.radioPoint[size],height:theme.variables.size.dimension.radioPoint[size],background:theme.values.color.border.accent.default},"input:checked + &":{borderColor:theme.values.color.border.accent.default,background:theme.values.color.background.primary.default,"& div":{opacity:theme.variables.opacity.visible}},"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:disabled + &":{pointerEvents:"none"}}));export const StyledRadioContainer=styled("div",{target:"e1jwbonf3",label:"StyledRadioContainer"})(({theme,isInteractable})=>({"&:hover":{...isInteractable&&{cursor:"pointer",[`input:not(:checked) + ${StyledFakeInput}`]:{borderColor:theme.values.color.border.primary.hover}},...!isInteractable&&{cursor:"not-allowed"}}}));export const RadioRaw=React.forwardRef(({label="",labelHint,size="m",labelSize="m",disabled,...rest},ref)=>React.createElement(StyledRadioContainer,{isInteractable:!disabled},React.createElement(Inline,{space:"xs",vAlignItems:"top",noWrap:!0},React.createElement(StyledInputContainer,{vSize:labelSize,hSize:size},React.createElement(StyledRealInput,{...rest,disabled:disabled,ref:ref,type:"radio"}),React.createElement(StyledFakeInput,{size:size},React.createElement("div",null))),label&&React.createElement("div",null,"string"==typeof label?React.createElement(Text,{size:labelSize},label):label,labelHint&&React.createElement(Text,{size:"s",color:"tertiary"},labelHint)))));export const Radio=React.forwardRef(({label="",labelHint,disabled=!1,size="m",hint,errorMessages,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Radio",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(RadioRaw,{...rest,ref:ref,size:size,label:label,labelHint:labelHint,disabled:disabled,...ariaDescribedByProp}))});
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text,getTextLineHeight}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"eb3g3qo0",label:"StyledInputContainer"})(({theme,vSize,hSize})=>({userSelect:"none",display:"flex",position:"relative",width:theme.variables.size.dimension.radio[hSize],height:`calc(${theme.variables.size.font[vSize]} * ${getTextLineHeight({size:vSize,theme})})`,boxSizing:"border-box",alignItems:"center"})),StyledRealInput=styled("input",{target:"eb3g3qo1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",position:"absolute",width:0,height:0})),StyledFakeInput=styled("span",{target:"eb3g3qo2",label:"StyledFakeInput"})(({theme,size})=>({boxSizing:"border-box",width:theme.variables.size.dimension.radio[size],height:theme.variables.size.dimension.radio[size],borderRadius:theme.variables.size.borderRadius.m,border:"2px solid",top:"50%",left:0,transform:"translate(0, -50%)",display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",background:theme.values.color.background.primary.default,borderColor:theme.values.color.border.primary.default,"& div":{opacity:theme.variables.opacity.hidden,borderRadius:theme.variables.size.borderRadius.full,width:theme.variables.size.dimension.radioPoint[size],height:theme.variables.size.dimension.radioPoint[size],background:theme.values.color.border.accent.default},"input:checked + &":{borderColor:theme.values.color.border.accent.default,background:theme.values.color.background.primary.default,"& div":{opacity:theme.variables.opacity.visible}},"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:disabled + &":{pointerEvents:"none"}}));export const StyledRadioContainer=styled("div",{target:"eb3g3qo3",label:"StyledRadioContainer"})(({theme,isInteractable})=>({"&:hover":{...isInteractable&&{cursor:"pointer",[`input:not(:checked) + ${StyledFakeInput}`]:{borderColor:theme.values.color.border.primary.hover}},...!isInteractable&&{cursor:"not-allowed"}}}));export const RadioRaw=React.forwardRef(({label="",labelHint,size="m",labelSize="m",disabled,...rest},ref)=>React.createElement(StyledRadioContainer,{isInteractable:!disabled},React.createElement(Inline,{space:"xs",vAlignItems:"top",noWrap:!0},React.createElement(StyledInputContainer,{vSize:labelSize,hSize:size},React.createElement(StyledRealInput,{...rest,disabled:disabled,ref:ref,type:"radio"}),React.createElement(StyledFakeInput,{size:size},React.createElement("div",null))),label&&React.createElement("div",null,"string"==typeof label?React.createElement(Text,{size:labelSize},label):label,labelHint&&React.createElement(Text,{size:"s",color:"tertiary"},labelHint)))));export const Radio=React.forwardRef(({label="",labelHint,disabled=!1,size="m",hint,errorMessages,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Radio",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(RadioRaw,{...rest,ref:ref,size:size,label:label,labelHint:labelHint,disabled:disabled,...ariaDescribedByProp}))});

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

@@ -1 +1 @@
-import React,{useMemo,useCallback}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInput=styled("input",{target:"e8umilf0",label:"StyledInput"})(({theme})=>{let resetStyles={WebkitAppearance:"none",appearance:"none"},thumbStyles={...resetStyles,backgroundColor:theme.values.color.rangeInput.background.thumb.default,boxShadow:theme.values.elevation[3],height:"20px",width:"20px",borderRadius:theme.variables.size.borderRadius.full,border:0};return{...resetStyles,height:"4px",borderRadius:theme.variables.size.borderRadius.xs,cursor:"pointer",width:"100%",margin:`${theme.variables.size.spacing.s} 0 ${theme.variables.size.spacing.m} 0`,"&:disabled":{cursor:"default"},"::-webkit-slider-thumb":thumbStyles,"::-moz-range-thumb":thumbStyles,"::-ms-thumb":thumbStyles}});export const RangeInput=React.forwardRef(({step=1,min=0,max=100,value=min,hasError=!1,onSlideStart,disabled,label,labelHint,hideLabel,errorMessages,hint,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let theme=useTheme(),{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),background=useMemo(()=>{let progress=(Number(value)-Number(min))/(Number(max)-Number(min))*100,accentBg=theme.values.color.background.accent.default,placeholderBg=theme.values.color.background.placeholder.default;return`linear-gradient(to right, ${accentBg} 0%, ${accentBg} ${progress}%, ${placeholderBg} ${progress}%, ${placeholderBg} 100%)`},[value,min,max,theme.name]),handleSlideStart=useCallback(e=>{onSlideStart&&onSlideStart(e)},[onSlideStart]);return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RangeInput",disabled:disabled,label:label,hideLabel:hideLabel,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledInput,{...rest,type:"range",style:{background},ref:ref,value:value,min:min,max:max,step:step,disabled:disabled,onMouseDown:handleSlideStart,onTouchStart:handleSlideStart,"aria-invalid":hasError,...ariaDescribedByProp}))});
+import React,{useMemo,useCallback}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInput=styled("input",{target:"e1vc6tql0",label:"StyledInput"})(({theme})=>{let resetStyles={WebkitAppearance:"none",appearance:"none"},thumbStyles={...resetStyles,backgroundColor:theme.values.color.rangeInput.background.thumb.default,boxShadow:theme.values.elevation[3],height:"20px",width:"20px",borderRadius:theme.variables.size.borderRadius.full,border:0};return{...resetStyles,height:"4px",borderRadius:theme.variables.size.borderRadius.xs,cursor:"pointer",width:"100%",margin:`${theme.variables.size.spacing.s} 0 ${theme.variables.size.spacing.m} 0`,"&:disabled":{cursor:"default"},"::-webkit-slider-thumb":thumbStyles,"::-moz-range-thumb":thumbStyles,"::-ms-thumb":thumbStyles}});export const RangeInput=React.forwardRef(({step=1,min=0,max=100,value=min,hasError=!1,onSlideStart,disabled,label,labelHint,hideLabel,errorMessages,hint,"data-e2e-test-id":dataE2eTestId,"aria-describedby":ariaDescribedBy,...rest},ref)=>{let theme=useTheme(),{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),background=useMemo(()=>{let progress=(Number(value)-Number(min))/(Number(max)-Number(min))*100,accentBg=theme.values.color.background.accent.default,placeholderBg=theme.values.color.background.placeholder.default;return`linear-gradient(to right, ${accentBg} 0%, ${accentBg} ${progress}%, ${placeholderBg} ${progress}%, ${placeholderBg} 100%)`},[value,min,max,theme.name]),handleSlideStart=useCallback(e=>{onSlideStart&&onSlideStart(e)},[onSlideStart]);return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"RangeInput",disabled:disabled,label:label,hideLabel:hideLabel,labelHint:labelHint,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledInput,{...rest,type:"range",style:{background},ref:ref,value:value,min:min,max:max,step:step,disabled:disabled,onMouseDown:handleSlideStart,onTouchStart:handleSlideStart,"aria-invalid":hasError,...ariaDescribedByProp}))});

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

@@ -1 +1 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import iconSizesMap from"../../../web-tokens/_icon_sizes_map.json";import{Icon}from"../../Icon/Icon";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{InputRaw}from"../Input/Input";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let iconSizes=iconSizesMap.icons,StyledSearchInputContainer=styled("div",{target:"elipqdd0",label:"StyledSearchInputContainer"})(({theme})=>({position:"relative",backgroundColor:theme.values.color.searchInput.background.default,borderRadius:theme.variables.size.borderRadius.xs,height:theme.variables.size.spacing.xl,width:"100%","& input":{backgroundColor:theme.values.color.background.transparent.default,paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs,paddingLeft:`calc(${theme.variables.size.spacing.s} + ${iconSizes.s})`,paddingRight:theme.variables.size.spacing.xl,borderWidth:0,textOverflow:"ellipsis","&::placeholder":{color:theme.values.color.text.tertiary.default,fontStyle:"italic"}}})),IconsContainer=styled("div",{target:"elipqdd1",label:"IconsContainer"})(({theme})=>({display:"flex",alignItems:"center",justifyContent:"space-between",position:"absolute",inset:`0 ${theme.variables.size.spacing.xs}`,"& > div":{lineHeight:0}}));export const SearchInput=({value,placeholder,autoComplete="on",readOnly,label,labelHint,hideLabel=!0,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,onClear=()=>null,slotProps,...rest})=>{let inputRef=useRef(null),{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-ds-id":"SearchInput","data-e2e-test-id":dataE2eTestId,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledSearchInputContainer,null,React.createElement(InputRaw,{...rest,ref:inputRef,type:"text",size:"s",value:value,placeholder:!readOnly&&placeholder,autoComplete:autoComplete,readOnly:readOnly,...ariaDescribedByProp}),React.createElement(IconsContainer,null,React.createElement(Icon,{name:"search",size:"s",color:readOnly?"quaternary":"tertiary"}),!!value&&!readOnly&&React.createElement(PictogramButton,{icon:"x",size:"xs",color:"tertiary","aria-label":slotProps?.clearButton?.ariaLabel,onClick:e=>{e.preventDefault(),onClear(e),inputRef.current.focus()}}))))};
+import React,{useRef}from"react";import styled from"@emotion/styled";import{useIntl}from"../../../shared/intl/useIntl";import iconSizesMap from"../../../web-tokens/_icon_sizes_map.json";import{Icon}from"../../Icon/Icon";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{InputRaw}from"../Input/Input";import{FormField}from"../FormField/FormField";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let iconSizes=iconSizesMap.icons,StyledSearchInputContainer=styled("div",{target:"e1b1l7xz0",label:"StyledSearchInputContainer"})(({theme})=>({position:"relative",backgroundColor:theme.values.color.searchInput.background.default,borderRadius:theme.variables.size.borderRadius.xs,height:theme.variables.size.spacing.xl,width:"100%","& input":{backgroundColor:theme.values.color.background.transparent.default,paddingTop:theme.variables.size.spacing.xxs,paddingBottom:theme.variables.size.spacing.xxs,paddingLeft:`calc(${theme.variables.size.spacing.s} + ${iconSizes.s})`,paddingRight:theme.variables.size.spacing.xl,borderWidth:0,textOverflow:"ellipsis","&::placeholder":{color:theme.values.color.text.tertiary.default,fontStyle:"italic"}}})),IconsContainer=styled("div",{target:"e1b1l7xz1",label:"IconsContainer"})(({theme})=>({display:"flex",alignItems:"center",justifyContent:"space-between",position:"absolute",inset:`0 ${theme.variables.size.spacing.xs}`,"& > div":{lineHeight:0}}));export const SearchInput=({value,placeholder,autoComplete="on",readOnly,label,labelHint,hideLabel=!0,hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,onClear=()=>null,slotProps,...rest})=>{let inputRef=useRef(null),{formatMessage}=useIntl(),{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint});return React.createElement(FormField,{"data-ds-id":"SearchInput","data-e2e-test-id":dataE2eTestId,label:label,labelHint:labelHint,hideLabel:hideLabel,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledSearchInputContainer,null,React.createElement(InputRaw,{...rest,ref:inputRef,type:"text",size:"s",value:value,placeholder:readOnly?void 0:placeholder,autoComplete:autoComplete,readOnly:readOnly,...ariaDescribedByProp}),React.createElement(IconsContainer,null,React.createElement(Icon,{name:"search",size:"s",color:readOnly?"quaternary":"tertiary"}),!!value&&!readOnly&&React.createElement(PictogramButton,{icon:"x",size:"xs",color:"tertiary","aria-label":slotProps?.clearButton?.ariaLabel??formatMessage("SearchInput.ClearButton.AriaLabel"),onClick:e=>{e.preventDefault(),onClear(e),inputRef.current?.focus()}}))))};

package/build/esm/components/Form/SegmentedControl/-types.d.ts

@@ -1,12 +1,12 @@
 import type { FormEvent, ChangeEvent, ReactNode, ReactElement } from "react";
-import type { IconName } from "src";
+import type { IconName } from "../../../index.js";
 import type { FormFieldGroupProps } from "../../../components/Form/FormFieldGroup/FormFieldGroup";
 import type { TooltipProps } from "../../../components/Tooltip/Tooltip";
 import type { SlotProps } from "../../../shared/slotProps";
 export type RenderOptionWrapperProps = {
     option: ReactNode;
     checked: boolean;
-    disabled: boolean;
+    disabled?: boolean;
     value: string;
 };
 export type SegmentedControlOption = {

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

@@ -1 +1 @@
-import React,{Fragment}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{FormFieldGroup}from"../FormFieldGroup/FormFieldGroup";import{SegmentedControlOption}from"./SegmentedControlOption";let StyledDivider=styled("div",{target:"e1yfjg690",label:"StyledDivider"})(({theme,isChecked,isDisabled,isPrevOptionChecked,isPrevOptionDisabled,justified})=>{let border=`1px solid ${theme.values.color.border.secondary.default}`,otherStyles={backgroundColor:theme.values.color.background.primary.default,...(isChecked||isPrevOptionChecked)&&{borderColor:theme.values.color.border.accent.default},...isDisabled&&isPrevOptionDisabled&&{opacity:theme.variables.opacity.disabled}},borderRightStyle={borderRight:border,...otherStyles};return justified?{[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderRightStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{borderBottom:border,...otherStyles}}:borderRightStyle}),StyledContainer=styled("div",{target:"e1yfjg691",label:"StyledContainer"})(({justified,options})=>{let baseStyle={display:"flex"};return justified?{...baseStyle,flexDirection:"column","& > *":{flex:`1 1 ${100/options.length}%`},[`& > ${StyledDivider}`]:{flex:"0 0 auto"},[`@media (min-width: ${breakpoints.m.value}px)`]:{flexDirection:"row"}}:baseStyle});export function SegmentedControl({options,value,justified,size="m",onChange,isLabelHidden=!0,renderOptionWrapper,...rest}){let isSingleOption=1===options.length,handleChange=evt=>{let target=evt.target;isSingleOption?onChange(target.checked?target.value:""):onChange(target.value)},optionElms=options.map(({value:optionValue,disabled,...otherProps},index)=>{let isChecked=value===optionValue,isPrevOptionChecked=options[index-1]?.value===value,isPrevOptionDisabled=options[index-1]?.disabled,dividerElm=React.createElement(StyledDivider,{isPrevOptionChecked:isPrevOptionChecked,isPrevOptionDisabled:isPrevOptionDisabled,isChecked:isChecked,isDisabled:disabled,justified:justified}),isRightDivider=index!==options.length-1&&isChecked,optionElm=React.createElement(React.Fragment,null,0!==index&&!isPrevOptionChecked&&dividerElm,React.createElement(SegmentedControlOption,{value:optionValue,size:size,checked:isChecked,isResponsive:justified,disabled:disabled,inputType:isSingleOption?"checkbox":"radio",onChange:handleChange,...otherProps}),isRightDivider&&dividerElm),wrappedOptionElm=renderOptionWrapper?renderOptionWrapper({option:optionElm,checked:isChecked,disabled,value:optionValue}):optionElm;return React.createElement(Fragment,{key:optionValue},wrappedOptionElm)});return React.createElement(FormFieldGroup,{"data-ds-id":"SegmentedControl",isLabelHidden:isLabelHidden,...rest},React.createElement(StyledContainer,{justified:justified,options:options},optionElms))}
+import React,{Fragment}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{FormFieldGroup}from"../FormFieldGroup/FormFieldGroup";import{SegmentedControlOption}from"./SegmentedControlOption";let StyledDivider=styled("div",{target:"e1qdakvf0",label:"StyledDivider"})(({theme,isChecked,isDisabled,isPrevOptionChecked,isPrevOptionDisabled,justified})=>{let border=`1px solid ${theme.values.color.border.secondary.default}`,otherStyles={backgroundColor:theme.values.color.background.primary.default,...(isChecked||isPrevOptionChecked)&&{borderColor:theme.values.color.border.accent.default},...isDisabled&&isPrevOptionDisabled&&{opacity:theme.variables.opacity.disabled}},borderRightStyle={borderRight:border,...otherStyles};return justified?{[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderRightStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{borderBottom:border,...otherStyles}}:borderRightStyle}),StyledContainer=styled("div",{target:"e1qdakvf1",label:"StyledContainer"})(({justified,options})=>{let baseStyle={display:"flex"};return justified?{...baseStyle,flexDirection:"column","& > *":{flex:`1 1 ${100/options.length}%`},[`& > ${StyledDivider}`]:{flex:"0 0 auto"},[`@media (min-width: ${breakpoints.m.value}px)`]:{flexDirection:"row"}}:baseStyle});export function SegmentedControl({options,value,justified,size="m",onChange,isLabelHidden=!0,renderOptionWrapper,...rest}){let isSingleOption=1===options.length,handleChange=evt=>{let target=evt.target;isSingleOption?onChange(target.checked?target.value:""):onChange(target.value)},optionElms=options.map(({value:optionValue,disabled,...otherProps},index)=>{let isChecked=value===optionValue,isPrevOptionChecked=options[index-1]?.value===value,isPrevOptionDisabled=options[index-1]?.disabled,dividerElm=React.createElement(StyledDivider,{isPrevOptionChecked:isPrevOptionChecked,isPrevOptionDisabled:isPrevOptionDisabled,isChecked:isChecked,isDisabled:disabled,justified:justified}),isRightDivider=index!==options.length-1&&isChecked,optionElm=React.createElement(React.Fragment,null,0!==index&&!isPrevOptionChecked&&dividerElm,React.createElement(SegmentedControlOption,{value:optionValue,size:size,checked:isChecked,isResponsive:justified,disabled:disabled,inputType:isSingleOption?"checkbox":"radio",onChange:handleChange,...otherProps}),isRightDivider&&dividerElm),wrappedOptionElm=renderOptionWrapper?renderOptionWrapper({option:optionElm,checked:isChecked,disabled,value:optionValue}):optionElm;return React.createElement(Fragment,{key:optionValue},wrappedOptionElm)});return React.createElement(FormFieldGroup,{"data-ds-id":"SegmentedControl",isLabelHidden:isLabelHidden,...rest},React.createElement(StyledContainer,{justified:justified,options:options},optionElms))}

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:"etj54850",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"etj54851",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"etj54852",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:"etj54853",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"etj54854",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,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconElm=iconName?React.createElement(StyledIconContainer,null,React.createElement(Icon,{name:iconName,size:"s","aria-label":slotProps?.icon?.ariaLabel??iconAriaLabel,role:"img"})):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,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:"eve0hq10",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"eve0hq11",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"eve0hq12",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:"eve0hq13",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"eve0hq14",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,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,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:"e1w5svy60",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:"e1w5svy61",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,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:"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??""))})}

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

@@ -1 +1 @@
-import React,{useState,useRef,useEffect,useCallback,useMemo}from"react";import styled from"@emotion/styled";import{getOptionId,getOptionsListId,OptionsList}from"../Combobox/OptionsList";import{useKeyboard}from"../../../shared/useKeyboard";import{useTypeAheadSearch}from"./useTypeAheadSearch";let HiddenSelectInput=styled("select",{target:"ezvwo4c0",label:"HiddenSelectInput"})(()=>({display:"none"}));export function SelectWithCustomTrigger({renderTrigger,optionsListWidth,options,name,value,portalContainer,disabled,maxHeight=230,autoComplete="on",readOnly=!1,excludeFromFormData=!1,onChange}){let[isOpen,setIsOpen]=useState(!1),[selectedIndex,setSelectedIndex]=useState(-1),triggerRef=useRef(null),hiddenSelectRef=useRef(null),currentOptionIndex=useMemo(()=>options.findIndex(option=>option.value===value),[options,value]),closeOptionsList=useCallback(()=>{isOpen&&(setIsOpen(!1),setSelectedIndex(-1))},[isOpen]),openOptionsList=useCallback(()=>{isOpen||readOnly||(setIsOpen(!0),triggerRef.current?.focus())},[isOpen,readOnly]),toggleOptionsList=useCallback(()=>{isOpen?closeOptionsList():openOptionsList()},[isOpen,openOptionsList,closeOptionsList]),handleSelectedIndexChange=useCallback(index=>setSelectedIndex(index),[]),handleChange=useCallback(option=>{hiddenSelectRef.current.value=option.value,hiddenSelectRef.current.dispatchEvent(new Event("change",{bubbles:!0}))},[hiddenSelectRef]),handleSearchMatch=useCallback(matchedIndex=>{-1!==matchedIndex&&(isOpen?setSelectedIndex(matchedIndex):handleChange(options[matchedIndex]))},[isOpen,options,setSelectedIndex,handleChange]);useKeyboard({"Enter Space ArrowUp ArrowDown":()=>{openOptionsList()}},triggerRef,!isOpen&&!disabled),useTypeAheadSearch({options,triggerRef,isActive:!disabled,fromIndex:-1!==selectedIndex?selectedIndex:currentOptionIndex,onMatch:handleSearchMatch}),useEffect(()=>{let triggerElm=triggerRef.current,handlePointerDown=evt=>{evt.preventDefault()};return triggerElm&&!disabled&&(triggerElm.setAttribute("tabIndex","0"),triggerElm.addEventListener("click",toggleOptionsList),triggerElm.addEventListener("blur",closeOptionsList),triggerElm.addEventListener("pointerdown",handlePointerDown)),()=>{triggerElm?.removeEventListener("click",toggleOptionsList),triggerElm?.removeEventListener("blur",closeOptionsList),triggerElm?.removeEventListener("pointerdown",handlePointerDown)}},[triggerRef,disabled,closeOptionsList,toggleOptionsList]),useEffect(()=>{let triggerElm=triggerRef.current,handleEscapeKeyDown=evt=>{"Escape"===evt.code&&(evt.preventDefault(),evt.stopPropagation(),closeOptionsList())};return triggerElm&&isOpen&&triggerElm.addEventListener("keydown",handleEscapeKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleEscapeKeyDown)}},[triggerRef,isOpen,closeOptionsList]);let optionsListId=getOptionsListId(name),ariaActiveDescendant=-1!==selectedIndex?getOptionId(name,options[selectedIndex].value):"",triggerElm=renderTrigger({triggerRef,isOpen,disabled,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen}),optionsListElm=React.createElement(OptionsList,{name:name,isOpen:isOpen,isVirtualized:!1,options:options,triggerRef:triggerRef,onCloseDropdown:closeOptionsList,portalContainer:portalContainer,selectedIndex:selectedIndex,onSelectedIndexChange:handleSelectedIndexChange,forceChangeFakeSelect:handleChange,value:value,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth});return React.createElement(React.Fragment,null,triggerElm,optionsListElm,React.createElement(HiddenSelectInput,{name:excludeFromFormData?void 0:name,onChange:onChange,value:value,ref:hiddenSelectRef,autoComplete:autoComplete},React.createElement("option",{value:"","aria-label":"Empty option"}),options.map(option=>React.createElement("option",{value:option.value,key:option.value},option.label))))}
+import React,{useState,useRef,useEffect,useCallback,useMemo}from"react";import styled from"@emotion/styled";import{getOptionId,getOptionsListId,OptionsList}from"../Combobox/OptionsList";import{useKeyboard}from"../../../shared/useKeyboard";import{useTypeAheadSearch}from"./useTypeAheadSearch";let HiddenSelectInput=styled("select",{target:"ejxvztk0",label:"HiddenSelectInput"})(()=>({display:"none"}));export function SelectWithCustomTrigger({renderTrigger,optionsListWidth,options=[],name,value,portalContainer,disabled=!1,maxHeight=230,autoComplete="on",readOnly=!1,excludeFromFormData=!1,onChange}){let[isOpen,setIsOpen]=useState(!1),[selectedIndex,setSelectedIndex]=useState(-1),triggerRef=useRef(null),hiddenSelectRef=useRef(null),currentOptionIndex=useMemo(()=>options.findIndex(option=>option.value===value),[options,value]),closeOptionsList=useCallback(()=>{isOpen&&(setIsOpen(!1),setSelectedIndex(-1))},[isOpen]),openOptionsList=useCallback(()=>{isOpen||readOnly||(setIsOpen(!0),triggerRef.current?.focus())},[isOpen,readOnly]),toggleOptionsList=useCallback(()=>{isOpen?closeOptionsList():openOptionsList()},[isOpen,openOptionsList,closeOptionsList]),handleSelectedIndexChange=useCallback(index=>setSelectedIndex(index),[]),handleChange=useCallback(option=>{let hiddenSelect=hiddenSelectRef.current;hiddenSelect&&(hiddenSelect.value=option.value,hiddenSelect.dispatchEvent(new Event("change",{bubbles:!0})))},[hiddenSelectRef]),handleSearchMatch=useCallback(matchedIndex=>{-1!==matchedIndex&&(isOpen?setSelectedIndex(matchedIndex):handleChange(options[matchedIndex]))},[isOpen,options,setSelectedIndex,handleChange]);useKeyboard({"Enter Space ArrowUp ArrowDown":()=>{openOptionsList()}},triggerRef,!isOpen&&!disabled),useTypeAheadSearch({options,triggerRef,isActive:!disabled,fromIndex:-1!==selectedIndex?selectedIndex:currentOptionIndex,onMatch:handleSearchMatch}),useEffect(()=>{let triggerElm=triggerRef.current,handlePointerDown=evt=>{evt.preventDefault()};return triggerElm&&!disabled&&(triggerElm.setAttribute("tabIndex","0"),triggerElm.addEventListener("click",toggleOptionsList),triggerElm.addEventListener("blur",closeOptionsList),triggerElm.addEventListener("pointerdown",handlePointerDown)),()=>{triggerElm?.removeEventListener("click",toggleOptionsList),triggerElm?.removeEventListener("blur",closeOptionsList),triggerElm?.removeEventListener("pointerdown",handlePointerDown)}},[triggerRef,disabled,closeOptionsList,toggleOptionsList]),useEffect(()=>{let triggerElm=triggerRef.current,handleEscapeKeyDown=evt=>{"Escape"===evt.code&&(evt.preventDefault(),evt.stopPropagation(),closeOptionsList())};return triggerElm&&isOpen&&triggerElm.addEventListener("keydown",handleEscapeKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleEscapeKeyDown)}},[triggerRef,isOpen,closeOptionsList]);let optionsListId=getOptionsListId(name),ariaActiveDescendant=-1!==selectedIndex?getOptionId(name,options[selectedIndex].value):"",triggerElm=renderTrigger({triggerRef,isOpen,disabled,role:"combobox","aria-activedescendant":isOpen?ariaActiveDescendant:"","aria-controls":isOpen?optionsListId:"","aria-expanded":isOpen}),optionsListElm=React.createElement(OptionsList,{name:name,isOpen:isOpen,isVirtualized:!1,options:options,triggerRef:triggerRef,onCloseDropdown:closeOptionsList,portalContainer:portalContainer,selectedIndex:selectedIndex,onSelectedIndexChange:handleSelectedIndexChange,forceChangeFakeSelect:handleChange,value:value,disabled:disabled,maxHeight:maxHeight,optionsListWidth:optionsListWidth});return React.createElement(React.Fragment,null,triggerElm,optionsListElm,React.createElement(HiddenSelectInput,{name:excludeFromFormData?void 0:name,onChange:onChange,value:value,ref:hiddenSelectRef,autoComplete:autoComplete},React.createElement("option",{value:"","aria-label":"Empty option"}),options.map(option=>React.createElement("option",{value:option.value,key:option.value},option.label))))}

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

@@ -1 +1 @@
-import{useEffect,useCallback,useRef}from"react";import{useWindow}from"../../../shared/useWindow";export function useTypeAheadSearch({options,triggerRef,isActive,fromIndex,onMatch}){let queryRef=useRef(""),queryTimerRef=useRef(null),window=useWindow(),selectOptionFromQuery=useCallback(()=>{if(queryRef.current){let query=queryRef.current.toLowerCase(),labels=options.map(option=>option.label.slice(0,queryRef.current.length).toLowerCase()),matchedIndex=labels.indexOf(query,fromIndex+1);-1===matchedIndex&&(matchedIndex=labels.indexOf(query)),onMatch(matchedIndex,queryRef.current),queryRef.current=""}},[options,queryRef,fromIndex,onMatch]),handleKeyDown=useCallback(evt=>{window.clearTimeout(queryTimerRef.current),evt.key.match(/^(\w|\s)$/g)&&(queryRef.current+=evt.key),queryTimerRef.current=window.setTimeout(selectOptionFromQuery,200)},[queryRef,queryTimerRef,selectOptionFromQuery,window]);useEffect(()=>()=>{window.clearTimeout(queryTimerRef.current)},[window]),useEffect(()=>{let triggerElm=triggerRef.current;return isActive&&triggerElm?.addEventListener("keydown",handleKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleKeyDown)}},[triggerRef,isActive,handleKeyDown])}
+import{useEffect,useCallback,useRef}from"react";import{useWindow}from"../../../shared/useWindow";export function useTypeAheadSearch({options=[],triggerRef,isActive,fromIndex,onMatch}){let queryRef=useRef(""),queryTimerRef=useRef(void 0),window=useWindow(),selectOptionFromQuery=useCallback(()=>{if(queryRef.current){let query=queryRef.current.toLowerCase(),labels=options.map(option=>option.label.slice(0,queryRef.current.length).toLowerCase()),matchedIndex=labels.indexOf(query,fromIndex+1);-1===matchedIndex&&(matchedIndex=labels.indexOf(query)),onMatch(matchedIndex,queryRef.current),queryRef.current=""}},[options,queryRef,fromIndex,onMatch]),handleKeyDown=useCallback(evt=>{window.clearTimeout(queryTimerRef.current),evt.key.match(/^(\w|\s)$/g)&&(queryRef.current+=evt.key),queryTimerRef.current=window.setTimeout(selectOptionFromQuery,200)},[queryRef,queryTimerRef,selectOptionFromQuery,window]);useEffect(()=>()=>{window.clearTimeout(queryTimerRef.current)},[window]),useEffect(()=>{let triggerElm=triggerRef.current;return isActive&&triggerElm?.addEventListener("keydown",handleKeyDown),()=>{triggerElm?.removeEventListener("keydown",handleKeyDown)}},[triggerRef,isActive,handleKeyDown])}

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:"e16qp1wc0",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:"e16qp1wc1",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:"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}))});

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"e68xb8t0",label:"StyledInputContainer"})(({theme,size})=>({display:"block",position:"relative",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.togglePoint[size],boxSizing:"border-box",cursor:"pointer"})),StyledRealInput=styled("input",{target:"e68xb8t1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,height:0,width:0,position:"absolute"})),StyledFakeInputInner=styled("div",{target:"e68xb8t2",label:"StyledFakeInputInner"})(({theme,size})=>({width:theme.variables.size.dimension.togglePoint[size],height:theme.variables.size.dimension.togglePoint[size],margin:parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?4:2),borderRadius:parseInt(theme.variables.size.dimension.togglePoint[size],10)/2,transform:"translateX(0)",transition:"transform 0.2s linear",backgroundColor:theme.values.color.toggle.thumb.background.off})),StyledFakeInput=styled("div",{target:"e68xb8t3",label:"StyledFakeInput"})(({theme,size,isHighlighted})=>{let pointMargin=parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?5:2.5),pointTranslateX=parseInt(theme.variables.size.dimension.toggle.width[size],10)-parseInt(theme.variables.size.dimension.togglePoint[size],10)-2*pointMargin-2;return{boxSizing:"border-box",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.toggle.height[size],borderRadius:({s:theme.variables.size.borderRadius.s,m:theme.variables.size.borderRadius.l})[size],display:"flex",alignItems:"center",transition:"background-color 0.2s linear, border-color 0.2s linear",background:isHighlighted?theme.values.color.toggle.background.highlight:theme.values.color.toggle.background.default,..."s"===size&&{marginTop:2},"input:checked + &":{background:theme.values.color.background.accent.default,[`${StyledFakeInputInner}`]:{transform:`translateX(${pointTranslateX}px)`,backgroundColor:theme.values.color.toggle.thumb.background.on}},"input:focus-visible + &":{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio: 0)":{"input:focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}}}),StyledContainer=styled("div",{target:"e68xb8t4",label:"StyledContainer"})(()=>({"&:hover":{cursor:"pointer"}}));export const ToggleRaw=React.forwardRef(({size="m",isHighlighted=!1,disabled,...rest},ref)=>React.createElement(StyledInputContainer,{size:size},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,{size:size,isHighlighted:isHighlighted},React.createElement(StyledFakeInputInner,{size:size}))));export const Toggle=React.forwardRef(({label="",alignLabel="before",labelHint="",disabled=!1,alignItems="left",size="m",hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),labelColor="s"===size?"tertiary":"primary",labelWeight="s"===size?"bold":"normal",labelGroup=React.createElement("div",null,React.createElement(Text,{size:size,color:labelColor,weight:labelWeight},label),React.createElement(Text,{size:"s",color:"tertiary"},labelHint));return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toggle",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledContainer,null,React.createElement(Inline,{alignItems:alignItems,space:"xs",vAlignItems:"top",noWrap:!0},label&&"before"===alignLabel&&labelGroup,React.createElement(ToggleRaw,{...rest,ref:ref,size:size,disabled:disabled,...ariaDescribedByProp}),label&&"after"===alignLabel&&labelGroup)))});
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";import{Text}from"../../Typography/Text/Text";import{useFormFieldMessageId}from"../FormField/useFormFieldMessageId";let StyledInputContainer=styled("div",{target:"e1cpa63k0",label:"StyledInputContainer"})(({theme,size="m"})=>({display:"block",position:"relative",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.togglePoint[size],boxSizing:"border-box",cursor:"pointer"})),StyledRealInput=styled("input",{target:"e1cpa63k1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,height:0,width:0,position:"absolute"})),StyledFakeInputInner=styled("div",{target:"e1cpa63k2",label:"StyledFakeInputInner"})(({theme,size="m"})=>({width:theme.variables.size.dimension.togglePoint[size],height:theme.variables.size.dimension.togglePoint[size],margin:parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?4:2),borderRadius:parseInt(theme.variables.size.dimension.togglePoint[size],10)/2,transform:"translateX(0)",transition:"transform 0.2s linear",backgroundColor:theme.values.color.toggle.thumb.background.off})),StyledFakeInput=styled("div",{target:"e1cpa63k3",label:"StyledFakeInput"})(({theme,size="m",isHighlighted})=>{let pointMargin=parseInt(theme.variables.size.dimension.togglePoint[size],10)/("m"===size?5:2.5),pointTranslateX=parseInt(theme.variables.size.dimension.toggle.width[size],10)-parseInt(theme.variables.size.dimension.togglePoint[size],10)-2*pointMargin-2;return{boxSizing:"border-box",width:theme.variables.size.dimension.toggle.width[size],height:theme.variables.size.dimension.toggle.height[size],borderRadius:({s:theme.variables.size.borderRadius.s,m:theme.variables.size.borderRadius.l})[size],display:"flex",alignItems:"center",transition:"background-color 0.2s linear, border-color 0.2s linear",background:isHighlighted?theme.values.color.toggle.background.highlight:theme.values.color.toggle.background.default,..."s"===size&&{marginTop:2},"input:checked + &":{background:theme.values.color.background.accent.default,[`${StyledFakeInputInner}`]:{transform:`translateX(${pointTranslateX}px)`,backgroundColor:theme.values.color.toggle.thumb.background.on}},"input:focus-visible + &":{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight"},"@media (-webkit-min-device-pixel-ratio: 0)":{"input:focus-visible + &":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"auto"}}}}),StyledContainer=styled("div",{target:"e1cpa63k4",label:"StyledContainer"})(()=>({"&:hover":{cursor:"pointer"}}));export const ToggleRaw=React.forwardRef(({size="m",isHighlighted=!1,disabled,...rest},ref)=>React.createElement(StyledInputContainer,{size:size},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,{size:size,isHighlighted:isHighlighted},React.createElement(StyledFakeInputInner,{size:size}))));export const Toggle=React.forwardRef(({label="",alignLabel="before",labelHint="",disabled=!1,alignItems="left",size="m",hint,errorMessages,"aria-describedby":ariaDescribedBy,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>{let{id,ariaDescribedByProp}=useFormFieldMessageId({ariaDescribedBy,errorMessages,hint}),labelColor="s"===size?"tertiary":"primary",labelWeight="s"===size?"bold":"normal",labelGroup=React.createElement("div",null,React.createElement(Text,{size:size,color:labelColor,weight:labelWeight},label),React.createElement(Text,{size:"s",color:"tertiary"},labelHint));return React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Toggle",disabled:disabled,hint:hint,errorMessages:errorMessages,messageId:id},React.createElement(StyledContainer,null,React.createElement(Inline,{alignItems:alignItems,space:"xs",vAlignItems:"top",noWrap:!0},label&&"before"===alignLabel&&labelGroup,React.createElement(ToggleRaw,{...rest,ref:ref,size:size,disabled:disabled,...ariaDescribedByProp}),label&&"after"===alignLabel&&labelGroup)))});

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"e1ts6g770",label:"StyledContainer"})(()=>({display:"inline-block"})),StyledRealInput=styled("input",{target:"e1ts6g771",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"e1ts6g772",label:"StyledFakeInput"})(({theme})=>({boxSizing:"border-box",borderRadius:theme.variables.size.borderRadius.l,border:"2px solid",height:theme.variables.size.dimension.toggleButton.height.m,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:`${theme.variables.size.spacing.zero} ${theme.variables.size.spacing.m}`,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,color:theme.values.color.text.secondary.default,"&:hover":{borderColor:theme.values.color.border.secondary.hover},"&:active":{borderColor:theme.values.color.border.secondary.active},"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:checked + &":{borderColor:theme.values.color.background.transparent.selected,background:theme.values.color.background.transparent.selected,color:theme.values.color.text.onAccent.default,"&:hover":{borderColor:theme.values.color.background.transparent.selectedHover,background:theme.values.color.background.transparent.selectedHover}}})),StyledSubLabel=styled("div",{target:"e1ts6g773",label:"StyledSubLabel"})(({theme})=>({color:theme.values.color.text.tertiary.default,"input:checked + div &":{color:theme.values.color.text.onAccent.default}}));export const ToggleButton=React.forwardRef(({label,subLabel,disabled=!1,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ToggleButton",disabled:disabled},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{space:"xxs",noWrap:!0},label,subLabel&&React.createElement(StyledSubLabel,null,subLabel))))));
+import React from"react";import styled from"@emotion/styled";import{FormField}from"../FormField/FormField";import{Inline}from"../../Inline/Inline";let StyledContainer=styled("div",{target:"e1yj37sd0",label:"StyledContainer"})(()=>({display:"inline-block"})),StyledRealInput=styled("input",{target:"e1yj37sd1",label:"StyledRealInput"})(({theme})=>({opacity:theme.variables.opacity.hidden,cursor:"pointer",height:0,width:0,position:"absolute"})),StyledFakeInput=styled("div",{target:"e1yj37sd2",label:"StyledFakeInput"})(({theme})=>({boxSizing:"border-box",borderRadius:theme.variables.size.borderRadius.l,border:"2px solid",height:theme.variables.size.dimension.toggleButton.height.m,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:`${theme.variables.size.spacing.zero} ${theme.variables.size.spacing.m}`,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,fontWeight:theme.variables.weight.bold,lineHeight:theme.variables.size.lineHeight.xs,backgroundColor:theme.values.color.background.transparent.default,borderColor:theme.values.color.border.secondary.default,color:theme.values.color.text.secondary.default,"&:hover":{borderColor:theme.values.color.border.secondary.hover},"&:active":{borderColor:theme.values.color.border.secondary.active},"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:checked + &":{borderColor:theme.values.color.background.transparent.selected,background:theme.values.color.background.transparent.selected,color:theme.values.color.text.onAccent.default,"&:hover":{borderColor:theme.values.color.background.transparent.selectedHover,background:theme.values.color.background.transparent.selectedHover}}})),StyledSubLabel=styled("div",{target:"e1yj37sd3",label:"StyledSubLabel"})(({theme})=>({color:theme.values.color.text.tertiary.default,"input:checked + div &":{color:theme.values.color.text.onAccent.default}}));export const ToggleButton=React.forwardRef(({label,subLabel,disabled=!1,"data-e2e-test-id":dataE2eTestId,...rest},ref)=>React.createElement(FormField,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"ToggleButton",disabled:disabled},React.createElement(StyledContainer,{"data-e2e-test-id":dataE2eTestId},React.createElement(StyledRealInput,{...rest,ref:ref,type:"checkbox",disabled:disabled}),React.createElement(StyledFakeInput,null,React.createElement(Inline,{space:"xxs",noWrap:!0},label,subLabel&&React.createElement(StyledSubLabel,null,subLabel))))));

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:"epsmnci0",label:"StyledContainer"})(({theme,templateColumns,templateRows,autoRows,templateAreas,inline,columnGap,alignItems,justifyItems,isSubgrid})=>{function getTrackSize(size){return`calc((100% - 11 * ${theme.variables.size.spacing[size]}) / 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:"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;

package/build/esm/components/Icon/Icon.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let hasIcon16=name=>name in icons16,handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e3zhdes0",label:"StyledIcon"})(({theme,variant,isHoverable,parentRef,parentIsHovered,size,as,color})=>({...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]}),"& > svg":{...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]})},color:variant?handleVariant(theme,variant):handleColor(theme,color),..."span"===as&&{verticalAlign:"middle"},...(parentIsHovered||isHoverable)&&{cursor:"pointer"},...parentRef&&{opacity:parentIsHovered?1:.6},...isHoverable&&{opacity:theme.variables.opacity.hover,":hover":{opacity:theme.variables.opacity.visible}}}));export const Icon=props=>{let{name,hoverable=!1,inline=!1,size="m",color="inherit",variant,"data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...rest}=props,isHoverable="boolean"==typeof hoverable&&hoverable,parentRef="boolean"!=typeof hoverable&&hoverable,parentIsHovered=useHover(parentRef),hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(StyledIcon,{as:inline?"span":"div","data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"data-ds-id":"Icon","data-variant":color,variant:variant,color:color,isHoverable:isHoverable,parentRef:parentRef,parentIsHovered:parentIsHovered,size:size,dangerouslySetInnerHTML:{__html:"s"===size&&hasIcon16(name)?icons16[name]:icons[name]},...rest,"aria-hidden":hasAccessibleName?void 0:"true",role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy})};
+import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let hasIcon16=name=>name in icons16,handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"eeidl2r0",label:"StyledIcon"})(({theme,variant,isHoverable,parentRef,parentIsHovered,size,as,color="inherit"})=>({...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]}),"& > svg":{...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]})},color:variant?handleVariant(theme,variant):handleColor(theme,color),..."span"===as&&{verticalAlign:"middle"},...(parentIsHovered||isHoverable)&&{cursor:"pointer"},...parentRef&&{opacity:parentIsHovered?1:.6},...isHoverable&&{opacity:theme.variables.opacity.hover,":hover":{opacity:theme.variables.opacity.visible}}}));export const Icon=props=>{let{name,hoverable=!1,inline=!1,size="m",color="inherit",variant,"data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...rest}=props,isHoverable="boolean"==typeof hoverable&&hoverable,parentRef="boolean"!=typeof hoverable&&hoverable,parentIsHovered=useHover(parentRef),hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(StyledIcon,{as:inline?"span":"div","data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"data-ds-id":"Icon","data-variant":color,variant:variant,color:color,isHoverable:isHoverable,parentRef:parentRef,parentIsHovered:parentIsHovered,size:size,dangerouslySetInnerHTML:{__html:"s"===size&&hasIcon16(name)?icons16[name]:icons[name]},...rest,"aria-hidden":hasAccessibleName?void 0:"true",role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy})};

package/build/esm/components/Image/Image.js

@@ -1 +1 @@
-import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{asValidProps}from"../../types";let StyledImg=styled("img",{target:"e19rs9970",label:"StyledImg"})(({theme,borderRadius})=>useResponsiveStyles({borderRadius:[borderRadius,theme.variables.size.borderRadius]}),({fit,position})=>useResponsiveValue({objectFit:fit,objectPosition:position}));export const Image=forwardRef((props,ref)=>{let{placeholderSrc,fallbackSrc,sources=[],lazy=!1,"data-e2e-test-id":dataE2eTestId,src,fit,position,borderRadius,onError,isDecorative,alt,...rest}=asValidProps(props),[imgSrc,setImgSrc]=useState(placeholderSrc||src),sourceElms=sources.map(sourceProps=>React.createElement("source",sourceProps));useEffect(()=>{if(placeholderSrc){let img=new window.Image;img.src=src,img.onload=()=>{setImgSrc(src)}}else setImgSrc(src)},[placeholderSrc,src]);let imgProps={...rest,...lazy&&{loading:"lazy"},alt:isDecorative?"":alt,fit,position,borderRadius};return React.createElement("picture",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Image"},sourceElms,React.createElement(StyledImg,{...imgProps,src:imgSrc,onError:args=>{fallbackSrc&&setImgSrc(fallbackSrc),onError&&onError(args)},ref:ref}))});
+import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{asValidProps}from"../../types";let StyledImg=styled("img",{target:"e7j7om30",label:"StyledImg"})(({theme,borderRadius})=>useResponsiveStyles({borderRadius:[borderRadius,theme.variables.size.borderRadius]}),({fit,position})=>useResponsiveValue({objectFit:fit,objectPosition:position}));export const Image=forwardRef((props,ref)=>{let{placeholderSrc,fallbackSrc,sources=[],lazy=!1,"data-e2e-test-id":dataE2eTestId,src,fit,position,borderRadius,onError,isDecorative,alt,...rest}=asValidProps(props),[imgSrc,setImgSrc]=useState(placeholderSrc||src),sourceElms=sources.map(sourceProps=>React.createElement("source",sourceProps));useEffect(()=>{if(placeholderSrc){if(void 0===src)return;let img=new window.Image;img.src=src,img.onload=()=>{setImgSrc(src)}}else setImgSrc(src)},[placeholderSrc,src]);let imgProps={...rest,...lazy&&{loading:"lazy"},alt:isDecorative?"":alt,fit,position,borderRadius};return React.createElement("picture",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Image"},sourceElms,React.createElement(StyledImg,{...imgProps,src:imgSrc,onError:args=>{fallbackSrc&&setImgSrc(fallbackSrc),onError&&onError(args)},ref:ref}))});

package/build/esm/components/Inline/Inline.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let InlineContainer=styled("div",{target:"e1qcpg6h0",label:"InlineContainer"})(({alignItems,vAlignItems,space,vSpace,theme,noWrap,fullWidth,as})=>({...useResponsiveStyles({alignItems:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",stretch:"stretch"}],justifyContent:[alignItems,{left:"flex-start",right:"flex-end",center:"center",spaceBetween:"space-between"}],gap:[space,theme.variables.size.spacing],rowGap:[vSpace,theme.variables.size.spacing]}),display:"flex",flexDirection:"row",flexWrap:noWrap?"nowrap":"wrap",...fullWidth&&{width:"100%"},..."div"!==as&&{padding:0,margin:0,listStyle:"none"}})),StyledInlineItem=styled("div",{target:"e1qcpg6h1",label:"StyledInlineItem"})(({as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}}}));export function Inline({id,children,alignItems="left",vAlignItems="top",space="xs",vSpace=space,noWrap=!1,fullWidth=!1,as="div",role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Inline",...ariaAttributes}){let isList="div"!==as,inlineItemAs=isList?"li":"div";return React.createElement(InlineContainer,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,space:space,vSpace:vSpace,noWrap:noWrap,fullWidth:fullWidth,as:as,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StyledInlineItem,{as:inlineItemAs},child)))}
+import React from"react";import styled from"@emotion/styled";import{flattenChildren}from"../../shared/flattenChildren";import{useResponsiveStyles}from"../../shared/mediaQueries";let InlineContainer=styled("div",{target:"e1p3jkof0",label:"InlineContainer"})(({alignItems,vAlignItems,space,vSpace,theme,noWrap,fullWidth,as})=>({...useResponsiveStyles({alignItems:[vAlignItems,{top:"flex-start",bottom:"flex-end",center:"center",stretch:"stretch"}],justifyContent:[alignItems,{left:"flex-start",right:"flex-end",center:"center",spaceBetween:"space-between"}],gap:[space,theme.variables.size.spacing],rowGap:[vSpace,theme.variables.size.spacing]}),display:"flex",flexDirection:"row",flexWrap:noWrap?"nowrap":"wrap",...fullWidth&&{width:"100%"},..."div"!==as&&{padding:0,margin:0,listStyle:"none"}})),StyledInlineItem=styled("div",{target:"e1p3jkof1",label:"StyledInlineItem"})(({as})=>({..."div"!==as&&{padding:0,margin:0,"> *":{listStyle:"initial"}}}));export function Inline({id,children,alignItems="left",vAlignItems="top",space="xs",vSpace=space,noWrap=!1,fullWidth=!1,as="div",role,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId="Inline",...ariaAttributes}){let isList="div"!==as,inlineItemAs=isList?"li":"div";return React.createElement(InlineContainer,{id:id,"data-e2e-test-id":dataE2eTestId,"data-ds-id":dataDsId,alignItems:alignItems,vAlignItems:vAlignItems,space:space,vSpace:vSpace,noWrap:noWrap,fullWidth:fullWidth,as:as,role:role??(isList?"list":void 0),...ariaAttributes},React.Children.map(flattenChildren(children),child=>child&&React.createElement(StyledInlineItem,{as:inlineItemAs},child)))}

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

@@ -13,11 +13,15 @@ type ConditionalTagProps = {
 } | {
     isRemovable: true;
     onClear: (e: React.MouseEvent) => void;
+    /**
+     * Accessible name for the clear button.
+     * TODO(DS): make required — the button has no other name. See follow-up.
+     */
     clearBtnAriaLabel?: string;
 };
 export type TagProps = OriginalTagProps & ConditionalTagProps;
 type BaseTagProps = TagProps & {
     size?: BaseTagSize;
 };
-export declare function BaseTag({ label, colorVariant, isRemovable, onClear, clearBtnAriaLabel, size, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: BaseTagProps): React.ReactElement;
+export declare function BaseTag(props: BaseTagProps): React.ReactElement;
 export {};

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{PictogramButton}from"../../PictogramButton/PictogramButton";export const MAX_TAG_WIDTH=200;let TagContainer=styled("span",{target:"e1x33ib00",label:"TagContainer"})(({theme,colorVariant,isRemovable,size})=>({display:"inline-flex",alignItems:"center",maxWidth:"200px",paddingLeft:theme.variables.size.spacing.xs,paddingRight:isRemovable?theme.variables.size.spacing.zero:theme.variables.size.spacing.xs,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.tag.background[colorVariant],color:theme.values.color.tag.text[colorVariant],fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,..."s"===size&&{paddingLeft:theme.variables.size.spacing.xxs,paddingRight:theme.variables.size.spacing.xxs,fontSize:theme.variables.size.font.xs,lineHeight:theme.variables.size.lineHeight.m}})),TagLabel=styled("span",{target:"e1x33ib01",label:"TagLabel"})(({size})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingTop:"3px",paddingBottom:"5px",..."s"===size&&{paddingTop:0,paddingBottom:0}})),ClearButton=styled(PictogramButton,{target:"e1x33ib02",label:"ClearButton"})(({theme,colorVariant})=>({backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.tag.text[colorVariant],"&:hover":{color:theme.values.color.tag.text[colorVariant]}}));export function BaseTag({label,colorVariant="gray",isRemovable=!1,onClear,clearBtnAriaLabel,size="m","data-e2e-test-id":dataE2eTestId,...ariaAttributes}){return React.createElement(TagContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tag",colorVariant:colorVariant,isRemovable:isRemovable,size:size,...ariaAttributes},React.createElement(TagLabel,{size:size},label),isRemovable&&React.createElement(ClearButton,{icon:"x",size:"xs","aria-label":clearBtnAriaLabel,onClick:onClear,colorVariant:colorVariant}))}
+import React from"react";import styled from"@emotion/styled";import{useIntl}from"../../../shared/intl/useIntl";import{PictogramButton}from"../../PictogramButton/PictogramButton";export const MAX_TAG_WIDTH=200;let TagContainer=styled("span",{target:"e1axbonh0",label:"TagContainer"})(({theme,colorVariant,isRemovable,size})=>({display:"inline-flex",alignItems:"center",maxWidth:"200px",paddingLeft:theme.variables.size.spacing.xs,paddingRight:isRemovable?theme.variables.size.spacing.zero:theme.variables.size.spacing.xs,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.tag.background[colorVariant],color:theme.values.color.tag.text[colorVariant],fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.s,lineHeight:theme.variables.size.lineHeight.xs,..."s"===size&&{paddingLeft:theme.variables.size.spacing.xxs,paddingRight:theme.variables.size.spacing.xxs,fontSize:theme.variables.size.font.xs,lineHeight:theme.variables.size.lineHeight.m}})),TagLabel=styled("span",{target:"e1axbonh1",label:"TagLabel"})(({size})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",paddingTop:"3px",paddingBottom:"5px",..."s"===size&&{paddingTop:0,paddingBottom:0}})),ClearButton=styled(PictogramButton,{target:"e1axbonh2",label:"ClearButton"})(({theme,colorVariant})=>({backgroundColor:theme.values.color.background.transparent.default,color:theme.values.color.tag.text[colorVariant],"&:hover":{color:theme.values.color.tag.text[colorVariant]}}));export function BaseTag(props){let{label,colorVariant="gray",isRemovable=!1,size="m","data-e2e-test-id":dataE2eTestId,...ariaAttributes}=props,{formatMessage}=useIntl();return React.createElement(TagContainer,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Tag",colorVariant:colorVariant,isRemovable:isRemovable,size:size,...ariaAttributes},React.createElement(TagLabel,{size:size},label),props.isRemovable&&React.createElement(ClearButton,{icon:"x",size:"xs","aria-label":props.clearBtnAriaLabel??formatMessage("Tag.RemoveButton.AriaLabel"),onClick:props.onClear,colorVariant:colorVariant}))}

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

@@ -4,4 +4,4 @@ export type FloatProps = {
     /** The children to render inside the float. */
     children: React.ReactNode;
 } & ViewportPosition;
-export declare function Float({ positionX, positionY, children, }: FloatProps): React.ReactElement;
+export declare function Float(props: FloatProps): React.ReactElement;

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:"e101b6xk0",label:"StyledContainer"})(({floatingStyles,isPositioned,bottomBarHeight})=>({...floatingStyles,visibility:isPositioned?"visible":"hidden",...bottomBarHeight&&{translate:`0 calc(-1 * ${bottomBarHeight})`}}));export function Float({positionX,positionY,children}){let theme=useTheme(),document=useDocument(),{setFloating,floatingStyles,isPositioned}=useFloatingPosition({mode:"viewport",positionX,positionY,offset:parseInt(theme.variables.size.spacing.m,10)}),bottomBarHeight="bottom"===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:"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))}

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

@@ -6,5 +6,7 @@ export type LayoutFloatDragHandleGuardProps = {
  * Shields a header slot's content from the enclosing `LayoutFloatDragHandle`'s
  * `moveProps`: a drag can still start on it, but its own click/arrow-key
  * behavior wins. Inert (guards detached) while the handle isn't draggable.
+ * Renders nothing when there's no content to shield, so an absent slot
+ * doesn't leave an empty flex item behind for `Inline`'s gap to act on.
  */
-export declare function LayoutFloatDragHandleGuard({ children, }: LayoutFloatDragHandleGuardProps): React.ReactElement;
+export declare function LayoutFloatDragHandleGuard({ children, }: LayoutFloatDragHandleGuardProps): React.ReactElement | null;

package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{useLayoutFloatDragHandleContext}from"./useLayoutFloatDragHandleContext";let StyledSlotDragGuard=styled("div",{target:"eo2kwnv0",label:"StyledSlotDragGuard"})({display:"contents"});export function LayoutFloatDragHandleGuard({children}){let{canDrag,onSlotPointerDown,onSlotPointerCancel,onSlotClickCapture,onSlotKeyDown}=useLayoutFloatDragHandleContext(),guardProps={};return canDrag&&(guardProps={onPointerDown:onSlotPointerDown,onPointerCancel:onSlotPointerCancel,onClickCapture:onSlotClickCapture,onKeyDown:onSlotKeyDown}),React.createElement(StyledSlotDragGuard,guardProps,children)}
+import React from"react";import styled from"@emotion/styled";import{useLayoutFloatDragHandleContext}from"./useLayoutFloatDragHandleContext";let StyledSlotDragGuard=styled("div",{target:"e15tse230",label:"StyledSlotDragGuard"})({display:"contents"});export function LayoutFloatDragHandleGuard({children}){let{canDrag,onSlotPointerDown,onSlotPointerCancel,onSlotClickCapture,onSlotKeyDown}=useLayoutFloatDragHandleContext();if(!children)return null;let guardProps={};return canDrag&&(guardProps={onPointerDown:onSlotPointerDown,onPointerCancel:onSlotPointerCancel,onClickCapture:onSlotClickCapture,onKeyDown:onSlotKeyDown}),React.createElement(StyledSlotDragGuard,guardProps,children)}

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

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";let StyledHeaderSurface=styled("div",{target:"e11b515r0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=styled("div",{target:"e11b515r1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=styled("div",{target:"e11b515r2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...getLeftPanelFadeStyles({theme,isFaded:isContentFaded})})),StyledSlotContent=styled("div",{target:"e11b515r3",label:"StyledSlotContent"})({width:"max-content"}),StyledTrailingGroup=styled("div",{target:"e11b515r4",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});export function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary";return React.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{space:"s",vSpace:"xs"},React.createElement(StyledHeaderRow,null,React.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,leftSlot&&React.createElement(StyledSlotContent,null,leftSlot),title&&!1!==title.isVisible&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{as:title.as,color:colorTitleItems},title.label)))))),React.createElement(StyledTrailingGroup,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))))}
+import React from"react";import styled from"@emotion/styled";import{TextClamped}from"../../../components/Typography/TextClamped/TextClamped";import{LEFT_BAR_BUTTON_INSET}from"../../Layout/-constants";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{Box}from"../../Box/Box";import{Inline}from"../../Inline/Inline";import{Icon}from"../../Icon/Icon";import{H5}from"../../Typography/Header/Header";let StyledHeaderSurface=styled("div",{target:"e13e79rk0",label:"StyledHeaderSurface"})(({theme})=>({backgroundColor:theme.values.color.background.primary.default})),StyledHeaderRow=styled("div",{target:"e13e79rk1",label:"StyledHeaderRow"})({display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"}),StyledLeadingGroup=styled("div",{target:"e13e79rk2",label:"StyledLeadingGroup"})(({theme,isContentFaded})=>({minWidth:0,overflow:"hidden",...getLeftPanelFadeStyles({theme,isFaded:isContentFaded})})),StyledSlotContent=styled("div",{target:"e13e79rk3",label:"StyledSlotContent"})({width:"max-content"}),StyledLeadingContent=styled("div",{target:"e13e79rk4",label:"StyledLeadingContent"})(({theme,hasTitleInset})=>({paddingLeft:hasTitleInset?theme.variables.size.spacing.xxs:0})),StyledTrailingGroup=styled("div",{target:"e13e79rk5",label:"StyledTrailingGroup"})({alignSelf:"flex-start",flexShrink:0});export function PanelHeader({leftSlot,title,rightSlot,isContentFaded=!1,"data-e2e-test-id":dataE2eTestId}){let colorTitleItems="primary",hasTitle=title&&!1!==title.isVisible,hasIcon=hasTitle&&void 0!==title.icon;return React.createElement(StyledHeaderSurface,{"data-e2e-test-id":dataE2eTestId},React.createElement(Box,{vSpace:LEFT_BAR_BUTTON_INSET.vSpace,lSpace:hasIcon?"xs":"s",rSpace:LEFT_BAR_BUTTON_INSET.hSpace},React.createElement(StyledHeaderRow,null,React.createElement(StyledLeadingGroup,{isContentFaded:isContentFaded},React.createElement(StyledLeadingContent,{hasTitleInset:!!(hasTitle&&!hasIcon)},React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},leftSlot&&React.createElement(StyledSlotContent,null,leftSlot),hasTitle&&React.createElement(Inline,{space:"xs",vAlignItems:"center",noWrap:!0},title.icon&&React.createElement(Icon,{...title.icon,color:colorTitleItems,size:"s"}),React.createElement(TextClamped,{as:"span"},React.createElement(H5,{as:title.as,color:colorTitleItems},title.label)))))),React.createElement(StyledTrailingGroup,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},React.createElement(React.Fragment,null,rightSlot))))))}

package/build/esm/components/Internal/Sandwich/useSandwichContext.d.ts

@@ -16,6 +16,6 @@ export type SandwichContextValue = SandwichEdges & {
     /** Static host below the scroll body - `Sandwich.Footer` portals into it. */
     footerSlotNode: HTMLElement | null;
 };
-export declare const SandwichProvider: React.Provider<SandwichContextValue>;
+export declare const SandwichProvider: React.Provider<SandwichContextValue | null>;
 /** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
 export declare function useSandwichContext(): SandwichContextValue;