npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.16.0 → 3.0.0-dev.18.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.16.0 → 3.0.0-dev.18.0

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 (251) hide show

package/lib/components/DateTime/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as DateInput } from './Input/DateInput';\nexport type { DateInputProps } from './Input/DateInput';\nexport { default as WeekInput } from './Input/WeekInput';\nexport type { WeekInputProps } from './Input/WeekInput';\nexport { default as MonthInput } from './Input/MonthInput';\nexport type { MonthInputProps } from './Input/MonthInput';\nexport { default as TimeInput } from './Input/TimeInput';\nexport type { TimeInputProps } from './Input/TimeInput';\nexport { default as DateRangeInput } from './Input/DateRangeInput';\nexport type { DateRangeInputProps } from './Input/DateRangeInput';\nexport { default as DurationInput } from './Input/Duration/DurationInput';\nexport type { default as DurationInputProps } from './Input/Duration/DurationInput.types';\nexport { Format } from './Input/Duration/DurationInput.types';\nexport { default as DateTimeInput } from './Input/DateTimeInput';\nexport type { DateTimeInputProps } from './Input/DateTimeInput';\nexport { default as DayOfWeekInput } from './Input/DayOfWeekInput';\nexport type { DayOfWeekInputProps } from './Input/DayOfWeekInput';\nexport { default as QuarterInput } from './Input/QuarterInput';\nexport type { QuarterInputProps } from './Input/QuarterInput';\n\nexport { default as TimePicker } from './Picker/TimePicker';\nexport type { TimePickerProps } from './Picker/TimePicker';\nexport { default as DatePicker } from './Picker/DatePicker';\nexport type { default as DatePickerProps } from './Picker/DatePicker.types';\n\nexport { default as DateTimeDisplay } from './DateTimeDisplay';\nexport type { DateTimeDisplayProps } from './DateTimeDisplay';\nexport { default as DurationDisplay } from './DurationDisplay';\nexport type { DurationDisplayProps } from './DurationDisplay';\nexport { formatDateTime, formatDuration } from './utils';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as DateInput } from './Input/DateInput';\nexport type { DateInputProps } from './Input/DateInput';\nexport { default as WeekInput } from './Input/WeekInput';\nexport type { WeekInputProps } from './Input/WeekInput';\nexport { default as MonthInput } from './Input/MonthInput';\nexport type { MonthInputProps } from './Input/MonthInput';\nexport { default as TimeInput } from './Input/TimeInput';\nexport type { TimeInputProps } from './Input/TimeInput';\nexport { default as DateRangeInput } from './Input/DateRangeInput';\nexport type { DateRangeInputProps } from './Input/DateRangeInput';\nexport { default as DurationInput } from './Input/Duration/DurationInput';\nexport type { default as DurationInputProps } from './Input/Duration/DurationInput.types';\nexport { Format } from './Input/Duration/DurationInput.types';\nexport { default as DateTimeInput } from './Input/DateTimeInput';\nexport type { DateTimeInputProps } from './Input/DateTimeInput';\nexport { default as DayOfWeekInput } from './Input/DayOfWeekInput';\nexport type { DayOfWeekInputProps } from './Input/DayOfWeekInput';\nexport { default as QuarterInput } from './Input/QuarterInput';\nexport type { QuarterInputProps } from './Input/QuarterInput';\n\nexport { default as TimePicker } from './Picker/TimePicker';\nexport type { TimePickerProps } from './Picker/TimePicker';\nexport { default as DatePicker } from './Picker/DatePicker';\nexport type { default as DatePickerProps } from './Picker/DatePicker.types';\n\nexport { default as DateTimeDisplay } from './DateTimeDisplay';\nexport type { DateTimeDisplayProps } from './DateTimeDisplay';\nexport { default as DurationDisplay } from './DurationDisplay';\nexport type { DurationDisplayProps } from './DurationDisplay';\nexport { formatDateTime, formatDuration } from './utils';\nexport { parseToDate } from './Input/utils';\nexport { isValidDate } from './Picker/utils';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;~~AAaf~~,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA4CD,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CA2JzD~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA4CD,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA8JzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, usePrevious } from '../../hooks';
+import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, usePrevious, useUID } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import { getFocusables } from '../../utils';
 import Button from '../Button';
@@ -64,6 +64,7 @@ export const useDialog = () => {
 };
 const Dialog = forwardRef(({ target, placement, heading, headingHidden = false, onSubmit, onClose, onOpen, loading, children }, ref) => {
     const t = useI18n();
+    const headingId = useUID();
     const [popoverEl, setPopoverEl] = useElement();
     const popoverRef = useConsolidatedRef(ref, setPopoverEl);
     const headingRef = useRef(null);
@@ -142,7 +143,7 @@ const Dialog = forwardRef(({ target, placement, heading, headingHidden = false,
         }
     };
     const progress = loading ? _jsx(Progress, { placement: 'local' }) : null;
-    return (_jsxs(Popover, { as: StyledDialog, ref: popoverRef, target: currentTarget, placement: placement, show: show, open: show, children: [_jsx(CardHeader, { actions: !onSubmit ? (_jsx(Button, { icon: true, variant: 'simple', onClick: () => setShow(false), "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) })) : undefined, children: headingHidden ? (_jsx(VisuallyHiddenText, { children: heading })) : (_jsx(StyledDialogTitle, { variant: 'h2', tabIndex: -1, ref: headingRef, onKeyDown: onTitleKeyDown, children: heading })) }), _jsxs(CardContent, { children: [children, progress] }), onSubmit && (_jsxs(CardFooter, { justify: 'between', children: [_jsx(Button, { variant: 'secondary', onClick: () => setShow(false), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit({ close: () => setShow(false) }), disabled: loading, children: t('submit') })] }))] }));
+    return (_jsxs(Popover, { as: StyledDialog, ref: popoverRef, target: currentTarget, placement: placement, show: show, open: show, "aria-labelledby": headingId, children: [_jsx(CardHeader, { actions: !onSubmit ? (_jsx(Button, { icon: true, variant: 'simple', onClick: () => setShow(false), "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) })) : undefined, children: headingHidden ? (_jsx(VisuallyHiddenText, { id: headingId, children: heading })) : (_jsx(StyledDialogTitle, { variant: 'h2', tabIndex: -1, ref: headingRef, onKeyDown: onTitleKeyDown, id: headingId, children: heading })) }), _jsxs(CardContent, { children: [children, progress] }), onSubmit && (_jsxs(CardFooter, { justify: 'between', children: [_jsx(Button, { variant: 'secondary', onClick: () => setShow(false), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit({ close: () => setShow(false) }), disabled: loading, children: t('submit') })] }))] }));
 });
 export default Dialog;
 //# sourceMappingURL=Dialog.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent,\n usePrevious\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n target: HTMLElement \| null;\n placement?: PopoverProps['placement'];\n children: PopoverProps['children'];\n heading: string;\n headingHidden?: boolean;\n onSubmit?: (arg: { close: () => void }) => void;\n onClose?: () => void;\n onOpen?: () => void;\n loading?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialog = styled.dialog(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n border: none;\n min-width: ${contentWidth.sm};\n max-width: ${contentWidth.lg};\n `;\n }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nconst StyledDialogTitle = styled(Text)(\n ({\n theme: {\n base: { shadow, 'border-radius': borderRadius }\n }\n }) => {\n return css`\n position: relative;\n ::after {\n content: '';\n border-radius: ${borderRadius};\n position: absolute;\n inset: -0.25rem;\n }\n :focus-visible {\n outline: none;\n ::after {\n box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n }\n }\n `;\n }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n const [target, setTarget] = useState<HTMLElement \| null>(null);\n const [loading, setLoading] = useState(false);\n\n const setTargetWithEvent = (e: ReactMouseEvent \| ReactKeyboardEvent) => {\n if (e.target instanceof HTMLElement) {\n setTarget(e.target);\n }\n };\n\n return {\n target,\n loading,\n setLoading,\n events: {\n onMouseDown: (e: ReactMouseEvent) => {\n setTargetWithEvent(e);\n },\n onKeyDown: (e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n setTargetWithEvent(e);\n }\n }\n },\n setTargetWithEvent\n };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n (\n {\n target,\n placement,\n heading,\n headingHidden = false,\n onSubmit,\n onClose,\n onOpen,\n loading,\n children\n }: PropsWithoutRef<DialogProps>,\n ref: DialogProps['ref']\n ) => {\n const t = useI18n();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n const headingRef = useRef<HTMLSpanElement>(null);\n const [currentTarget, setCurrentTarget] = useState(() => target);\n const [show, setShow] = useState(false);\n const skipChangeShow = useRef(false);\n const prevTarget = usePrevious(target);\n useEscape(\n () => {\n if (show) {\n setShow(false);\n }\n },\n undefined,\n [show, setShow]\n );\n useOuterEvent('mousedown', [target, popoverEl], () => {\n if (target && popoverEl && show) {\n setShow(false);\n onClose?.();\n }\n });\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n if (!show) {\n currentTarget?.focus();\n }\n }, [show]);\n\n useEffect(() => {\n if (show && popoverEl) {\n if (headingRef.current) {\n headingRef.current.focus();\n } else {\n const focusables = getFocusables(popoverRef);\n focusables[0]?.focus();\n }\n }\n }, [show, popoverEl]);\n\n useLayoutEffect(() => {\n const onTargetClick = (e: MouseEvent) => {\n setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n if (!skipChangeShow.current) {\n setShow(prev => !prev);\n } else {\n skipChangeShow.current = false;\n }\n };\n if (target instanceof HTMLElement) {\n target.addEventListener('click', onTargetClick);\n }\n return () => {\n if (target instanceof HTMLElement) {\n target.removeEventListener('click', onTargetClick);\n }\n };\n }, [target]);\n\n useEffect(() => {\n if (show) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [show]);\n\n useEffect(() => {\n /* If our target is changing and the popover is already open we will want\n to skip the next change. The next show change would come from a click on the new button,\n the popover should stay open. */\n if (target !== prevTarget && show) {\n skipChangeShow.current = true;\n }\n }, [target, show]);\n\n const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n const focusables = getFocusables(popoverRef);\n if (e.shiftKey && e.key === 'Tab') {\n e.preventDefault();\n focusables[focusables.length - 1].focus();\n }\n };\n\n const progress = loading ? <Progress placement='local' /> : null;\n\n return (\n <Popover\n as={StyledDialog}\n ref={popoverRef}\n target={currentTarget}\n placement={placement}\n show={show}\n open={show}\n >\n <CardHeader\n actions={\n !onSubmit ? (\n <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n <Icon name='times' />\n </Button>\n ) : undefined\n }\n >\n {headingHidden ? (\n <VisuallyHiddenText>{heading}</VisuallyHiddenText>\n ) : (\n <StyledDialogTitle\n variant='h2'\n tabIndex={-1}\n ref={headingRef}\n onKeyDown={onTitleKeyDown}\n >\n {heading}\n </StyledDialogTitle>\n )}\n </CardHeader>\n <CardContent>\n {children}\n {progress}\n </CardContent>\n {onSubmit && (\n <CardFooter justify='between'>\n <Button variant='secondary' onClick={() => setShow(false)}>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n onClick={() => onSubmit({ close: () => setShow(false) })}\n disabled={loading}\n >\n {t('submit')}\n </Button>\n </CardFooter>\n )}\n </Popover>\n );\n }\n);\n\nexport default Dialog;\n"]}
1	+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent,\n usePrevious,\n useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n target: HTMLElement \| null;\n placement?: PopoverProps['placement'];\n children: PopoverProps['children'];\n heading: string;\n headingHidden?: boolean;\n onSubmit?: (arg: { close: () => void }) => void;\n onClose?: () => void;\n onOpen?: () => void;\n loading?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialog = styled.dialog(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n border: none;\n min-width: ${contentWidth.sm};\n max-width: ${contentWidth.lg};\n `;\n }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nconst StyledDialogTitle = styled(Text)(\n ({\n theme: {\n base: { shadow, 'border-radius': borderRadius }\n }\n }) => {\n return css`\n position: relative;\n ::after {\n content: '';\n border-radius: ${borderRadius};\n position: absolute;\n inset: -0.25rem;\n }\n :focus-visible {\n outline: none;\n ::after {\n box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n }\n }\n `;\n }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n const [target, setTarget] = useState<HTMLElement \| null>(null);\n const [loading, setLoading] = useState(false);\n\n const setTargetWithEvent = (e: ReactMouseEvent \| ReactKeyboardEvent) => {\n if (e.target instanceof HTMLElement) {\n setTarget(e.target);\n }\n };\n\n return {\n target,\n loading,\n setLoading,\n events: {\n onMouseDown: (e: ReactMouseEvent) => {\n setTargetWithEvent(e);\n },\n onKeyDown: (e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n setTargetWithEvent(e);\n }\n }\n },\n setTargetWithEvent\n };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n (\n {\n target,\n placement,\n heading,\n headingHidden = false,\n onSubmit,\n onClose,\n onOpen,\n loading,\n children\n }: PropsWithoutRef<DialogProps>,\n ref: DialogProps['ref']\n ) => {\n const t = useI18n();\n const headingId = useUID();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n const headingRef = useRef<HTMLSpanElement>(null);\n const [currentTarget, setCurrentTarget] = useState(() => target);\n const [show, setShow] = useState(false);\n const skipChangeShow = useRef(false);\n const prevTarget = usePrevious(target);\n useEscape(\n () => {\n if (show) {\n setShow(false);\n }\n },\n undefined,\n [show, setShow]\n );\n useOuterEvent('mousedown', [target, popoverEl], () => {\n if (target && popoverEl && show) {\n setShow(false);\n onClose?.();\n }\n });\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n if (!show) {\n currentTarget?.focus();\n }\n }, [show]);\n\n useEffect(() => {\n if (show && popoverEl) {\n if (headingRef.current) {\n headingRef.current.focus();\n } else {\n const focusables = getFocusables(popoverRef);\n focusables[0]?.focus();\n }\n }\n }, [show, popoverEl]);\n\n useLayoutEffect(() => {\n const onTargetClick = (e: MouseEvent) => {\n setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n if (!skipChangeShow.current) {\n setShow(prev => !prev);\n } else {\n skipChangeShow.current = false;\n }\n };\n if (target instanceof HTMLElement) {\n target.addEventListener('click', onTargetClick);\n }\n return () => {\n if (target instanceof HTMLElement) {\n target.removeEventListener('click', onTargetClick);\n }\n };\n }, [target]);\n\n useEffect(() => {\n if (show) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [show]);\n\n useEffect(() => {\n /* If our target is changing and the popover is already open we will want\n to skip the next change. The next show change would come from a click on the new button,\n the popover should stay open. */\n if (target !== prevTarget && show) {\n skipChangeShow.current = true;\n }\n }, [target, show]);\n\n const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n const focusables = getFocusables(popoverRef);\n if (e.shiftKey && e.key === 'Tab') {\n e.preventDefault();\n focusables[focusables.length - 1].focus();\n }\n };\n\n const progress = loading ? <Progress placement='local' /> : null;\n\n return (\n <Popover\n as={StyledDialog}\n ref={popoverRef}\n target={currentTarget}\n placement={placement}\n show={show}\n open={show}\n aria-labelledby={headingId}\n >\n <CardHeader\n actions={\n !onSubmit ? (\n <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n <Icon name='times' />\n </Button>\n ) : undefined\n }\n >\n {headingHidden ? (\n <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n ) : (\n <StyledDialogTitle\n variant='h2'\n tabIndex={-1}\n ref={headingRef}\n onKeyDown={onTitleKeyDown}\n id={headingId}\n >\n {heading}\n </StyledDialogTitle>\n )}\n </CardHeader>\n <CardContent>\n {children}\n {progress}\n </CardContent>\n {onSubmit && (\n <CardFooter justify='between'>\n <Button variant='secondary' onClick={() => setShow(false)}>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n onClick={() => onSubmit({ close: () => setShow(false) })}\n disabled={loading}\n >\n {t('submit')}\n </Button>\n </CardFooter>\n )}\n </Popover>\n );\n }\n);\n\nexport default Dialog;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,~~CA0FzE~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGjF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgGzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -87,7 +87,7 @@ const ExpandCollapse = forwardRef((props, refArg) => {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, "aria-expanded": collapsed ? 'false' : 'true', children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}
1	+ {"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ReactNode,\n PropsWithoutRef,\n useState,\n useLayoutEffect,\n useCallback,\n CSSProperties\n} from 'react';\n\nimport { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n /** Content to expand/collapse. /\n children?: ReactNode;\n /\n If true,the content will be hidden.\n * @default false\n /\n collapsed?: boolean;\n /\n Used to determine the transition property.\n * @default \"height\"\n /\n dimension?: 'height' \| 'width';\n /* Minimum height/width to collapse to. This will set the starting collapsed size as well. /\n min?: string;\n /* Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. /\n max?: string;\n /* Callback fired after content collapsed. /\n onAfterCollapse?: () => void;\n /* Callback fired after content expanded. /\n onAfterExpand?: () => void;\n /* Callback fired before content collapsed. /\n onBeforeCollapse?: () => void;\n /* Callback fired before content expanded. /\n onBeforeExpand?: () => void;\n /\n Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n * @default \"0.25s\"\n /\n transitionSpeed?: string;\n /\n If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n ExpandCollapseProps,\n 'collapsed' \| 'dimension' \| 'transitionSpeed' \| 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' \| 'collapsing' \| 'expanded' \| 'expanding';\n\ninterface GetStyleProps\n extends Pick<\n ExpandCollapsePropsWithDefaults,\n 'dimension' \| 'transitionSpeed' \| 'min' \| 'max' \| 'nullWhenCollapsed'\n > {\n status: Statuses;\n el?: HTMLElement \| null;\n transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n el: HTMLElement,\n dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n if (!el) return '';\n return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n const {\n status,\n dimension,\n transitionSpeed,\n transitionTimingFunction,\n min,\n max,\n nullWhenCollapsed,\n el\n } = props;\n const style: CSSProperties = {};\n let maxSize = max;\n\n if (el && !max) {\n maxSize = getScrollSize(el, dimension!);\n }\n\n if (status === 'expanded' \|\| status === 'collapsed') {\n if (max \|\| min) {\n style[dimension as 'height' \| 'width'] = status === 'expanded' ? maxSize : min \|\| 0;\n style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n }\n\n if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n style.display = 'none';\n }\n }\n\n if (status === 'expanding' \|\| status === 'collapsing') {\n style[dimension as 'height' \| 'width'] = status === 'expanding' ? maxSize : min \|\| 0;\n style.overflow = 'hidden';\n style.transitionProperty = dimension;\n style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n style.transitionTimingFunction = transitionTimingFunction;\n }\n\n return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) => {\n const {\n base: { animation: themeAnimation }\n } = useTheme();\n\n const {\n children,\n dimension = 'height',\n collapsed = false,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n transitionSpeed = themeAnimation.speed,\n min,\n max,\n nullWhenCollapsed = false,\n as: Tag = 'div',\n ...restProps\n } = props;\n\n const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n const styleStateHook = useState<CSSProperties>();\n const setStyle = styleStateHook[1];\n let style = styleStateHook[0];\n const previousStatus = usePrevious(status);\n const ref = useConsolidatedRef(refArg);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.target !== ref.current \|\| e.propertyName !== dimension) return;\n setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n },\n [ref.current, status]\n );\n\n useLayoutEffect(() => {\n const wantsToCollapse = collapsed;\n const wantsToExpand = !collapsed;\n const canCollapse = ['expanded', 'expanding'].includes(status);\n const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n if (wantsToExpand && canExpand) {\n onBeforeExpand?.();\n setStatus('expanding');\n } else if (wantsToCollapse && canCollapse) {\n onBeforeCollapse?.();\n setStatus('collapsing');\n }\n\n if (status === 'expanded' && previousStatus !== 'expanded') {\n onAfterExpand?.();\n } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n onAfterCollapse?.();\n }\n\n setStyle(\n getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status,\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n })\n );\n }, [collapsed, status, min, max]);\n\n if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n style = getStyle({\n dimension,\n min,\n max,\n transitionSpeed,\n nullWhenCollapsed,\n status: status === 'expanding' ? 'collapsing' : 'expanding',\n el: ref.current,\n transitionTimingFunction: themeAnimation.timing.ease\n });\n }\n\n return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n <Tag\n ref={ref}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n style={style}\n aria-expanded={collapsed ? 'false' : 'true'}\n >\n {children}\n </Tag>\n );\n }\n);\n\nexport default ExpandCollapse;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;~~SAsClE~~,CAAC;AAIF,eAAO,MAAM,gBAAgB,~~8GAsC5B~~,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMtD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,sBAAsB;UAAyB,OAAO;SAyClE,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAqC5B,CAAC;AAoBF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -9,43 +9,45 @@ import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
-import { useI18n, useUID } from '../../hooks';
+import { useDirection, useI18n, useUID } from '../../hooks';
 import { calculateFontSize } from '../../styles';
 registerIcon(caretRightIcon);
-export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => css `
-    width: 100%;
-    margin-bottom: 0;
-    ${open &&
-    css `
-      margin-block-end: calc(1.5 * ${spacing});
-    `}
-    transition: margin-block-end ${animation.speed} ${animation.timing.ease};
+export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      width: 100%;
+      margin-bottom: 0;
+      ${open &&
+        css `
+        margin-block-end: calc(1.5 * ${spacing});
+      `}
+      transition: margin-block-end ${animation.speed} ${animation.timing.ease};
-    button ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
+      button ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
-    button[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-    button[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(0);
-    }
+      button[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+      button[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
-    > ${StyledFlex} ${StyledButton} {
-      min-height: ${hitAreaMouse};
+      > ${StyledFlex} ${StyledButton} {
+        min-height: ${hitAreaMouse};
-      @media (pointer: 'coarse') {
-        min-height: ${hitAreaFinger};
+        @media (pointer: 'coarse') {
+          min-height: ${hitAreaFinger};
+        }
       }
-    }
-  `);
+    `;
+});
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
-export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
+export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
       border: none;
-      margin-block-start: calc(3 * ${spacing});
       ${StyledFieldGroupLegend} ${StyledButton} {
         font-weight: inherit;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(0);\n }\n\n > ${StyledFlex} ${StyledButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n margin-block-start: calc(3 * ${spacing});\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Flex container={{ direction: 'column', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Flex>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
1	+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex, { StyledFlex } from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. /\n children: ReactNode;\n /* A description of the field group to be displayed above the controls. /\n description?: string;\n /\n If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n /\n collapsible?: boolean;\n /\n If true, the Field Group will be collapsed on the first render.\n * @default false\n /\n defaultCollapsed?: boolean;\n /* The name associated with the Field Group. /\n name?: string;\n /* An array of actions to add to the header. /\n actions?: ActionsProps['items'];\n /* A reference to the wrapping element. /\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n button ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n button[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n button[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n\n > ${StyledFlex} ${StyledButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n ${StyledFieldGroupLegend} ${StyledButton} {\n font-weight: inherit;\n }\n\n & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupLegend} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n {children}\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Flex container={{ direction: 'column', gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Flex>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions}>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <span>{name}</span>\n </Flex>\n </Button>\n ) : (\n <span>{name}</span>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}

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

@@ -7,7 +7,7 @@ export interface FormControlProps extends BaseProps {
      */
     id?: string;
     /** Set visual state based on a validation state. */
-    status?: 'success' | 'warning' | 'error';
+    status?: 'success' | 'warning' | 'error' | 'pending';
     /** Pass a string or a fragment with an Icon and string. */
     label?: ReactNode;
     /** Visually hides the label region. */
@@ -33,8 +33,12 @@ export interface FormControlProps extends BaseProps {
     readOnly?: boolean;
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: string;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: (accepted: boolean) => void;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>>, never>;
+export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;
 export default FormControl;
 //# sourceMappingURL=FormControl.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAGvF~~,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;~~IACzC~~,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;~~CACf~~;AAID,eAAO,MAAM,iBAAiB,~~0MAwE5B,~~CAAC;~~AAIH~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAIzE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,iBAAiB;;SA2G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,53 +1,78 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { mix, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { calculateFontSize } from '../../styles';
-export const StyledFormControl = styled.div(props => {
-    const { theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status } = props;
+export const StyledFormControl = styled.div(({ theme: { base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale, animation: { speed, timing }, palette }, components: { 'form-field': formField, 'form-control': { 'foreground-color': foreground, 'background-color': background, 'border-color': brd, 'border-radius': radius, 'border-width': borderWidth, ':hover': { 'border-color': hoverBorderColor }, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }, ':disabled': { 'border-color': disabledBorderColor, 'background-color': disabledBackgroundColor }, ':read-only': { 'border-color': readOnlyBorderColor, 'background-color': readOnlyBackgroundColor } } } }, status, hasSuggestion }) => {
     const fontSize = calculateFontSize(baseFontSize, baseFontScale);
     const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;
+    const backgroundColor = hasSuggestion && status
+        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
+        : background;
     return css `
-    color: ${foreground};
-    background-color: ${background};
-    border-radius: calc(${baseRadius} * ${radius});
-    border-color: ${borderColor};
-    border-width: ${borderWidth};
-    border-style: solid;
-    &,
-    & > select {
-      outline: none;
-    }
+      color: ${foreground};
+      background-color: ${backgroundColor};
+      border-radius: calc(${baseRadius} * ${radius});
+      border-color: ${borderColor};
+      border-width: ${borderWidth};
+      border-style: solid;
+      transition: all ${timing.ease} ${speed};
+      &,
+      & > select {
+        outline: none;
+      }
+      &:disabled,
+      &[disabled] {
+        background-color: ${disabledBackgroundColor};
+        border-color: ${disabledBorderColor};
+        cursor: not-allowed;
+      }
-    &:disabled,
-    &[disabled] {
-      background-color: ${disabledBackgroundColor};
-      border-color: ${disabledBorderColor};
-      cursor: not-allowed;
-    }
+      &:focus:not([disabled]) {
+        border-color: ${focusBorderColor};
+        box-shadow: ${shadow};
+        ${hasSuggestion &&
+        css `
+          background-color: ${background};
+        `}
+      }
-    &:focus:not([disabled]) {
-      border-color: ${focusBorderColor};
-      box-shadow: ${shadow};
-    }
+      &:focus-within:not([disabled]) {
+        ${hasSuggestion &&
+        css `
+          background-color: ${background};
+        `}
+      }
-    ${!status &&
+      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+        ${!status &&
+        css `
+          border-color: ${hoverBorderColor};
+        `}
+        ${hasSuggestion &&
         css `
-      &:hover:not([readonly]):not([disabled]):not(:focus) {
-        border-color: ${hoverBorderColor};
+          background-color: ${background};
+          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};
+        `}
       }
-    `}
-    &[readonly] {
-      background-color: ${readOnlyBackgroundColor};
-      border-color: ${readOnlyBorderColor};
-    }
+      ${hasSuggestion &&
+        css `
+        border-end-end-radius: 0;
+      `}
+      &[readonly] {
+        background-color: ${readOnlyBackgroundColor};
+        border-color: ${readOnlyBorderColor};
+      }
-    @media (pointer: coarse) {
-      /* stylelint-disable-next-line unit-allowed-list */
-      font-size: max(${fontSize.s}, 16px);
-    }
-  `;
+      @media (pointer: coarse) {
+        /* stylelint-disable-next-line unit-allowed-list */
+        font-size: max(${fontSize.s}, 16px);
+      }
+    `;
 });
 StyledFormControl.defaultProps = defaultThemeProp;
 const FormControl = forwardRef((props, ref) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;~~AAGhD~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;~~AAuCjD~~,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,~~CAA+B~~,~~KAAK,~~CAAC,~~EAAE;IAChF~~,~~MAAM,EACJ,~~KAAK,EAAE,EACL,IAAI,EAAE,~~EAAE~~,eAAe,EAAE,UAAU,~~EAAE~~,WAAW,EAAE,YAAY,~~EAAE~~,YAAY,EAAE,aAAa,EAAE,~~EAC7F~~,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,~~EACP~~,~~GAAG~~,~~KAAK~~,~~CAAC~~;~~IACV~~,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;~~IAEhE~~,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;~~IAE1F~~,OAAO,GAAG,CAAA;~~aACC~~,UAAU;~~wBACC~~,~~UAAU~~;~~0BACR~~,UAAU,MAAM,MAAM;~~oBAC5B~~,WAAW;~~oBACX~~,WAAW~~;;;;;;;;;0BASL~~,uBAAuB;~~sBAC3B~~,mBAAmB;;;;;~~sBAKnB~~,gBAAgB;~~oBAClB~~,MAAM~~;;;MAGpB~~,CAAC,MAAM;QACT,GAAG,CAAA~~;;wBAEiB~~,gBAAgB;;~~KAEnC~~;;;~~0BAGqB~~,uBAAuB;~~sBAC3B~~,mBAAmB;;;;;~~uBAKlB~~,QAAQ,CAAC,CAAC;;~~GAE9B~~,CAAC;AACJ,CAAC,~~CAAC~~,CAAC;~~AAEH~~,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: string;\n /* Set visual state based on a validation state. /\n status?: 'success' \| 'warning' \| 'error';\n /* Pass a string or a fragment with an Icon and string. /\n label?: ReactNode;\n /* Visually hides the label region. /\n labelHidden?: boolean;\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: ReactNode;\n /* Indicate if the field is required. The browser defaults to false. /\n required?: boolean;\n /* Placeholder text. The browser defaults to an empty string. /\n placeholder?: string;\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: string;\n /\n If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n /\n defaultValue?: string;\n /* Disable the control. The browser defaults to false. /\n disabled?: boolean;\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: string;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults~~>(props~~ => {\n ~~const~~ {\n theme: {\n base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'foreground-color': foreground,\n 'background-color': background,\n 'border-color': brd,\n 'border-radius': radius,\n 'border-width': borderWidth,\n ':hover': { 'border-color': hoverBorderColor },\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n ':disabled': {\n 'border-color': disabledBorderColor,\n 'background-color': disabledBackgroundColor\n },\n ':read-only': {\n 'border-color': readOnlyBorderColor,\n 'background-color': readOnlyBackgroundColor\n }\n }\n }\n },\n status\n } = ~~props;\~~n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n return css`\n color: ${foreground};\n background-color: ${~~background~~};\n border-radius: calc(${baseRadius} ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\n &,\n & > select {\n outline: none;\n }\n\n &:disabled,\n &[disabled] {\n background-color: ${disabledBackgroundColor};\n border-color: ${disabledBorderColor};\n cursor: not-allowed;\n }\n\n &:focus:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n\n ${~~!status~~ &&\n css`\n &:hover:not([readonly]):not([disabled]):not(:focus) {\n border-color: ${hoverBorderColor};\n }\n `}\n\n &[readonly] {\n background-color: ${readOnlyBackgroundColor};\n border-color: ${readOnlyBorderColor};\n }\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n font-size: max(${fontSize.s}, 16px);\n }\n `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n return <StyledFormControl ref={ref} {...props} />;\n }\n);\n\nexport default FormControl;\n"]}
1	+ {"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAyCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;wBAET,MAAM,CAAC,IAAI,IAAI,KAAK;;;;;;;;4BAQhB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nexport interface FormControlProps extends BaseProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: string;\n /* Set visual state based on a validation state. /\n status?: 'success' \| 'warning' \| 'error' \| 'pending';\n /* Pass a string or a fragment with an Icon and string. /\n label?: ReactNode;\n /* Visually hides the label region. /\n labelHidden?: boolean;\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: ReactNode;\n /* Indicate if the field is required. The browser defaults to false. /\n required?: boolean;\n /* Placeholder text. The browser defaults to an empty string. /\n placeholder?: string;\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: string;\n /\n If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n /\n defaultValue?: string;\n /* Disable the control. The browser defaults to false. /\n disabled?: boolean;\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: string;\n /* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<\n FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n ({\n theme: {\n base: {\n 'border-radius': baseRadius,\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n animation: { speed, timing },\n palette\n },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'foreground-color': foreground,\n 'background-color': background,\n 'border-color': brd,\n 'border-radius': radius,\n 'border-width': borderWidth,\n ':hover': { 'border-color': hoverBorderColor },\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n ':disabled': {\n 'border-color': disabledBorderColor,\n 'background-color': disabledBackgroundColor\n },\n ':read-only': {\n 'border-color': readOnlyBorderColor,\n 'background-color': readOnlyBackgroundColor\n }\n }\n }\n },\n status,\n hasSuggestion\n }) => {\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n const backgroundColor =\n hasSuggestion && status\n ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n : background;\n\n return css`\n color: ${foreground};\n background-color: ${backgroundColor};\n border-radius: calc(${baseRadius} ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\n transition: all ${timing.ease} ${speed};\n &,\n & > select {\n outline: none;\n }\n\n &:disabled,\n &[disabled] {\n background-color: ${disabledBackgroundColor};\n border-color: ${disabledBorderColor};\n cursor: not-allowed;\n }\n\n &:focus:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:focus-within:not([disabled]) {\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n ${!status &&\n css`\n border-color: ${hoverBorderColor};\n `}\n ${hasSuggestion &&\n css`\n background-color: ${background};\n box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n `}\n }\n\n ${hasSuggestion &&\n css`\n border-end-end-radius: 0;\n `}\n\n &[readonly] {\n background-color: ${readOnlyBackgroundColor};\n border-color: ${readOnlyBorderColor};\n }\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n font-size: max(${fontSize.s}, 16px);\n }\n `;\n }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n return <StyledFormControl ref={ref} {...props} />;\n }\n);\n\nexport default FormControl;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;~~AAIf~~,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;~~AAS1D~~,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;~~AAMH~~,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,~~CA4HhD~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,SAAS,EACT,aAAa,EAEb,YAAY,EAMb,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAc,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAY1D,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9E,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAgBD,eAAO,MAAM,mBAAmB,uIAsB/B,CAAC;AAIF,eAAO,MAAM,eAAe,qHAsC1B,CAAC;AA0DH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA0KhD,CAAC;AAEF,eAAe,SAAS,CAAC"}