npm - @frontify/fondue - Versions diffs - 12.0.0-beta.6 → 12.0.0-beta.8 - Mend

@frontify/fondue 12.0.0-beta.6 → 12.0.0-beta.8

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

Files changed (601) hide show

package/dist/components/DatePicker/DatePicker.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport DatepickerComponent from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon';\n\nexport type DatePickerProps = {\n placeHolder?: string;\n isClearable?: boolean;\n shouldCloseOnSelect?: boolean;\n onChange?: (date: Date \| null) => void;\n dateFormat?: string;\n value?: Date;\n};\n\nexport const DatePicker: FC<DatePickerProps> = ({\n placeHolder = 'Select a date',\n isClearable,\n shouldCloseOnSelect,\n onChange,\n dateFormat = 'MM/dd/yyyy',\n value,\n}) => {\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n const onDateChanged = (date: Date \| null) => {\n if (onChange) {\n onChange(date);\n }\n };\n\n return (\n <div data-test-id=\"date-picker\">\n <DatepickerComponent\n calendarClassName=\"tw-shadow-mid tw-rounded-sm tw-border-slate-200 react-datepicker-wrap\"\n selected={value}\n onChange={onDateChanged}\n customInput={\n <DatePickerTrigger\n isCalendarOpen={isCalendarOpen}\n isClearable={isClearable}\n placeHolder={placeHolder}\n />\n }\n formatWeekDay={(day) => day.slice(0, 1)}\n isClearable={isClearable}\n dateFormat={dateFormat}\n onCalendarClose={() => setIsCalendarOpen(false)}\n onCalendarOpen={() => setIsCalendarOpen(true)}\n shouldCloseOnSelect={shouldCloseOnSelect}\n dayClassName={(date) => (date < new Date() ? 'past-date' : 'future-date')}\n renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={decreaseYear}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n />\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={decreaseMonth}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretLeft size={IconSize.Size20} />}\n />\n <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n {format(date, 'MMMM')} {getYear(date)}\n </p>\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={increaseMonth}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretRight size={IconSize.Size20} />}\n />\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={increaseYear}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretRightDouble size={IconSize.Size20} />}\n />\n </div>\n )}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,KAAkC,CAAC;AAAA,EAC5C,iBAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAa;AAAA,EACb;AAAA,MACE;AACF,QAAM,CAAC,GAAgB,KAAqB,EAAkB,EAAK,GAC7D,IAAgB,CAAC,MAAsB;AACzC,IAAI,KACA,EAAS,CAAI;AAAA,EACjB;AAGJ,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,EAAA,GACb,kBAAA,cAAA,GAAA;AAAA,IACG,mBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,aACK,kBAAA,cAAA,GAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACJ;AAAA,IAEJ,eAAe,CAAC,MAAQ,EAAI,MAAM,GAAG,CAAC;AAAA,IACtC;AAAA,IACA;AAAA,IACA,iBAAiB,MAAM,EAAkB,EAAK;AAAA,IAC9C,gBAAgB,MAAM,EAAkB,EAAI;AAAA,IAC5C;AAAA,IACA,cAAc,CAAC,MAAU,IAAO,IAAI,KAAA,IAAS,cAAc;AAAA,IAC3D,oBAAoB,CAAC,EAAE,SAAM,kBAAe,kBAAe,iBAAc,sBACpE,kBAAA,cAAA,OAAA;AAAA,MAAI,WAAU;AAAA,IAAA,GACV,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAoB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACtD,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAc,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CAChD,GACC,kBAAA,cAAA,KAAA;AAAA,MAAE,WAAU;AAAA,IACR,GAAA,EAAO,GAAM,MAAM,GAAE,KAAE,EAAQ,CAAI,CACxC,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAe,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACjD,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAqB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACvD,CACJ;AAAA,EAER,CAAA,CACJ;AAER;"}
1	+ {"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport DatepickerComponent from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon';\n\nexport type DatePickerProps = {\n placeHolder?: string;\n isClearable?: boolean;\n shouldCloseOnSelect?: boolean;\n onChange?: (date: Date \| null) => void;\n dateFormat?: string;\n value?: Date;\n};\n\nexport const DatePicker: FC<DatePickerProps> = ({\n placeHolder = 'Select a date',\n isClearable,\n shouldCloseOnSelect,\n onChange,\n dateFormat = 'MM/dd/yyyy',\n value,\n}) => {\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n const onDateChanged = (date: Date \| null) => {\n if (onChange) {\n onChange(date);\n }\n };\n\n return (\n <div data-test-id=\"date-picker\">\n <DatepickerComponent\n calendarClassName=\"tw-shadow-mid tw-rounded-sm tw-border-slate-200 react-datepicker-wrap\"\n selected={value}\n onChange={onDateChanged}\n customInput={\n <DatePickerTrigger\n isCalendarOpen={isCalendarOpen}\n isClearable={isClearable}\n placeHolder={placeHolder}\n />\n }\n formatWeekDay={(day) => day.slice(0, 1)}\n isClearable={isClearable}\n dateFormat={dateFormat}\n onCalendarClose={() => setIsCalendarOpen(false)}\n onCalendarOpen={() => setIsCalendarOpen(true)}\n shouldCloseOnSelect={shouldCloseOnSelect}\n dayClassName={(date) => (date < new Date() ? 'past-date' : 'future-date')}\n renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={decreaseYear}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n />\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={decreaseMonth}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretLeft size={IconSize.Size20} />}\n />\n <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n {format(date, 'MMMM')} {getYear(date)}\n </p>\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={increaseMonth}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretRight size={IconSize.Size20} />}\n />\n <Button\n style={ButtonStyle.Default}\n size={ButtonSize.Medium}\n onClick={increaseYear}\n emphasis={ButtonEmphasis.Weak}\n icon={<IconCaretRightDouble size={IconSize.Size20} />}\n />\n </div>\n )}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,KAAkC,CAAC;AAAA,EAC5C,iBAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAa;AAAA,EACb;AAAA,MACE;AACF,QAAM,CAAC,GAAgB,KAAqB,EAAkB,EAAK,GAC7D,IAAgB,CAAC,MAAsB;AACzC,IAAI,KACA,EAAS,CAAI;AAAA,EACjB;AAGJ,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,EAAA,GACb,kBAAA,cAAA,GAAA;AAAA,IACG,mBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,aACK,kBAAA,cAAA,GAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACJ;AAAA,IAEJ,eAAe,CAAC,MAAQ,EAAI,MAAM,GAAG,CAAC;AAAA,IACtC;AAAA,IACA;AAAA,IACA,iBAAiB,MAAM,EAAkB,EAAK;AAAA,IAC9C,gBAAgB,MAAM,EAAkB,EAAI;AAAA,IAC5C;AAAA,IACA,cAAc,CAAC,MAAU,IAAO,IAAI,KAAA,IAAS,cAAc;AAAA,IAC3D,oBAAoB,CAAC,EAAE,SAAM,kBAAe,kBAAe,iBAAc,sBACpE,kBAAA,cAAA,OAAA;AAAA,MAAI,WAAU;AAAA,IAAA,GACV,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAoB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACtD,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAc,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CAChD,GACC,kBAAA,cAAA,KAAA;AAAA,MAAE,WAAU;AAAA,IACR,GAAA,EAAO,GAAM,MAAM,GAAE,KAAE,EAAQ,CAAI,CACxC,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAe,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACjD,GACC,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO,EAAY;AAAA,MACnB,MAAM,EAAW;AAAA,MACjB,SAAS;AAAA,MACT,UAAU,EAAe;AAAA,MACzB,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAqB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CACvD,CACJ;AAAA,EAER,CAAA,CACJ;AAER;"}

package/dist/components/DatePicker/DatePickerTrigger.es.js CHANGED Viewed

@@ -1336,6 +1336,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";

package/dist/components/DatePicker/DatePickerTrigger.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["import { TextInput } from '@components/TextInput';\nimport IconCalendar from '@foundation/Icon/Generated/IconCalendar';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n placeHolder?: string;\n value?: string;\n isClearable?: boolean;\n isCalendarOpen?: boolean;\n onClick?: () => void;\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n ({ value, onClick, isClearable, placeHolder, isCalendarOpen }, ref) => (\n <div onClick={onClick} ref={ref} aria-hidden=\"true\">\n <div\n className={merge([\n 'tw-absolute tw-top-2 tw-text-black-60 tw-right-8 tw-z-10',\n value === '' ? 'tw-right-4' : 'tw-right-8',\n ])}\n >\n {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n </div>\n <TextInput decorator={<IconCalendar />} placeholder={placeHolder} value={value} clearable={isClearable} />\n </div>\n ),\n);\n\nDatePickerTrigger.displayName = 'DatePickerTrigger';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,IAAoB,EAC7B,CAAC,EAAE,UAAO,YAAS,gBAAa,gBAAa,qBAAkB,MAC1D,kBAAA,cAAA,OAAA;AAAA,EAAI;AAAA,EAAkB;AAAA,EAAU,eAAY;AAAA,GACxC,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,MAAU,KAAK,eAAe;AAAA,EAAA,CACjC;AAAA,GAEA,IAAkB,kBAAA,cAAA,GAAA;AAAA,EAAY,MAAM,EAAS;AAAA,CAAQ,IAAM,kBAAA,cAAA,GAAA;AAAA,EAAc,MAAM,EAAS;AAAA,CAAQ,CACrG,GACC,kBAAA,cAAA,GAAA;AAAA,EAAU,2CAAY,GAAa,IAAA;AAAA,EAAI,aAAa;AAAA,EAAa;AAAA,EAAc,WAAW;AAAA,CAAa,CAC5G,CAER;AAEA,EAAkB,cAAc;"}
1	+ {"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["import { TextInput } from '@components/TextInput';\nimport IconCalendar from '@foundation/Icon/Generated/IconCalendar';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n placeHolder?: string;\n value?: string;\n isClearable?: boolean;\n isCalendarOpen?: boolean;\n onClick?: () => void;\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n ({ value, onClick, isClearable, placeHolder, isCalendarOpen }, ref) => (\n <div onClick={onClick} ref={ref} aria-hidden=\"true\">\n <div\n className={merge([\n 'tw-absolute tw-top-2 tw-text-black-60 tw-right-8 tw-z-10',\n value === '' ? 'tw-right-4' : 'tw-right-8',\n ])}\n >\n {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n </div>\n <TextInput decorator={<IconCalendar />} placeholder={placeHolder} value={value} clearable={isClearable} />\n </div>\n ),\n);\n\nDatePickerTrigger.displayName = 'DatePickerTrigger';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,IAAoB,EAC7B,CAAC,EAAE,UAAO,YAAS,gBAAa,gBAAa,qBAAkB,MAC1D,kBAAA,cAAA,OAAA;AAAA,EAAI;AAAA,EAAkB;AAAA,EAAU,eAAY;AAAA,GACxC,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,MAAU,KAAK,eAAe;AAAA,EAAA,CACjC;AAAA,GAEA,IAAkB,kBAAA,cAAA,GAAA;AAAA,EAAY,MAAM,EAAS;AAAA,CAAQ,IAAM,kBAAA,cAAA,GAAA;AAAA,EAAc,MAAM,EAAS;AAAA,CAAQ,CACrG,GACC,kBAAA,cAAA,GAAA;AAAA,EAAU,2CAAY,GAAa,IAAA;AAAA,EAAI,aAAa;AAAA,EAAa;AAAA,EAAc,WAAW;AAAA,CAAa,CAC5G,CAER;AAEA,EAAkB,cAAc;"}

package/dist/components/EditableText/EditableText.d.ts CHANGED Viewed

@@ -30,6 +30,8 @@ export interface EditableTextProps {
     onEditableSave?: (value: string) => void;
     onModeChange?: (editableState?: EditableMode) => void;
     options?: EditableOptionProps;
+    /** @deprecated Temporary solution for text with ellipisis in Tree Component */
+    isOverflowing?: boolean;
 }
 /**
  * Component to switch between Label and Input state. Wraps the Children
@@ -47,5 +49,5 @@ export interface EditableTextProps {
  * - additionalValues?:      string             // additional Values like ID
  *
  */
-export declare const EditableText: ({ onEditableSave, onModeChange, onAdditionalValueSave, children, options, }: EditableTextProps) => JSX.Element;
+export declare const EditableText: ({ onEditableSave, onModeChange, onAdditionalValueSave, children, options, isOverflowing, }: EditableTextProps) => JSX.Element;
 export {};

package/dist/components/EditableText/EditableText.es.js CHANGED Viewed

@@ -1,82 +1,82 @@
-import l, { useState as E, useRef as x, useEffect as N } from "react";
-import { EditableTextHelper as S } from "./lib/helper.es.js";
-import { FOCUS_VISIBLE_STYLE as T } from "../../utilities/focusStyle.es.js";
+import l, { useState as E, useRef as N, useEffect as S } from "react";
+import { EditableTextHelper as T } from "./lib/helper.es.js";
+import { FOCUS_VISIBLE_STYLE as h } from "../../utilities/focusStyle.es.js";
 import { merge as r } from "../../utilities/merge.es.js";
-var U = /* @__PURE__ */ ((a) => (a.INPUT = "INPUT", a.LABEL = "LABEL", a))(U || {});
-const D = ({
+var F = /* @__PURE__ */ ((a) => (a.INPUT = "INPUT", a.LABEL = "LABEL", a))(F || {});
+const V = ({
   onEditableSave: a,
   onModeChange: u,
-  onAdditionalValueSave: f,
+  onAdditionalValueSave: b,
   children: c,
-  options: e
+  options: e,
+  isOverflowing: d = !1
 }) => {
-  const d = S.getLabel(c), [s, I] = E(d), [m, w] = E("LABEL"), [L, B] = E(), n = x(null), g = (t) => I(t.target.value), i = (t) => {
-    w("LABEL"), u && u("LABEL"), (e == null ? void 0 : e.additionalValues) && f && f(e.additionalValues, t.target.value), a && a(t.target.value);
-  }, b = (t) => () => {
-    I(t), w("INPUT"), u && u("INPUT");
-  }, h = (t) => {
+  const w = T.getLabel(c), [I, L] = E(w), [m, n] = E("LABEL"), [x, B] = E(), f = N(null), P = (t) => L(t.target.value), i = (t) => {
+    n("LABEL"), u && u("LABEL"), (e == null ? void 0 : e.additionalValues) && b && b(e.additionalValues, t.target.value), a && a(t.target.value);
+  }, s = (t) => () => {
+    L(t), n("INPUT"), u && u("INPUT");
+  }, g = (t) => {
     t.key === "Enter" && i(t);
-  }, v = (t) => i(t);
-  N(() => {
+  }, U = (t) => i(t);
+  S(() => {
     var t;
-    return w((t = e == null ? void 0 : e.mode) != null ? t : "LABEL");
+    return n((t = e == null ? void 0 : e.mode) != null ? t : "LABEL");
   }, [e == null ? void 0 : e.mode]);
-  const P = e != null && e.enableDoubleClick ? {
-    onDoubleClick: b(d),
-    onKeyPress: (t) => t.key === "Enter" && b(d)()
+  const k = e != null && e.enableDoubleClick ? {
+    onDoubleClick: s(w),
+    onKeyPress: (t) => t.key === "Enter" && s(w)()
   } : {
-    onClick: b(d)
+    onClick: s(w)
   };
-  N(() => {
+  S(() => {
     var t;
-    y.current && B(S.copyStyles(y.current)), m === "INPUT" && ((t = n.current) == null || t.select());
-  }, [m, n, c]);
-  const y = x(), k = c && l.cloneElement(c, {
+    y.current && B(T.copyStyles(y.current)), m === "INPUT" && ((t = f.current) == null || t.select());
+  }, [m, f, c]);
+  const y = N(), v = c && l.cloneElement(c, {
     ref: y
   });
   return /* @__PURE__ */ l.createElement("div", {
     "data-test-id": "editable-node-container",
-    className: r(["tw-relative", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"])
+    className: r(["tw-relative tw-h-full", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"])
   }, m === "INPUT" ? /* @__PURE__ */ l.createElement("div", {
     className: r([
       "tw-flex tw-items-center",
-      (e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.06rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
+      (e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
     ])
   }, /* @__PURE__ */ l.createElement("div", {
     "data-test-id": "editable-input",
-    className: r(["tw-relative"])
+    className: r(["tw-relative", d && "tw-w-full tw-flex tw-items-center"])
   }, /* @__PURE__ */ l.createElement("input", {
-    ref: n,
+    ref: f,
     type: "text",
     className: r([
-      "tw-absolute tw-w-full",
-      (e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : T,
-      "tw-text-text tw-border tw-rounded tw-bg-base",
-      "tw-border-solid",
+      (e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : h,
+      "tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid",
       (e == null ? void 0 : e.isSlimInputField) === !0 ? "tw-py-0 tw-px-1" : "tw-px-3 tw-py-2"
     ]),
-    style: L,
-    value: s,
-    onChange: g,
-    onKeyDown: h,
-    onBlur: v
+    style: x,
+    value: I,
+    onChange: P,
+    onKeyDown: g,
+    onBlur: U
   }), /* @__PURE__ */ l.createElement("span", {
     "aria-hidden": "true",
     className: r([
-      "tw-rounded tw-px-4 tw-py-2 tw-bg-base",
-      (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2"
+      "tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate",
+      (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2",
+      d && "tw-w-0"
     ]),
-    style: L
-  }, s))) : /* @__PURE__ */ l.createElement(l.Fragment, null), /* @__PURE__ */ l.createElement("button", {
-    style: { display: m === "INPUT" ? "none" : "block" },
-    className: T,
-    ...P,
+    style: x
+  }, I))) : /* @__PURE__ */ l.createElement(l.Fragment, null), /* @__PURE__ */ l.createElement("button", {
+    style: { display: m === "INPUT" ? "none" : "flex" },
+    className: r([d && "tw-w-full", "tw-h-full tw-items-center", h]),
+    ...k,
     "data-test-id": "node-link-name",
     "aria-pressed": "false"
-  }, k));
+  }, v));
 };
 export {
-  U as EditableMode,
-  D as EditableText
+  F as EditableMode,
+  V as EditableText
 };
 //# sourceMappingURL=EditableText.es.js.map

package/dist/components/EditableText/EditableText.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n FocusEvent,\n FocusEventHandler,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactElement,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nexport enum EditableMode {\n INPUT = 'INPUT',\n LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n fontSize: string;\n lineHeight: string;\n letterSpacing: string;\n minWidth: string;\n fontWeight: string;\n}\n\n/*\n isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n /\ninterface EditableOptionProps {\n isSlimInputField?: boolean;\n mode?: EditableMode;\n enableDoubleClick?: boolean;\n additionalValues?: string;\n removeBoxPadding?: boolean;\n}\n\n/\n Add Children with badges or icons\n * onEditableSave callback to get updated Value\n * onAdditionalValueSave callback with more information (ex. ID)\n * onModeChange callback when state changes\n * options to specify styling and additional behaviours\n /\nexport interface EditableTextProps {\n children?: ReactElement;\n onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n onEditableSave?: (value: string) => void;\n onModeChange?: (editableState?: EditableMode) => void;\n options?: EditableOptionProps;\n}\n\n/\n Component to switch between Label and Input state. Wraps the Children\n * with a Button, to allow for accessibility and copies styles to input field\n \n Events:\n * - onEditableSave // When changing from input to label state\n * - onModeChange // Indicates which state is active\n * - onAdditionalValueSave // Similar to editable Save with additional Values provided\n \n Options properties:\n * - mode: enum EditableMode // {INPUT = 'INPUT',LABEL = 'LABEL'}\n * - enableDoubleClick: boolean // should the input be triggered by a double click or single click\n * - isSlimInputField: boolean // removes y padding\n * - additionalValues?: string // additional Values like ID\n \n /\nexport const EditableText = ({\n onEditableSave,\n onModeChange,\n onAdditionalValueSave,\n children,\n options,\n}: EditableTextProps) => {\n // Read initial text strings from children\n const childrenLabel = EditableTextHelper.getLabel(children);\n\n // use text strings from children in the input field\n const [inputValue, setInputValue] = useState(childrenLabel);\n const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n const handleSwitchToLabel = (event: KeyboardEvent \| FocusEvent) => {\n setEditableState(EditableMode.LABEL);\n\n onModeChange && onModeChange(EditableMode.LABEL);\n options?.additionalValues &&\n onAdditionalValueSave &&\n onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n onEditableSave && onEditableSave((event.target as HTMLTextAreaElement).value);\n };\n\n const handleSwitchToInput = (childrenText: string) => () => {\n setInputValue(childrenText);\n setEditableState(EditableMode.INPUT);\n onModeChange && onModeChange(EditableMode.INPUT);\n };\n\n const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleSwitchToLabel(event);\n }\n };\n const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n // Set initial state of component if provided in the mode\n useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n const clickBehaviour = options?.enableDoubleClick\n ? {\n onDoubleClick: handleSwitchToInput(childrenLabel),\n onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n }\n : {\n onClick: handleSwitchToInput(childrenLabel),\n };\n\n // Update Input Style and select input field if visible\n useEffect(() => {\n if (childRef.current) {\n setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n }\n\n if (editableState === EditableMode.INPUT) {\n inputRef.current?.select();\n }\n }, [editableState, inputRef, children]);\n\n const childRef = useRef();\n\n // Clone Child and add ref to Children\n const ChildrenWithRef =\n children &&\n React.cloneElement(children, {\n ref: childRef,\n });\n\n return (\n <div\n data-test-id=\"editable-node-container\"\n className={merge(['tw-relative', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n >\n {editableState === EditableMode.INPUT ? (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n options?.isSlimInputField === true\n ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.06rem]'\n : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n ])}\n >\n <div data-test-id=\"editable-input\" className={merge(['tw-relative'])}>\n <input\n ref={inputRef}\n type=\"text\"\n className={merge([\n 'tw-absolute tw-w-full',\n options?.isSlimInputField === true\n ? 'focus-visible:tw-outline-none'\n : FOCUS_VISIBLE_STYLE,\n 'tw-text-text tw-border tw-rounded tw-bg-base',\n 'tw-border-solid',\n options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n ])}\n style={inputStyling}\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-rounded tw-px-4 tw-py-2 tw-bg-base',\n options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n ])}\n style={inputStyling}\n >\n {inputValue}\n </span>\n </div>\n </div>\n ) : (\n <></>\n )}\n <button\n style={{ display: editableState === EditableMode.INPUT ? 'none' : 'block' }}\n className={FOCUS_VISIBLE_STYLE}\n {...clickBehaviour}\n data-test-id={'node-link-name'}\n aria-pressed=\"false\"\n >\n {ChildrenWithRef}\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n FocusEvent,\n FocusEventHandler,\n KeyboardEvent,\n KeyboardEventHandler,\n ReactElement,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nexport enum EditableMode {\n INPUT = 'INPUT',\n LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n fontSize: string;\n lineHeight: string;\n letterSpacing: string;\n minWidth: string;\n fontWeight: string;\n}\n\n/*\n isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n /\ninterface EditableOptionProps {\n isSlimInputField?: boolean;\n mode?: EditableMode;\n enableDoubleClick?: boolean;\n additionalValues?: string;\n removeBoxPadding?: boolean;\n}\n\n/\n Add Children with badges or icons\n * onEditableSave callback to get updated Value\n * onAdditionalValueSave callback with more information (ex. ID)\n * onModeChange callback when state changes\n * options to specify styling and additional behaviours\n /\nexport interface EditableTextProps {\n children?: ReactElement;\n onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n onEditableSave?: (value: string) => void;\n onModeChange?: (editableState?: EditableMode) => void;\n options?: EditableOptionProps;\n /* @deprecated Temporary solution for text with ellipisis in Tree Component /\n isOverflowing?: boolean;\n}\n\n/\n Component to switch between Label and Input state. Wraps the Children\n * with a Button, to allow for accessibility and copies styles to input field\n \n Events:\n * - onEditableSave // When changing from input to label state\n * - onModeChange // Indicates which state is active\n * - onAdditionalValueSave // Similar to editable Save with additional Values provided\n \n Options properties:\n * - mode: enum EditableMode // {INPUT = 'INPUT',LABEL = 'LABEL'}\n * - enableDoubleClick: boolean // should the input be triggered by a double click or single click\n * - isSlimInputField: boolean // removes y padding\n * - additionalValues?: string // additional Values like ID\n \n /\nexport const EditableText = ({\n onEditableSave,\n onModeChange,\n onAdditionalValueSave,\n children,\n options,\n isOverflowing = false,\n}: EditableTextProps) => {\n // Read initial text strings from children\n const childrenLabel = EditableTextHelper.getLabel(children);\n\n // use text strings from children in the input field\n const [inputValue, setInputValue] = useState(childrenLabel);\n const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n const handleSwitchToLabel = (event: KeyboardEvent \| FocusEvent) => {\n setEditableState(EditableMode.LABEL);\n\n onModeChange && onModeChange(EditableMode.LABEL);\n options?.additionalValues &&\n onAdditionalValueSave &&\n onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n onEditableSave && onEditableSave((event.target as HTMLTextAreaElement).value);\n };\n\n const handleSwitchToInput = (childrenText: string) => () => {\n setInputValue(childrenText);\n setEditableState(EditableMode.INPUT);\n onModeChange && onModeChange(EditableMode.INPUT);\n };\n\n const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleSwitchToLabel(event);\n }\n };\n const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n // Set initial state of component if provided in the mode\n useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n const clickBehaviour = options?.enableDoubleClick\n ? {\n onDoubleClick: handleSwitchToInput(childrenLabel),\n onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n }\n : {\n onClick: handleSwitchToInput(childrenLabel),\n };\n\n // Update Input Style and select input field if visible\n useEffect(() => {\n if (childRef.current) {\n setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n }\n\n if (editableState === EditableMode.INPUT) {\n inputRef.current?.select();\n }\n }, [editableState, inputRef, children]);\n\n const childRef = useRef();\n\n // Clone Child and add ref to Children\n const ChildrenWithRef =\n children &&\n React.cloneElement(children, {\n ref: childRef,\n });\n\n return (\n <div\n data-test-id=\"editable-node-container\"\n className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n >\n {editableState === EditableMode.INPUT ? (\n <div\n className={merge([\n 'tw-flex tw-items-center',\n options?.isSlimInputField === true\n ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n ])}\n >\n <div\n data-test-id=\"editable-input\"\n className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n >\n <input\n ref={inputRef}\n type=\"text\"\n className={merge([\n options?.isSlimInputField === true\n ? 'focus-visible:tw-outline-none'\n : FOCUS_VISIBLE_STYLE,\n 'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n ])}\n style={inputStyling}\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n <span\n aria-hidden=\"true\"\n className={merge([\n 'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n isOverflowing && 'tw-w-0',\n ])}\n style={inputStyling}\n >\n {inputValue}\n </span>\n </div>\n </div>\n ) : (\n <></>\n )}\n <button\n style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n {...clickBehaviour}\n data-test-id={'node-link-name'}\n aria-pressed=\"false\"\n >\n {ChildrenWithRef}\n </button>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FieldsetHeader/FieldsetHeader.es.js CHANGED Viewed

@@ -1339,6 +1339,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1698,7 +1710,7 @@ const b = (t, n, p, o, r) => {
       }));
   }
   return null;
-}, HL = ({
+}, w1 = ({
   size: t = "Large",
   active: n = !0,
   decorator: p,
@@ -1741,7 +1753,7 @@ const b = (t, n, p, o, r) => {
   }, b(o, u, t, n, r)));
 };
 export {
-  HL as FieldsetHeader,
+  w1 as FieldsetHeader,
   D as FieldsetHeaderSize,
   I as FieldsetHeaderType,
   b as renderFieldsetHeaderIconType

package/dist/components/FieldsetHeader/FieldsetHeader.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus, IconSize } from '@foundation/Icon';\n\nexport enum FieldsetHeaderSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n [FieldsetHeaderSize.Small]: {\n icon: IconSize.Size12,\n text: 'tw-text-s',\n switch: SwitchSize.Small,\n },\n [FieldsetHeaderSize.Medium]: {\n icon: IconSize.Size16,\n text: 'tw-text-m',\n switch: SwitchSize.Medium,\n },\n [FieldsetHeaderSize.Large]: {\n icon: IconSize.Size20,\n text: 'tw-text-l',\n switch: SwitchSize.Large,\n },\n};\n\nexport enum FieldsetHeaderType {\n Default = 'Default',\n Switch = 'Switch',\n Accordion = 'Accordion',\n AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n size?: FieldsetHeaderSize;\n active?: boolean;\n decorator?: ReactNode;\n type?: FieldsetHeaderType;\n disabled?: boolean;\n bold?: boolean;\n children: string;\n onClick?: () => void;\n as?: keyof JSX.IntrinsicElements;\n tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n type: FieldsetHeaderType,\n id: string,\n size: FieldsetHeaderSize,\n active: boolean,\n disabled: boolean,\n) => {\n const props = {\n 'aria-labelledby': id,\n size: sizeMap[size].icon,\n };\n\n switch (type) {\n case FieldsetHeaderType.Switch:\n return <Switch {...props} size={sizeMap[size].switch} on={active} disabled={disabled} />;\n case FieldsetHeaderType.Accordion:\n return (\n <div\n className={merge([\n 'tw-transition-transform',\n active && 'tw-rotate-180 tw-duration-300',\n disabled && !active && 'tw-text-black-40',\n !disabled && active && 'tw-text-black',\n !disabled && !active && 'tw-text-black-80',\n ])}\n >\n <IconCaretDown {...props} />\n </div>\n );\n case FieldsetHeaderType.AddRemove:\n return (\n <div\n className={merge([\n active && disabled && 'tw-text-black-40',\n active && !disabled && 'tw-text-black',\n !active && !disabled && 'tw-text-black-80',\n ])}\n >\n {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n </div>\n );\n }\n\n return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n size = FieldsetHeaderSize.Large,\n active = true,\n decorator,\n type = FieldsetHeaderType.Default,\n disabled = false,\n bold = true,\n children,\n onClick,\n as: Heading = 'label',\n tabIndex = -1,\n}) => {\n const id = useMemoizedId();\n const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n let headingFontWeightClass = 'tw-font-normal';\n if (bold) {\n headingFontWeightClass = 'tw-font-bold';\n } else if (size === FieldsetHeaderSize.Medium) {\n headingFontWeightClass = 'tw-font-medium';\n }\n\n return (\n <header\n data-test-id=\"fieldset-header\"\n role={onClick ? 'button' : undefined}\n onClick={clickOnNotDisabled}\n onKeyPress={clickOnNotDisabled}\n className={merge([\n 'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n ])}\n tabIndex={tabIndex}\n >\n {isValidElement(decorator) && (\n <span className=\"tw-shrink-0\">\n {cloneElement(decorator, {\n size: sizeMap[size].icon,\n })}\n </span>\n )}\n <Heading\n id={id}\n className={merge([\n 'tw-text-left',\n sizeMap[size].text,\n headingFontWeightClass,\n onClick && 'hover:tw-cursor-pointer',\n ])}\n >\n {children}\n </Heading>\n {type !== FieldsetHeaderType.Default && (\n <span className=\"tw-ml-auto tw-shrink-0\">\n {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n </span>\n )}\n </header>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
1	+ {"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus, IconSize } from '@foundation/Icon';\n\nexport enum FieldsetHeaderSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n [FieldsetHeaderSize.Small]: {\n icon: IconSize.Size12,\n text: 'tw-text-s',\n switch: SwitchSize.Small,\n },\n [FieldsetHeaderSize.Medium]: {\n icon: IconSize.Size16,\n text: 'tw-text-m',\n switch: SwitchSize.Medium,\n },\n [FieldsetHeaderSize.Large]: {\n icon: IconSize.Size20,\n text: 'tw-text-l',\n switch: SwitchSize.Large,\n },\n};\n\nexport enum FieldsetHeaderType {\n Default = 'Default',\n Switch = 'Switch',\n Accordion = 'Accordion',\n AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n size?: FieldsetHeaderSize;\n active?: boolean;\n decorator?: ReactNode;\n type?: FieldsetHeaderType;\n disabled?: boolean;\n bold?: boolean;\n children: string;\n onClick?: () => void;\n as?: keyof JSX.IntrinsicElements;\n tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n type: FieldsetHeaderType,\n id: string,\n size: FieldsetHeaderSize,\n active: boolean,\n disabled: boolean,\n) => {\n const props = {\n 'aria-labelledby': id,\n size: sizeMap[size].icon,\n };\n\n switch (type) {\n case FieldsetHeaderType.Switch:\n return <Switch {...props} size={sizeMap[size].switch} on={active} disabled={disabled} />;\n case FieldsetHeaderType.Accordion:\n return (\n <div\n className={merge([\n 'tw-transition-transform',\n active && 'tw-rotate-180 tw-duration-300',\n disabled && !active && 'tw-text-black-40',\n !disabled && active && 'tw-text-black',\n !disabled && !active && 'tw-text-black-80',\n ])}\n >\n <IconCaretDown {...props} />\n </div>\n );\n case FieldsetHeaderType.AddRemove:\n return (\n <div\n className={merge([\n active && disabled && 'tw-text-black-40',\n active && !disabled && 'tw-text-black',\n !active && !disabled && 'tw-text-black-80',\n ])}\n >\n {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n </div>\n );\n }\n\n return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n size = FieldsetHeaderSize.Large,\n active = true,\n decorator,\n type = FieldsetHeaderType.Default,\n disabled = false,\n bold = true,\n children,\n onClick,\n as: Heading = 'label',\n tabIndex = -1,\n}) => {\n const id = useMemoizedId();\n const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n let headingFontWeightClass = 'tw-font-normal';\n if (bold) {\n headingFontWeightClass = 'tw-font-bold';\n } else if (size === FieldsetHeaderSize.Medium) {\n headingFontWeightClass = 'tw-font-medium';\n }\n\n return (\n <header\n data-test-id=\"fieldset-header\"\n role={onClick ? 'button' : undefined}\n onClick={clickOnNotDisabled}\n onKeyPress={clickOnNotDisabled}\n className={merge([\n 'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n ])}\n tabIndex={tabIndex}\n >\n {isValidElement(decorator) && (\n <span className=\"tw-shrink-0\">\n {cloneElement(decorator, {\n size: sizeMap[size].icon,\n })}\n </span>\n )}\n <Heading\n id={id}\n className={merge([\n 'tw-text-left',\n sizeMap[size].text,\n headingFontWeightClass,\n onClick && 'hover:tw-cursor-pointer',\n ])}\n >\n {children}\n </Heading>\n {type !== FieldsetHeaderType.Default && (\n <span className=\"tw-ml-auto tw-shrink-0\">\n {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n </span>\n )}\n </header>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQY,IAAA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACD,EAAA,QAAA,SAHA,IAAA,KAAA,CAAA,CAAA;AAMZ,MAAM,IAA4F;AAAA,EAC9F,AAAC,OAA2B;AAAA,IACxB,MAAM,EAAS;AAAA,IACf,MAAM;AAAA,IACN,QAAQ,EAAW;AAAA,EACvB;AAAA,EACA,AAAC,QAA4B;AAAA,IACzB,MAAM,EAAS;AAAA,IACf,MAAM;AAAA,IACN,QAAQ,EAAW;AAAA,EACvB;AAAA,EACA,AAAC,OAA2B;AAAA,IACxB,MAAM,EAAS;AAAA,IACf,MAAM;AAAA,IACN,QAAQ,EAAW;AAAA,EACvB;AACJ;AAEY,IAAA,sBAAA,MACE,GAAA,UAAA,WACD,EAAA,SAAA,UACG,EAAA,YAAA,aACA,EAAA,YAAA,aAJJ,IAAA,KAAA,CAAA,CAAA;AAoBL,MAAM,IAA+B,CACxC,GACA,GACA,GACA,GACA,MACC;AACD,QAAM,IAAQ;AAAA,IACV,mBAAmB;AAAA,IACnB,MAAM,EAAQ,GAAM;AAAA,EAAA;AAGhB,UAAA;AAAA,SACC;AACD,aAAQ,kBAAA,cAAA,GAAA;AAAA,QAAQ,GAAG;AAAA,QAAO,MAAM,EAAQ,GAAM;AAAA,QAAQ,IAAI;AAAA,QAAQ;AAAA,MAAA,CAAoB;AAAA,SACrF;AACD,aACK,kBAAA,cAAA,OAAA;AAAA,QACG,WAAW,EAAM;AAAA,UACb;AAAA,UACA,KAAU;AAAA,UACV,KAAY,CAAC,KAAU;AAAA,UACvB,CAAC,KAAY,KAAU;AAAA,UACvB,CAAC,KAAY,CAAC,KAAU;AAAA,QAAA,CAC3B;AAAA,MAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,QAAe,GAAG;AAAA,MAAO,CAAA,CAC9B;AAAA,SAEH;AACD,aACK,kBAAA,cAAA,OAAA;AAAA,QACG,WAAW,EAAM;AAAA,UACb,KAAU,KAAY;AAAA,UACtB,KAAU,CAAC,KAAY;AAAA,UACvB,CAAC,KAAU,CAAC,KAAY;AAAA,QAAA,CAC3B;AAAA,MAAA,GAEA,IAAU,kBAAA,cAAA,GAAA;AAAA,QAAW,GAAG;AAAA,MAAA,CAAO,IAAM,kBAAA,cAAA,GAAA;AAAA,QAAU,GAAG;AAAA,MAAO,CAAA,CAC9D;AAAA;AAIL,SAAA;AACX,GAEa,KAA0C,CAAC;AAAA,EACpD,UAAO;AAAA,EACP,YAAS;AAAA,EACT;AAAA,EACA,UAAO;AAAA,EACP,cAAW;AAAA,EACX,UAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,IAAI,IAAU;AAAA,EACd,cAAW;AAAA,MACT;AACF,QAAM,IAAK,KACL,IAAqB,MAAM,CAAC,KAAY,KAAW,EAAQ;AAEjE,MAAI,IAAyB;AAC7B,SAAI,IACyB,IAAA,iBAClB,MAAS,YACS,KAAA,mBAIxB,kBAAA,cAAA,UAAA;AAAA,IACG,gBAAa;AAAA,IACb,MAAM,IAAU,WAAW;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAW,qBAAqB;AAAA,MAChC,CAAC,KAAY,IAAS,kBAAkB;AAAA,MACxC,CAAC,KAAY,IAAU,4BAA4B;AAAA,IAAA,CACtD;AAAA,IACD;AAAA,EAEC,GAAA,EAAe,CAAS,KACpB,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,EAAa,GAAW;AAAA,IACrB,MAAM,EAAQ,GAAM;AAAA,EACvB,CAAA,CACL,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,EAAQ,GAAM;AAAA,MACd;AAAA,MACA,KAAW;AAAA,IAAA,CACd;AAAA,EAAA,GAEA,CACL,GACC,MAAS,aACL,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,EAA6B,GAAM,GAAI,GAAM,GAAQ,CAAQ,CAClE,CAER;AAER;"}

package/dist/components/Flyout/FlyoutFooter.es.js CHANGED Viewed

@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1648,7 +1660,7 @@ const s = ({ buttons: t, border: o = !0 }) => /* @__PURE__ */ r.createElement("d
   key: `flyout-footer-button-${e}`,
   ...p,
   size: a.Medium
-}))), $M = ({ onConfirm: t, onCancel: o }) => /* @__PURE__ */ r.createElement(s, {
+}))), VM = ({ onConfirm: t, onCancel: o }) => /* @__PURE__ */ r.createElement(s, {
   buttons: t ? [
     {
       style: i.Default,
@@ -1674,6 +1686,6 @@ const s = ({ buttons: t, border: o = !0 }) => /* @__PURE__ */ r.createElement("d
 });
 export {
   s as FlyoutFooter,
-  $M as LegacyFlyoutFooter
+  VM as LegacyFlyoutFooter
 };
 //# sourceMappingURL=FlyoutFooter.es.js.map

package/dist/components/Flyout/FlyoutFooter.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type FlyoutFooterProps = PropsWithChildren<{\n buttons: [ButtonProps, ButtonProps] \| [ButtonProps];\n border?: boolean;\n}>;\n\nexport const FlyoutFooter: FC<FlyoutFooterProps> = ({ buttons, border = true }) => {\n return (\n <div\n className={merge([\n 'tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95',\n border && 'tw-border-t tw-border-t-black-10',\n ])}\n >\n {buttons.map((button, index) => (\n <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n ))}\n </div>\n );\n};\n\nexport const LegacyFlyoutFooter = ({ onConfirm, onCancel }: { onConfirm?: () => void; onCancel?: () => void }) => (\n <FlyoutFooter\n buttons={\n onConfirm\n ? [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Cancel',\n onClick: onCancel,\n },\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Strong,\n children: 'Confirm',\n onClick: onConfirm,\n icon: <IconCheckMark />,\n },\n ]\n : [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Close',\n onClick: onCancel,\n },\n ]\n }\n />\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,IAAsC,CAAC,EAAE,YAAS,YAAS,SAE/D,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,KAAU;AAAA,EAAA,CACb;AAAA,GAEA,EAAQ,IAAI,CAAC,GAAQ,MACjB,kBAAA,cAAA,GAAA;AAAA,EAAO,KAAK,wBAAwB;AAAA,EAAU,GAAG;AAAA,EAAQ,MAAM,EAAW;AAAQ,CAAA,CACtF,CACL,GAIK,KAAqB,CAAC,EAAE,cAAW,kBAC3C,kBAAA,cAAA,GAAA;AAAA,EACG,SACI,IACM;AAAA,IACI;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,sCAAO,GAAc,IAAA;AAAA,IACzB;AAAA,EAAA,IAEJ;AAAA,IACI;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,CAEd;"}
1	+ {"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type FlyoutFooterProps = PropsWithChildren<{\n buttons: [ButtonProps, ButtonProps] \| [ButtonProps];\n border?: boolean;\n}>;\n\nexport const FlyoutFooter: FC<FlyoutFooterProps> = ({ buttons, border = true }) => {\n return (\n <div\n className={merge([\n 'tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95',\n border && 'tw-border-t tw-border-t-black-10',\n ])}\n >\n {buttons.map((button, index) => (\n <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n ))}\n </div>\n );\n};\n\nexport const LegacyFlyoutFooter = ({ onConfirm, onCancel }: { onConfirm?: () => void; onCancel?: () => void }) => (\n <FlyoutFooter\n buttons={\n onConfirm\n ? [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Cancel',\n onClick: onCancel,\n },\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Strong,\n children: 'Confirm',\n onClick: onConfirm,\n icon: <IconCheckMark />,\n },\n ]\n : [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Close',\n onClick: onCancel,\n },\n ]\n }\n />\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,IAAsC,CAAC,EAAE,YAAS,YAAS,SAE/D,kBAAA,cAAA,OAAA;AAAA,EACG,WAAW,EAAM;AAAA,IACb;AAAA,IACA,KAAU;AAAA,EAAA,CACb;AAAA,GAEA,EAAQ,IAAI,CAAC,GAAQ,MACjB,kBAAA,cAAA,GAAA;AAAA,EAAO,KAAK,wBAAwB;AAAA,EAAU,GAAG;AAAA,EAAQ,MAAM,EAAW;AAAQ,CAAA,CACtF,CACL,GAIK,KAAqB,CAAC,EAAE,cAAW,kBAC3C,kBAAA,cAAA,GAAA;AAAA,EACG,SACI,IACM;AAAA,IACI;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,sCAAO,GAAc,IAAA;AAAA,IACzB;AAAA,EAAA,IAEJ;AAAA,IACI;AAAA,MACI,OAAO,EAAY;AAAA,MACnB,UAAU,EAAe;AAAA,MACzB,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,CAEd;"}

package/dist/components/Flyout/hooks/useOverlayPositionWithBottomMargin.es.js CHANGED Viewed

@@ -1341,6 +1341,18 @@ import "../../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1650,7 +1662,7 @@ const g = 5, f = 12, l = 70, d = {
   ["top right"]: "bottom right",
   ["bottom left"]: "top left",
   ["bottom right"]: "top right"
-}, CD = ({
+}, uV = ({
   triggerRef: s,
   overlayRef: o,
   scrollRef: i,
@@ -1686,6 +1698,6 @@ const g = 5, f = 12, l = 70, d = {
   return { positionProps: r };
 };
 export {
-  CD as useOverlayPositionWithBottomMargin
+  uV as useOverlayPositionWithBottomMargin
 };
 //# sourceMappingURL=useOverlayPositionWithBottomMargin.es.js.map

package/dist/components/Flyout/hooks/useOverlayPositionWithBottomMargin.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverlayPositionWithBottomMargin.es.js","sources":["../../../../src/components/Flyout/hooks/useOverlayPositionWithBottomMargin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AriaPositionProps, useOverlayPosition } from '@react-aria/overlays';\nimport { MutableRefObject, useLayoutEffect, useState } from 'react';\nimport { getTotalOverlayHeight } from '../helpers/getTotalOverlayHeight';\nimport { shouldDisplayAbove } from '../helpers/shouldDisplayAbove';\nimport { FlyoutPlacement } from '@components/Flyout';\n\nconst FLYOUT_OVERLAY_OFFSET = 5;\nconst DEFAULT_OVERLAY_PADDING = 12;\nconst INTERCOM_BUTTON_HEIGHT = 70;\n\ntype UseOverlayPositionWithBottomMarginProps = {\n triggerRef: MutableRefObject<HTMLElement \| null>;\n overlayRef: MutableRefObject<HTMLElement \| null>;\n scrollRef: MutableRefObject<HTMLElement \| null>;\n isOpen: boolean;\n placement?: FlyoutPlacement;\n offset?: number;\n updatePositionOnContentChange: boolean;\n};\n\nconst flippedPositionMap: Record<FlyoutPlacement, AriaPositionProps['placement']> = {\n ['top']: 'bottom',\n ['bottom']: 'top',\n ['left']: 'right',\n ['right']: 'left',\n ['top left']: 'bottom left',\n ['top right']: 'bottom right',\n ['bottom left']: 'top left',\n ['bottom right']: 'top right',\n};\n\nexport const useOverlayPositionWithBottomMargin = ({\n triggerRef,\n overlayRef,\n scrollRef,\n isOpen,\n placement,\n offset,\n updatePositionOnContentChange,\n}: UseOverlayPositionWithBottomMarginProps) => {\n const [flipVerticalPosition, setFlipVerticalPosition] = useState(false);\n const flippedPosition = placement && flippedPositionMap[placement];\n const verticalPosition = flipVerticalPosition ? flippedPosition : placement;\n\n const { overlayProps: positionProps, updatePosition } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef,\n shouldFlip: placement === FlyoutPlacement.Left \|\| placement === FlyoutPlacement.Right,\n placement:\n placement && (placement === FlyoutPlacement.Left \|\| placement === FlyoutPlacement.Right)\n ? placement\n : verticalPosition,\n containerPadding: DEFAULT_OVERLAY_PADDING,\n offset: offset ?? FLYOUT_OVERLAY_OFFSET,\n scrollRef,\n isOpen,\n });\n\n useLayoutEffect(() => {\n const resizeObserver = new ResizeObserver(updatePosition);\n\n if (isOpen) {\n const overlayHeight = getTotalOverlayHeight(overlayRef, scrollRef);\n setFlipVerticalPosition(\n shouldDisplayAbove(triggerRef, overlayHeight, FLYOUT_OVERLAY_OFFSET, INTERCOM_BUTTON_HEIGHT),\n );\n\n if (scrollRef.current && updatePositionOnContentChange) {\n resizeObserver.observe(scrollRef.current);\n }\n if (overlayRef.current && updatePositionOnContentChange) {\n resizeObserver.observe(overlayRef.current);\n }\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [isOpen, updatePositionOnContentChange, updatePosition, scrollRef, overlayRef, triggerRef]);\n\n if (typeof positionProps?.style?.maxHeight === 'number' && !flipVerticalPosition) {\n const heightToSubtract = INTERCOM_BUTTON_HEIGHT - DEFAULT_OVERLAY_PADDING;\n positionProps.style.maxHeight -= heightToSubtract;\n }\n\n return { positionProps };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAwB,GACxB,IAA0B,IAC1B,IAAyB,IAYzB,IAA8E;AAAA,EAChF,AAAC,KAAQ;AAAA,EACT,AAAC,QAAW;AAAA,EACZ,AAAC,MAAS;AAAA,EACV,AAAC,OAAU;AAAA,EACX,CAAC,aAAa;AAAA,EACd,CAAC,cAAc;AAAA,EACf,CAAC,gBAAgB;AAAA,EACjB,CAAC,iBAAiB;AACtB,GAEa,KAAqC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC2C;;AAC3C,QAAM,CAAC,GAAsB,KAA2B,EAAS,EAAK,GAChE,IAAkB,KAAa,EAAmB,IAClD,IAAmB,IAAuB,IAAkB,GAE5D,EAAE,cAAc,GAAe,sBAAmB,EAAmB;AAAA,IACvE,WAAW;AAAA,IACX;AAAA,IACA,YAAY,MAAc,EAAgB,QAAQ,MAAc,EAAgB;AAAA,IAChF,WACI,KAA4B,OAAA,EAAgB,QAAQ,MAAc,EAAgB,SAC5E,IACA;AAAA,IACV,kBAAkB;AAAA,IAClB,QAAQ,gBAAU;AAAA,IAClB;AAAA,IACA;AAAA,EAAA,CACH;AAwBD,MAtBA,EAAgB,MAAM;AACZ,UAAA,IAAiB,IAAI,eAAe,CAAc;AAExD,QAAI,GAAQ;AACF,YAAA,IAAgB,EAAsB,GAAY,CAAS;AACjE,QACI,EAAmB,GAAY,GAAe,GAAuB,CAAsB,CAC/F,GAEI,EAAU,WAAW,KACN,EAAA,QAAQ,EAAU,OAAO,GAExC,EAAW,WAAW,KACP,EAAA,QAAQ,EAAW,OAAO;AAAA,IAEjD;AAEA,WAAO,MAAM;AACT,QAAe,WAAW;AAAA,IAAA;AAAA,EAC9B,GACD,CAAC,GAAQ,GAA+B,GAAgB,GAAW,GAAY,CAAU,CAAC,GAEzF,OAAO,6BAAe,UAAf,kBAAsB,cAAc,YAAY,CAAC,GAAsB;AAC9E,UAAM,IAAmB,IAAyB;AAClD,MAAc,MAAM,aAAa;AAAA,EACrC;AAEA,SAAO,EAAE,iBAAc;AAC3B;"}
1	+ {"version":3,"file":"useOverlayPositionWithBottomMargin.es.js","sources":["../../../../src/components/Flyout/hooks/useOverlayPositionWithBottomMargin.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AriaPositionProps, useOverlayPosition } from '@react-aria/overlays';\nimport { MutableRefObject, useLayoutEffect, useState } from 'react';\nimport { getTotalOverlayHeight } from '../helpers/getTotalOverlayHeight';\nimport { shouldDisplayAbove } from '../helpers/shouldDisplayAbove';\nimport { FlyoutPlacement } from '@components/Flyout';\n\nconst FLYOUT_OVERLAY_OFFSET = 5;\nconst DEFAULT_OVERLAY_PADDING = 12;\nconst INTERCOM_BUTTON_HEIGHT = 70;\n\ntype UseOverlayPositionWithBottomMarginProps = {\n triggerRef: MutableRefObject<HTMLElement \| null>;\n overlayRef: MutableRefObject<HTMLElement \| null>;\n scrollRef: MutableRefObject<HTMLElement \| null>;\n isOpen: boolean;\n placement?: FlyoutPlacement;\n offset?: number;\n updatePositionOnContentChange: boolean;\n};\n\nconst flippedPositionMap: Record<FlyoutPlacement, AriaPositionProps['placement']> = {\n ['top']: 'bottom',\n ['bottom']: 'top',\n ['left']: 'right',\n ['right']: 'left',\n ['top left']: 'bottom left',\n ['top right']: 'bottom right',\n ['bottom left']: 'top left',\n ['bottom right']: 'top right',\n};\n\nexport const useOverlayPositionWithBottomMargin = ({\n triggerRef,\n overlayRef,\n scrollRef,\n isOpen,\n placement,\n offset,\n updatePositionOnContentChange,\n}: UseOverlayPositionWithBottomMarginProps) => {\n const [flipVerticalPosition, setFlipVerticalPosition] = useState(false);\n const flippedPosition = placement && flippedPositionMap[placement];\n const verticalPosition = flipVerticalPosition ? flippedPosition : placement;\n\n const { overlayProps: positionProps, updatePosition } = useOverlayPosition({\n targetRef: triggerRef,\n overlayRef,\n shouldFlip: placement === FlyoutPlacement.Left \|\| placement === FlyoutPlacement.Right,\n placement:\n placement && (placement === FlyoutPlacement.Left \|\| placement === FlyoutPlacement.Right)\n ? placement\n : verticalPosition,\n containerPadding: DEFAULT_OVERLAY_PADDING,\n offset: offset ?? FLYOUT_OVERLAY_OFFSET,\n scrollRef,\n isOpen,\n });\n\n useLayoutEffect(() => {\n const resizeObserver = new ResizeObserver(updatePosition);\n\n if (isOpen) {\n const overlayHeight = getTotalOverlayHeight(overlayRef, scrollRef);\n setFlipVerticalPosition(\n shouldDisplayAbove(triggerRef, overlayHeight, FLYOUT_OVERLAY_OFFSET, INTERCOM_BUTTON_HEIGHT),\n );\n\n if (scrollRef.current && updatePositionOnContentChange) {\n resizeObserver.observe(scrollRef.current);\n }\n if (overlayRef.current && updatePositionOnContentChange) {\n resizeObserver.observe(overlayRef.current);\n }\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [isOpen, updatePositionOnContentChange, updatePosition, scrollRef, overlayRef, triggerRef]);\n\n if (typeof positionProps?.style?.maxHeight === 'number' && !flipVerticalPosition) {\n const heightToSubtract = INTERCOM_BUTTON_HEIGHT - DEFAULT_OVERLAY_PADDING;\n positionProps.style.maxHeight -= heightToSubtract;\n }\n\n return { positionProps };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAwB,GACxB,IAA0B,IAC1B,IAAyB,IAYzB,IAA8E;AAAA,EAChF,AAAC,KAAQ;AAAA,EACT,AAAC,QAAW;AAAA,EACZ,AAAC,MAAS;AAAA,EACV,AAAC,OAAU;AAAA,EACX,CAAC,aAAa;AAAA,EACd,CAAC,cAAc;AAAA,EACf,CAAC,gBAAgB;AAAA,EACjB,CAAC,iBAAiB;AACtB,GAEa,KAAqC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC2C;;AAC3C,QAAM,CAAC,GAAsB,KAA2B,EAAS,EAAK,GAChE,IAAkB,KAAa,EAAmB,IAClD,IAAmB,IAAuB,IAAkB,GAE5D,EAAE,cAAc,GAAe,sBAAmB,EAAmB;AAAA,IACvE,WAAW;AAAA,IACX;AAAA,IACA,YAAY,MAAc,EAAgB,QAAQ,MAAc,EAAgB;AAAA,IAChF,WACI,KAA4B,OAAA,EAAgB,QAAQ,MAAc,EAAgB,SAC5E,IACA;AAAA,IACV,kBAAkB;AAAA,IAClB,QAAQ,gBAAU;AAAA,IAClB;AAAA,IACA;AAAA,EAAA,CACH;AAwBD,MAtBA,EAAgB,MAAM;AACZ,UAAA,IAAiB,IAAI,eAAe,CAAc;AAExD,QAAI,GAAQ;AACF,YAAA,IAAgB,EAAsB,GAAY,CAAS;AACjE,QACI,EAAmB,GAAY,GAAe,GAAuB,CAAsB,CAC/F,GAEI,EAAU,WAAW,KACN,EAAA,QAAQ,EAAU,OAAO,GAExC,EAAW,WAAW,KACP,EAAA,QAAQ,EAAW,OAAO;AAAA,IAEjD;AAEA,WAAO,MAAM;AACT,QAAe,WAAW;AAAA,IAAA;AAAA,EAC9B,GACD,CAAC,GAAQ,GAA+B,GAAgB,GAAW,GAAY,CAAU,CAAC,GAEzF,OAAO,6BAAe,UAAf,kBAAsB,cAAc,YAAY,CAAC,GAAsB;AAC9E,UAAM,IAAmB,IAAyB;AAClD,MAAc,MAAM,aAAa;AAAA,EACrC;AAEA,SAAO,EAAE,iBAAc;AAC3B;"}

package/dist/components/LinkChooser/LinkChooser.es.js CHANGED Viewed

@@ -1338,6 +1338,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1664,7 +1676,7 @@ const Gt = {
   [n.External]: /* @__PURE__ */ o.createElement(ft, null),
   [n.Template]: /* @__PURE__ */ o.createElement(Ct, null),
   [n.Block]: /* @__PURE__ */ o.createElement(ht, null)
-}, Vt = n.Link, TL = "custom-link", _L = 5, ML = "queries", PL = ({
+}, Vt = n.Link, HL = "custom-link", QL = 5, zL = "queries", YL = ({
   getGlobalByQuery: U = Pt,
   openPreview: G = window.open,
   clipboardOptions: V = navigator.clipboard,
@@ -1843,11 +1855,11 @@ const Gt = {
   })));
 };
 export {
-  TL as CUSTOM_LINK_ID,
+  HL as CUSTOM_LINK_ID,
   Vt as DEFAULT_ICON,
   Gt as IconOptions,
-  PL as LinkChooser,
-  _L as MAX_STORED_ITEMS,
-  ML as QUERIES_STORAGE_KEY
+  YL as LinkChooser,
+  QL as MAX_STORED_ITEMS,
+  zL as QUERIES_STORAGE_KEY
 };
 //# sourceMappingURL=LinkChooser.es.js.map