acinguiux-ds-react-framework 0.1.18 → 0.1.20

package/build/cjs/components/DatePicker/components/RangeDatePicker/RangeDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport Calendar from '../Calendar/Calendar';\nimport { CalendarEvent, ArrowRight } from '../../../Icon/components';\nimport { SingleDatePickerTextInput } from './RangeDatePicker.styles';\nimport type { IRangeDatePickerProps } from './RangeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\n\nconst RangeDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  placeholder,\n  allowClear,\n  className,\n  ...ariaProps\n}: IRangeDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputRefFrom = useRef<HTMLInputElement>(null);\n  const inputRefTo = useRef<HTMLInputElement>(null);\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<DatePickerTypes.RangeDate | undefined>(defaultValue);\n  // openOrigin is used to track which input is currently open ('from' or 'to')\n  const [openOrigin, setOpenOrigin] = useState<'from' | 'to' | undefined>();\n\n  useEffect(() => {\n    setSelectedDate(value);\n  }, [value]);\n\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<{ from: string; to: string }>({ from: '', to: '' });\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback((origin: 'from' | 'to') => {\n    setOpenOrigin(origin);\n    setIsPickerOpen((prev) => !prev);\n  }, []);\n\n  const handleOnPickerOpenChange = useCallback(\n    (isOpen: boolean, origin: 'from' | 'to' | undefined = openOrigin) => {\n      setIsPickerOpen(isOpen);\n\n      if (origin) {\n        if (origin === 'from') {\n          setTimeout(() => inputRefFrom.current?.focus(), 0);\n        }\n        if (origin === 'to') {\n          setTimeout(() => inputRefTo.current?.focus(), 0);\n        }\n        setOpenOrigin(undefined);\n      }\n    },\n    [openOrigin],\n  );\n\n  const handleDayPickerSelect = useCallback(\n    (date: DatePickerTypes.RangeDate | undefined) => {\n      if (!date) {\n        setInputValue({ from: '', to: '' });\n        setSelectedDate(undefined);\n        onChange?.(undefined);\n      } else {\n        setInputValue((prev) => ({\n          ...prev,\n          from: formatDate(date.from ?? prev.from, format),\n          ...(date.to ? { to: formatDate(date.to, format) } : {}),\n        }));\n        setSelectedDate(date);\n        onChange?.(date);\n      }\n\n      // if the picker openOrigin is 'from', and the selected from date is the same as the new date, then close the picker (we assume the user is done selecting the range)\n      if (openOrigin === 'from' && selectedDate?.from === date?.from) {\n        handleOnPickerOpenChange(false, 'to');\n        // if the picker openOrigin is 'to', and the selected from date exists, then close the picker (we assume the user is done selecting the range)\n      } else if (openOrigin === 'to' && date?.from) {\n        handleOnPickerOpenChange(false);\n        // if the picker openOrigin is 'from' and the selected from date exists, then switch to 'to' picker\n      } else if (openOrigin === 'from' && date?.from) {\n        setOpenOrigin('to');\n      }\n    },\n    [format, handleOnPickerOpenChange, onChange, openOrigin, selectedDate],\n  );\n\n  const handleInputChange = (key: 'from' | 'to') => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue((prev) => ({\n      ...prev,\n      [key]: e.target.value,\n    }));\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setInputValue((prev) => ({\n        ...prev,\n        [key]: formatDate(parsedDate ?? prev[key], format),\n      }));\n\n      setSelectedDate(\n        (prev) =>\n          ({\n            ...prev,\n            [key]: parsedDate,\n          }) as DatePickerTypes.RangeDate,\n      );\n      onChange?.({ ...selectedDate, [key]: parsedDate } as DatePickerTypes.RangeDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (origin: 'from' | 'to') => (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker(origin);\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue.to\n          ? `Selected date ${inputValue.from} to ${inputValue.to}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(`${DATE_PICKER_CLASS}-range`, className)}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            readOnly={true}\n            allowClear={false}\n            customPrefix={\n              <TextInput\n                inputRef={inputRefFrom}\n                className={`${DATE_PICKER_CLASS}-range-from`}\n                placeholder={placeholder?.from ?? 'Start date'}\n                disabled={disabled}\n                size={size}\n                value={inputValue.from}\n                onKeyDown={handleOnKeyDown('from')}\n                onChange={handleInputChange('from')}\n                wrapperProps={{\n                  onClick: () => !disabled && togglePicker('from'),\n                }}\n              />\n            }\n            customSuffix={\n              <>\n                <ArrowRight />\n                <TextInput\n                  inputRef={inputRefTo}\n                  className={`${DATE_PICKER_CLASS}-range-to`}\n                  placeholder={placeholder?.to ?? 'End date'}\n                  size={size}\n                  value={inputValue.to}\n                  disabled={disabled}\n                  wrapperProps={{\n                    onClick: () => !disabled && togglePicker('to'),\n                  }}\n                  onKeyDown={handleOnKeyDown('to')}\n                  onChange={handleInputChange('to')}\n                  allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n                  onClear={() => handleDayPickerSelect(undefined)}\n                />\n              </>\n            }\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: () => !disabled && togglePicker('from'),\n            }}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <Calendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"range\"\n          selected={selectedDate}\n          month={selectedDate?.from ?? new Date()}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default RangeDatePicker;\n"],"names":["RangeDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","placeholder","allowClear","className","ariaProps","calendarId","useId","inputRef","useRef","inputRefFrom","inputRefTo","selectedDate","setSelectedDate","useState","openOrigin","setOpenOrigin","useEffect","inputValue","setInputValue","isPickerOpen","setIsPickerOpen","togglePicker","useCallback","origin","prev","handleOnPickerOpenChange","isOpen","_a","handleDayPickerSelect","date","formatDate","handleInputChange","key","e","parsedDate","parse","isValid","handleOnKeyDown","event","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","TextInput","jsxs","Fragment","ArrowRight","CalendarEvent","PopoverContent","Calendar"],"mappings":"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"}
+{"version":3,"file":"RangeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport { CalendarEvent, ArrowRight } from '../../../Icon/components';\nimport { StyledCalendar, SingleDatePickerTextInput } from './RangeDatePicker.styles';\nimport type { IRangeDatePickerProps } from './RangeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\nimport { getNextOriginState, Origin, originToBound } from '../../utils/range';\n\nconst RangeDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  placeholder,\n  allowClear,\n  closeOnComplete = true,\n  className,\n  ...ariaProps\n}: IRangeDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputRefFrom = useRef<HTMLInputElement>(null);\n  const inputRefTo = useRef<HTMLInputElement>(null);\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<DatePickerTypes.RangeDate | undefined>(defaultValue);\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<{ from: string; to: string }>({\n    from: defaultValue?.from ? formatDate(defaultValue.from, format) : '',\n    to: defaultValue?.to ? formatDate(defaultValue.to, format) : '',\n  });\n  // openOrigin is used to track which input is currently open ('from' or 'to')\n  const [openOrigin, setOpenOrigin] = useState<Origin>();\n\n  useEffect(() => {\n    setSelectedDate(value);\n    setInputValue({\n      from: value?.from ? formatDate(value.from, format) : '',\n      to: value?.to ? formatDate(value.to, format) : '',\n    });\n  }, [value, format]);\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback((origin: 'from' | 'to') => {\n    setOpenOrigin(origin);\n    setIsPickerOpen((prev) => !prev);\n  }, []);\n\n  const handleOnPickerOpenChange = useCallback(\n    (isOpen: boolean, origin: Origin = openOrigin) => {\n      setIsPickerOpen(isOpen);\n\n      if (origin) {\n        if (origin === 'from') {\n          setTimeout(() => inputRefFrom.current?.focus(), 0);\n        }\n        if (origin === 'to') {\n          setTimeout(() => inputRefTo.current?.focus(), 0);\n        }\n        setOpenOrigin(undefined);\n      }\n    },\n    [openOrigin],\n  );\n\n  const handleDayPickerSelect = useCallback(\n    (date: DatePickerTypes.RangeDate | undefined) => {\n      if (!date) {\n        setInputValue({ from: '', to: '' });\n        setSelectedDate(undefined);\n        onChange?.(undefined);\n      } else {\n        setInputValue((prev) => ({\n          from: (date.from ?? prev.from) ? formatDate(date.from ?? prev.from, format) : '',\n          to: date.to ? formatDate(date.to, format) : '',\n        }));\n        setSelectedDate(date);\n        onChange?.(date);\n      }\n\n      const { shouldClose, newOrigin } = getNextOriginState(date, selectedDate, openOrigin);\n\n      if (shouldClose && closeOnComplete) {\n        handleOnPickerOpenChange(false, newOrigin);\n      }\n      setOpenOrigin(newOrigin);\n    },\n    [format, closeOnComplete, handleOnPickerOpenChange, onChange, openOrigin, selectedDate],\n  );\n\n  const handleInputChange = (key: 'from' | 'to') => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue((prev) => ({\n      ...prev,\n      [key]: e.target.value,\n    }));\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setInputValue((prev) => ({\n        ...prev,\n        [key]: formatDate(parsedDate ?? prev[key], format),\n      }));\n\n      setSelectedDate(\n        (prev) =>\n          ({\n            ...prev,\n            [key]: parsedDate,\n          }) as DatePickerTypes.RangeDate,\n      );\n      onChange?.({ ...selectedDate, [key]: parsedDate } as DatePickerTypes.RangeDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (origin: 'from' | 'to') => (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker(origin);\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue.to\n          ? `Selected date ${inputValue.from} to ${inputValue.to}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(`${DATE_PICKER_CLASS}-range`, className)}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            readOnly={true}\n            allowClear={false}\n            customPrefix={\n              <TextInput\n                inputRef={inputRefFrom}\n                className={`${DATE_PICKER_CLASS}-range-from`}\n                placeholder={placeholder?.from ?? 'Start date'}\n                data-focused-popover={isPickerOpen && openOrigin === 'from'}\n                disabled={disabled}\n                size={size}\n                value={inputValue.from}\n                onKeyDown={handleOnKeyDown('from')}\n                onChange={handleInputChange('from')}\n                wrapperProps={{\n                  onClick: () => !disabled && togglePicker('from'),\n                }}\n              />\n            }\n            customSuffix={\n              <>\n                <ArrowRight />\n                <TextInput\n                  inputRef={inputRefTo}\n                  className={`${DATE_PICKER_CLASS}-range-to`}\n                  placeholder={placeholder?.to ?? 'End date'}\n                  size={size}\n                  value={inputValue.to}\n                  data-focused-popover={isPickerOpen && openOrigin === 'to'}\n                  disabled={disabled}\n                  wrapperProps={{\n                    onClick: () => !disabled && togglePicker('to'),\n                  }}\n                  onKeyDown={handleOnKeyDown('to')}\n                  onChange={handleInputChange('to')}\n                  allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n                  onClear={() => handleDayPickerSelect(undefined)}\n                />\n              </>\n            }\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: () => !disabled && togglePicker('from'),\n            }}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <StyledCalendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"range\"\n          bound={originToBound(openOrigin)}\n          selected={selectedDate}\n          month={selectedDate?.from ?? new Date()}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default RangeDatePicker;\n"],"names":["RangeDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","placeholder","allowClear","closeOnComplete","className","ariaProps","calendarId","useId","inputRef","useRef","inputRefFrom","inputRefTo","selectedDate","setSelectedDate","useState","inputValue","setInputValue","formatDate","openOrigin","setOpenOrigin","useEffect","isPickerOpen","setIsPickerOpen","togglePicker","useCallback","origin","prev","handleOnPickerOpenChange","isOpen","handleDayPickerSelect","date","shouldClose","newOrigin","getNextOriginState","handleInputChange","key","e","parsedDate","parse","isValid","handleOnKeyDown","event","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","TextInput","jsxs","Fragment","ArrowRight","CalendarEvent","PopoverContent","StyledCalendar","originToBound"],"mappings":"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"}

package/build/cjs/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),t=require("../../../../react-base/src/theme/types/layer.js"),n=require("../../../../react-base/src/components/Input/Input.consts.js"),i=require("../../../../react-base/src/consts/index.js"),s=require("../../../TextInput/TextInput.styles.js"),a=require("../../../TextInput/TextInput.js"),u=require("../../../Flexbox/Flexbox.styles.js"),c=o.styled(a)(({theme:e,size:r=`${i.Sizes.Medium}`})=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),t=require("../../../../react-base/src/theme/types/layer.js"),n=require("../../../../react-base/src/components/Input/Input.consts.js"),a=require("../../../../react-base/src/consts/index.js"),i=require("../../../TextInput/TextInput.styles.js"),s=require("../../../TextInput/TextInput.js"),u=require("../../../Flexbox/Flexbox.styles.js"),l=require("../Calendar/Calendar.js"),c=o.styled(l)``,d=o.styled(s)(({theme:e,size:r=`${a.Sizes.Medium}`})=>`
   &, &:hover, &:active {
     background-color: ${e.layer({foundation:"surface"})[t.Variables.BackgroundFoundation]};
   }
@@ -11,11 +11,11 @@
       display: none;
     }
 
-    > ${s.TextInputWrapper} {
+    > ${i.TextInputWrapper} {
       border-radius: ${n.consts[r].affixBorderRadius}px;
-     &:hover, &:active, &:focus-within {
-        background-color: ${e.layer({selectedProminence:"subtle"})[t.Variables.BackgroundSelected]};
-     }
+      &:hover, &:active, &:focus-within, &:has([data-focused-popover="true"]) {
+          background-color: ${e.layer({selectedProminence:"subtle"})[t.Variables.BackgroundSelected]};
+      }
       flex: 1 1 0;
       width: auto;
       border-color: transparent;
@@ -28,5 +28,5 @@
       display: inline-flex;
     }
   }
-`);exports.SingleDatePickerTextInput=c;
+`);exports.SingleDatePickerTextInput=d;exports.StyledCalendar=c;
 //# sourceMappingURL=RangeDatePicker.styles.js.map

package/build/cjs/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input/index.js';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport { TextInputWrapper } from '../../../TextInput/TextInput.styles';\nimport TextInput from '../../../TextInput/TextInput';\nimport type { ITextInputPropsImpl } from '../../../TextInput/TextInput.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\n\nexport const SingleDatePickerTextInput = styled(TextInput as FC<ITextInputPropsImpl>)(\n  ({ theme, size = `${Sizes.Medium}` }) => `\n  &, &:hover, &:active {\n    background-color: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n  }\n\n  & > ${Flexbox} {\n    flex-direction: row;\n    gap: ${InputConsts.consts[size].containerGap}px;\n\n    > input {\n      display: none;\n    }\n\n    > ${TextInputWrapper} {\n      border-radius: ${InputConsts.consts[size].affixBorderRadius}px;\n     &:hover, &:active, &:focus-within {\n        background-color: ${theme.layer({ selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n     }\n      flex: 1 1 0;\n      width: auto;\n      border-color: transparent;\n      background: none;\n      padding: 0;\n      min-height: auto;\n    }\n\n    > svg {\n      display: inline-flex;\n    }\n  }\n`,\n);\n"],"names":["SingleDatePickerTextInput","styled","TextInput","theme","size","Sizes","Variables","Flexbox","InputConsts.consts","TextInputWrapper"],"mappings":"geAYaA,EAA4BC,EAAAA,OAAOC,CAAoC,EAClF,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,GAAGC,EAAAA,MAAM,MAAM,MAAS;AAAA;AAAA,wBAEnBF,EAAM,MAAM,CAAE,WAAY,UAAW,EAAEG,EAAAA,UAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGtFC,SAAO;AAAA;AAAA,WAEJC,EAAAA,OAAmBJ,CAAI,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCK,kBAAgB;AAAA,uBACDD,EAAAA,OAAmBJ,CAAI,EAAE,iBAAiB;AAAA;AAAA,4BAErCD,EAAM,MAAM,CAAE,mBAAoB,SAAU,EAAEG,EAAAA,UAAU,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAevG"}
+{"version":3,"file":"RangeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { TextInputWrapper } from '../../../TextInput/TextInput.styles';\nimport TextInput from '../../../TextInput/TextInput';\nimport type { ITextInputPropsImpl } from '../../../TextInput/TextInput.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\nimport Calendar from '../Calendar/Calendar';\n\nexport const StyledCalendar = styled(Calendar)<DatePickerTypes.ICalendarProps & DatePickerTypes.IRangeCalendarProps>``;\n\nexport const SingleDatePickerTextInput = styled(TextInput as FC<ITextInputPropsImpl>)(\n  ({ theme, size = `${Sizes.Medium}` }) => `\n  &, &:hover, &:active {\n    background-color: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n  }\n\n  & > ${Flexbox} {\n    flex-direction: row;\n    gap: ${InputConsts.consts[size].containerGap}px;\n\n    > input {\n      display: none;\n    }\n\n    > ${TextInputWrapper} {\n      border-radius: ${InputConsts.consts[size].affixBorderRadius}px;\n      &:hover, &:active, &:focus-within, &:has([data-focused-popover=\"true\"]) {\n          background-color: ${theme.layer({ selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n      }\n      flex: 1 1 0;\n      width: auto;\n      border-color: transparent;\n      background: none;\n      padding: 0;\n      min-height: auto;\n    }\n\n    > svg {\n      display: inline-flex;\n    }\n  }\n`,\n);\n"],"names":["StyledCalendar","styled","Calendar","SingleDatePickerTextInput","TextInput","theme","size","Sizes","Variables","Flexbox","InputConsts.consts","TextInputWrapper"],"mappings":"qgBAcaA,EAAiBC,EAAAA,OAAOC,CAAQ,IAEhCC,EAA4BF,EAAAA,OAAOG,CAAoC,EAClF,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,GAAGC,EAAAA,MAAM,MAAM,MAAS;AAAA;AAAA,wBAEnBF,EAAM,MAAM,CAAE,WAAY,UAAW,EAAEG,EAAAA,UAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGtFC,SAAO;AAAA;AAAA,WAEJC,EAAAA,OAAmBJ,CAAI,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCK,kBAAgB;AAAA,uBACDD,EAAAA,OAAmBJ,CAAI,EAAE,iBAAiB;AAAA;AAAA,8BAEnCD,EAAM,MAAM,CAAE,mBAAoB,SAAU,EAAEG,EAAAA,UAAU,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAezG"}

package/build/cjs/components/DatePicker/components/SingleDatePicker/SingleDatePicker.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("react/jsx-runtime"),o=require("react"),r=require("date-fns"),m=require("../../../../react-base/src/consts/index.js"),q=require("classnames"),_=require("../../../Select/Select.js"),w=require("../../../Popover/Popover.js"),U=require("../Calendar/Calendar.js"),Z=require("../../../Icon/components/CalendarEvent.js"),C=require("../../../../hooks/useFocusRingOnKeyboard.js"),ee=require("./SingleDatePicker.styles.js"),h=require("../../utils/dateAvailabilities.js"),O=require("../../../../react-base/src/consts/classes.js"),te=({size:p=m.Sizes.Medium,picker:S="day",format:u="dd/MM/yyyy",disabled:c,invalid:x,defaultValue:F,value:j,onChange:t,open:f,calendarProps:s,onFocus:L,onBlur:B,onClick:V,onMouseDownCapture:N,placeholder:v="DD/MM/YYYY",allowClear:A,className:D,...$})=>{const z=o.useId(),n=o.useRef(null),{focusKind:g,handleOnClick:E,handleOnFocus:M,handleOnMouseDownCapture:H,handleOnBlur:I}=C.useFocusRingOnKeyboard({onFocus:L,onBlur:B,onClick:V,onMouseDownCapture:N}),[b,a]=o.useState(F);o.useEffect(()=>{a(j)},[j]);const[y,d]=o.useState(""),[K,k]=o.useState(f),W=h.getAvailableMonths(s==null?void 0:s.startMonth,s==null?void 0:s.endMonth),X=h.getAvailableYears(s==null?void 0:s.startMonth,s==null?void 0:s.endMonth);o.useEffect(()=>{k(f)},[f]);const R=o.useCallback(()=>k(e=>!e),[]),T=e=>{k(e),e||setTimeout(()=>{var i;return(i=n.current)==null?void 0:i.focus()},0)},Y=e=>{e?(d(r.format(e,u)),a(e),t==null||t(e)):(d(""),a(void 0),t==null||t(void 0)),T(!1)},G=o.useCallback(e=>{var i;if(!e.relatedTarget||!e.relatedTarget.className.includes("rdp-")){if(I(e),(i=n.current)!=null&&i.value){const Q=r.parse(n.current.value,u,new Date);r.isValid(Q)||(a(void 0),t==null||t(void 0),d(""))}}else M(e)},[u,I,M,t]),J=e=>{d(e.target.value);const i=r.parse(e.target.value,u,new Date);r.isValid(i)?(a(i),t==null||t(i)):(a(void 0),t==null||t(void 0))},P=e=>{e.key===" "&&(e.preventDefault(),R())};return l.jsxs(w.Popover,{open:K,modal:!0,onOpenChange:T,children:[l.jsx("p",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:y!==""?`Selected date ${y}`:"Please type or pick a date. Press space to open the calendar."}),S==="day"&&l.jsx(w.PopoverTrigger,{asChild:!0,children:l.jsx(ee.SingleDatePickerTextInput,{inputRef:n,className:q(O.DATE_PICKER_CLASS,D),"data-focused":g,size:p,disabled:c,invalid:x,onFocus:M,onBlur:G,placeholder:v,allowClear:A?()=>!!b:void 0,onClear:()=>Y(void 0),wrapperProps:{onMouseDownCapture:H,onClick:E},onKeyDown:P,suffix:{node:l.jsx(Z,{}),onClick:e=>{c||(R(),E(e))}},value:y,onChange:J,type:"text","aria-controls":"dialog","aria-expanded":K,"aria-label":"Open calendar to choose date",...$})}),S==="month"&&l.jsx(_,{disabled:c,invalid:x,placeholder:v,className:q(O.DATE_PICKER_CLASS,D),optionLabelProp:"label",options:[{label:"Select Month",options:W.map(e=>({label:r.format(new Date(0,e),"MMMM"),value:`${e}`.padStart(2,"0")}))}]}),S==="year"&&l.jsx(_,{disabled:c,invalid:x,placeholder:v,allowClear:A,className:q(O.DATE_PICKER_CLASS,D),optionLabelProp:"label",options:[{label:"Select Year",options:X.map(e=>({label:e.toString(),value:e.toString()}))}]}),l.jsx(w.PopoverContent,{arrow:!0,sideOffset:12,children:l.jsx(U,{id:`calendar-${z}`,...s,autoFocus:!0,variant:"single",selected:b,month:b,size:p===m.Sizes.XSmall?m.Sizes.Small:p,onSelect:Y})})]})};module.exports=te;
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),s=require("date-fns"),P=require("../../../../react-base/src/consts/index.js"),k=require("classnames"),R=require("../../../Select/Select.js"),q=require("../../../Popover/Popover.js"),J=require("../Calendar/Calendar.js"),Q=require("../../../Icon/components/CalendarEvent.js"),U=require("../../../../hooks/useFocusRingOnKeyboard.js"),Z=require("./SingleDatePicker.styles.js"),T=require("../../utils/dateAvailabilities.js"),w=require("../../../../react-base/src/consts/classes.js"),ee=({size:S=P.Sizes.Medium,picker:h="day",format:n="dd/MM/yyyy",disabled:u,invalid:x,defaultValue:g,value:d,onChange:o,open:D,calendarProps:i,onFocus:Y,onBlur:_,onClick:F,onMouseDownCapture:L,placeholder:f="DD/MM/YYYY",allowClear:O,className:v,...B})=>{const N=a.useId(),p=a.useRef(null),{focusKind:$,handleOnClick:m,handleOnFocus:M,handleOnMouseDownCapture:z,handleOnBlur:j}=U.useFocusRingOnKeyboard({onFocus:Y,onBlur:_,onClick:F,onMouseDownCapture:L}),[b,r]=a.useState(g),[C,l]=a.useState(g?s.format(g,n):"");a.useEffect(()=>{r(d),l(d?s.format(d,n):"")},[d,n]);const[A,y]=a.useState(D),V=T.getAvailableMonths(i?.startMonth,i?.endMonth),H=T.getAvailableYears(i?.startMonth,i?.endMonth);a.useEffect(()=>{y(D)},[D]);const E=a.useCallback(()=>y(e=>!e),[]),I=e=>{y(e),e||setTimeout(()=>p.current?.focus(),0)},K=e=>{e?(l(s.format(e,n)),r(e),o?.(e)):(l(""),r(void 0),o?.(void 0)),I(!1)},W=a.useCallback(e=>{if(!e.relatedTarget||!e.relatedTarget.className.includes("rdp-")){if(j(e),p.current?.value){const c=s.parse(p.current.value,n,new Date);s.isValid(c)||(r(void 0),o?.(void 0),l(""))}}else M(e)},[n,j,M,o]),X=e=>{l(e.target.value);const c=s.parse(e.target.value,n,new Date);s.isValid(c)?(r(c),o?.(c)):(r(void 0),o?.(void 0))},G=e=>{e.key===" "&&(e.preventDefault(),E())};return t.jsxs(q.Popover,{open:A,modal:!0,onOpenChange:I,children:[t.jsx("p",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0px",margin:"-1px",overflow:"hidden",clip:"rect(0px, 0px, 0px, 0px)",whiteSpace:"nowrap",borderWidth:"0px"},children:C!==""?`Selected date ${C}`:"Please type or pick a date. Press space to open the calendar."}),h==="day"&&t.jsx(q.PopoverTrigger,{asChild:!0,children:t.jsx(Z.SingleDatePickerTextInput,{inputRef:p,className:k(w.DATE_PICKER_CLASS,v),"data-focused":$,size:S,disabled:u,invalid:x,onFocus:M,onBlur:W,placeholder:f,allowClear:O?()=>!!b:void 0,onClear:()=>K(void 0),wrapperProps:{onMouseDownCapture:z,onClick:m},onKeyDown:G,suffix:{node:t.jsx(Q,{}),onClick:e=>{u||(E(),m(e))}},value:C,onChange:X,type:"text","aria-controls":"dialog","aria-expanded":A,"aria-label":"Open calendar to choose date",...B})}),h==="month"&&t.jsx(R,{disabled:u,invalid:x,placeholder:f,className:k(w.DATE_PICKER_CLASS,v),optionLabelProp:"label",options:[{label:"Select Month",options:V.map(e=>({label:s.format(new Date(0,e),"MMMM"),value:`${e}`.padStart(2,"0")}))}]}),h==="year"&&t.jsx(R,{disabled:u,invalid:x,placeholder:f,allowClear:O,className:k(w.DATE_PICKER_CLASS,v),optionLabelProp:"label",options:[{label:"Select Year",options:H.map(e=>({label:e.toString(),value:e.toString()}))}]}),t.jsx(q.PopoverContent,{arrow:!0,sideOffset:12,children:t.jsx(J,{id:`calendar-${N}`,...i,autoFocus:!0,variant:"single",selected:b,month:b,size:S===P.Sizes.XSmall?P.Sizes.Small:S,onSelect:K})})]})};module.exports=ee;
 //# sourceMappingURL=SingleDatePicker.js.map

package/build/cjs/components/DatePicker/components/SingleDatePicker/SingleDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/SingleDatePicker/SingleDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\n\nimport Select from '../../../Select/Select';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport Calendar from '../Calendar/Calendar';\nimport { CalendarEvent } from '../../../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../../../hooks/useFocusRingOnKeyboard';\nimport { SingleDatePickerTextInput } from './SingleDatePicker.styles';\nimport { getAvailableMonths, getAvailableYears } from '../../utils/dateAvailabilities';\nimport type { ISingleDatePickerProps } from './SingleDatePicker.types';\n\nconst SingleDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  onFocus,\n  onBlur,\n  onClick,\n  onMouseDownCapture,\n  placeholder = 'DD/MM/YYYY',\n  allowClear,\n  className,\n  ...ariaProps\n}: ISingleDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { focusKind, handleOnClick, handleOnFocus, handleOnMouseDownCapture, handleOnBlur } = useFocusRingOnKeyboard({\n    onFocus,\n    onBlur,\n    onClick,\n    onMouseDownCapture,\n  });\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(defaultValue);\n\n  useEffect(() => {\n    setSelectedDate(value);\n  }, [value]);\n\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<string>('');\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  const availableMonths = getAvailableMonths(calendarProps?.startMonth, calendarProps?.endMonth);\n  const availableYears = getAvailableYears(calendarProps?.startMonth, calendarProps?.endMonth);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback(() => setIsPickerOpen((prev) => !prev), []);\n\n  const handleOnPickerOpenChange = (isOpen: boolean) => {\n    setIsPickerOpen(isOpen);\n\n    if (!isOpen) {\n      // If the picker is closed, focus the input\n      setTimeout(() => inputRef.current?.focus(), 0);\n    }\n  };\n\n  const handleDayPickerSelect = (date: Date | undefined) => {\n    if (!date) {\n      setInputValue('');\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    } else {\n      setInputValue(formatDate(date, format));\n      setSelectedDate(date);\n      onChange?.(date);\n    }\n\n    handleOnPickerOpenChange(false);\n  };\n\n  const onBlurHandler = useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      // If the blur event is triggered by clicking outside the single date picker, trigger the onBlur handler\n      // Otherwise, trigger the onFocus handler\n      if (!event.relatedTarget || !(event.relatedTarget as HTMLElement).className.includes('rdp-')) {\n        handleOnBlur(event);\n        if (inputRef.current?.value) {\n          const parsedDate = parse(inputRef.current.value, format, new Date());\n          if (!isValid(parsedDate)) {\n            setSelectedDate(undefined);\n            onChange?.(undefined);\n            setInputValue('');\n          }\n        }\n      } else {\n        handleOnFocus(event);\n      }\n    },\n    [format, handleOnBlur, handleOnFocus, onChange],\n  );\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.target.value);\n\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setSelectedDate(parsedDate);\n      onChange?.(parsedDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker();\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue !== ''\n          ? `Selected date ${inputValue}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(DATE_PICKER_CLASS, className)}\n            data-focused={focusKind}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            onFocus={handleOnFocus}\n            onBlur={onBlurHandler}\n            placeholder={placeholder}\n            allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n            onClear={() => handleDayPickerSelect(undefined)}\n            wrapperProps={{\n              onMouseDownCapture: handleOnMouseDownCapture,\n              onClick: handleOnClick,\n            }}\n            onKeyDown={handleOnKeyDown}\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: (e) => {\n                if (!disabled) {\n                  togglePicker();\n                  handleOnClick(e);\n                }\n              },\n            }}\n            value={inputValue}\n            onChange={handleInputChange}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      {picker === 'month' && (\n        <Select\n          disabled={disabled}\n          invalid={invalid}\n          placeholder={placeholder}\n          className={classNames(DATE_PICKER_CLASS, className)}\n          optionLabelProp=\"label\"\n          options={[\n            {\n              label: 'Select Month',\n              options: availableMonths.map((month) => ({\n                label: formatDate(new Date(0, month), 'MMMM'),\n                value: `${month}`.padStart(2, '0'),\n              })),\n            },\n          ]}\n        />\n      )}\n      {picker === 'year' && (\n        <Select\n          disabled={disabled}\n          invalid={invalid}\n          placeholder={placeholder}\n          allowClear={allowClear}\n          className={classNames(DATE_PICKER_CLASS, className)}\n          optionLabelProp=\"label\"\n          options={[\n            {\n              label: 'Select Year',\n              options: availableYears.map((year) => ({ label: year.toString(), value: year.toString() })),\n            },\n          ]}\n        />\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <Calendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default SingleDatePicker;\n"],"names":["SingleDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","onFocus","onBlur","onClick","onMouseDownCapture","placeholder","allowClear","className","ariaProps","calendarId","useId","inputRef","useRef","focusKind","handleOnClick","handleOnFocus","handleOnMouseDownCapture","handleOnBlur","useFocusRingOnKeyboard","selectedDate","setSelectedDate","useState","useEffect","inputValue","setInputValue","isPickerOpen","setIsPickerOpen","availableMonths","getAvailableMonths","availableYears","getAvailableYears","togglePicker","useCallback","prev","handleOnPickerOpenChange","isOpen","_a","handleDayPickerSelect","date","formatDate","onBlurHandler","event","parsedDate","parse","isValid","handleInputChange","handleOnKeyDown","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","CalendarEvent","Select","month","year","PopoverContent","Calendar"],"mappings":"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"}
+{"version":3,"file":"SingleDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/SingleDatePicker/SingleDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\n\nimport Select from '../../../Select/Select';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport Calendar from '../Calendar/Calendar';\nimport { CalendarEvent } from '../../../Icon/components';\nimport { useFocusRingOnKeyboard } from '../../../../hooks/useFocusRingOnKeyboard';\nimport { SingleDatePickerTextInput } from './SingleDatePicker.styles';\nimport { getAvailableMonths, getAvailableYears } from '../../utils/dateAvailabilities';\nimport type { ISingleDatePickerProps } from './SingleDatePicker.types';\n\nconst SingleDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  onFocus,\n  onBlur,\n  onClick,\n  onMouseDownCapture,\n  placeholder = 'DD/MM/YYYY',\n  allowClear,\n  className,\n  ...ariaProps\n}: ISingleDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { focusKind, handleOnClick, handleOnFocus, handleOnMouseDownCapture, handleOnBlur } = useFocusRingOnKeyboard({\n    onFocus,\n    onBlur,\n    onClick,\n    onMouseDownCapture,\n  });\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(defaultValue);\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<string>(defaultValue ? formatDate(defaultValue, format) : '');\n\n  useEffect(() => {\n    setSelectedDate(value);\n    setInputValue(value ? formatDate(value, format) : '');\n  }, [value, format]);\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  const availableMonths = getAvailableMonths(calendarProps?.startMonth, calendarProps?.endMonth);\n  const availableYears = getAvailableYears(calendarProps?.startMonth, calendarProps?.endMonth);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback(() => setIsPickerOpen((prev) => !prev), []);\n\n  const handleOnPickerOpenChange = (isOpen: boolean) => {\n    setIsPickerOpen(isOpen);\n\n    if (!isOpen) {\n      // If the picker is closed, focus the input\n      setTimeout(() => inputRef.current?.focus(), 0);\n    }\n  };\n\n  const handleDayPickerSelect = (date: Date | undefined) => {\n    if (!date) {\n      setInputValue('');\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    } else {\n      setInputValue(formatDate(date, format));\n      setSelectedDate(date);\n      onChange?.(date);\n    }\n\n    handleOnPickerOpenChange(false);\n  };\n\n  const onBlurHandler = useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      // If the blur event is triggered by clicking outside the single date picker, trigger the onBlur handler\n      // Otherwise, trigger the onFocus handler\n      if (!event.relatedTarget || !(event.relatedTarget as HTMLElement).className.includes('rdp-')) {\n        handleOnBlur(event);\n        if (inputRef.current?.value) {\n          const parsedDate = parse(inputRef.current.value, format, new Date());\n          if (!isValid(parsedDate)) {\n            setSelectedDate(undefined);\n            onChange?.(undefined);\n            setInputValue('');\n          }\n        }\n      } else {\n        handleOnFocus(event);\n      }\n    },\n    [format, handleOnBlur, handleOnFocus, onChange],\n  );\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.target.value);\n\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setSelectedDate(parsedDate);\n      onChange?.(parsedDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker();\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue !== ''\n          ? `Selected date ${inputValue}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(DATE_PICKER_CLASS, className)}\n            data-focused={focusKind}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            onFocus={handleOnFocus}\n            onBlur={onBlurHandler}\n            placeholder={placeholder}\n            allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n            onClear={() => handleDayPickerSelect(undefined)}\n            wrapperProps={{\n              onMouseDownCapture: handleOnMouseDownCapture,\n              onClick: handleOnClick,\n            }}\n            onKeyDown={handleOnKeyDown}\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: (e) => {\n                if (!disabled) {\n                  togglePicker();\n                  handleOnClick(e);\n                }\n              },\n            }}\n            value={inputValue}\n            onChange={handleInputChange}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      {picker === 'month' && (\n        <Select\n          disabled={disabled}\n          invalid={invalid}\n          placeholder={placeholder}\n          className={classNames(DATE_PICKER_CLASS, className)}\n          optionLabelProp=\"label\"\n          options={[\n            {\n              label: 'Select Month',\n              options: availableMonths.map((month) => ({\n                label: formatDate(new Date(0, month), 'MMMM'),\n                value: `${month}`.padStart(2, '0'),\n              })),\n            },\n          ]}\n        />\n      )}\n      {picker === 'year' && (\n        <Select\n          disabled={disabled}\n          invalid={invalid}\n          placeholder={placeholder}\n          allowClear={allowClear}\n          className={classNames(DATE_PICKER_CLASS, className)}\n          optionLabelProp=\"label\"\n          options={[\n            {\n              label: 'Select Year',\n              options: availableYears.map((year) => ({ label: year.toString(), value: year.toString() })),\n            },\n          ]}\n        />\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <Calendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default SingleDatePicker;\n"],"names":["SingleDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","onFocus","onBlur","onClick","onMouseDownCapture","placeholder","allowClear","className","ariaProps","calendarId","useId","inputRef","useRef","focusKind","handleOnClick","handleOnFocus","handleOnMouseDownCapture","handleOnBlur","useFocusRingOnKeyboard","selectedDate","setSelectedDate","useState","inputValue","setInputValue","formatDate","useEffect","isPickerOpen","setIsPickerOpen","availableMonths","getAvailableMonths","availableYears","getAvailableYears","togglePicker","useCallback","prev","handleOnPickerOpenChange","isOpen","handleDayPickerSelect","date","onBlurHandler","event","parsedDate","parse","isValid","handleInputChange","handleOnKeyDown","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","CalendarEvent","Select","month","year","PopoverContent","Calendar"],"mappings":"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"}

package/build/cjs/components/DatePicker/utils/range.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=i=>i==="to"?"end":"start",l=(i,o,s)=>s==="from"?i?.from&&(o?.from===i.from&&!i.to||o?.to!==i.to||!o?.from&&i?.to&&o?.to)?{shouldClose:!0,newOrigin:"to"}:{shouldClose:!1,newOrigin:"to"}:s==="to"?i?.from&&(o?.to!==i.to||!o?.from&&i?.to&&o?.to)?{shouldClose:!0,newOrigin:"from"}:{shouldClose:!1,newOrigin:"from"}:!o?.from&&!o?.to||o?.to?{shouldClose:!1,newOrigin:"from"}:o?.from&&!o?.to?{shouldClose:!1,newOrigin:"to"}:{shouldClose:!0,newOrigin:void 0};exports.getNextOriginState=l;exports.originToBound=f;
+//# sourceMappingURL=range.js.map

package/build/cjs/components/DatePicker/utils/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sources":["../../../../../src/components/DatePicker/utils/range.ts"],"sourcesContent":["import type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nexport type Origin = 'from' | 'to' | undefined;\n\nexport const originToBound = (origin: Origin): 'start' | 'end' => (origin === 'to' ? 'end' : 'start');\n\nexport const getNextOriginState = (\n  newDate: DatePickerTypes.RangeDate | undefined,\n  currentDate: DatePickerTypes.RangeDate | undefined,\n  currentOrigin: Origin,\n): { shouldClose: boolean; newOrigin: Origin } => {\n  if (currentOrigin === 'from') {\n    if (\n      newDate?.from &&\n      ((currentDate?.from === newDate.from && !newDate.to) ||\n        currentDate?.to !== newDate.to ||\n        (!currentDate?.from && newDate?.to && currentDate?.to))\n    ) {\n      return { shouldClose: true, newOrigin: 'to' };\n    }\n\n    return { shouldClose: false, newOrigin: 'to' };\n  }\n\n  if (currentOrigin === 'to') {\n    if (newDate?.from && (currentDate?.to !== newDate.to || (!currentDate?.from && newDate?.to && currentDate?.to))) {\n      return { shouldClose: true, newOrigin: 'from' };\n    }\n\n    return { shouldClose: false, newOrigin: 'from' };\n  }\n\n  // safety fallback, in case current origin is not known\n  if ((!currentDate?.from && !currentDate?.to) || currentDate?.to) {\n    return { shouldClose: false, newOrigin: 'from' };\n  }\n  if (currentDate?.from && !currentDate?.to) {\n    return { shouldClose: false, newOrigin: 'to' };\n  }\n\n  return { shouldClose: true, newOrigin: undefined };\n};\n"],"names":["originToBound","origin","getNextOriginState","newDate","currentDate","currentOrigin"],"mappings":"4GAIO,MAAMA,EAAiBC,GAAqCA,IAAW,KAAO,MAAQ,QAEhFC,EAAqB,CAChCC,EACAC,EACAC,IAEIA,IAAkB,OAElBF,GAAS,OACPC,GAAa,OAASD,EAAQ,MAAQ,CAACA,EAAQ,IAC/CC,GAAa,KAAOD,EAAQ,IAC3B,CAACC,GAAa,MAAQD,GAAS,IAAMC,GAAa,IAE9C,CAAE,YAAa,GAAM,UAAW,IAAA,EAGlC,CAAE,YAAa,GAAO,UAAW,IAAA,EAGtCC,IAAkB,KAChBF,GAAS,OAASC,GAAa,KAAOD,EAAQ,IAAO,CAACC,GAAa,MAAQD,GAAS,IAAMC,GAAa,IAClG,CAAE,YAAa,GAAM,UAAW,MAAA,EAGlC,CAAE,YAAa,GAAO,UAAW,MAAA,EAIrC,CAACA,GAAa,MAAQ,CAACA,GAAa,IAAOA,GAAa,GACpD,CAAE,YAAa,GAAO,UAAW,MAAA,EAEtCA,GAAa,MAAQ,CAACA,GAAa,GAC9B,CAAE,YAAa,GAAO,UAAW,IAAA,EAGnC,CAAE,YAAa,GAAM,UAAW,MAAA"}

package/build/cjs/components/Divider/Divider.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("react/jsx-runtime"),m=require("react"),d=require("classnames"),q=require("../../react-base/src/consts/classes.js"),D=require("../../react-base/src/components/Divider/Divider.utils.js"),$=require("./Divider.styles.js"),l=m.forwardRef(({className:s,...e},i)=>{const{size:r,direction:t,contrast:n,sentiment:c,sentimentProminence:o,shape:a}=D.useProps(e);return u.jsx($.Divider,{ref:i,className:d(q.DIVIDER_CLASS,s),...e,$size:r,$direction:t,$sentiment:c,$sentimentProminence:o,$contrast:n,$shape:a})});module.exports=l;
+"use strict";const m=require("react/jsx-runtime"),d=require("react"),p=require("classnames"),q=require("../../react-base/src/consts/classes.js"),D=require("../../react-base/src/components/Divider/Divider.utils.js"),$=require("./Divider.styles.js"),l=d.forwardRef(({className:e,...s},r)=>{const{size:t,direction:i,contrast:n,sentiment:c,sentimentProminence:o,shape:a,...u}=D.useProps(s);return m.jsx($.Divider,{ref:r,className:p(q.DIVIDER_CLASS,e),...u,$size:t,$direction:i,$sentiment:c,$sentimentProminence:o,$contrast:n,$shape:a})});module.exports=l;
 //# sourceMappingURL=Divider.js.map

package/build/cjs/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { DIVIDER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DividerUtils } from 'acinguiux-ds-react-base/components/Divider';\n\nimport * as Styled from './Divider.styles';\nimport type { IDividerProps } from './Divider.types';\n\nconst Divider = forwardRef<HTMLHRElement, IDividerProps>(({ className, ...rest }, ref) => {\n  const { size, direction, contrast, sentiment, sentimentProminence, shape } = DividerUtils.useProps(rest);\n\n  return (\n    <Styled.Divider\n      ref={ref}\n      className={classNames(DIVIDER_CLASS, className)}\n      {...rest}\n      $size={size}\n      $direction={direction}\n      $sentiment={sentiment}\n      $sentimentProminence={sentimentProminence}\n      $contrast={contrast}\n      $shape={shape}\n    />\n  );\n});\n\nexport default Divider;\n"],"names":["Divider","forwardRef","className","rest","ref","size","direction","contrast","sentiment","sentimentProminence","shape","DividerUtils.useProps","jsx","Styled.Divider","classNames","DIVIDER_CLASS"],"mappings":"wPASMA,EAAUC,EAAAA,WAAyC,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAAQC,IAAQ,CACxF,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,EAAU,UAAAC,EAAW,oBAAAC,EAAqB,MAAAC,CAAA,EAAUC,EAAAA,SAAsBR,CAAI,EAEvG,OACES,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAAT,EACA,UAAWU,EAAWC,EAAAA,cAAeb,CAAS,EAC7C,GAAGC,EACJ,MAAOE,EACP,WAAYC,EACZ,WAAYE,EACZ,qBAAsBC,EACtB,UAAWF,EACX,OAAQG,CAAA,CAAA,CAGd,CAAC"}
+{"version":3,"file":"Divider.js","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { DIVIDER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DividerUtils } from 'acinguiux-ds-react-base/components/Divider';\n\nimport * as Styled from './Divider.styles';\nimport type { IDividerProps } from './Divider.types';\n\nconst Divider = forwardRef<HTMLHRElement, IDividerProps>(({ className, ...rest }, ref) => {\n  const { size, direction, contrast, sentiment, sentimentProminence, shape, ...props } = DividerUtils.useProps(rest);\n\n  return (\n    <Styled.Divider\n      ref={ref}\n      className={classNames(DIVIDER_CLASS, className)}\n      {...props}\n      $size={size}\n      $direction={direction}\n      $sentiment={sentiment}\n      $sentimentProminence={sentimentProminence}\n      $contrast={contrast}\n      $shape={shape}\n    />\n  );\n});\n\nexport default Divider;\n"],"names":["Divider","forwardRef","className","rest","ref","size","direction","contrast","sentiment","sentimentProminence","shape","props","DividerUtils.useProps","jsx","Styled.Divider","classNames","DIVIDER_CLASS"],"mappings":"wPASMA,EAAUC,EAAAA,WAAyC,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAAQC,IAAQ,CACxF,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,EAAU,UAAAC,EAAW,oBAAAC,EAAqB,MAAAC,EAAO,GAAGC,GAAUC,EAAAA,SAAsBT,CAAI,EAEjH,OACEU,EAAAA,IAACC,EAAAA,QAAA,CACC,IAAAV,EACA,UAAWW,EAAWC,EAAAA,cAAed,CAAS,EAC7C,GAAGS,EACJ,MAAON,EACP,WAAYC,EACZ,WAAYE,EACZ,qBAAsBC,EACtB,UAAWF,EACX,OAAQG,CAAA,CAAA,CAGd,CAAC"}

package/build/cjs/components/Divider/Divider.styles.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),s=require("../../react-base/src/consts/index.js"),$=require("../../react-base/src/components/Divider/Divider.utils.js"),b=e.styled.hr`
-  ${({$size:o,$direction:r,$contrast:n,$sentiment:d,$sentimentProminence:c,$shape:u,theme:l})=>{const{borderRadius:a,borderWidth:h,color:i,width:t}=$.useStyles({size:o,contrast:n,sentimentProminence:c,sentiment:d,shape:u,theme:l});return e.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),s=require("../../react-base/src/consts/index.js"),p=require("../../react-base/src/components/Divider/Divider.utils.js"),$=e.styled.hr`
+  ${({$size:o,$direction:t,$contrast:n,$sentiment:d,$sentimentProminence:c,$shape:u,theme:l})=>{const{borderRadius:a,borderWidth:h,color:i,width:r}=p.useStyles({size:o,contrast:n,sentimentProminence:c,sentiment:d,shape:u,theme:l});return e.css`
       margin: 0;
       border-radius: ${a}px;
       border: ${h}px solid ${i};
-      background-color: ${i};
+      background-color: ${r===1?i:"transparent"};
 
-      ${r===s.Directions.Horizontal&&e.css`
+      ${t===s.Directions.Horizontal&&e.css`
         width: 100%;
-        height: ${t}px;
+        height: ${r}px;
       `}
 
-      ${r===s.Directions.Vertical&&e.css`
+      ${t===s.Directions.Vertical&&e.css`
         height: 100%;
-        width: ${t}px;
+        width: ${r}px;
       `}
     `}}
-`;exports.Divider=b;
+`;exports.Divider=$;
 //# sourceMappingURL=Divider.styles.js.map

package/build/cjs/components/Divider/Divider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.styles.js","sources":["../../../../src/components/Divider/Divider.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { DividerUtils } from 'acinguiux-ds-react-base/components/Divider';\n\nimport type { IDividerProps } from './Divider.types';\n\nexport const Divider = styled.hr<\n  Required<PickTransient<IDividerProps, 'size' | 'contrast' | 'shape'>> &\n    PickTransient<IDividerProps, 'direction' | 'sentiment' | 'sentimentProminence'>\n>`\n  ${({ $size, $direction, $contrast, $sentiment, $sentimentProminence, $shape, theme }) => {\n    const { borderRadius, borderWidth, color, width } = DividerUtils.useStyles({\n      size: $size,\n      contrast: $contrast,\n      sentimentProminence: $sentimentProminence,\n      sentiment: $sentiment,\n      shape: $shape,\n      theme,\n    });\n\n    return css`\n      margin: 0;\n      border-radius: ${borderRadius}px;\n      border: ${borderWidth}px solid ${color};\n      background-color: ${color};\n\n      ${$direction === Directions.Horizontal &&\n      css`\n        width: 100%;\n        height: ${width}px;\n      `}\n\n      ${$direction === Directions.Vertical &&\n      css`\n        height: 100%;\n        width: ${width}px;\n      `}\n    `;\n  }}\n`;\n"],"names":["Divider","styled","$size","$direction","$contrast","$sentiment","$sentimentProminence","$shape","theme","borderRadius","borderWidth","color","width","DividerUtils.useStyles","css","Directions"],"mappings":"yQAOaA,EAAUC,EAAAA,OAAO;AAAA,IAI1B,CAAC,CAAE,MAAAC,EAAO,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,qBAAAC,EAAsB,OAAAC,EAAQ,MAAAC,KAAY,CACvF,KAAM,CAAE,aAAAC,EAAc,YAAAC,EAAa,MAAAC,EAAO,MAAAC,CAAA,EAAUC,EAAAA,UAAuB,CACzE,KAAMX,EACN,SAAUE,EACV,oBAAqBE,EACrB,UAAWD,EACX,MAAOE,EACP,MAAAC,CAAA,CACD,EAED,OAAOM,EAAAA;AAAAA;AAAAA,uBAEYL,CAAY;AAAA,gBACnBC,CAAW,YAAYC,CAAK;AAAA,0BAClBA,CAAK;AAAA;AAAA,QAEvBR,IAAeY,aAAW,YAC5BD,EAAAA;AAAAA;AAAAA,kBAEYF,CAAK;AAAA,OAChB;AAAA;AAAA,QAECT,IAAeY,aAAW,UAC5BD,EAAAA;AAAAA;AAAAA,iBAEWF,CAAK;AAAA,OACf;AAAA,KAEL,CAAC;AAAA"}
+{"version":3,"file":"Divider.styles.js","sources":["../../../../src/components/Divider/Divider.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Directions } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { DividerUtils } from 'acinguiux-ds-react-base/components/Divider';\n\nimport type { IDividerProps } from './Divider.types';\n\nexport const Divider = styled.hr<\n  Required<PickTransient<IDividerProps, 'size' | 'contrast' | 'shape'>> &\n    PickTransient<IDividerProps, 'direction' | 'sentiment' | 'sentimentProminence'>\n>`\n  ${({ $size, $direction, $contrast, $sentiment, $sentimentProminence, $shape, theme }) => {\n    const { borderRadius, borderWidth, color, width } = DividerUtils.useStyles({\n      size: $size,\n      contrast: $contrast,\n      sentimentProminence: $sentimentProminence,\n      sentiment: $sentiment,\n      shape: $shape,\n      theme,\n    });\n\n    return css`\n      margin: 0;\n      border-radius: ${borderRadius}px;\n      border: ${borderWidth}px solid ${color};\n      background-color: ${width === 1 ? color : 'transparent'};\n\n      ${$direction === Directions.Horizontal &&\n      css`\n        width: 100%;\n        height: ${width}px;\n      `}\n\n      ${$direction === Directions.Vertical &&\n      css`\n        height: 100%;\n        width: ${width}px;\n      `}\n    `;\n  }}\n`;\n"],"names":["Divider","styled","$size","$direction","$contrast","$sentiment","$sentimentProminence","$shape","theme","borderRadius","borderWidth","color","width","DividerUtils.useStyles","css","Directions"],"mappings":"yQAOaA,EAAUC,EAAAA,OAAO;AAAA,IAI1B,CAAC,CAAE,MAAAC,EAAO,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,qBAAAC,EAAsB,OAAAC,EAAQ,MAAAC,KAAY,CACvF,KAAM,CAAE,aAAAC,EAAc,YAAAC,EAAa,MAAAC,EAAO,MAAAC,CAAA,EAAUC,EAAAA,UAAuB,CACzE,KAAMX,EACN,SAAUE,EACV,oBAAqBE,EACrB,UAAWD,EACX,MAAOE,EACP,MAAAC,CAAA,CACD,EAED,OAAOM,EAAAA;AAAAA;AAAAA,uBAEYL,CAAY;AAAA,gBACnBC,CAAW,YAAYC,CAAK;AAAA,0BAClBC,IAAU,EAAID,EAAQ,aAAa;AAAA;AAAA,QAErDR,IAAeY,aAAW,YAC5BD,EAAAA;AAAAA;AAAAA,kBAEYF,CAAK;AAAA,OAChB;AAAA;AAAA,QAECT,IAAeY,aAAW,UAC5BD,EAAAA;AAAAA;AAAAA,iBAEWF,CAAK;AAAA,OACf;AAAA,KAEL,CAAC;AAAA"}

package/build/cjs/components/Drawer/Drawer.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),m=require("react"),A=require("classnames"),E=require("rc-drawer"),n=require("../../react-base/src/consts/index.js"),q=require("../Button/Button.js"),H=require("../Icon/components/ChevronLeft.js"),M=require("../Icon/components/Cross.js"),s=require("./Drawer.styles.js"),D=require("./Drawer.consts.js"),b=require("../_internalComponents/ActionBar/ActionBar.js"),F=require("../_internalComponents/InfoBar/InfoBar.js"),L=require("../../react-base/src/consts/classes.js"),N=({className:o,rootClassName:c,...r})=>e.jsx(E,{rootClassName:A(c,o),...r}),S=({children:o,className:c,size:r=n.Sizes.Medium,header:i,actionsAlignment:w=n.Alignments.Right,actionsDirection:h=n.Directions.Horizontal,sticky:$=!1,elevation:u,onClose:l,closeButton:C=!0,backButton:B=!1,padding:v=!0,bgColor:f=!1,headerBorder:x=!0,footerBorder:j=!0,actions:d,getContainer:R,maskMotion:g=D.defaultMaskMotion,motion:k=D.defaultMotion,open:a=!1,...y})=>{const t=m.useRef(null);return m.useLayoutEffect(()=>{a&&document.activeElement&&!t.current&&(t.current=document.activeElement),!a&&t.current&&(t.current.focus(),t.current=null)},[a,t]),e.jsxs(s.Drawer,{as:N,className:`${c} this-new-class-name`,prefixCls:L.DRAWER_CLASS,onClose:l,getContainer:R,motion:k,maskMotion:g,$bgColor:f,$sticky:$,$elevation:u,autoFocus:!0,open:a,...y,children:[!!i&&e.jsxs(s.DrawerHeader,{$size:r,$headerBorder:x,$elevation:u,children:[B?e.jsx(q,{icon:e.jsx(H,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,onClick:l,"aria-label":"Back"}):null,e.jsx(s.DrawerHeaderContent,{children:e.jsx(F,{size:r,direction:n.Directions.Vertical,...i})}),C?e.jsx(q,{icon:e.jsx(M,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,onClick:l,"aria-label":"Close"}):null]}),e.jsx(s.DrawerContent,{$sticky:$,$size:r,$padding:v,$headerBorder:x,$footerBorder:j,$bgColor:f,$hasHeader:!!i,$hasFooter:!!d,children:o}),!!d&&e.jsx(s.DrawerFooter,{$size:r,$footerBorder:j,$elevation:u,children:e.jsx(b,{size:r,actions:d,alignment:w,direction:h})})]})};module.exports=S;
+"use strict";const e=require("react/jsx-runtime"),m=require("react"),E=require("classnames"),H=require("rc-drawer"),n=require("../../react-base/src/consts/index.js"),q=require("../Button/Button.js"),M=require("../Icon/components/ChevronLeft.js"),b=require("../Icon/components/Cross.js"),s=require("./Drawer.styles.js"),D=require("./Drawer.consts.js"),F=require("../_internalComponents/ActionBar/ActionBar.js"),L=require("../_internalComponents/InfoBar/InfoBar.js"),N=require("../../react-base/src/consts/classes.js"),S=({className:o,rootClassName:c,...r})=>e.jsx(H,{rootClassName:E(c,o),...r}),V=({children:o,className:c,size:r=n.Sizes.Medium,header:i,actionsAlignment:w=n.Alignments.Right,actionsDirection:h=n.Directions.Horizontal,sticky:$=!1,zIndex:C,elevation:u,onClose:l,closeButton:B=!0,backButton:v=!1,padding:R=!0,bgColor:x=!1,headerBorder:f=!0,footerBorder:j=!0,actions:d,getContainer:g,maskMotion:k=D.defaultMaskMotion,motion:y=D.defaultMotion,open:a=!1,...A})=>{const t=m.useRef(null);return m.useLayoutEffect(()=>{a&&document.activeElement&&!t.current&&(t.current=document.activeElement),!a&&t.current&&(t.current.focus(),t.current=null)},[a,t]),e.jsxs(s.Drawer,{as:S,className:`${c} this-new-class-name`,prefixCls:N.DRAWER_CLASS,onClose:l,getContainer:g,motion:y,maskMotion:k,$bgColor:x,$sticky:$,$elevation:u,$zIndex:C,autoFocus:!0,open:a,...A,children:[!!i&&e.jsxs(s.DrawerHeader,{$size:r,$headerBorder:f,$elevation:u,children:[v?e.jsx(q,{icon:e.jsx(M,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,onClick:l,"aria-label":"Back"}):null,e.jsx(s.DrawerHeaderContent,{children:e.jsx(L,{size:r,direction:n.Directions.Vertical,...i})}),B?e.jsx(q,{icon:e.jsx(b,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,onClick:l,"aria-label":"Close"}):null]}),e.jsx(s.DrawerContent,{$sticky:$,$size:r,$padding:R,$headerBorder:f,$footerBorder:j,$bgColor:x,$hasHeader:!!i,$hasFooter:!!d,children:o}),!!d&&e.jsx(s.DrawerFooter,{$size:r,$footerBorder:j,$elevation:u,children:e.jsx(F,{size:r,actions:d,alignment:w,direction:h})})]})};module.exports=V;
 //# sourceMappingURL=Drawer.js.map

package/build/cjs/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { type ReactElement, useRef, useLayoutEffect } from 'react';\n\nimport classNames from 'classnames';\nimport RcDrawer, { type DrawerProps } from 'rc-drawer';\nimport { Sizes, Alignments, Directions, DRAWER_CLASS, Variants } from 'acinguiux-ds-react-base/consts';\n\nimport Button from '../Button/Button';\nimport ChevronLeft from '../Icon/components/ChevronLeft';\nimport CrossIcon from '../Icon/components/Cross';\nimport * as Styled from './Drawer.styles';\nimport { defaultMotion, defaultMaskMotion } from './Drawer.consts';\nimport type { IDrawerProps } from './Drawer.types';\nimport ActionBar from '../_internalComponents/ActionBar/ActionBar';\nimport InfoBar from '../_internalComponents/InfoBar/InfoBar';\n\nconst DrawerHoc = ({ className, rootClassName, ...props }: DrawerProps): ReactElement => (\n  <RcDrawer rootClassName={classNames(rootClassName, className)} {...props} />\n);\n\nconst Drawer = ({\n  children,\n  className,\n  size = Sizes.Medium,\n  header,\n  actionsAlignment = Alignments.Right,\n  actionsDirection = Directions.Horizontal,\n  sticky = false,\n  elevation,\n  onClose,\n  closeButton = true,\n  backButton = false,\n  padding = true,\n  bgColor = false,\n  headerBorder = true,\n  footerBorder = true,\n  actions,\n  getContainer,\n  maskMotion = defaultMaskMotion,\n  motion = defaultMotion,\n  open = false,\n  ...rest\n}: IDrawerProps): ReactElement => {\n  const cachedActiveElement = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (open && document.activeElement && !cachedActiveElement.current) {\n      cachedActiveElement.current = document.activeElement as HTMLElement;\n    }\n\n    if (!open && cachedActiveElement.current) {\n      cachedActiveElement.current.focus();\n      cachedActiveElement.current = null;\n    }\n  }, [open, cachedActiveElement]);\n\n  return (\n    <Styled.Drawer\n      as={DrawerHoc}\n      className={`${className} this-new-class-name`}\n      prefixCls={DRAWER_CLASS}\n      onClose={onClose}\n      getContainer={getContainer}\n      motion={motion}\n      maskMotion={maskMotion}\n      $bgColor={bgColor}\n      $sticky={sticky}\n      $elevation={elevation}\n      autoFocus={true}\n      open={open}\n      {...rest}\n    >\n      {!!header && (\n        <Styled.DrawerHeader $size={size} $headerBorder={headerBorder} $elevation={elevation}>\n          {backButton ? (\n            <Button\n              icon={<ChevronLeft />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Back\"\n            />\n          ) : null}\n          <Styled.DrawerHeaderContent>\n            <InfoBar size={size} direction={Directions.Vertical} {...header} />\n          </Styled.DrawerHeaderContent>\n          {closeButton ? (\n            <Button\n              icon={<CrossIcon />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Close\"\n            />\n          ) : null}\n        </Styled.DrawerHeader>\n      )}\n\n      <Styled.DrawerContent\n        $sticky={sticky}\n        $size={size}\n        $padding={padding}\n        $headerBorder={headerBorder}\n        $footerBorder={footerBorder}\n        $bgColor={bgColor}\n        $hasHeader={Boolean(header)}\n        $hasFooter={Boolean(actions)}\n      >\n        {children}\n      </Styled.DrawerContent>\n\n      {!!actions && (\n        <Styled.DrawerFooter $size={size} $footerBorder={footerBorder} $elevation={elevation}>\n          <ActionBar size={size} actions={actions} alignment={actionsAlignment} direction={actionsDirection} />\n        </Styled.DrawerFooter>\n      )}\n    </Styled.Drawer>\n  );\n};\n\nexport default Drawer;\n"],"names":["DrawerHoc","className","rootClassName","props","jsx","RcDrawer","classNames","Drawer","children","size","Sizes","header","actionsAlignment","Alignments","actionsDirection","Directions","sticky","elevation","onClose","closeButton","backButton","padding","bgColor","headerBorder","footerBorder","actions","getContainer","maskMotion","defaultMaskMotion","motion","defaultMotion","open","rest","cachedActiveElement","useRef","useLayoutEffect","jsxs","Styled.Drawer","DRAWER_CLASS","Styled.DrawerHeader","Button","ChevronLeft","Variants","Styled.DrawerHeaderContent","InfoBar","CrossIcon","Styled.DrawerContent","Styled.DrawerFooter","ActionBar"],"mappings":"qgBAeMA,EAAY,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAe,GAAGC,CAAA,IAChDC,EAAAA,IAACC,EAAA,CAAS,cAAeC,EAAWJ,EAAeD,CAAS,EAAI,GAAGE,EAAO,EAGtEI,EAAS,CAAC,CACd,SAAAC,EACA,UAAAP,EACA,KAAAQ,EAAOC,EAAAA,MAAM,OACb,OAAAC,EACA,iBAAAC,EAAmBC,EAAAA,WAAW,MAC9B,iBAAAC,EAAmBC,EAAAA,WAAW,WAC9B,OAAAC,EAAS,GACT,UAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,aAAAC,EAAe,GACf,aAAAC,EAAe,GACf,QAAAC,EACA,aAAAC,EACA,WAAAC,EAAaC,EAAAA,kBACb,OAAAC,EAASC,EAAAA,cACT,KAAAC,EAAO,GACP,GAAGC,CACL,IAAkC,CAChC,MAAMC,EAAsBC,EAAAA,OAA2B,IAAI,EAE3DC,OAAAA,EAAAA,gBAAgB,IAAM,CAChBJ,GAAQ,SAAS,eAAiB,CAACE,EAAoB,UACzDA,EAAoB,QAAU,SAAS,eAGrC,CAACF,GAAQE,EAAoB,UAC/BA,EAAoB,QAAQ,MAAA,EAC5BA,EAAoB,QAAU,KAElC,EAAG,CAACF,EAAME,CAAmB,CAAC,EAG5BG,EAAAA,KAACC,EAAAA,OAAA,CACC,GAAIrC,EACJ,UAAW,GAAGC,CAAS,uBACvB,UAAWqC,EAAAA,aACX,QAAApB,EACA,aAAAQ,EACA,OAAAG,EACA,WAAAF,EACA,SAAUL,EACV,QAASN,EACT,WAAYC,EACZ,UAAW,GACX,KAAAc,EACC,GAAGC,EAEH,SAAA,CAAA,CAAC,CAACrB,GACDyB,OAACG,EAAAA,aAAA,CAAoB,MAAO9B,EAAM,cAAec,EAAc,WAAYN,EACxE,SAAA,CAAAG,EACChB,EAAAA,IAACoC,EAAA,CACC,WAAOC,EAAA,EAAY,EACnB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAjC,EACA,QAASS,EACT,aAAW,MAAA,CAAA,EAEX,KACJd,EAAAA,IAACuC,EAAAA,oBAAA,CACC,SAAAvC,EAAAA,IAACwC,EAAA,CAAQ,KAAAnC,EAAY,UAAWM,EAAAA,WAAW,SAAW,GAAGJ,CAAA,CAAQ,CAAA,CACnE,EACCQ,EACCf,EAAAA,IAACoC,EAAA,CACC,WAAOK,EAAA,EAAU,EACjB,SAAU,GACV,QAASH,EAAAA,SAAS,YAClB,KAAAjC,EACA,QAASS,EACT,aAAW,OAAA,CAAA,EAEX,IAAA,EACN,EAGFd,EAAAA,IAAC0C,EAAAA,cAAA,CACC,QAAS9B,EACT,MAAOP,EACP,SAAUY,EACV,cAAeE,EACf,cAAeC,EACf,SAAUF,EACV,WAAY,EAAQX,EACpB,WAAY,EAAQc,EAEnB,SAAAjB,CAAA,CAAA,EAGF,CAAC,CAACiB,GACDrB,EAAAA,IAAC2C,eAAA,CAAoB,MAAOtC,EAAM,cAAee,EAAc,WAAYP,EACzE,eAAC+B,EAAA,CAAU,KAAAvC,EAAY,QAAAgB,EAAkB,UAAWb,EAAkB,UAAWE,CAAA,CAAkB,CAAA,CACrG,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { type ReactElement, useRef, useLayoutEffect } from 'react';\n\nimport classNames from 'classnames';\nimport RcDrawer, { type DrawerProps } from 'rc-drawer';\nimport { Sizes, Alignments, Directions, DRAWER_CLASS, Variants } from 'acinguiux-ds-react-base/consts';\n\nimport Button from '../Button/Button';\nimport ChevronLeft from '../Icon/components/ChevronLeft';\nimport CrossIcon from '../Icon/components/Cross';\nimport * as Styled from './Drawer.styles';\nimport { defaultMotion, defaultMaskMotion } from './Drawer.consts';\nimport type { IDrawerProps } from './Drawer.types';\nimport ActionBar from '../_internalComponents/ActionBar/ActionBar';\nimport InfoBar from '../_internalComponents/InfoBar/InfoBar';\n\nconst DrawerHoc = ({ className, rootClassName, ...props }: DrawerProps): ReactElement => (\n  <RcDrawer rootClassName={classNames(rootClassName, className)} {...props} />\n);\n\nconst Drawer = ({\n  children,\n  className,\n  size = Sizes.Medium,\n  header,\n  actionsAlignment = Alignments.Right,\n  actionsDirection = Directions.Horizontal,\n  sticky = false,\n  zIndex,\n  elevation,\n  onClose,\n  closeButton = true,\n  backButton = false,\n  padding = true,\n  bgColor = false,\n  headerBorder = true,\n  footerBorder = true,\n  actions,\n  getContainer,\n  maskMotion = defaultMaskMotion,\n  motion = defaultMotion,\n  open = false,\n  ...rest\n}: IDrawerProps): ReactElement => {\n  const cachedActiveElement = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (open && document.activeElement && !cachedActiveElement.current) {\n      cachedActiveElement.current = document.activeElement as HTMLElement;\n    }\n\n    if (!open && cachedActiveElement.current) {\n      cachedActiveElement.current.focus();\n      cachedActiveElement.current = null;\n    }\n  }, [open, cachedActiveElement]);\n\n  return (\n    <Styled.Drawer\n      as={DrawerHoc}\n      className={`${className} this-new-class-name`}\n      prefixCls={DRAWER_CLASS}\n      onClose={onClose}\n      getContainer={getContainer}\n      motion={motion}\n      maskMotion={maskMotion}\n      $bgColor={bgColor}\n      $sticky={sticky}\n      $elevation={elevation}\n      $zIndex={zIndex}\n      autoFocus={true}\n      open={open}\n      {...rest}\n    >\n      {!!header && (\n        <Styled.DrawerHeader $size={size} $headerBorder={headerBorder} $elevation={elevation}>\n          {backButton ? (\n            <Button\n              icon={<ChevronLeft />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Back\"\n            />\n          ) : null}\n          <Styled.DrawerHeaderContent>\n            <InfoBar size={size} direction={Directions.Vertical} {...header} />\n          </Styled.DrawerHeaderContent>\n          {closeButton ? (\n            <Button\n              icon={<CrossIcon />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Close\"\n            />\n          ) : null}\n        </Styled.DrawerHeader>\n      )}\n\n      <Styled.DrawerContent\n        $sticky={sticky}\n        $size={size}\n        $padding={padding}\n        $headerBorder={headerBorder}\n        $footerBorder={footerBorder}\n        $bgColor={bgColor}\n        $hasHeader={Boolean(header)}\n        $hasFooter={Boolean(actions)}\n      >\n        {children}\n      </Styled.DrawerContent>\n\n      {!!actions && (\n        <Styled.DrawerFooter $size={size} $footerBorder={footerBorder} $elevation={elevation}>\n          <ActionBar size={size} actions={actions} alignment={actionsAlignment} direction={actionsDirection} />\n        </Styled.DrawerFooter>\n      )}\n    </Styled.Drawer>\n  );\n};\n\nexport default Drawer;\n"],"names":["DrawerHoc","className","rootClassName","props","jsx","RcDrawer","classNames","Drawer","children","size","Sizes","header","actionsAlignment","Alignments","actionsDirection","Directions","sticky","zIndex","elevation","onClose","closeButton","backButton","padding","bgColor","headerBorder","footerBorder","actions","getContainer","maskMotion","defaultMaskMotion","motion","defaultMotion","open","rest","cachedActiveElement","useRef","useLayoutEffect","jsxs","Styled.Drawer","DRAWER_CLASS","Styled.DrawerHeader","Button","ChevronLeft","Variants","Styled.DrawerHeaderContent","InfoBar","CrossIcon","Styled.DrawerContent","Styled.DrawerFooter","ActionBar"],"mappings":"qgBAeMA,EAAY,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAe,GAAGC,CAAA,IAChDC,EAAAA,IAACC,EAAA,CAAS,cAAeC,EAAWJ,EAAeD,CAAS,EAAI,GAAGE,EAAO,EAGtEI,EAAS,CAAC,CACd,SAAAC,EACA,UAAAP,EACA,KAAAQ,EAAOC,EAAAA,MAAM,OACb,OAAAC,EACA,iBAAAC,EAAmBC,EAAAA,WAAW,MAC9B,iBAAAC,EAAmBC,EAAAA,WAAW,WAC9B,OAAAC,EAAS,GACT,OAAAC,EACA,UAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,aAAAC,EAAe,GACf,aAAAC,EAAe,GACf,QAAAC,EACA,aAAAC,EACA,WAAAC,EAAaC,EAAAA,kBACb,OAAAC,EAASC,EAAAA,cACT,KAAAC,EAAO,GACP,GAAGC,CACL,IAAkC,CAChC,MAAMC,EAAsBC,EAAAA,OAA2B,IAAI,EAE3DC,OAAAA,EAAAA,gBAAgB,IAAM,CAChBJ,GAAQ,SAAS,eAAiB,CAACE,EAAoB,UACzDA,EAAoB,QAAU,SAAS,eAGrC,CAACF,GAAQE,EAAoB,UAC/BA,EAAoB,QAAQ,MAAA,EAC5BA,EAAoB,QAAU,KAElC,EAAG,CAACF,EAAME,CAAmB,CAAC,EAG5BG,EAAAA,KAACC,EAAAA,OAAA,CACC,GAAItC,EACJ,UAAW,GAAGC,CAAS,uBACvB,UAAWsC,EAAAA,aACX,QAAApB,EACA,aAAAQ,EACA,OAAAG,EACA,WAAAF,EACA,SAAUL,EACV,QAASP,EACT,WAAYE,EACZ,QAASD,EACT,UAAW,GACX,KAAAe,EACC,GAAGC,EAEH,SAAA,CAAA,CAAC,CAACtB,GACD0B,OAACG,EAAAA,aAAA,CAAoB,MAAO/B,EAAM,cAAee,EAAc,WAAYN,EACxE,SAAA,CAAAG,EACCjB,EAAAA,IAACqC,EAAA,CACC,WAAOC,EAAA,EAAY,EACnB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAlC,EACA,QAASU,EACT,aAAW,MAAA,CAAA,EAEX,KACJf,EAAAA,IAACwC,EAAAA,oBAAA,CACC,SAAAxC,EAAAA,IAACyC,EAAA,CAAQ,KAAApC,EAAY,UAAWM,EAAAA,WAAW,SAAW,GAAGJ,CAAA,CAAQ,CAAA,CACnE,EACCS,EACChB,EAAAA,IAACqC,EAAA,CACC,WAAOK,EAAA,EAAU,EACjB,SAAU,GACV,QAASH,EAAAA,SAAS,YAClB,KAAAlC,EACA,QAASU,EACT,aAAW,OAAA,CAAA,EAEX,IAAA,EACN,EAGFf,EAAAA,IAAC2C,EAAAA,cAAA,CACC,QAAS/B,EACT,MAAOP,EACP,SAAUa,EACV,cAAeE,EACf,cAAeC,EACf,SAAUF,EACV,WAAY,EAAQZ,EACpB,WAAY,EAAQe,EAEnB,SAAAlB,CAAA,CAAA,EAGF,CAAC,CAACkB,GACDtB,EAAAA,IAAC4C,eAAA,CAAoB,MAAOvC,EAAM,cAAegB,EAAc,WAAYP,EACzE,eAAC+B,EAAA,CAAU,KAAAxC,EAAY,QAAAiB,EAAkB,UAAWd,EAAkB,UAAWE,CAAA,CAAkB,CAAA,CACrG,CAAA,CAAA,CAAA,CAIR"}

package/build/cjs/components/Drawer/Drawer.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("rc-drawer"),t=require("styled-components"),c=require("../../react-base/src/consts/index.js"),i=require("../../react-base/src/theme/types/layer.js"),r=require("../../react-base/src/components/Drawer/Drawer.consts.js"),p=(e=!1)=>e?"raised":"surface",d=t.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("rc-drawer"),t=require("styled-components"),p=require("../../react-base/src/consts/index.js"),l=require("../../react-base/src/theme/types/layer.js"),r=require("../../react-base/src/components/Drawer/Drawer.consts.js"),u=(e=!1)=>e?"raised":"surface",c=t.css`
   &-enter,
   &-appear,
   &-leave {
@@ -11,11 +11,11 @@
     }
   }
 `,b=t.styled($)`
-  ${({prefixCls:e,theme:a,$sticky:n,$bgColor:o,$elevation:l})=>{const s=a.layer({foundation:o?"base":p(l)});return t.css`
-      z-index: ${c.ZIndexes.DRAWER};
+  ${({prefixCls:e,theme:a,$sticky:n,$bgColor:s,$elevation:d,$zIndex:o})=>{const i=a.layer({foundation:s?"base":u(d)});return t.css`
+      z-index: ${o??p.ZIndexes.DRAWER};
       position: fixed;
       inset: 0;
-      color: ${s[i.Variables.TextOnFoundationStrong]};
+      color: ${i[l.Variables.TextOnFoundationStrong]};
       pointer-events: none;
 
       &.${e}-inline {
@@ -26,7 +26,7 @@
         &-mask {
           position: absolute;
           inset: 0;
-          z-index: ${c.ZIndexes.DRAWER};
+          z-index: ${o??p.ZIndexes.DRAWER};
           pointer-events: auto;
           background-color: ${a.globals("others").mask};
 
@@ -60,7 +60,7 @@
 
         &-content-wrapper {
           position: absolute;
-          z-index: ${c.ZIndexes.DRAWER};
+          z-index: ${o??p.ZIndexes.DRAWER};
           transition: transform 0.3s ease-out;
 
           &-hidden {
@@ -94,7 +94,7 @@
           &.panel-motion {
             /* Left */
             &-left {
-              ${d};
+              ${c};
               &-enter,
               &-appear {
                 &-start {
@@ -117,7 +117,7 @@
 
             /* Right */
             &-right {
-              ${d};
+              ${c};
               &-enter,
               &-appear {
                 &-start {
@@ -140,7 +140,7 @@
 
             /* Top */
             &-top {
-              ${d};
+              ${c};
               &-enter,
               &-appear {
                 &-start {
@@ -163,7 +163,7 @@
 
             /* Bottom */
             &-bottom {
-              ${d};
+              ${c};
               &-enter,
               &-appear {
                 &-start {
@@ -192,21 +192,21 @@
           height: 100%;
           width: 100%;
           pointer-events: auto;
-          background: ${s[i.Variables.BackgroundFoundation]};
+          background: ${i[l.Variables.BackgroundFoundation]};
           overflow: hidden;
 
           ${!n&&t.css`
             overflow-y: auto;
           `}
 
-          ${l&&t.css`
+          ${d&&t.css`
             filter: ${a.dropShadows.high1};
           `}
         }
       }
     `}}
 `,v=t.styled.div`
-  ${({$size:e,$padding:a,$sticky:n,$headerBorder:o,$footerBorder:l,$hasHeader:s,$hasFooter:u,$bgColor:m})=>t.css`
+  ${({$size:e,$padding:a,$sticky:n,$headerBorder:s,$footerBorder:d,$hasHeader:o,$hasFooter:i,$bgColor:m})=>t.css`
     display: flex;
     flex-direction: column;
 
@@ -218,28 +218,28 @@
       padding-inline: ${r.consts[e].padding};
     `}
 
-     ${(s&&(o||m)||!s)&&t.css`
+     ${(o&&(s||m)||!o)&&t.css`
       padding-block-start: ${r.consts[e].padding};
     `}
 
-        ${(u&&(l||m)||!u)&&t.css`
+        ${(i&&(d||m)||!i)&&t.css`
       padding-block-end: ${r.consts[e].padding};
     `}
   `}
 `,f=t.styled.div`
   ${({$size:e,$elevation:a,theme:n})=>t.css`
-    z-index: ${c.ZIndexes.ELEVATED};
+    z-index: ${p.ZIndexes.ELEVATED};
     display: flex;
     align-items: flex-start;
     min-height: auto;
     padding: ${r.consts[e].padding};
-    background: ${n.layer({foundation:p(a)})[i.Variables.BackgroundFoundation]};
+    background: ${n.layer({foundation:u(a)})[l.Variables.BackgroundFoundation]};
   `}
 `,g=t.styled.div`
   flex: 1 0 0;
   align-self: center;
 `,y=t.styled(f)`
-  ${({$headerBorder:e,$elevation:a,$size:n,theme:o})=>t.css`
+  ${({$headerBorder:e,$elevation:a,$size:n,theme:s})=>t.css`
     gap: 12px;
 
     & > button:first-child {
@@ -250,7 +250,7 @@
 
     ${e&&t.css`
       border-bottom: 1px solid
-        ${o.layer({foundation:p(a)})[i.Variables.BorderOnFoundationSubtle]};
+        ${s.layer({foundation:u(a)})[l.Variables.BorderOnFoundationSubtle]};
     `}
   `}
 `,w=t.styled(f)`
@@ -260,7 +260,7 @@
 
     ${e&&t.css`
       border-top: 1px solid
-        ${n.layer({foundation:p(a)})[i.Variables.BorderOnFoundationSubtle]};
+        ${n.layer({foundation:u(a)})[l.Variables.BorderOnFoundationSubtle]};
     `}
   `}
 `;exports.Drawer=b;exports.DrawerContent=v;exports.DrawerFooter=w;exports.DrawerHeader=y;exports.DrawerHeaderContent=g;

package/build/cjs/components/Drawer/Drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","sources":["../../../../src/components/Drawer/Drawer.styles.ts"],"sourcesContent":["import RcDrawer from 'rc-drawer';\nimport { styled, css } from 'styled-components';\nimport { ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { DrawerConsts } from 'acinguiux-ds-react-base/components/Drawer';\n\nimport type { IDrawerProps } from './Drawer.types';\n\nconst raisedOnElevation = (elevation = false): 'raised' | 'surface' => (elevation ? 'raised' : 'surface');\n\nconst panelMotion = css`\n  &-enter,\n  &-appear,\n  &-leave {\n    &-start {\n      transition: none;\n    }\n\n    &-active {\n      transition: all 0.3s ease-out;\n    }\n  }\n`;\n\nconst Drawer = styled(RcDrawer)<PickTransient<IDrawerProps, 'elevation' | 'sticky' | 'bgColor'>>`\n  ${({ prefixCls, theme, $sticky, $bgColor, $elevation }) => {\n    const layer = theme.layer({ foundation: $bgColor ? 'base' : raisedOnElevation($elevation) });\n\n    return css`\n      z-index: ${ZIndexes.DRAWER};\n      position: fixed;\n      inset: 0;\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      pointer-events: none;\n\n      &.${prefixCls}-inline {\n        position: absolute;\n      }\n\n      .${prefixCls} {\n        &-mask {\n          position: absolute;\n          inset: 0;\n          z-index: ${ZIndexes.DRAWER};\n          pointer-events: auto;\n          background-color: ${theme.globals('others').mask};\n\n          &.mask-motion {\n            &-enter,\n            &-appear,\n            &-leave {\n              &-active {\n                transition: all 0.3s;\n              }\n            }\n\n            &-enter,\n            &-appear {\n              opacity: 0;\n\n              &-active {\n                opacity: 1;\n              }\n            }\n\n            &-leave {\n              opacity: 1;\n\n              &-active {\n                opacity: 0;\n              }\n            }\n          }\n        }\n\n        &-content-wrapper {\n          position: absolute;\n          z-index: ${ZIndexes.DRAWER};\n          transition: transform 0.3s ease-out;\n\n          &-hidden {\n            display: none;\n          }\n\n          .${prefixCls}-left& {\n            top: 0;\n            bottom: 0;\n            left: 0;\n          }\n\n          .${prefixCls}-right& {\n            top: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .${prefixCls}-top& {\n            top: 0;\n            right: 0;\n            left: 0;\n          }\n\n          .${prefixCls}-bottom& {\n            right: 0;\n            bottom: 0;\n            left: 0;\n          }\n\n          &.panel-motion {\n            /* Left */\n            &-left {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateX(-100%) !important;\n                }\n\n                &-active {\n                  transform: translateX(0);\n                }\n              }\n\n              &-leave {\n                transform: translateX(0);\n\n                &-active {\n                  transform: translateX(-100%);\n                }\n              }\n            }\n\n            /* Right */\n            &-right {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateX(100%) !important;\n                }\n\n                &-active {\n                  transform: translateX(0);\n                }\n              }\n\n              &-leave {\n                transform: translateX(0);\n\n                &-active {\n                  transform: translateX(100%);\n                }\n              }\n            }\n\n            /* Top */\n            &-top {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateY(-100%) !important;\n                }\n\n                &-active {\n                  transform: translateY(0);\n                }\n              }\n\n              &-leave {\n                transform: translateY(0);\n\n                &-active {\n                  transform: translateY(-100%);\n                }\n              }\n            }\n\n            /* Bottom */\n            &-bottom {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateY(100%) !important;\n                }\n\n                &-active {\n                  transform: translateY(0);\n                }\n              }\n\n              &-leave {\n                transform: translateY(0);\n\n                &-active {\n                  transform: translateY(100%);\n                }\n              }\n            }\n          }\n        }\n\n        &-content {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n          width: 100%;\n          pointer-events: auto;\n          background: ${layer[Variables.BackgroundFoundation]};\n          overflow: hidden;\n\n          ${!$sticky &&\n          css`\n            overflow-y: auto;\n          `}\n\n          ${$elevation &&\n          css`\n            filter: ${theme.dropShadows.high1};\n          `}\n        }\n      }\n    `;\n  }}\n`;\n\ntype DrawerContentPropKeys = 'size' | 'padding' | 'sticky' | 'headerBorder' | 'footerBorder' | 'bgColor';\nconst DrawerContent = styled.div<\n  Required<PickTransient<IDrawerProps, DrawerContentPropKeys>> & {\n    $hasHeader: boolean;\n    $hasFooter: boolean;\n  }\n>`\n  ${({ $size, $padding, $sticky, $headerBorder, $footerBorder, $hasHeader, $hasFooter, $bgColor }) => css`\n    display: flex;\n    flex-direction: column;\n\n    ${$sticky &&\n    css`\n      overflow-y: auto;\n    `}\n\n    ${$padding &&\n    css`\n      padding-inline: ${DrawerConsts.consts[$size].padding};\n    `}\n\n     ${(($hasHeader && ($headerBorder || $bgColor)) || !$hasHeader) &&\n    css`\n      padding-block-start: ${DrawerConsts.consts[$size].padding};\n    `}\n\n        ${(($hasFooter && ($footerBorder || $bgColor)) || !$hasFooter) &&\n    css`\n      padding-block-end: ${DrawerConsts.consts[$size].padding};\n    `}\n  `}\n`;\n\nconst DrawerBar = styled.div<Required<PickTransient<IDrawerProps, 'size'>> & PickTransient<IDrawerProps, 'elevation'>>`\n  ${({ $size, $elevation, theme }) => css`\n    z-index: ${ZIndexes.ELEVATED};\n    display: flex;\n    align-items: flex-start;\n    min-height: auto;\n    padding: ${DrawerConsts.consts[$size].padding};\n    background: ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BackgroundFoundation]};\n  `}\n`;\n\nconst DrawerHeaderContent = styled.div`\n  flex: 1 0 0;\n  align-self: center;\n`;\n\nconst DrawerHeader = styled(DrawerBar)<PickTransient<IDrawerProps, 'headerBorder'>>`\n  ${({ $headerBorder, $elevation, $size, theme }) => css`\n    gap: 12px;\n\n    & > button:first-child {\n      min-width: ${DrawerConsts.consts[$size].backIconSize};\n      width: ${DrawerConsts.consts[$size].backIconSize};\n      max-width: ${DrawerConsts.consts[$size].backIconSize};\n    }\n\n    ${$headerBorder &&\n    css`\n      border-bottom: 1px solid\n        ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BorderOnFoundationSubtle]};\n    `}\n  `}\n`;\n\nconst DrawerFooter = styled(DrawerBar)<PickTransient<IDrawerProps, 'footerBorder'>>`\n  ${({ $footerBorder, $elevation, theme }) => css`\n    width: 100%;\n    margin-top: auto;\n\n    ${$footerBorder &&\n    css`\n      border-top: 1px solid\n        ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BorderOnFoundationSubtle]};\n    `}\n  `}\n`;\n\nexport { Drawer, DrawerContent, DrawerHeader, DrawerHeaderContent, DrawerFooter };\n"],"names":["raisedOnElevation","elevation","panelMotion","css","Drawer","styled","RcDrawer","prefixCls","theme","$sticky","$bgColor","$elevation","layer","ZIndexes","Variables","DrawerContent","$size","$padding","$headerBorder","$footerBorder","$hasHeader","$hasFooter","DrawerConsts.consts","DrawerBar","DrawerHeaderContent","DrawerHeader","DrawerFooter"],"mappings":"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"}
+{"version":3,"file":"Drawer.styles.js","sources":["../../../../src/components/Drawer/Drawer.styles.ts"],"sourcesContent":["import RcDrawer from 'rc-drawer';\nimport { styled, css } from 'styled-components';\nimport { ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { DrawerConsts } from 'acinguiux-ds-react-base/components/Drawer';\n\nimport type { IDrawerProps } from './Drawer.types';\n\nconst raisedOnElevation = (elevation = false): 'raised' | 'surface' => (elevation ? 'raised' : 'surface');\n\nconst panelMotion = css`\n  &-enter,\n  &-appear,\n  &-leave {\n    &-start {\n      transition: none;\n    }\n\n    &-active {\n      transition: all 0.3s ease-out;\n    }\n  }\n`;\n\ntype StyledDrawerPropKeys = 'elevation' | 'sticky' | 'bgColor' | 'zIndex';\nexport type IStyledDrawerProps = PickTransient<IDrawerProps, StyledDrawerPropKeys>;\n\nconst Drawer = styled(RcDrawer)<IStyledDrawerProps>`\n  ${({ prefixCls, theme, $sticky, $bgColor, $elevation, $zIndex }) => {\n    const layer = theme.layer({ foundation: $bgColor ? 'base' : raisedOnElevation($elevation) });\n\n    return css`\n      z-index: ${$zIndex ?? ZIndexes.DRAWER};\n      position: fixed;\n      inset: 0;\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      pointer-events: none;\n\n      &.${prefixCls}-inline {\n        position: absolute;\n      }\n\n      .${prefixCls} {\n        &-mask {\n          position: absolute;\n          inset: 0;\n          z-index: ${$zIndex ?? ZIndexes.DRAWER};\n          pointer-events: auto;\n          background-color: ${theme.globals('others').mask};\n\n          &.mask-motion {\n            &-enter,\n            &-appear,\n            &-leave {\n              &-active {\n                transition: all 0.3s;\n              }\n            }\n\n            &-enter,\n            &-appear {\n              opacity: 0;\n\n              &-active {\n                opacity: 1;\n              }\n            }\n\n            &-leave {\n              opacity: 1;\n\n              &-active {\n                opacity: 0;\n              }\n            }\n          }\n        }\n\n        &-content-wrapper {\n          position: absolute;\n          z-index: ${$zIndex ?? ZIndexes.DRAWER};\n          transition: transform 0.3s ease-out;\n\n          &-hidden {\n            display: none;\n          }\n\n          .${prefixCls}-left& {\n            top: 0;\n            bottom: 0;\n            left: 0;\n          }\n\n          .${prefixCls}-right& {\n            top: 0;\n            right: 0;\n            bottom: 0;\n          }\n\n          .${prefixCls}-top& {\n            top: 0;\n            right: 0;\n            left: 0;\n          }\n\n          .${prefixCls}-bottom& {\n            right: 0;\n            bottom: 0;\n            left: 0;\n          }\n\n          &.panel-motion {\n            /* Left */\n            &-left {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateX(-100%) !important;\n                }\n\n                &-active {\n                  transform: translateX(0);\n                }\n              }\n\n              &-leave {\n                transform: translateX(0);\n\n                &-active {\n                  transform: translateX(-100%);\n                }\n              }\n            }\n\n            /* Right */\n            &-right {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateX(100%) !important;\n                }\n\n                &-active {\n                  transform: translateX(0);\n                }\n              }\n\n              &-leave {\n                transform: translateX(0);\n\n                &-active {\n                  transform: translateX(100%);\n                }\n              }\n            }\n\n            /* Top */\n            &-top {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateY(-100%) !important;\n                }\n\n                &-active {\n                  transform: translateY(0);\n                }\n              }\n\n              &-leave {\n                transform: translateY(0);\n\n                &-active {\n                  transform: translateY(-100%);\n                }\n              }\n            }\n\n            /* Bottom */\n            &-bottom {\n              ${panelMotion};\n              &-enter,\n              &-appear {\n                &-start {\n                  transform: translateY(100%) !important;\n                }\n\n                &-active {\n                  transform: translateY(0);\n                }\n              }\n\n              &-leave {\n                transform: translateY(0);\n\n                &-active {\n                  transform: translateY(100%);\n                }\n              }\n            }\n          }\n        }\n\n        &-content {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n          width: 100%;\n          pointer-events: auto;\n          background: ${layer[Variables.BackgroundFoundation]};\n          overflow: hidden;\n\n          ${!$sticky &&\n          css`\n            overflow-y: auto;\n          `}\n\n          ${$elevation &&\n          css`\n            filter: ${theme.dropShadows.high1};\n          `}\n        }\n      }\n    `;\n  }}\n`;\n\ntype DrawerContentPropKeys = 'size' | 'padding' | 'sticky' | 'headerBorder' | 'footerBorder' | 'bgColor';\nconst DrawerContent = styled.div<\n  Required<PickTransient<IDrawerProps, DrawerContentPropKeys>> & {\n    $hasHeader: boolean;\n    $hasFooter: boolean;\n  }\n>`\n  ${({ $size, $padding, $sticky, $headerBorder, $footerBorder, $hasHeader, $hasFooter, $bgColor }) => css`\n    display: flex;\n    flex-direction: column;\n\n    ${$sticky &&\n    css`\n      overflow-y: auto;\n    `}\n\n    ${$padding &&\n    css`\n      padding-inline: ${DrawerConsts.consts[$size].padding};\n    `}\n\n     ${(($hasHeader && ($headerBorder || $bgColor)) || !$hasHeader) &&\n    css`\n      padding-block-start: ${DrawerConsts.consts[$size].padding};\n    `}\n\n        ${(($hasFooter && ($footerBorder || $bgColor)) || !$hasFooter) &&\n    css`\n      padding-block-end: ${DrawerConsts.consts[$size].padding};\n    `}\n  `}\n`;\n\nconst DrawerBar = styled.div<Required<PickTransient<IDrawerProps, 'size'>> & PickTransient<IDrawerProps, 'elevation'>>`\n  ${({ $size, $elevation, theme }) => css`\n    z-index: ${ZIndexes.ELEVATED};\n    display: flex;\n    align-items: flex-start;\n    min-height: auto;\n    padding: ${DrawerConsts.consts[$size].padding};\n    background: ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BackgroundFoundation]};\n  `}\n`;\n\nconst DrawerHeaderContent = styled.div`\n  flex: 1 0 0;\n  align-self: center;\n`;\n\nconst DrawerHeader = styled(DrawerBar)<PickTransient<IDrawerProps, 'headerBorder'>>`\n  ${({ $headerBorder, $elevation, $size, theme }) => css`\n    gap: 12px;\n\n    & > button:first-child {\n      min-width: ${DrawerConsts.consts[$size].backIconSize};\n      width: ${DrawerConsts.consts[$size].backIconSize};\n      max-width: ${DrawerConsts.consts[$size].backIconSize};\n    }\n\n    ${$headerBorder &&\n    css`\n      border-bottom: 1px solid\n        ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BorderOnFoundationSubtle]};\n    `}\n  `}\n`;\n\nconst DrawerFooter = styled(DrawerBar)<PickTransient<IDrawerProps, 'footerBorder'>>`\n  ${({ $footerBorder, $elevation, theme }) => css`\n    width: 100%;\n    margin-top: auto;\n\n    ${$footerBorder &&\n    css`\n      border-top: 1px solid\n        ${theme.layer({ foundation: raisedOnElevation($elevation) })[Variables.BorderOnFoundationSubtle]};\n    `}\n  `}\n`;\n\nexport { Drawer, DrawerContent, DrawerHeader, DrawerHeaderContent, DrawerFooter };\n"],"names":["raisedOnElevation","elevation","panelMotion","css","Drawer","styled","RcDrawer","prefixCls","theme","$sticky","$bgColor","$elevation","$zIndex","layer","ZIndexes","Variables","DrawerContent","$size","$padding","$headerBorder","$footerBorder","$hasHeader","$hasFooter","DrawerConsts.consts","DrawerBar","DrawerHeaderContent","DrawerHeader","DrawerFooter"],"mappings":"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"}

package/build/cjs/components/EmptyState/EmptyState.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),f=require("react"),j=require("classnames"),d=require("../../react-base/src/consts/index.js"),b=require("../../react-base/src/components/EmptyState/EmptyState.utils.js"),$=require("acinguiux-ds-fabrics"),t=require("../Button/Button.js"),h=require("./EmptyState.styles.js"),y=require("../Button/ButtonLink.js"),E=require("../Button/SentimentButton.js"),A=require("../../react-base/src/consts/classes.js"),T=f.forwardRef(({className:a,image:n,icon:l,pictogram:m,title:x,description:p,size:r=d.Sizes.Medium,actions:i,actionsAlignment:q=d.Alignments.Center,...u},S)=>s.jsxs(h.EmptyState,{ref:S,$size:r,className:j(A.EMPTY_STATE_CLASS,a),...u,children:[!!(n??m??l)&&s.jsx(h.VisualPlaceholder,{$size:r,$variant:b.getVisualPlaceholderVariant(!!n,!!m,!!l),$iconSentiment:(l==null?void 0:l.sentiment)??$.FabricsVariables.Sentiments.Neutral,children:n??m??(l==null?void 0:l.component)}),!!(x??p)&&s.jsxs(h.TextPlaceholder,{$size:r,children:[!!x&&s.jsx(h.Title,{$size:r,children:x}),typeof p=="string"?s.jsx(h.Description,{$size:r,children:p}):p]}),!!(i!=null&&i.length)&&s.jsx(h.Actions,{$size:r,$actionsAlignment:q,children:i.map(e=>"href"in e&&e.href?s.jsx(y,{size:r,href:e.href,...e.props,children:e.label},e.label):"action"in e?e.props&&"sentiment"in e.props&&e.props.sentiment?s.jsx(E,{size:r,onClick:e.action,...e.props,children:e.label},e.label):s.jsx(t,{size:r,onClick:e.action,...e.props,children:e.label},e.label):null)})]}));module.exports=T;
+"use strict";const s=require("react/jsx-runtime"),u=require("react"),S=require("classnames"),m=require("../../react-base/src/consts/index.js"),f=require("../../react-base/src/components/EmptyState/EmptyState.utils.js"),j=require("acinguiux-ds-fabrics"),b=require("../Button/Button.js"),l=require("./EmptyState.styles.js"),$=require("../Button/ButtonLink.js"),y=require("../Button/SentimentButton.js"),E=require("../../react-base/src/consts/classes.js"),A=u.forwardRef(({className:x,image:h,icon:i,pictogram:c,title:p,description:n,size:r=m.Sizes.Medium,actions:a,actionsAlignment:d=m.Alignments.Center,...q},t)=>s.jsxs(l.EmptyState,{ref:t,$size:r,className:S(E.EMPTY_STATE_CLASS,x),...q,children:[!!(h??c??i)&&s.jsx(l.VisualPlaceholder,{$size:r,$variant:f.getVisualPlaceholderVariant(!!h,!!c,!!i),$iconSentiment:i?.sentiment??j.FabricsVariables.Sentiments.Neutral,children:h??c??i?.component}),!!(p??n)&&s.jsxs(l.TextPlaceholder,{$size:r,children:[!!p&&s.jsx(l.Title,{$size:r,children:p}),typeof n=="string"?s.jsx(l.Description,{$size:r,children:n}):n]}),!!a?.length&&s.jsx(l.Actions,{$size:r,$actionsAlignment:d,children:a.map(e=>"href"in e&&e.href?s.jsx($,{size:r,href:e.href,...e.props,children:e.label},e.label):"action"in e?e.props&&"sentiment"in e.props&&e.props.sentiment?s.jsx(y,{size:r,onClick:e.action,...e.props,children:e.label},e.label):s.jsx(b,{size:r,onClick:e.action,...e.props,children:e.label},e.label):null)})]}));module.exports=A;
 //# sourceMappingURL=EmptyState.js.map