npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.2.9 → 10.0.0-build.3.1 - Mend

@pega/cosmos-react-core 10.0.0-build.2.9 → 10.0.0-build.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js CHANGED Viewed

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
-import { useConsolidatedRef } from '../../../hooks';
+import { useConsolidatedRef, useI18n } from '../../../hooks';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
 import { StyledSelectInput } from '../ComboBox.styles';
 import { isInstance } from '../../../utils';
+import Progress, { StyledProgressBackdrop, StyledProgressRing } from '../../Progress';
 const StyledPrimaryContainer = styled.div ``;
 const StyledInput = styled.input `
   &[aria-expanded='false']:has(+ ${StyledPrimaryContainer}) {
@@ -27,20 +28,38 @@ const StyledVisualContainer = styled.span(props => {
   `;
 });
 StyledVisualContainer.defaultProps = defaultThemeProp;
-export const StyledSingleSelectInput = styled(StyledSelectInput) `
-  &:has(input[aria-expanded='true']) {
-    ${StyledPrimaryContainer} {
-      ${hideVisually}
+export const StyledSingleSelectInput = styled(StyledSelectInput)(({ theme }) => {
+    return css `
+    &:has(input[aria-expanded='true']) {
+      ${StyledPrimaryContainer} {
+        ${hideVisually}
+      }
     }
-  }
-`;
+    &:has(${StyledProgressRing}) {
+      position: relative;
+      ${StyledProgressBackdrop} {
+        inset-inline-end: ${theme.base['hit-area'].mouse};
+        @media (pointer: coarse) {
+          inset-inline-end: ${theme.base['hit-area'].finger};
+        }
+      }
+    }
+  `;
+});
+StyledSingleSelectInput.defaultProps = defaultThemeProp;
 const SingleSelectInput = forwardRef(function SingleSelectInput(props, ref) {
-    const { value, readOnly, disabled, status, actions, onChange, onResolveSuggestion, selected, visual, ...restProps } = props;
+    const { value, readOnly, disabled, status, actions, onChange, onResolveSuggestion, selected, loading, visual, ...restProps } = props;
+    const t = useI18n();
     const inputRef = useConsolidatedRef(ref);
     return (_jsxs(Flex, { as: StyledSingleSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, disabled: disabled, status: status, readOnly: readOnly, children: [visual && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledVisualContainer, onClick: () => {
                     inputRef.current?.focus();
                     inputRef.current?.click();
-                }, children: visual })), _jsx(StyledInput, { disabled: disabled, size: 1, value: value || selected?.text || '', onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: '_off', ...restProps, ref: inputRef }), selected?.primary && (_jsx(Flex, { as: StyledPrimaryContainer, container: {
+                }, children: visual })), loading && (_jsx(Progress, { placement: 'local', "aria-label": t('combobox_loading_selected_items'), liveConfig: {
+                    contextualLabel: t('combobox_loading_selected_items')
+                } })), _jsx(StyledInput, { disabled: disabled, size: 1, value: value || selected?.text || '', onChange: onChange || (() => { }), readOnly: readOnly || !onChange, autoComplete: '_off', ...restProps, ref: inputRef }), selected?.primary && (_jsx(Flex, { as: StyledPrimaryContainer, container: {
                     alignItems: 'center',
                     justify: 'between',
                     gap: 2,

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;~~AACpD~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;~~AAI5C~~,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE5C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;mCACG,sBAAsB;MACnD,YAAY;;CAEjB,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAChD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;sBACU,MAAM,MAAM,WAAW,CAAC,cAAc,CAAC;4BACjC,IAAI,CAAC,OAAO;mBACrB,MAAM,UAAU,WAAW,CAAC,cAAc,CAAC;;;;;GAK3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;;~~MAE1D~~,sBAAsB;~~QACpB~~,YAAY;;;~~CAGnB~~,CAAC;~~AAEF~~,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,SAAS,iBAAiB,CACxB,KAA8C,EAC9C,GAA0B;IAE1B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEzC,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,WAAW,EAAE,iBAAiB,EAC9B,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,EAC5D,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,aAEjB,MAAM,IAAI,CACT,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,qBAAqB,EACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC1B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC,YAEA,MAAM,GACF,CACR,EACD,KAAC,WAAW,IACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,IAAI,IAAI,EAAE,EACpC,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAC/B,YAAY,EAAC,MAAM,KACf,SAAS,EACb,GAAG,EAAE,QAAQ,GACb,EACD,QAAQ,EAAE,OAAO,IAAI,CACpB,KAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,SAAS;oBAClB,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC;iBACpB,EACD,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;oBACzC,IAAI,CAAC,QAAQ,CAAC,OAAO;wBAAE,OAAO;oBAE9B,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC;wBACjD,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;wBACrD,CAAC,CAAC,IAAI,CAAC;oBAET,IAAI,CAAC,aAAa,EAAE,CAAC;wBACnB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;wBACzB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBAC3B,CAAC;gBACH,CAAC,YAEA,QAAQ,CAAC,OAAO,GACZ,CACR,EACA,OAAO,IACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { useConsolidatedRef } from '../../../hooks';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport type { ForwardProps } from '../../../types';\nimport { StyledSelectInput } from '../ComboBox.styles';\nimport { isInstance } from '../../../utils';\n\nimport type SingleSelectInputProps from './SingleSelectInput.types';\n\nconst StyledPrimaryContainer = styled.div``;\n\nconst StyledInput = styled.input`\n &[aria-expanded='false']:has(+ ${StyledPrimaryContainer}) {\n ${hideVisually}\n }\n`;\n\nconst StyledVisualContainer = styled.span(props => {\n const {\n theme: {\n base,\n components: {\n 'form-control': formControl,\n input: { height }\n }\n }\n } = props;\n\n return css`\n min-width: calc(${height} - ${formControl['border-width']});\n padding: 0 calc(0.5 * ${base.spacing});\n height: calc(${height} - 2 * ${formControl['border-width']});\n\n & + input {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectInput = styled(StyledSelectInput)`\n &:has(input[aria-expanded='true']) {\n ${StyledPrimaryContainer} {\n ${hideVisually}\n }\n }\n`;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n function SingleSelectInput(\n props: PropsWithoutRef<SingleSelectInputProps>,\n ref: Ref<HTMLInputElement>\n ) {\n const {\n value,\n readOnly,\n disabled,\n status,\n actions,\n onChange,\n onResolveSuggestion,\n selected,\n visual,\n ...restProps\n } = props;\n const inputRef = useConsolidatedRef(ref);\n\n return (\n <Flex\n as={StyledSingleSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n >\n {visual && (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledVisualContainer}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n >\n {visual}\n </Flex>\n )}\n <StyledInput\n disabled={disabled}\n size={1}\n value={value \|\| selected?.text \|\| ''}\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='_off'\n {...restProps}\n ref={inputRef}\n />\n {selected?.primary && (\n <Flex\n as={StyledPrimaryContainer}\n container={{\n alignItems: 'center',\n justify: 'between',\n gap: 2,\n pad: [undefined, 1]\n }}\n item={{\n grow: 1\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (!inputRef.current) return;\n\n const interactiveEl = isInstance(e.target, Element)\n ? e.target.closest('a') \|\| e.target.closest('button')\n : null;\n\n if (!interactiveEl) {\n inputRef.current.focus();\n inputRef.current.click();\n }\n }}\n >\n {selected.primary}\n </Flex>\n )}\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}
1	+ {"version":3,"file":"SingleSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { useConsolidatedRef, useI18n } from '../../../hooks';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport type { ForwardProps } from '../../../types';\nimport { StyledSelectInput } from '../ComboBox.styles';\nimport { isInstance } from '../../../utils';\nimport Progress, { StyledProgressBackdrop, StyledProgressRing } from '../../Progress';\n\nimport type SingleSelectInputProps from './SingleSelectInput.types';\n\nconst StyledPrimaryContainer = styled.div``;\n\nconst StyledInput = styled.input`\n &[aria-expanded='false']:has(+ ${StyledPrimaryContainer}) {\n ${hideVisually}\n }\n`;\n\nconst StyledVisualContainer = styled.span(props => {\n const {\n theme: {\n base,\n components: {\n 'form-control': formControl,\n input: { height }\n }\n }\n } = props;\n\n return css`\n min-width: calc(${height} - ${formControl['border-width']});\n padding: 0 calc(0.5 * ${base.spacing});\n height: calc(${height} - 2 * ${formControl['border-width']});\n\n & + input {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSingleSelectInput = styled(StyledSelectInput)(({ theme }) => {\n return css`\n &:has(input[aria-expanded='true']) {\n ${StyledPrimaryContainer} {\n ${hideVisually}\n }\n }\n\n &:has(${StyledProgressRing}) {\n position: relative;\n\n ${StyledProgressBackdrop} {\n inset-inline-end: ${theme.base['hit-area'].mouse};\n\n @media (pointer: coarse) {\n inset-inline-end: ${theme.base['hit-area'].finger};\n }\n }\n }\n `;\n});\n\nStyledSingleSelectInput.defaultProps = defaultThemeProp;\n\nconst SingleSelectInput: FunctionComponent<SingleSelectInputProps & ForwardProps> = forwardRef(\n function SingleSelectInput(\n props: PropsWithoutRef<SingleSelectInputProps>,\n ref: Ref<HTMLInputElement>\n ) {\n const {\n value,\n readOnly,\n disabled,\n status,\n actions,\n onChange,\n onResolveSuggestion,\n selected,\n loading,\n visual,\n ...restProps\n } = props;\n const t = useI18n();\n const inputRef = useConsolidatedRef(ref);\n\n return (\n <Flex\n as={StyledSingleSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n >\n {visual && (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledVisualContainer}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n >\n {visual}\n </Flex>\n )}\n {loading && (\n <Progress\n placement='local'\n aria-label={t('combobox_loading_selected_items')}\n liveConfig={{\n contextualLabel: t('combobox_loading_selected_items')\n }}\n />\n )}\n <StyledInput\n disabled={disabled}\n size={1}\n value={value \|\| selected?.text \|\| ''}\n onChange={onChange \|\| (() => {})}\n readOnly={readOnly \|\| !onChange}\n autoComplete='_off'\n {...restProps}\n ref={inputRef}\n />\n {selected?.primary && (\n <Flex\n as={StyledPrimaryContainer}\n container={{\n alignItems: 'center',\n justify: 'between',\n gap: 2,\n pad: [undefined, 1]\n }}\n item={{\n grow: 1\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (!inputRef.current) return;\n\n const interactiveEl = isInstance(e.target, Element)\n ? e.target.closest('a') \|\| e.target.closest('button')\n : null;\n\n if (!interactiveEl) {\n inputRef.current.focus();\n inputRef.current.click();\n }\n }}\n >\n {selected.primary}\n </Flex>\n )}\n {actions}\n </Flex>\n );\n }\n);\n\nexport default SingleSelectInput;\n"]}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import type { Selected } from '../ComboBox.types';
 export default interface SingleSelectInputProps {
     /** List of items to be represented as pills. */
     selected?: Selected;
+    /** Show a Progress indicator. */
+    loading?: boolean;
     /** Input value */
     value?: string;
     /** Callback invoked when user accepts custom value by pressing enter. */

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,sBAAsB;IAC7C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC"}
1	+ {"version":3,"file":"SingleSelectInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,sBAAsB;IAC7C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,yDAAyD;IACzD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC"}

package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SingleSelectInput.types.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport type { FormControlProps } from '../../FormControl';\nimport type ComboBoxProps from '../ComboBox.types';\nimport type { Selected } from '../ComboBox.types';\n\nexport default interface SingleSelectInputProps {\n /** List of items to be represented as pills. /\n selected?: Selected;\n /* Input value /\n value?: string;\n /* Callback invoked when user accepts custom value by pressing enter. /\n onNew?: (text: string) => void;\n /* Callback fired when internal input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired on every key stroke on input field. /\n onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n /* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Placeholder visible on empty input. /\n placeholder?: string;\n /* Additional actions related to the input. /\n actions?: ReactNode;\n /* A visual to render a preview for the selected item */\n visual?: ComboBoxProps['visual'];\n}\n"]}
1	+ {"version":3,"file":"SingleSelectInput.types.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/SingleSelectInput/SingleSelectInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ChangeEvent, KeyboardEvent, ReactNode } from 'react';\n\nimport type { FormControlProps } from '../../FormControl';\nimport type ComboBoxProps from '../ComboBox.types';\nimport type { Selected } from '../ComboBox.types';\n\nexport default interface SingleSelectInputProps {\n /** List of items to be represented as pills. /\n selected?: Selected;\n /* Show a Progress indicator. /\n loading?: boolean;\n /* Input value /\n value?: string;\n /* Callback invoked when user accepts custom value by pressing enter. /\n onNew?: (text: string) => void;\n /* Callback fired when internal input value changes. /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback fired on every key stroke on input field. /\n onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n /* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Placeholder visible on empty input. /\n placeholder?: string;\n /* Additional actions related to the input. /\n actions?: ReactNode;\n /* A visual to render a preview for the selected item */\n visual?: ComboBoxProps['visual'];\n}\n"]}

package/lib/components/DateTime/Input/DateTime.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"~~AASA~~,eAAO,MAAM,SAAS,sOA6CpB,CAAC;AAIH,eAAO,MAAM,oBAAoB,6NA8B/B,CAAC;AAIH,QAAA,MAAM,cAAc,6NAqClB,CAAC;AAIH,eAAe,cAAc,CAAC;AAE9B,eAAO,MAAM,iBAAiB;;iKA4B5B,CAAC;AAIH,eAAO,MAAM,8BAA8B,6NAOzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAE/B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;kOAElC,CAAC"}
1	+ {"version":3,"file":"DateTime.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,sOA6CpB,CAAC;AAIH,eAAO,MAAM,oBAAoB,6NA8B/B,CAAC;AAIH,QAAA,MAAM,cAAc,6NAqClB,CAAC;AAIH,eAAe,cAAc,CAAC;AAE9B,eAAO,MAAM,iBAAiB;;iKA4B5B,CAAC;AAIH,eAAO,MAAM,8BAA8B,6NAOzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAE/B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;kOAElC,CAAC"}

package/lib/components/DateTime/Input/DateTime.styles.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { defaultThemeProp } from '../../../theme';
 import { StyledPopover } from '../../Popover/Popover.styles';
 import { StyledSelect } from '../../Select/Select';
 import Dialog from '../../Dialog/Dialog';
-import { StyledFormField } from '../../FormField/FormField';
 import Button, { StyledButton } from '../../Button';
 export const BareInput = styled.input(({ theme, size }) => {
     return css `
@@ -95,7 +94,7 @@ const StyledDateTime = styled.div(props => {
       min-height: ${hitArea['finger-min']};
     }
-    ${StyledFormField}:enabled > &:focus-within {
+    &:focus-within:not([disabled]) {
       border-color: ${focusBorderColor};
       box-shadow: ${shadow};
     }

package/lib/components/DateTime/Input/DateTime.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,~~EAAE,eAAe,EAAE,~~MAAM,~~2BAA2B,CAAC;AAC5D,OAAO,MAAM,~~EAAE,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;;aAGpD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,EACrD,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;QAIJ,YAAY;;;;;;;;;sBASE,MAAM,CAAC,aAAa,CAAC;;;;uBAIpB,UAAU,CAAC,MAAM;4BACZ,OAAO,CAAC,oBAAoB,CAAC;;;;;;;GAOtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACxC,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;cAEE,MAAM;kBACF,OAAO,CAAC,WAAW,CAAC;;iBAErB,OAAO;;;oBAGJ,OAAO,CAAC,YAAY,CAAC~~;;;MAGnC~~,~~eAAe;sBACC,~~gBAAgB;oBAClB,MAAM;;;MAGpB,aAAa;MACb,YAAY;qBACG,UAAU;;;QAGvB,YAAY;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC;AAE9B,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;IACtD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,UAAU,EAAE,OAAO,EAAE,EAChE,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC5B,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;0BACc,gBAAgB,MAAM,gBAAgB;;;eAGjD,OAAO;;uBAEC,MAAM,UAAU,WAAW;mBAC/B,MAAM,UAAU,WAAW;kBAC5B,MAAM,UAAU,WAAW;;yBAEpB,OAAO,CAAC,YAAY,CAAC,UAAU,WAAW;oBAC/C,OAAO,CAAC,YAAY,CAAC,UAAU,WAAW;;GAE3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnC,OAAO,GAAG,CAAA;0BACc,OAAO;2BACN,OAAO;GAC/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEnD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledPopover } from '../../Popover/Popover.styles';\nimport { StyledSelect } from '../../Select/Select';\nimport Dialog from '../../Dialog/Dialog';\nimport ~~{ StyledFormField } from '../../FormField/FormField';\nimport~~ Button, { StyledButton } from '../../Button';\n\nexport const BareInput = styled.input(({ theme, size }) => {\n return css`\n color: ${theme.components['form-control']['foreground-color']};\n border: 0;\n outline: none;\n width: ${size}ch;\n background-color: transparent;\n text-align: end;\n margin-inline-end: 0.125rem;\n height: inherit;\n\n &::placeholder {\n font-size: 0.6em;\n text-align: center;\n transform: translateY(-0.35ex);\n @supports (background: -webkit-named-image(i)) {\n transform: translateY(0.15ex);\n }\n }\n\n &:last-child {\n text-align: start;\n }\n\n &:nth-child(3) {\n text-align: start;\n &::placeholder {\n text-align: start;\n }\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n :not(:first-child) {\n margin-inline-start: 0.125rem;\n }\n `;\n});\n\nBareInput.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div(({ theme }) => {\n const {\n base: { palette, 'font-weight': fontWeight, shadow }\n } = theme;\n return css`\n height: inherit;\n overflow: hidden;\n\n > ${StyledSelect} {\n background-color: transparent;\n border-radius: 0;\n border: 0;\n color: currentcolor;\n opacity: 1;\n width: max-content;\n\n &:focus:not([readonly]):enabled {\n box-shadow: ${shadow['focus-inset']};\n }\n\n option {\n font-weight: ${fontWeight.normal};\n background-color: ${palette['primary-background']};\n }\n\n @media (pointer: coarse) {\n min-height: inherit;\n }\n }\n `;\n});\n\nStyledInputContainer.defaultProps = defaultThemeProp;\n\nconst StyledDateTime = styled.div(props => {\n const {\n theme: {\n base: { 'font-family': fontFamily, spacing, 'hit-area': hitArea },\n components: {\n input: { height },\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n return css`\n min-width: min-content;\n height: ${height};\n min-height: ${hitArea['mouse-min']};\n outline: none;\n padding: 0 ${spacing};\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n }\n\n ~~${StyledFormField}:enabled >~~ &:focus-within {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n\n ${StyledPopover},\n ${StyledSelect} {\n font-family: ${fontFamily};\n }\n\n > ${StyledButton} {\n margin-inline-start: auto;\n }\n `;\n});\n\nStyledDateTime.defaultProps = defaultThemeProp;\n\nexport default StyledDateTime;\n\nexport const StyledInputButton = styled(Button)(props => {\n const {\n theme: {\n base: { 'border-radius': baseBorderRadius, 'hit-area': hitArea },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth\n }\n }\n }\n } = props;\n return css`\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n width: calc(${height} - 2 * ${borderWidth});\n @media (pointer: coarse) {\n min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n width: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledInputButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearNowButtonsContainer = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n padding-block: calc(${spacing} * 1.5);\n padding-inline: calc(${spacing} * 1.5);\n `;\n});\n\nStyledClearNowButtonsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledDialogContent = styled.div`\n overflow: auto;\n`;\n\nexport const StyledDatePickerDialog = styled(Dialog)`\n min-width: unset;\n`;\n\nStyledDatePickerDialog.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"DateTime.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledPopover } from '../../Popover/Popover.styles';\nimport { StyledSelect } from '../../Select/Select';\nimport Dialog from '../../Dialog/Dialog';\nimport Button, { StyledButton } from '../../Button';\n\nexport const BareInput = styled.input(({ theme, size }) => {\n return css`\n color: ${theme.components['form-control']['foreground-color']};\n border: 0;\n outline: none;\n width: ${size}ch;\n background-color: transparent;\n text-align: end;\n margin-inline-end: 0.125rem;\n height: inherit;\n\n &::placeholder {\n font-size: 0.6em;\n text-align: center;\n transform: translateY(-0.35ex);\n @supports (background: -webkit-named-image(i)) {\n transform: translateY(0.15ex);\n }\n }\n\n &:last-child {\n text-align: start;\n }\n\n &:nth-child(3) {\n text-align: start;\n &::placeholder {\n text-align: start;\n }\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n :not(:first-child) {\n margin-inline-start: 0.125rem;\n }\n `;\n});\n\nBareInput.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div(({ theme }) => {\n const {\n base: { palette, 'font-weight': fontWeight, shadow }\n } = theme;\n return css`\n height: inherit;\n overflow: hidden;\n\n > ${StyledSelect} {\n background-color: transparent;\n border-radius: 0;\n border: 0;\n color: currentcolor;\n opacity: 1;\n width: max-content;\n\n &:focus:not([readonly]):enabled {\n box-shadow: ${shadow['focus-inset']};\n }\n\n option {\n font-weight: ${fontWeight.normal};\n background-color: ${palette['primary-background']};\n }\n\n @media (pointer: coarse) {\n min-height: inherit;\n }\n }\n `;\n});\n\nStyledInputContainer.defaultProps = defaultThemeProp;\n\nconst StyledDateTime = styled.div(props => {\n const {\n theme: {\n base: { 'font-family': fontFamily, spacing, 'hit-area': hitArea },\n components: {\n input: { height },\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n return css`\n min-width: min-content;\n height: ${height};\n min-height: ${hitArea['mouse-min']};\n outline: none;\n padding: 0 ${spacing};\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n }\n\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n\n ${StyledPopover},\n ${StyledSelect} {\n font-family: ${fontFamily};\n }\n\n > ${StyledButton} {\n margin-inline-start: auto;\n }\n `;\n});\n\nStyledDateTime.defaultProps = defaultThemeProp;\n\nexport default StyledDateTime;\n\nexport const StyledInputButton = styled(Button)(props => {\n const {\n theme: {\n base: { 'border-radius': baseBorderRadius, 'hit-area': hitArea },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth\n }\n }\n }\n } = props;\n return css`\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n width: calc(${height} - 2 * ${borderWidth});\n @media (pointer: coarse) {\n min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n width: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledInputButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearNowButtonsContainer = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n padding-block: calc(${spacing} * 1.5);\n padding-inline: calc(${spacing} * 1.5);\n `;\n});\n\nStyledClearNowButtonsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledDialogContent = styled.div`\n overflow: auto;\n`;\n\nexport const StyledDatePickerDialog = styled(Dialog)`\n min-width: unset;\n`;\n\nStyledDatePickerDialog.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DateTime/Input/MonthInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB;;~~6BAkC5B~~,CAAC;;;;AA+NF,wBAA6D"}
1	+ {"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB;;6BAmC5B,CAAC;;;;AA+NF,wBAA6D"}

package/lib/components/DateTime/Input/MonthInput.js CHANGED Viewed

@@ -18,7 +18,8 @@ export const StyledMonthInput = styled(StyledDateTime) `
   border: 0;
   background-color: transparent;
-  ${StyledFormField}:enabled > &:focus-within {
+  &:focus-within:not([disabled]) {
+    border-color: transparent;
     box-shadow: none;
   }

package/lib/components/DateTime/Input/MonthInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonthInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport type { ForwardProps } from '../../../types';\nimport { cap, createClassName, range, withTestIds } from '../../../utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useTestIds } from '../../../hooks';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport { StyledSelect } from '../../Select/Select';\nimport Flex from '../../Flex';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { getMonthInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField, StyledFormFieldInfo } from '../../FormField/FormField';\n\nimport { parseToDate, getLocalizedMonths, getLocalizedYear } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface MonthInputProps extends DateTimeProps {\n /*\n Toggles visibility of inner labels form Month and Year\n * @default true\n /\n innerLabelsHidden?: boolean;\n /* Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledMonthInput = styled(StyledDateTime)<MonthInputProps>`\n padding: 0;\n border: 0;\n background-color: transparent;\n\n ${StyledFormField}:enabled > &:focus-within {\n box-shadow: none;\n }\n\n ${StyledFormField} {\n > ${StyledSelect}:focus {\n z-index: 1;\n }\n\n &:first-child {\n flex-grow: 1;\n }\n\n &:first-child > ${StyledSelect} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child > ${StyledSelect} {\n width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n &:first-child > ${StyledFormFieldInfo}, &:last-child > ${StyledFormFieldInfo} {\n display: none;\n }\n }\n`;\n\nStyledMonthInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n date: Date,\n { month, year }: DateParts<string \| undefined>\n): DateTimeCallbackParameter => {\n if ([month, year].every(Boolean)) {\n const resultDate = new Date(date);\n resultDate.setUTCFullYear(Number(year), Number(month));\n // handle month overflowing\n if (resultDate.getUTCMonth() !== Number(month)) {\n resultDate.setUTCDate(0);\n }\n return {\n valueAsISOString: resultDate.toISOString(),\n valueAsTimestamp: resultDate.getTime()\n };\n }\n if ([year, month].every(p => !p)) {\n return {\n valueAsISOString: undefined,\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst MonthInput: FunctionComponent<MonthInputProps & ForwardProps> = forwardRef(\n function MonthInput(props: PropsWithoutRef<MonthInputProps>, ref: Ref<HTMLFieldSetElement>) {\n const { locale } = useConfiguration();\n const {\n testId,\n value,\n min,\n max,\n id,\n label,\n labelHidden,\n innerLabelsHidden = true,\n info,\n status,\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n additionalInfo,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getMonthInputTestIds);\n\n const date = value ? parseToDate(value) : undefined;\n\n const dateToGetFullYearFrom = date ?? new Date();\n\n const minDate = parseToDate(\n min ??\n new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() - 10)\n );\n const maxDate = parseToDate(\n max ??\n new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() + 10)\n );\n\n const minYear = minDate.getUTCFullYear();\n const maxYear = maxDate.getUTCFullYear();\n\n const years = range(minYear, maxYear);\n const months = useMemo(() => getLocalizedMonths(locale), [locale]);\n\n const monthSelectRef = useRef<HTMLSelectElement>(null);\n const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n useEffect(() => {\n if (monthSelectRef.current && yearSelectRef.current) {\n monthSelectRef.current.value = date?.getUTCMonth().toString() ?? '';\n yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n }\n }, [date?.toDateString()]);\n\n const pickParts = (): DateParts<string \| undefined> => {\n return {\n month: monthSelectRef.current?.value \|\| '',\n year: yearSelectRef.current?.value \|\| ''\n };\n };\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts()\n );\n if (onFocus && focused) onFocus(callbackParam);\n else if (onBlur && !focused) onBlur(callbackParam);\n };\n\n const onSelectChange = () => {\n onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n };\n\n const containerRef = useConsolidatedRef<HTMLElement>(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const isMonthOptionDisabled = (monthIndex: number) => {\n const year =\n yearSelectRef.current && yearSelectRef.current.value\n ? parseInt(yearSelectRef.current.value, 10)\n : new Date().getUTCFullYear();\n\n return (\n (year === minDate.getUTCFullYear() && monthIndex < minDate.getUTCMonth()) \|\|\n (year === maxDate.getUTCFullYear() && monthIndex > maxDate.getUTCMonth())\n );\n };\n\n const monthOptions = months.map((month, index) => (\n <Option disabled={isMonthOptionDisabled(index)} key={month} value={index.toString()}>\n {months[index]}\n </Option>\n ));\n const yearOptions = years.map(year => (\n <Option key={year.toString()} value={year.toString()}>\n {getLocalizedYear(year, locale).toString()}\n </Option>\n ));\n\n const displayNames = useMemo(\n () =>\n new Intl.DisplayNames(locale, {\n style: 'long',\n type: 'dateTimeField'\n }) as Intl.DateTimeDisplayNames,\n [locale]\n );\n\n const Month = (\n <Select\n data-testid={testIds.controlMonth}\n label={cap(displayNames.of('month'))}\n labelHidden={innerLabelsHidden}\n key='month'\n ref={monthSelectRef}\n aria-label={displayNames.of('month')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n autoFocus={autoFocus}\n >\n {!required && <Option key='null'> </Option>}\n {monthOptions}\n </Select>\n );\n\n const Year = (\n <Select\n data-testid={testIds.controlYear}\n label={cap(displayNames.of('year'))}\n labelHidden={innerLabelsHidden}\n key='year'\n ref={yearSelectRef}\n aria-label={displayNames.of('year')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n >\n {!required && <Option key='null'> </Option>}\n {yearOptions}\n </Select>\n );\n\n const Comp = (\n <Flex\n as={StyledMonthInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n {...restProps}\n className={createClassName('month-input', className)}\n >\n {Month}\n {Year}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(MonthInput, getMonthInputTestIds);\n"]}
1	+ {"version":3,"file":"MonthInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport type { ForwardProps } from '../../../types';\nimport { cap, createClassName, range, withTestIds } from '../../../utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useTestIds } from '../../../hooks';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport { StyledSelect } from '../../Select/Select';\nimport Flex from '../../Flex';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { getMonthInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField, StyledFormFieldInfo } from '../../FormField/FormField';\n\nimport { parseToDate, getLocalizedMonths, getLocalizedYear } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface MonthInputProps extends DateTimeProps {\n /*\n Toggles visibility of inner labels form Month and Year\n * @default true\n /\n innerLabelsHidden?: boolean;\n /* Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledMonthInput = styled(StyledDateTime)<MonthInputProps>`\n padding: 0;\n border: 0;\n background-color: transparent;\n\n &:focus-within:not([disabled]) {\n border-color: transparent;\n box-shadow: none;\n }\n\n ${StyledFormField} {\n > ${StyledSelect}:focus {\n z-index: 1;\n }\n\n &:first-child {\n flex-grow: 1;\n }\n\n &:first-child > ${StyledSelect} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child > ${StyledSelect} {\n width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n &:first-child > ${StyledFormFieldInfo}, &:last-child > ${StyledFormFieldInfo} {\n display: none;\n }\n }\n`;\n\nStyledMonthInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n date: Date,\n { month, year }: DateParts<string \| undefined>\n): DateTimeCallbackParameter => {\n if ([month, year].every(Boolean)) {\n const resultDate = new Date(date);\n resultDate.setUTCFullYear(Number(year), Number(month));\n // handle month overflowing\n if (resultDate.getUTCMonth() !== Number(month)) {\n resultDate.setUTCDate(0);\n }\n return {\n valueAsISOString: resultDate.toISOString(),\n valueAsTimestamp: resultDate.getTime()\n };\n }\n if ([year, month].every(p => !p)) {\n return {\n valueAsISOString: undefined,\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst MonthInput: FunctionComponent<MonthInputProps & ForwardProps> = forwardRef(\n function MonthInput(props: PropsWithoutRef<MonthInputProps>, ref: Ref<HTMLFieldSetElement>) {\n const { locale } = useConfiguration();\n const {\n testId,\n value,\n min,\n max,\n id,\n label,\n labelHidden,\n innerLabelsHidden = true,\n info,\n status,\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n additionalInfo,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getMonthInputTestIds);\n\n const date = value ? parseToDate(value) : undefined;\n\n const dateToGetFullYearFrom = date ?? new Date();\n\n const minDate = parseToDate(\n min ??\n new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() - 10)\n );\n const maxDate = parseToDate(\n max ??\n new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() + 10)\n );\n\n const minYear = minDate.getUTCFullYear();\n const maxYear = maxDate.getUTCFullYear();\n\n const years = range(minYear, maxYear);\n const months = useMemo(() => getLocalizedMonths(locale), [locale]);\n\n const monthSelectRef = useRef<HTMLSelectElement>(null);\n const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n useEffect(() => {\n if (monthSelectRef.current && yearSelectRef.current) {\n monthSelectRef.current.value = date?.getUTCMonth().toString() ?? '';\n yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n }\n }, [date?.toDateString()]);\n\n const pickParts = (): DateParts<string \| undefined> => {\n return {\n month: monthSelectRef.current?.value \|\| '',\n year: yearSelectRef.current?.value \|\| ''\n };\n };\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts()\n );\n if (onFocus && focused) onFocus(callbackParam);\n else if (onBlur && !focused) onBlur(callbackParam);\n };\n\n const onSelectChange = () => {\n onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n };\n\n const containerRef = useConsolidatedRef<HTMLElement>(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const isMonthOptionDisabled = (monthIndex: number) => {\n const year =\n yearSelectRef.current && yearSelectRef.current.value\n ? parseInt(yearSelectRef.current.value, 10)\n : new Date().getUTCFullYear();\n\n return (\n (year === minDate.getUTCFullYear() && monthIndex < minDate.getUTCMonth()) \|\|\n (year === maxDate.getUTCFullYear() && monthIndex > maxDate.getUTCMonth())\n );\n };\n\n const monthOptions = months.map((month, index) => (\n <Option disabled={isMonthOptionDisabled(index)} key={month} value={index.toString()}>\n {months[index]}\n </Option>\n ));\n const yearOptions = years.map(year => (\n <Option key={year.toString()} value={year.toString()}>\n {getLocalizedYear(year, locale).toString()}\n </Option>\n ));\n\n const displayNames = useMemo(\n () =>\n new Intl.DisplayNames(locale, {\n style: 'long',\n type: 'dateTimeField'\n }) as Intl.DateTimeDisplayNames,\n [locale]\n );\n\n const Month = (\n <Select\n data-testid={testIds.controlMonth}\n label={cap(displayNames.of('month'))}\n labelHidden={innerLabelsHidden}\n key='month'\n ref={monthSelectRef}\n aria-label={displayNames.of('month')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n autoFocus={autoFocus}\n >\n {!required && <Option key='null'> </Option>}\n {monthOptions}\n </Select>\n );\n\n const Year = (\n <Select\n data-testid={testIds.controlYear}\n label={cap(displayNames.of('year'))}\n labelHidden={innerLabelsHidden}\n key='year'\n ref={yearSelectRef}\n aria-label={displayNames.of('year')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n >\n {!required && <Option key='null'> </Option>}\n {yearOptions}\n </Select>\n );\n\n const Comp = (\n <Flex\n as={StyledMonthInput}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n {...restProps}\n className={createClassName('month-input', className)}\n >\n {Month}\n {Year}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(MonthInput, getMonthInputTestIds);\n"]}

package/lib/components/DateTime/Input/QuarterInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuarterInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAcnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;~~AAS1D~~,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB;;+~~BA2B9B~~,CAAC;;;;AAiMF,wBAAiE"}
1	+ {"version":3,"file":"QuarterInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAcnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB;;+BA4B9B,CAAC;;;;AAiMF,wBAAiE"}

package/lib/components/DateTime/Input/QuarterInput.js CHANGED Viewed

@@ -10,14 +10,14 @@ import { StyledSelect } from '../../Select/Select';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
 import { getQuarterInputTestIds } from '../DateTime.test-ids';
-import { StyledFormField } from '../../FormField/FormField';
 import { getQuarter, parseToDate } from './utils';
 import StyledDateTime from './DateTime.styles';
 export const StyledQuarterInput = styled(StyledDateTime) `
   padding: 0;
   border: 0;
-  ${StyledFormField}:enabled > &:focus-within {
+  &:focus-within:not([disabled]) {
+    border-color: transparent;
     box-shadow: none;
   }

package/lib/components/DateTime/Input/QuarterInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuarterInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport Flex from '../../Flex';\nimport { createClassName, range, withTestIds } from '../../../utils';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useTestIds\n} from '../../../hooks';\nimport { StyledSelect } from '../../Select/Select';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport { getQuarterInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField } from '../../FormField/FormField';\n\nimport { getQuarter, parseToDate } from './utils';\nimport type { QuarterNumber } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface QuarterInputProps extends DateTimeProps {\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledQuarterInput = styled(StyledDateTime)<QuarterInputProps>`\n padding: 0;\n border: 0;\n\n ${StyledFormField}:enabled > &:focus-within {\n box-shadow: none;\n }\n\n ${StyledSelect} {\n min-width: 0;\n\n &:focus {\n z-index: 1;\n }\n\n &:first-child {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child {\n max-width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n`;\n\nStyledQuarterInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n date: Date,\n parts: DateParts<string \| undefined>\n): DateTimeCallbackParameter => {\n if ([parts.quarter, parts.year].every(Boolean)) {\n const quarterStartMonth = [0, 3, 6, 9][Number(parts.quarter) - 1];\n\n const resultDate = new Date(date);\n resultDate.setUTCFullYear(Number(parts.year), quarterStartMonth, 1);\n return {\n valueAsISOString: resultDate.toISOString(),\n valueAsTimestamp: resultDate.getTime()\n };\n }\n if ([parts.year, parts.quarter].every(p => !p)) {\n return {\n valueAsISOString: undefined,\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst QuarterInput: FunctionComponent<QuarterInputProps & ForwardProps> = forwardRef(\n function QuarterInput(props: PropsWithoutRef<QuarterInputProps>, ref: Ref<HTMLFieldSetElement>) {\n const {\n testId,\n value,\n min,\n max,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n additionalInfo,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getQuarterInputTestIds);\n\n const { locale } = useConfiguration();\n\n const date = value ? parseToDate(value) : undefined;\n const currentYear = date ? date.getUTCFullYear() : new Date().getFullYear();\n\n const minYear = min ? parseToDate(min).getUTCFullYear() : currentYear - 10;\n const maxYear = max ? parseToDate(max).getUTCFullYear() : currentYear + 10;\n\n const years = range(minYear, maxYear);\n\n const quarterSelectRef = useRef<HTMLSelectElement>(null);\n const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n useEffect(() => {\n if (quarterSelectRef.current && yearSelectRef.current) {\n quarterSelectRef.current.value = date ? getQuarter(date).toString() : '';\n yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n }\n }, [date?.toDateString()]);\n\n const pickParts = (): DateParts<string \| undefined> => {\n return {\n quarter: quarterSelectRef.current?.value \|\| '',\n year: yearSelectRef.current?.value \|\| ''\n };\n };\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts()\n );\n if (onFocus && focused) onFocus(callbackParam);\n else if (onBlur && !focused) onBlur(callbackParam);\n };\n\n const onSelectChange = () => {\n onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n };\n\n const containerRef = useConsolidatedRef<HTMLElement>(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const t = useI18n();\n\n const quarters: QuarterNumber[] = [1, 2, 3, 4];\n\n const quarterOptions = quarters.map(quarterNumber => (\n <Option key={t(`date_quarter_q${quarterNumber}`).trim()} value={quarterNumber.toString()}>\n {t(`date_quarter_q${quarterNumber}`).trim()}\n </Option>\n ));\n\n const yearOptions = years.map(year => (\n <Option key={year.toString()} value={year.toString()}>\n {year.toString()}\n </Option>\n ));\n\n const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n const Quarter = (\n <Select\n data-testid={testIds.controlQuarter}\n key='quarter'\n ref={quarterSelectRef}\n aria-label={displayNames.of('quarter')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n autoFocus={autoFocus}\n >\n {!required && <Option key='null'> </Option>}\n {quarterOptions}\n </Select>\n );\n\n const Year = (\n <Select\n data-testid={testIds.controlYear}\n key='year'\n ref={yearSelectRef}\n aria-label={displayNames.of('year')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n >\n {!required && <Option key='null'> </Option>}\n {yearOptions}\n </Select>\n );\n\n const Comp = (\n <Flex\n data-testid={label ? undefined : testIds.root}\n {...restProps}\n as={StyledQuarterInput}\n className={createClassName('quarter-input', className)}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n ref={containerRef}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n >\n {Quarter}\n {Year}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(QuarterInput, getQuarterInputTestIds);\n"]}
1	+ {"version":3,"file":"QuarterInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport Flex from '../../Flex';\nimport { createClassName, range, withTestIds } from '../../../utils';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useTestIds\n} from '../../../hooks';\nimport { StyledSelect } from '../../Select/Select';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport { getQuarterInputTestIds } from '../DateTime.test-ids';\n\nimport { getQuarter, parseToDate } from './utils';\nimport type { QuarterNumber } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface QuarterInputProps extends DateTimeProps {\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledQuarterInput = styled(StyledDateTime)<QuarterInputProps>`\n padding: 0;\n border: 0;\n\n &:focus-within:not([disabled]) {\n border-color: transparent;\n box-shadow: none;\n }\n\n ${StyledSelect} {\n min-width: 0;\n\n &:focus {\n z-index: 1;\n }\n\n &:first-child {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child {\n max-width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n`;\n\nStyledQuarterInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n date: Date,\n parts: DateParts<string \| undefined>\n): DateTimeCallbackParameter => {\n if ([parts.quarter, parts.year].every(Boolean)) {\n const quarterStartMonth = [0, 3, 6, 9][Number(parts.quarter) - 1];\n\n const resultDate = new Date(date);\n resultDate.setUTCFullYear(Number(parts.year), quarterStartMonth, 1);\n return {\n valueAsISOString: resultDate.toISOString(),\n valueAsTimestamp: resultDate.getTime()\n };\n }\n if ([parts.year, parts.quarter].every(p => !p)) {\n return {\n valueAsISOString: undefined,\n valueAsTimestamp: undefined\n };\n }\n return {\n valueAsISOString: '',\n valueAsTimestamp: NaN,\n state: 'incomplete'\n };\n};\n\nconst QuarterInput: FunctionComponent<QuarterInputProps & ForwardProps> = forwardRef(\n function QuarterInput(props: PropsWithoutRef<QuarterInputProps>, ref: Ref<HTMLFieldSetElement>) {\n const {\n testId,\n value,\n min,\n max,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n onChange,\n onFocus,\n onBlur,\n autoFocus,\n additionalInfo,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getQuarterInputTestIds);\n\n const { locale } = useConfiguration();\n\n const date = value ? parseToDate(value) : undefined;\n const currentYear = date ? date.getUTCFullYear() : new Date().getFullYear();\n\n const minYear = min ? parseToDate(min).getUTCFullYear() : currentYear - 10;\n const maxYear = max ? parseToDate(max).getUTCFullYear() : currentYear + 10;\n\n const years = range(minYear, maxYear);\n\n const quarterSelectRef = useRef<HTMLSelectElement>(null);\n const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n useEffect(() => {\n if (quarterSelectRef.current && yearSelectRef.current) {\n quarterSelectRef.current.value = date ? getQuarter(date).toString() : '';\n yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n }\n }, [date?.toDateString()]);\n\n const pickParts = (): DateParts<string \| undefined> => {\n return {\n quarter: quarterSelectRef.current?.value \|\| '',\n year: yearSelectRef.current?.value \|\| ''\n };\n };\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(\n date ? new Date(date) : new Date(),\n pickParts()\n );\n if (onFocus && focused) onFocus(callbackParam);\n else if (onBlur && !focused) onBlur(callbackParam);\n };\n\n const onSelectChange = () => {\n onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n };\n\n const containerRef = useConsolidatedRef<HTMLElement>(ref);\n useFocusWithin([containerRef], onFocusChange);\n\n const t = useI18n();\n\n const quarters: QuarterNumber[] = [1, 2, 3, 4];\n\n const quarterOptions = quarters.map(quarterNumber => (\n <Option key={t(`date_quarter_q${quarterNumber}`).trim()} value={quarterNumber.toString()}>\n {t(`date_quarter_q${quarterNumber}`).trim()}\n </Option>\n ));\n\n const yearOptions = years.map(year => (\n <Option key={year.toString()} value={year.toString()}>\n {year.toString()}\n </Option>\n ));\n\n const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n const Quarter = (\n <Select\n data-testid={testIds.controlQuarter}\n key='quarter'\n ref={quarterSelectRef}\n aria-label={displayNames.of('quarter')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n autoFocus={autoFocus}\n >\n {!required && <Option key='null'> </Option>}\n {quarterOptions}\n </Select>\n );\n\n const Year = (\n <Select\n data-testid={testIds.controlYear}\n key='year'\n ref={yearSelectRef}\n aria-label={displayNames.of('year')}\n readOnly={readOnly}\n required={required}\n onChange={onSelectChange}\n status={status}\n disabled={disabled}\n >\n {!required && <Option key='null'> </Option>}\n {yearOptions}\n </Select>\n );\n\n const Comp = (\n <Flex\n data-testid={label ? undefined : testIds.root}\n {...restProps}\n as={StyledQuarterInput}\n className={createClassName('quarter-input', className)}\n forwardedAs={StyledFormControl}\n container={{ alignItems: 'center' }}\n ref={containerRef}\n status={status}\n disabled={disabled}\n readOnly={readOnly}\n >\n {Quarter}\n {Year}\n </Flex>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(QuarterInput, getQuarterInputTestIds);\n"]}

package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,+OA6B5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,6NAe3B,CAAC;AAIH,eAAO,MAAM,2BAA2B;;iKAIvC,CAAC;AAIF,eAAO,MAAM,0BAA0B;;~~6BAkCtC~~,CAAC"}
1	+ {"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,+OA6B5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,6NAe3B,CAAC;AAIH,eAAO,MAAM,2BAA2B;;iKAIvC,CAAC;AAIF,eAAO,MAAM,0BAA0B;;6BAuCtC,CAAC"}

package/lib/components/DateTime/Picker/DatePicker.styles.js CHANGED Viewed

@@ -52,6 +52,11 @@ export const StyledDatePickerMonthInput = styled(StyledDateTime) `
   height: max-content;
   background-color: transparent;
+  &:focus-within:not([disabled]) {
+    border-color: transparent;
+    box-shadow: none;
+  }
   ${StyledFormField} {
     padding-inline: 0;

package/lib/components/DateTime/Picker/DatePicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,OAAO,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACvC,EACD,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAC5C,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;iCACqB,OAAO;gCACR,OAAO;;;;MAIjC,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;MAGxE,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;iBAG7D,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;eAEG,OAAO;;;MAGhB,eAAe;mCACc,OAAO;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;CAIxD,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB~~;;;;;;IAM7E~~,eAAe;;;QAGX,WAAW,OAAO,cAAc,MAAM,WAAW;;;;;;;;;QASjD,YAAY;;;;sBAIE,YAAY;;;;;qBAKb,YAAY;;;;;;;CAOhC,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport Button, { StyledButton } from '../../Button';\nimport { StyledLabel } from '../../Label';\nimport { StyledFormField, StyledLabelRow } from '../../FormField/FormField';\nimport { StyledSelect } from '../../Select/Select';\nimport StyledDateTime from '../Input/DateTime.styles';\nimport type { MonthInputProps } from '../Input/MonthInput';\n\nexport const StyledMonthPicker = styled.fieldset(props => {\n const {\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'foreground-color': color }\n },\n components: { 'form-control': formControl }\n }\n } = props;\n return css`\n margin-block-end: calc(2 * ${spacing});\n margin-inline: calc(0.5 * ${spacing});\n font-size: 0.875rem;\n border: none;\n\n ${StyledSelect} {\n border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n }\n\n ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n border: 0;\n &:enabled {\n color: ${color};\n }\n }\n `;\n});\n\nStyledMonthPicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePicker = styled.div(props => {\n const {\n theme: {\n base: { spacing }\n }\n } = props;\n return css`\n width: max-content;\n padding: ${spacing};\n overflow-y: auto;\n\n ${StyledFormField} {\n padding-inline: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledMonthNavigationButton = styled(Button)`\n & + & {\n margin-inline-start: 0;\n }\n`;\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePickerMonthInput = styled(StyledDateTime)<MonthInputProps>`\n padding: 0;\n border: 0;\n height: max-content;\n background-color: transparent;\n\n ${StyledFormField} {\n padding-inline: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n &::after {\n content: none;\n }\n }\n > :last-child {\n margin: 0;\n }\n\n > ${StyledSelect}:focus {\n z-index: 1;\n }\n\n &:first-child > ${StyledSelect} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child > ${StyledSelect} {\n width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n`;\n\nStyledDatePickerMonthInput.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,OAAO,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,EACvC,EACD,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAC5C,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;iCACqB,OAAO;gCACR,OAAO;;;;MAIjC,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;MAGxE,YAAY;4BACU,gBAAgB,MAAM,WAAW,CAAC,eAAe,CAAC;;;iBAG7D,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;eAEG,OAAO;;;MAGhB,eAAe;mCACc,OAAO;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;CAIxD,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB;;;;;;;;;;;IAW7E,eAAe;;;QAGX,WAAW,OAAO,cAAc,MAAM,WAAW;;;;;;;;;QASjD,YAAY;;;;sBAIE,YAAY;;;;;qBAKb,YAAY;;;;;;;CAOhC,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport Button, { StyledButton } from '../../Button';\nimport { StyledLabel } from '../../Label';\nimport { StyledFormField, StyledLabelRow } from '../../FormField/FormField';\nimport { StyledSelect } from '../../Select/Select';\nimport StyledDateTime from '../Input/DateTime.styles';\nimport type { MonthInputProps } from '../Input/MonthInput';\n\nexport const StyledMonthPicker = styled.fieldset(props => {\n const {\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'foreground-color': color }\n },\n components: { 'form-control': formControl }\n }\n } = props;\n return css`\n margin-block-end: calc(2 * ${spacing});\n margin-inline: calc(0.5 * ${spacing});\n font-size: 0.875rem;\n border: none;\n\n ${StyledSelect} {\n border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n }\n\n ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n border: 0;\n &:enabled {\n color: ${color};\n }\n }\n `;\n});\n\nStyledMonthPicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePicker = styled.div(props => {\n const {\n theme: {\n base: { spacing }\n }\n } = props;\n return css`\n width: max-content;\n padding: ${spacing};\n overflow-y: auto;\n\n ${StyledFormField} {\n padding-inline: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledMonthNavigationButton = styled(Button)`\n & + & {\n margin-inline-start: 0;\n }\n`;\n\nStyledDatePicker.defaultProps = defaultThemeProp;\n\nexport const StyledDatePickerMonthInput = styled(StyledDateTime)<MonthInputProps>`\n padding: 0;\n border: 0;\n height: max-content;\n background-color: transparent;\n\n &:focus-within:not([disabled]) {\n border-color: transparent;\n box-shadow: none;\n }\n\n ${StyledFormField} {\n padding-inline: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n &::after {\n content: none;\n }\n }\n > :last-child {\n margin: 0;\n }\n\n > ${StyledSelect}:focus {\n z-index: 1;\n }\n\n &:first-child > ${StyledSelect} {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-child > ${StyledSelect} {\n width: max-content;\n margin-inline-start: -0.0625rem;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n`;\n\nStyledDatePickerMonthInput.defaultProps = defaultThemeProp;\n"]}

package/lib/components/EmptyState/EmptyState.d.ts CHANGED Viewed

@@ -6,9 +6,14 @@ export interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {
      * @default 'No items'
      */
     message?: string;
+    /**
+     * For renderings where a visual boundary is required.
+     * @default 'default'
+     */
+    variant?: 'default' | 'bordered';
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<EmptyStateProps, "variant">>> & string;
 declare const _default: ForwardRefForwardPropsComponent<EmptyStateProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["message", "icon"]>;
 };

package/lib/components/EmptyState/EmptyState.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACX,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,~~6NAc3B~~,CAAC;;;;~~AAkCH~~,wBAA6D"}
1	+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACX,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,qQAuB5B,CAAC;;;;AAmCF,wBAA6D"}

package/lib/components/EmptyState/EmptyState.js CHANGED Viewed

@@ -13,26 +13,33 @@ import { defaultThemeProp } from '../../theme';
 import { getEmptyStateTestIds } from './EmptyState.test-ids';
 registerIcon(galaxyIcon);
 registerIcon(folderEmptyIcon);
-export const StyledEmptyState = styled.div(({ theme }) => {
+export const StyledEmptyState = styled.div(({ theme, variant }) => {
     const color = tryCatch(() => rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     return css `
-    height: 100%;
+      height: 100%;
-    ${StyledIcon} {
-      font-size: 1.5rem;
-      height: 1.5rem;
-      width: 1.5rem;
-      color: ${color};
-    }
-  `;
+      ${variant === 'bordered' &&
+        css `
+        border: 0.0625rem solid ${theme.base.palette['border-line']};
+        border-radius: ${theme.components.card['border-radius']};
+        padding: calc(2 * ${theme.base.spacing});
+      `}
+      ${StyledIcon} {
+        font-size: 1.5rem;
+        height: 1.5rem;
+        width: 1.5rem;
+        color: ${color};
+      }
+    `;
 });
 StyledEmptyState.defaultProps = defaultThemeProp;
 const EmptyState = forwardRef(function EmptyState(props, ref) {
     const { base: { 'icon-set': iconSet } } = useTheme();
     const t = useI18n();
-    const { testId, message = t('no_items'), ...restProps } = props;
+    const { testId, message = t('no_items'), variant = 'default', ...restProps } = props;
     const testIds = useTestIds(testId, getEmptyStateTestIds);
-    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: iconSet === 'streamline' ? 'folder-empty' : 'galaxy' }), _jsx(Text, { "data-testid": testIds.message, variant: 'secondary', children: message })] }));
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledEmptyState, variant: variant, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: iconSet === 'streamline' ? 'folder-empty' : 'galaxy' }), _jsx(Text, { "data-testid": testIds.message, variant: 'secondary', children: message })] }));
 });
 export default withTestIds(EmptyState, getEmptyStateTestIds);
 //# sourceMappingURL=EmptyState.js.map

package/lib/components/EmptyState/EmptyState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,4CAA4C,CAAC;AAC9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAO5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,YAAY,CAAC,UAAU,CAAC,CAAC;AACzB,YAAY,CAAC,eAAe,CAAC,CAAC;~~AAW9B~~,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,~~CAAC~~,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;~~IACvD~~,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;~~MAGN~~,UAAU;;;;~~eAID~~,KAAK;;~~GAEjB~~,CAAC;AACJ,CAAC,~~CAAC~~,CAAC;~~AAEH~~,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,KAAuC,EACvC,GAA2B;IAE3B,MAAM,EACJ,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAC9B,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;~~IAChE~~,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEzD,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,GAC1D,EACF,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpD,OAAO,GACH,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';\nimport Text from '../Text';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useI18n, useTestIds, useTheme } from '../../hooks';\nimport type {\n BaseProps,\n NoChildrenProp,\n ForwardRefForwardPropsComponent,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport { getEmptyStateTestIds } from './EmptyState.test-ids';\n\nregisterIcon(galaxyIcon);\nregisterIcon(folderEmptyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {\n /*\n Message to display below the icon.\n * @default 'No items'\n */\n message?: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n return css`\n height: 100%;\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${color};\n }\n `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: ForwardRefForwardPropsComponent<EmptyStateProps> = forwardRef(function EmptyState(\n props: PropsWithoutRef<EmptyStateProps>,\n ref: EmptyStateProps['ref']\n) {\n const {\n base: { 'icon-set': iconSet }\n } = useTheme();\n const t = useI18n();\n const { testId, message = t('no_items'), ...restProps } = props;\n const testIds = useTestIds(testId, getEmptyStateTestIds);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledEmptyState}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon\n data-testid={testIds.icon}\n name={iconSet === 'streamline' ? 'folder-empty' : 'galaxy'}\n />\n <Text data-testid={testIds.message} variant='secondary'>\n {message}\n </Text>\n </Flex>\n );\n});\n\nexport default withTestIds(EmptyState, getEmptyStateTestIds);\n"]}
1	+ {"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,4CAA4C,CAAC;AAC9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAO5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,YAAY,CAAC,UAAU,CAAC,CAAC;AACzB,YAAY,CAAC,eAAe,CAAC,CAAC;AAgB9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;QAGN,OAAO,KAAK,UAAU;QACxB,GAAG,CAAA;kCACyB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;yBAC1C,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;4BACnC,KAAK,CAAC,IAAI,CAAC,OAAO;OACvC;;QAEC,UAAU;;;;iBAID,KAAK;;KAEjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,KAAuC,EACvC,GAA2B;IAE3B,MAAM,EACJ,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAC9B,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEzD,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,GAC1D,EACF,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpD,OAAO,GACH,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';\nimport Text from '../Text';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useI18n, useTestIds, useTheme } from '../../hooks';\nimport type {\n BaseProps,\n NoChildrenProp,\n ForwardRefForwardPropsComponent,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport { getEmptyStateTestIds } from './EmptyState.test-ids';\n\nregisterIcon(galaxyIcon);\nregisterIcon(folderEmptyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {\n /*\n Message to display below the icon.\n * @default 'No items'\n /\n message?: string;\n /\n For renderings where a visual boundary is required.\n * @default 'default'\n /\n variant?: 'default' \| 'bordered';\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div<Pick<EmptyStateProps, 'variant'>>(\n ({ theme, variant }) => {\n const color = tryCatch(() =>\n rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n );\n return css`\n height: 100%;\n\n ${variant === 'bordered' &&\n css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n `}\n\n ${StyledIcon} {\n font-size: 1.5rem;\n height: 1.5rem;\n width: 1.5rem;\n color: ${color};\n }\n `;\n }\n);\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: ForwardRefForwardPropsComponent<EmptyStateProps> = forwardRef(function EmptyState(\n props: PropsWithoutRef<EmptyStateProps>,\n ref: EmptyStateProps['ref']\n) {\n const {\n base: { 'icon-set': iconSet }\n } = useTheme();\n const t = useI18n();\n const { testId, message = t('no_items'), variant = 'default', ...restProps } = props;\n const testIds = useTestIds(testId, getEmptyStateTestIds);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n as={StyledEmptyState}\n variant={variant}\n ref={ref}\n container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n >\n <Icon\n data-testid={testIds.icon}\n name={iconSet === 'streamline' ? 'folder-empty' : 'galaxy'}\n />\n <Text data-testid={testIds.message} variant='secondary'>\n {message}\n </Text>\n </Flex>\n );\n});\n\nexport default withTestIds(EmptyState, getEmptyStateTestIds);\n"]}

package/lib/components/FieldGroup/FieldGroupList.js CHANGED Viewed

@@ -221,7 +221,7 @@ const FieldGroupList = forwardRef(function FieldGroupList({ label, additionalCon
             e.stopPropagation();
         }, onBlur: (e) => {
             e.stopPropagation();
-        }, children: [label && (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: label }), additionalContext && (_jsx(AdditionalInfo, { contextualLabel: label, children: additionalContext })), _jsx(StyledDivider, { "aria-hidden": 'true' })] })), items.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledFieldGroupList, ref: ref, "aria-label": label, ...restProps, children: items.map((item, index) => {
+        }, children: [label && (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: label }), additionalContext && (_jsx(AdditionalInfo, { contextualLabel: label, children: additionalContext })), _jsx(StyledDivider, { "aria-hidden": 'true' })] })), items.length === 0 ? (_jsx(EmptyState, { variant: 'bordered' })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledFieldGroupList, ref: ref, "aria-label": label, ...restProps, children: items.map((item, index) => {
                     const handleDelete = onDelete || item.onDelete
                         ? (id) => {
                             deletedItemIndexRef.current = index;