npm - @kaizen/components - Versions diffs - 1.37.0 → 1.38.0 - Mend

@kaizen/components 1.37.0 → 1.38.0

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

Files changed (920) hide show

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeInputField.mjs","sources":["../../../../../../src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport {\n DateInput,\n DateInputDescription,\n DateInputDescriptionProps,\n DateInputProps,\n} from \"~components/DateInput\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { isRefObject } from \"~utils/isRefObject\"\nimport {\n DateRangeValidationMessage,\n DateRangeValidationMessageProps,\n} from \"../DateRangeValidationMessage\"\nimport styles from \"./DateRangeInputField.module.scss\"\n\nexport type DateRangeInputFieldProps = {\n id: string\n legend: string\n inputStartDateProps: Omit<DateInputProps, \"id\">\n inputEndDateProps: Omit<DateInputProps, \"id\">\n locale: Locale\n /*\n A description that provides context for the text field\n */\n description?: DateInputDescriptionProps[\"description\"]\n isReversed?: boolean\n validationMessage?: DateRangeValidationMessageProps[\"validationMessage\"]\n disabled?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport type DateRangeInputFieldRefs = {\n inputStartDateRef?: React.RefObject<HTMLInputElement>\n inputEndDateRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const DateRangeInputField = React.forwardRef<\n DateRangeInputFieldRefs,\n DateRangeInputFieldProps\n>(\n (\n {\n id,\n legend,\n inputStartDateProps,\n inputEndDateProps,\n description,\n disabled,\n isReversed = false,\n validationMessage,\n locale,\n classNameOverride,\n ...restProps\n },\n ref\n ) => {\n const customRefObject = isRefObject(ref) ? ref.current : null\n const inputStartDateRef = customRefObject?.inputStartDateRef\n const inputEndDateRef = customRefObject?.inputEndDateRef\n\n const descriptionId = `${id}--field-message`\n\n // Date Start aria labels\n const dateStartErrorMessageId = validationMessage?.dateStart\n ? `${id}--date-start-error-message`\n : undefined\n\n const dateStartInputDescribedBy = dateStartErrorMessageId\n ? `${dateStartErrorMessageId} ${descriptionId}`\n : descriptionId\n\n const dateStartIsInvalid = dateStartErrorMessageId !== undefined\n\n // Date End aria labels\n const dateEndErrorMessageId = validationMessage?.dateEnd\n ? `${id}--date-end-error-message`\n : undefined\n\n const dateEndInputDescribedBy = dateEndErrorMessageId\n ? `${dateEndErrorMessageId} ${descriptionId}`\n : descriptionId\n\n const dateEndIsInvalid = dateEndErrorMessageId !== undefined\n\n return (\n <div className={classNameOverride} {...restProps}>\n <fieldset className={styles.dateRangeInputContainer}>\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n <DateInput\n ref={inputStartDateRef}\n id={`${id}--from`}\n aria-describedby={dateStartInputDescribedBy}\n aria-errormessage={dateStartErrorMessageId}\n aria-invalid={dateStartIsInvalid}\n autoComplete=\"off\"\n disabled={disabled}\n status={validationMessage?.dateStart?.status}\n {...inputStartDateProps}\n classNameOverride={classnames(\n styles.inputStartDate,\n inputStartDateProps.classNameOverride\n )}\n />\n <DateInput\n ref={inputEndDateRef}\n id={`${id}--to`}\n aria-describedby={dateEndInputDescribedBy}\n aria-errormessage={dateEndErrorMessageId}\n aria-invalid={dateEndIsInvalid}\n autoComplete=\"off\"\n disabled={disabled}\n status={validationMessage?.dateEnd?.status}\n {...inputEndDateProps}\n classNameOverride={classnames(\n styles.inputEndDate,\n inputEndDateProps.classNameOverride\n )}\n />\n </fieldset>\n\n {validationMessage && (\n <DateRangeValidationMessage\n validationMessage={validationMessage}\n isReversed={isReversed}\n dateStartId={dateStartErrorMessageId}\n dateEndId={dateEndErrorMessageId}\n />\n )}\n\n <FieldMessage\n id={descriptionId}\n message={\n <DateInputDescription description={description} locale={locale} />\n }\n reversed={isReversed}\n classNameOverride={disabled ? styles.disabled : undefined}\n />\n </div>\n )\n }\n)\n\nDateRangeInputField.displayName = \"DateRangeInputField\"\n"],"names":["DateRangeInputField","React","forwardRef","_a","ref","id","legend","inputStartDateProps","inputEndDateProps","description","disabled","_d","isReversed","validationMessage","locale","classNameOverride","restProps","__rest","customRefObject","isRefObject","current","inputStartDateRef","inputEndDateRef","descriptionId","concat","dateStartErrorMessageId","dateStart","undefined","dateStartInputDescribedBy","dateStartIsInvalid","dateEndErrorMessageId","dateEnd","dateEndInputDescribedBy","dateEndIsInvalid","createElement","__assign","className","styles","dateRangeInputContainer","VisuallyHidden","DateInput","autoComplete","status","_b","classnames","inputStartDate","_c","inputEndDate","DateRangeValidationMessage","dateStartId","dateEndId","FieldMessage","message","DateInputDescription","reversed","displayName"],"mappings":"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~~iBAChBZ~~,KAAC,CAAAiC,aAAA,CAAAc,0BAA0B;MACzBnC,iBAAiB,EAAEA,iBAAiB;MACpCD,UAAU,EAAEA,UAAU;MACtBqC,WAAW,EAAExB,uBAAuB;MACpCyB,SAAS,EAAEpB;IAAqB,CAAA,~~CAEnC~~,eAED7B,KAAA,CAAAiC,aAAA,CAACiB,YAAY,EACX;MAAA9C,EAAE,EAAEkB,aAAa;MACjB6B,OAAO,eACLnD,KAAA,CAAAiC,aAAA,CAACmB,oBAAoB,EAAA;QAAC5C,WAAW,EAAEA,WAAW;QAAEK,MAAM,EAAEA;MAAU,CAAA,CAAA;MAEpEwC,QAAQ,EAAE1C,UAAU;MACpBG,iBAAiB,EAAEL,QAAQ,GAAG2B,MAAM,CAAC3B,QAAQ,GAAGiB;IAAS,CACzD,CAAA,CACE;EAEV,CAAC,CACF;EAED3B,mBAAmB,CAACuD,WAAW,GAAG,qBAAqB;EAAA,OA5G1CvD,mBAAmB;AAAA;"}
1	+ {"version":3,"file":"DateRangeInputField.mjs","sources":["../../../../../../src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport {\n DateInput,\n DateInputDescription,\n DateInputDescriptionProps,\n DateInputProps,\n} from \"~components/DateInput\"\nimport { FieldMessage } from \"~components/FieldMessage\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { isRefObject } from \"~utils/isRefObject\"\nimport {\n DateRangeValidationMessage,\n DateRangeValidationMessageProps,\n} from \"../DateRangeValidationMessage\"\nimport styles from \"./DateRangeInputField.module.scss\"\n\nexport type DateRangeInputFieldProps = {\n id: string\n legend: string\n inputStartDateProps: Omit<DateInputProps, \"id\">\n inputEndDateProps: Omit<DateInputProps, \"id\">\n locale: Locale\n /*\n A description that provides context for the text field\n */\n description?: DateInputDescriptionProps[\"description\"]\n isReversed?: boolean\n validationMessage?: DateRangeValidationMessageProps[\"validationMessage\"]\n disabled?: boolean\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport type DateRangeInputFieldRefs = {\n inputStartDateRef?: React.RefObject<HTMLInputElement>\n inputEndDateRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const DateRangeInputField = React.forwardRef<\n DateRangeInputFieldRefs,\n DateRangeInputFieldProps\n>(\n (\n {\n id,\n legend,\n inputStartDateProps,\n inputEndDateProps,\n description,\n disabled,\n isReversed = false,\n validationMessage,\n locale,\n classNameOverride,\n ...restProps\n },\n ref\n ) => {\n const customRefObject = isRefObject(ref) ? ref.current : null\n const inputStartDateRef = customRefObject?.inputStartDateRef\n const inputEndDateRef = customRefObject?.inputEndDateRef\n\n const descriptionId = `${id}--field-message`\n\n // Date Start aria labels\n const dateStartErrorMessageId = validationMessage?.dateStart\n ? `${id}--date-start-error-message`\n : undefined\n\n const dateStartInputDescribedBy = dateStartErrorMessageId\n ? `${dateStartErrorMessageId} ${descriptionId}`\n : descriptionId\n\n const dateStartIsInvalid = dateStartErrorMessageId !== undefined\n\n // Date End aria labels\n const dateEndErrorMessageId = validationMessage?.dateEnd\n ? `${id}--date-end-error-message`\n : undefined\n\n const dateEndInputDescribedBy = dateEndErrorMessageId\n ? `${dateEndErrorMessageId} ${descriptionId}`\n : descriptionId\n\n const dateEndIsInvalid = dateEndErrorMessageId !== undefined\n\n return (\n <div className={classNameOverride} {...restProps}>\n <fieldset className={styles.dateRangeInputContainer}>\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n <DateInput\n ref={inputStartDateRef}\n id={`${id}--from`}\n aria-describedby={dateStartInputDescribedBy}\n aria-errormessage={dateStartErrorMessageId}\n aria-invalid={dateStartIsInvalid}\n autoComplete=\"off\"\n disabled={disabled}\n status={validationMessage?.dateStart?.status}\n {...inputStartDateProps}\n classNameOverride={classnames(\n styles.inputStartDate,\n inputStartDateProps.classNameOverride\n )}\n />\n <DateInput\n ref={inputEndDateRef}\n id={`${id}--to`}\n aria-describedby={dateEndInputDescribedBy}\n aria-errormessage={dateEndErrorMessageId}\n aria-invalid={dateEndIsInvalid}\n autoComplete=\"off\"\n disabled={disabled}\n status={validationMessage?.dateEnd?.status}\n {...inputEndDateProps}\n classNameOverride={classnames(\n styles.inputEndDate,\n inputEndDateProps.classNameOverride\n )}\n />\n </fieldset>\n\n {validationMessage && (\n <DateRangeValidationMessage\n validationMessage={validationMessage}\n isReversed={isReversed}\n dateStartId={dateStartErrorMessageId}\n dateEndId={dateEndErrorMessageId}\n />\n )}\n\n <FieldMessage\n id={descriptionId}\n message={\n <DateInputDescription description={description} locale={locale} />\n }\n reversed={isReversed}\n classNameOverride={disabled ? styles.disabled : undefined}\n />\n </div>\n )\n }\n)\n\nDateRangeInputField.displayName = \"DateRangeInputField\"\n"],"names":["DateRangeInputField","React","forwardRef","_a","ref","id","legend","inputStartDateProps","inputEndDateProps","description","disabled","_d","isReversed","validationMessage","locale","classNameOverride","restProps","__rest","customRefObject","isRefObject","current","inputStartDateRef","inputEndDateRef","descriptionId","concat","dateStartErrorMessageId","dateStart","undefined","dateStartInputDescribedBy","dateStartIsInvalid","dateEndErrorMessageId","dateEnd","dateEndInputDescribedBy","dateEndIsInvalid","createElement","__assign","className","styles","dateRangeInputContainer","VisuallyHidden","DateInput","autoComplete","status","_b","classnames","inputStartDate","_c","inputEndDate","DateRangeValidationMessage","dateStartId","dateEndId","FieldMessage","message","DateInputDescription","reversed","displayName"],"mappings":";;;;;;;;;;;MAsCaA,mBAAmB;EAAA,MAAnBA,mBAAmB,gBAAGC,KAAK,CAACC,UAAU,CAIjD,UACEC,EAYC,EACDC,GAAG,EAAA;;IAZD,IAAAC,EAAE,GAAAF,EAAA,CAAAE,EAAA;MACFC,MAAM,GAAAH,EAAA,CAAAG,MAAA;MACNC,mBAAmB,GAAAJ,EAAA,CAAAI,mBAAA;MACnBC,iBAAiB,uBAAA;MACjBC,WAAW,GAAAN,EAAA,CAAAM,WAAA;MACXC,QAAQ,GAAAP,EAAA,CAAAO,QAAA;MACRC,EAAkB,GAAAR,EAAA,CAAAS,UAAA;MAAlBA,UAAU,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;MAClBE,iBAAiB,GAAAV,EAAA,CAAAU,iBAAA;MACjBC,MAAM,GAAAX,EAAA,CAAAW,MAAA;MACNC,iBAAiB,GAAAZ,EAAA,CAAAY,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAd,EAAA,EAXd,yJAYC,CADa;IAId,IAAMe,eAAe,GAAGC,WAAW,CAACf,GAAG,CAAC,GAAGA,GAAG,CAACgB,OAAO,GAAG,IAAI;IAC7D,IAAMC,iBAAiB,GAAGH,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAf,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,eAAe,CAAEG,iBAAiB;IAC5D,IAAMC,eAAe,GAAGJ,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAf,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,eAAe,CAAEI,eAAe;IAExD,IAAMC,aAAa,GAAG,EAAG,CAAAC,MAAA,CAAAnB,EAAE,oBAAiB;;IAG5C,IAAMoB,uBAAuB,GAAG,CAAAZ,iBAAiB,aAAjBA,iBAAiB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAjBA,iBAAiB,CAAEa,SAAS,IACxD,EAAG,CAAAF,MAAA,CAAAnB,EAAE,EAA4B,4BAAA,CAAA,GACjCsB,SAAS;IAEb,IAAMC,yBAAyB,GAAGH,uBAAuB,GACrD,EAAA,CAAAD,MAAA,CAAGC,uBAAuB,EAAA,GAAA,CAAA,CAAAD,MAAA,CAAID,aAAa,CAAE,GAC7CA,aAAa;IAEjB,IAAMM,kBAAkB,GAAGJ,uBAAuB,KAAKE,SAAS;;IAGhE,IAAMG,qBAAqB,GAAG,CAAAjB,iBAAiB,aAAjBA,iBAAiB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAjBA,iBAAiB,CAAEkB,OAAO,IACpD,EAAG,CAAAP,MAAA,CAAAnB,EAAE,EAA0B,0BAAA,CAAA,GAC/BsB,SAAS;IAEb,IAAMK,uBAAuB,GAAGF,qBAAqB,GACjD,EAAA,CAAAN,MAAA,CAAGM,qBAAqB,EAAA,GAAA,CAAA,CAAAN,MAAA,CAAID,aAAa,CAAE,GAC3CA,aAAa;IAEjB,IAAMU,gBAAgB,GAAGH,qBAAqB,KAAKH,SAAS;IAE5D,oBACE1B,KAAK,CAAAiC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MAAAC,SAAS,EAAErB;OAAuBC,SAAS,CAAA,eAC9Cf,KAAA,CAAAiC,aAAA,CAAA,UAAA,EAAA;MAAUE,SAAS,EAAEC,MAAM,CAACC;IAAuB,CAAA,eACjDrC,KAAA,CAAAiC,aAAA,CAAA,QAAA,EAAA,IAAA,eACEjC,KAAA,CAAAiC,aAAA,CAACK,cAAc,EAAA,IAAA,EAAEjC,MAAM,CAAkB,CAClC,eACTL,KAAC,CAAAiC,aAAA,CAAAM,SAAS,EACRL,QAAA,CAAA;MAAA/B,GAAG,EAAEiB,iBAAiB;MACtBhB,EAAE,EAAE,EAAG,CAAAmB,MAAA,CAAAnB,EAAE,EAAQ,QAAA,CAAA;MAAA,kBAAA,EACCuB,yBAAyB;MACxB,mBAAA,EAAAH,uBAAuB;MAC5B,cAAA,EAAAI,kBAAkB;MAChCY,YAAY,EAAC,KAAK;MAClB/B,QAAQ,EAAEA,QAAQ;MAClBgC,MAAM,EAAE,CAAAC,EAAA,GAAA9B,iBAAiB,KAAA,IAAA,IAAjBA,iBAAiB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAjBA,iBAAiB,CAAEa,SAAS,MAAE,IAAA,IAAAiB,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAD;IAAM,CACxC,EAAAnC,mBAAmB;MACvBQ,iBAAiB,EAAE6B,UAAU,CAC3BP,MAAM,CAACQ,cAAc,EACrBtC,mBAAmB,CAACQ,iBAAiB;IAEvC,CAAA,CAAA,CAAA,eACFd,KAAC,CAAAiC,aAAA,CAAAM,SAAS,EACRL,QAAA,CAAA;MAAA/B,GAAG,EAAEkB,eAAe;MACpBjB,EAAE,EAAE,EAAG,CAAAmB,MAAA,CAAAnB,EAAE,EAAM,MAAA,CAAA;MAAA,kBAAA,EACG2B,uBAAuB;MACtB,mBAAA,EAAAF,qBAAqB;MAC1B,cAAA,EAAAG,gBAAgB;MAC9BQ,YAAY,EAAC,KAAK;MAClB/B,QAAQ,EAAEA,QAAQ;MAClBgC,MAAM,EAAE,CAAAI,EAAA,GAAAjC,iBAAiB,KAAjB,IAAA,IAAAA,iBAAiB,KAAjB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,CAAEkB,OAAO,MAAA,IAAA,IAAAe,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEJ;IAAM,CAAA,EACtClC,iBAAiB,EAAA;MACrBO,iBAAiB,EAAE6B,UAAU,CAC3BP,MAAM,CAACU,YAAY,EACnBvC,iBAAiB,CAACO,iBAAiB;IACpC,CAAA,CAAA,CACD,CACO,EAEVF,iBAAiB,mBAChBZ,KAAC,CAAAiC,aAAA,CAAAc,0BAA0B;MACzBnC,iBAAiB,EAAEA,iBAAiB;MACpCD,UAAU,EAAEA,UAAU;MACtBqC,WAAW,EAAExB,uBAAuB;MACpCyB,SAAS,EAAEpB;IAAqB,CAAA,CAChC,CACH,eAED7B,KAAA,CAAAiC,aAAA,CAACiB,YAAY,EACX;MAAA9C,EAAE,EAAEkB,aAAa;MACjB6B,OAAO,eACLnD,KAAA,CAAAiC,aAAA,CAACmB,oBAAoB,EAAA;QAAC5C,WAAW,EAAEA,WAAW;QAAEK,MAAM,EAAEA;MAAU,CAAA,CAAA;MAEpEwC,QAAQ,EAAE1C,UAAU;MACpBG,iBAAiB,EAAEL,QAAQ,GAAG2B,MAAM,CAAC3B,QAAQ,GAAGiB;IAAS,CACzD,CAAA,CACE;EAEV,CAAC,CACF;EAED3B,mBAAmB,CAACuD,WAAW,GAAG,qBAAqB;EAAA,OA5G1CvD,mBAAmB;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.mjs CHANGED Viewed

@@ -17,11 +17,11 @@ const ListBoxSection = /*#__PURE__*/function () {
       "aria-label": !hasSectionHeader ? sectionName : undefined,
       "aria-labelledby": hasSectionHeader ? listSectionId : undefined,
       role: "group"
-    }, hasSectionHeader && /*#__PURE__*/React.createElement("li", {
+    }, hasSectionHeader && ( /*#__PURE__*/React.createElement("li", {
       className: styles.listBoxSectionHeader,
       id: listSectionId,
       role: "presentation"
-    }, sectionName && /*#__PURE__*/React.createElement(VisuallyHidden, null, sectionName, ". "), restProps.sectionHeader), Array.from(items).map(function (node) {
+    }, sectionName && /*#__PURE__*/React.createElement(VisuallyHidden, null, sectionName, ". "), restProps.sectionHeader)), Array.from(items).map(function (node) {
       return node != undefined && children(node);
     })));
   };

package/dist/esm/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListBoxSection.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx"],"sourcesContent":["import React, { ReactNode, useId } from \"react\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./ListBoxSection.module.scss\"\n\ntype SectionNameProps = {\n /*\n Becomes an aria-label on the section, informing\n * unsighted users\n /\n sectionName: string\n}\n\ntype SectionHeaderProps = {\n /\n Becomes an aria-label on the section, informing\n * unsighted users\n /\n sectionName?: string\n /\n Can be used for a visual title of the ListBoxSection or to provide addition information in a React node.\n * If this is the same title as sectionName, you should only pass in a sectionHeader to avoid duplicate descriptions.\n /\n sectionHeader: ReactNode\n}\n\nexport type ListBoxSectionProps = {\n items: MultiSelectItem[]\n children: (item: MultiSelectItem) => React.ReactNode\n} & (SectionHeaderProps \| SectionNameProps)\n\nexport const ListBoxSection = ({\n items,\n children,\n sectionName,\n ...restProps\n}: ListBoxSectionProps): JSX.Element => {\n const listSectionId = useId()\n const hasSectionHeader = \"sectionHeader\" in restProps\n return (\n <li role=\"presentation\">\n <ul\n className={styles.listBoxSection}\n aria-label={!hasSectionHeader ? sectionName : undefined}\n aria-labelledby={hasSectionHeader ? listSectionId : undefined}\n role=\"group\"\n >\n {hasSectionHeader && (\n <li\n className={styles.listBoxSectionHeader}\n id={listSectionId}\n role=\"presentation\"\n >\n {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>}\n {restProps.sectionHeader}\n </li>\n )}\n {/\n * This seems semantically strange but most closely aligns to WCAGs suggested pattern:\n https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/\n * the role=\"presentation\" will throw an error a11y warning \"Element has children which are not allowed\".\n This is expected and is an accepted issue / potential limitation with axe\n */}\n {Array.from(items).map(node => node != undefined && children(node))}\n </ul>\n </li>\n )\n}\nListBoxSection.displayName = \"ListBoxSection\"\n"],"names":["ListBoxSection","_a","items","children","sectionName","restProps","__rest","listSectionId","useId","hasSectionHeader","React","createElement","role","className","styles","listBoxSection","undefined","listBoxSectionHeader","id","VisuallyHidden","sectionHeader","Array","from","map","node","displayName"],"mappings":";;;;MA+BaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAACC,EAKT,EAAA;IAJpB,IAAAC,KAAK,GAAAD,EAAA,CAAAC,KAAA;MACLC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;MACRC,WAAW,GAAAH,EAAA,CAAAG,WAAA;MACRC,SAAS,GAJiBC,MAAA,CAAAL,EAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAK9B,CADa;IAEZ,IAAMM,aAAa,GAAGC,KAAK,EAAE;IAC7B,IAAMC,gBAAgB,IAAG,eAAe,IAAIJ,SAAS;IACrD,oBACEK,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;MAAIC,IAAI,EAAC;IAAc,CAAA,eACrBF,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;MACEE,SAAS,EAAEC,MAAM,CAACC,cAAc;MAAA,YAAA,EACpB,CAACN,gBAAgB,GAAGL,WAAW,GAAGY,SAAS;MACtC,iBAAA,EAAAP,gBAAgB,GAAGF,aAAa,GAAGS,SAAS;MAC7DJ,IAAI,EAAC;IAAO,CAAA,EAEXH,gBAAgB,~~iBACfC~~,KACE,CAAAC,aAAA,CAAA,IAAA,EAAA;MAAAE,SAAS,EAAEC,MAAM,CAACG,oBAAoB;MACtCC,EAAE,EAAEX,aAAa;MACjBK,IAAI,EAAC;IAAc,CAAA,EAElBR,WAAW,iBAAIM,oBAACS,cAAc,EAAA,IAAA,EAAEf,WAAW,EAAoB,IAAA,CAAA,EAC/DC,SAAS,CAACe,aAAa,~~CAE3B~~,EAOAC,KAAK,CAACC,IAAI,CAACpB,KAAK,CAAC,CAACqB,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAI,OAAAA,IAAI,IAAIR,SAAS,IAAIb,QAAQ,CAACqB,IAAI,CAAC;IAAA,CAAA,CAAC,CAChE,CACF;EAET,CAAC;EACDxB,cAAc,CAACyB,WAAW,GAAG,gBAAgB;EAAA,OArChCzB,cAAc;AAAA;"}
1	+ {"version":3,"file":"ListBoxSection.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx"],"sourcesContent":["import React, { ReactNode, useId } from \"react\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./ListBoxSection.module.scss\"\n\ntype SectionNameProps = {\n /*\n Becomes an aria-label on the section, informing\n * unsighted users\n /\n sectionName: string\n}\n\ntype SectionHeaderProps = {\n /\n Becomes an aria-label on the section, informing\n * unsighted users\n /\n sectionName?: string\n /\n Can be used for a visual title of the ListBoxSection or to provide addition information in a React node.\n * If this is the same title as sectionName, you should only pass in a sectionHeader to avoid duplicate descriptions.\n /\n sectionHeader: ReactNode\n}\n\nexport type ListBoxSectionProps = {\n items: MultiSelectItem[]\n children: (item: MultiSelectItem) => React.ReactNode\n} & (SectionHeaderProps \| SectionNameProps)\n\nexport const ListBoxSection = ({\n items,\n children,\n sectionName,\n ...restProps\n}: ListBoxSectionProps): JSX.Element => {\n const listSectionId = useId()\n const hasSectionHeader = \"sectionHeader\" in restProps\n return (\n <li role=\"presentation\">\n <ul\n className={styles.listBoxSection}\n aria-label={!hasSectionHeader ? sectionName : undefined}\n aria-labelledby={hasSectionHeader ? listSectionId : undefined}\n role=\"group\"\n >\n {hasSectionHeader && (\n <li\n className={styles.listBoxSectionHeader}\n id={listSectionId}\n role=\"presentation\"\n >\n {sectionName && <VisuallyHidden>{sectionName}. </VisuallyHidden>}\n {restProps.sectionHeader}\n </li>\n )}\n {/\n * This seems semantically strange but most closely aligns to WCAGs suggested pattern:\n https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/\n * the role=\"presentation\" will throw an error a11y warning \"Element has children which are not allowed\".\n This is expected and is an accepted issue / potential limitation with axe\n */}\n {Array.from(items).map(node => node != undefined && children(node))}\n </ul>\n </li>\n )\n}\nListBoxSection.displayName = \"ListBoxSection\"\n"],"names":["ListBoxSection","_a","items","children","sectionName","restProps","__rest","listSectionId","useId","hasSectionHeader","React","createElement","role","className","styles","listBoxSection","undefined","listBoxSectionHeader","id","VisuallyHidden","sectionHeader","Array","from","map","node","displayName"],"mappings":";;;;MA+BaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAACC,EAKT,EAAA;IAJpB,IAAAC,KAAK,GAAAD,EAAA,CAAAC,KAAA;MACLC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;MACRC,WAAW,GAAAH,EAAA,CAAAG,WAAA;MACRC,SAAS,GAJiBC,MAAA,CAAAL,EAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAK9B,CADa;IAEZ,IAAMM,aAAa,GAAGC,KAAK,EAAE;IAC7B,IAAMC,gBAAgB,IAAG,eAAe,IAAIJ,SAAS;IACrD,oBACEK,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;MAAIC,IAAI,EAAC;IAAc,CAAA,eACrBF,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;MACEE,SAAS,EAAEC,MAAM,CAACC,cAAc;MAAA,YAAA,EACpB,CAACN,gBAAgB,GAAGL,WAAW,GAAGY,SAAS;MACtC,iBAAA,EAAAP,gBAAgB,GAAGF,aAAa,GAAGS,SAAS;MAC7DJ,IAAI,EAAC;IAAO,CAAA,EAEXH,gBAAgB,mBACfC,KACE,CAAAC,aAAA,CAAA,IAAA,EAAA;MAAAE,SAAS,EAAEC,MAAM,CAACG,oBAAoB;MACtCC,EAAE,EAAEX,aAAa;MACjBK,IAAI,EAAC;IAAc,CAAA,EAElBR,WAAW,iBAAIM,oBAACS,cAAc,EAAA,IAAA,EAAEf,WAAW,EAAoB,IAAA,CAAA,EAC/DC,SAAS,CAACe,aAAa,CACrB,CACN,EAOAC,KAAK,CAACC,IAAI,CAACpB,KAAK,CAAC,CAACqB,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAI,OAAAA,IAAI,IAAIR,SAAS,IAAIb,QAAQ,CAACqB,IAAI,CAAC;IAAA,CAAA,CAAC,CAChE,CACF;EAET,CAAC;EACDxB,cAAc,CAACyB,WAAW,GAAG,gBAAgB;EAAA,OArChCzB,cAAc;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs CHANGED Viewed

@@ -26,14 +26,14 @@ const MenuPopup = /*#__PURE__*/function () {
     // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
     // In addition, add hidden <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
-    return menuTriggerState.isOpen ? /*#__PURE__*/React.createElement("div", __assign({}, overlayProps, {
+    return menuTriggerState.isOpen ? ( /*#__PURE__*/React.createElement("div", __assign({}, overlayProps, {
       ref: overlayRef,
       className: styles.menuPopup
-    }), isLoading && loadingSkeleton ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DismissButton, {
+    }), isLoading && loadingSkeleton ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DismissButton, {
       onDismiss: onClose
     }), loadingSkeleton, /*#__PURE__*/React.createElement(DismissButton, {
       onDismiss: onClose
-    })) :
+    }))) : (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-autofocus
     React.createElement(FocusScope, {
@@ -44,7 +44,7 @@ const MenuPopup = /*#__PURE__*/function () {
       onDismiss: onClose
     }), children, /*#__PURE__*/React.createElement(DismissButton, {
       onDismiss: onClose
-    }))) : /*#__PURE__*/React.createElement(React.Fragment, null);
+    }))))) : ( /*#__PURE__*/React.createElement(React.Fragment, null));
   };
   MenuPopup.displayName = "FilterMultiSelect.MenuPopup";
   return MenuPopup;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuPopup.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx"],"sourcesContent":["import React from \"react\"\nimport { FocusScope } from \"@react-aria/focus\"\nimport { useOverlay, DismissButton } from \"@react-aria/overlays\"\nimport { useMenuTriggerContext } from \"../../context\"\nimport styles from \"./MenuPopup.module.scss\"\n\nexport type MenuPopupProps = {\n isLoading?: boolean\n loadingSkeleton?: React.ReactNode\n children: React.ReactNode\n}\n\nexport const MenuPopup = ({\n isLoading,\n loadingSkeleton,\n children,\n}: MenuPopupProps): JSX.Element => {\n const { menuTriggerState } = useMenuTriggerContext()\n\n const onClose = (): void => menuTriggerState.close()\n\n // Handle events that should cause the menu to close,\n // e.g. blur, clicking outside, or pressing the escape key.\n const overlayRef = React.createRef<HTMLDivElement>()\n const { overlayProps } = useOverlay(\n {\n onClose,\n isOpen: menuTriggerState.isOpen,\n isDismissable: true,\n },\n overlayRef\n )\n\n // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed\n // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)\n // In addition, add hidden <DismissButton> components at the start and end of the list\n // to allow screen reader users to dismiss the popup easily.\n return menuTriggerState.isOpen ? (\n <div {...overlayProps} ref={overlayRef} className={styles.menuPopup}>\n {isLoading && loadingSkeleton ? (\n <>\n <DismissButton onDismiss={onClose} />\n {loadingSkeleton}\n <DismissButton onDismiss={onClose} />\n </>\n ) : (\n // eslint-disable-next-line jsx-a11y/no-autofocus\n <FocusScope contain autoFocus restoreFocus>\n <DismissButton onDismiss={onClose} />\n\n {children}\n <DismissButton onDismiss={onClose} />\n </FocusScope>\n )}\n </div>\n ) : (\n <></>\n )\n}\n\nMenuPopup.displayName = \"FilterMultiSelect.MenuPopup\"\n"],"names":["MenuPopup","_a","isLoading","loadingSkeleton","children","menuTriggerState","useMenuTriggerContext","onClose","close","overlayRef","React","createRef","overlayProps","useOverlay","isOpen","isDismissable","createElement","__assign","ref","className","styles","menuPopup","Fragment","DismissButton","onDismiss","FocusScope","contain","autoFocus","restoreFocus","displayName"],"mappings":";;;;;;;MAYaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHf,IAAAC,SAAS,eAAA;MACTC,eAAe,GAAAF,EAAA,CAAAE,eAAA;MACfC,QAAQ,GAAAH,EAAA,CAAAG,QAAA;IAEA,IAAAC,gBAAgB,GAAKC,qBAAqB,CAAE,CAAA,iBAA5B;IAExB,IAAMC,OAAO,GAAG,SAAAA,CAAA,EAAA;MAAY,OAAAF,gBAAgB,CAACG,KAAK,CAAA,CAAE;IAAxB,CAAwB;;;IAIpD,IAAMC,UAAU,gBAAGC,KAAK,CAACC,SAAS,EAAkB;IAC5C,IAAAC,YAAY,GAAKC,UAAU,CACjC;MACEN,OAAO,EAAAA,OAAA;MACPO,MAAM,EAAET,gBAAgB,CAACS,MAAM;MAC/BC,aAAa,EAAE;KAChB,EACDN,UAAU,CACX,CAAAG,YAPmB;;;;;IAapB,OAAOP,gBAAgB,CAACS,MAAM,~~gBAC5BJ~~,KAAS,CAAAM,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA,CAAA,CAAA,EAAAL,YAAY,EAAE;MAAAM,GAAG,EAAET,UAAU;MAAEU,SAAS,EAAEC,MAAM,CAACC;IAAS,CAAA,CAAA,EAChEnB,SAAS,IAAIC,eAAe,~~gBAC3BO~~,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,eACEZ,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EACpCJ,eAAe,eAChBO,KAAC,CAAAM,aAAA,CAAAO,aAAa,EAAC;MAAAC,SAAS,EAAEjB;MAAW,CACpC;IAAA;;IAGHG,KAAA,CAAAM,aAAA,CAACS,UAAU,EAAC;MAAAC,OAAO,EAAC,IAAA;MAAAC,SAAS;MAACC,YAAY,EAAA;IAAA,CAAA,eACxClB,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EAEpCH,QAAQ,eACTM,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAC;MAAAC,SAAS,EAAEjB;IAAO,EAAI,~~CAExC~~,CACG,~~gBAENG~~,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,~~CACD~~;EACH,CAAC;EAEDtB,SAAS,CAAC6B,WAAW,GAAG,6BAA6B;EAAA,OAhDxC7B,SAAS;AAAA;"}
1	+ {"version":3,"file":"MenuPopup.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx"],"sourcesContent":["import React from \"react\"\nimport { FocusScope } from \"@react-aria/focus\"\nimport { useOverlay, DismissButton } from \"@react-aria/overlays\"\nimport { useMenuTriggerContext } from \"../../context\"\nimport styles from \"./MenuPopup.module.scss\"\n\nexport type MenuPopupProps = {\n isLoading?: boolean\n loadingSkeleton?: React.ReactNode\n children: React.ReactNode\n}\n\nexport const MenuPopup = ({\n isLoading,\n loadingSkeleton,\n children,\n}: MenuPopupProps): JSX.Element => {\n const { menuTriggerState } = useMenuTriggerContext()\n\n const onClose = (): void => menuTriggerState.close()\n\n // Handle events that should cause the menu to close,\n // e.g. blur, clicking outside, or pressing the escape key.\n const overlayRef = React.createRef<HTMLDivElement>()\n const { overlayProps } = useOverlay(\n {\n onClose,\n isOpen: menuTriggerState.isOpen,\n isDismissable: true,\n },\n overlayRef\n )\n\n // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed\n // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)\n // In addition, add hidden <DismissButton> components at the start and end of the list\n // to allow screen reader users to dismiss the popup easily.\n return menuTriggerState.isOpen ? (\n <div {...overlayProps} ref={overlayRef} className={styles.menuPopup}>\n {isLoading && loadingSkeleton ? (\n <>\n <DismissButton onDismiss={onClose} />\n {loadingSkeleton}\n <DismissButton onDismiss={onClose} />\n </>\n ) : (\n // eslint-disable-next-line jsx-a11y/no-autofocus\n <FocusScope contain autoFocus restoreFocus>\n <DismissButton onDismiss={onClose} />\n\n {children}\n <DismissButton onDismiss={onClose} />\n </FocusScope>\n )}\n </div>\n ) : (\n <></>\n )\n}\n\nMenuPopup.displayName = \"FilterMultiSelect.MenuPopup\"\n"],"names":["MenuPopup","_a","isLoading","loadingSkeleton","children","menuTriggerState","useMenuTriggerContext","onClose","close","overlayRef","React","createRef","overlayProps","useOverlay","isOpen","isDismissable","createElement","__assign","ref","className","styles","menuPopup","Fragment","DismissButton","onDismiss","FocusScope","contain","autoFocus","restoreFocus","displayName"],"mappings":";;;;;;;MAYaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHf,IAAAC,SAAS,eAAA;MACTC,eAAe,GAAAF,EAAA,CAAAE,eAAA;MACfC,QAAQ,GAAAH,EAAA,CAAAG,QAAA;IAEA,IAAAC,gBAAgB,GAAKC,qBAAqB,CAAE,CAAA,iBAA5B;IAExB,IAAMC,OAAO,GAAG,SAAAA,CAAA,EAAA;MAAY,OAAAF,gBAAgB,CAACG,KAAK,CAAA,CAAE;IAAxB,CAAwB;;;IAIpD,IAAMC,UAAU,gBAAGC,KAAK,CAACC,SAAS,EAAkB;IAC5C,IAAAC,YAAY,GAAKC,UAAU,CACjC;MACEN,OAAO,EAAAA,OAAA;MACPO,MAAM,EAAET,gBAAgB,CAACS,MAAM;MAC/BC,aAAa,EAAE;KAChB,EACDN,UAAU,CACX,CAAAG,YAPmB;;;;;IAapB,OAAOP,gBAAgB,CAACS,MAAM,kBAC5BJ,KAAS,CAAAM,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA,CAAA,CAAA,EAAAL,YAAY,EAAE;MAAAM,GAAG,EAAET,UAAU;MAAEU,SAAS,EAAEC,MAAM,CAACC;IAAS,CAAA,CAAA,EAChEnB,SAAS,IAAIC,eAAe,kBAC3BO,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,eACEZ,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EACpCJ,eAAe,eAChBO,KAAC,CAAAM,aAAA,CAAAO,aAAa,EAAC;MAAAC,SAAS,EAAEjB;MAAW,CACpC;IAAA;;IAGHG,KAAA,CAAAM,aAAA,CAACS,UAAU,EAAC;MAAAC,OAAO,EAAC,IAAA;MAAAC,SAAS;MAACC,YAAY,EAAA;IAAA,CAAA,eACxClB,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAA;MAACC,SAAS,EAAEjB;IAAO,CAAI,CAAA,EAEpCH,QAAQ,eACTM,KAAA,CAAAM,aAAA,CAACO,aAAa,EAAC;MAAAC,SAAS,EAAEjB;IAAO,EAAI,CAC1B,CACd,CACG,mBAENG,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAY,QAAA,EAAA,IAAA,CAAK,CACN;EACH,CAAC;EAEDtB,SAAS,CAAC6B,WAAW,GAAG,6BAA6B;EAAA,OAhDxC7B,SAAS;AAAA;"}

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs CHANGED Viewed

@@ -40,12 +40,12 @@ const MultiSelectOption = /*#__PURE__*/function () {
       className: classnames(styles.icon, isSelected && styles.isSelected)
     }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
       role: "presentation"
-    })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && /*#__PURE__*/React.createElement("span", {
+    })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && ( /*#__PURE__*/React.createElement("span", {
       id: countElementId,
       className: styles.badgeContainer
     }, /*#__PURE__*/React.createElement(Badge, {
       classNameOverride: styles.badge
-    }, item.value.count), /*#__PURE__*/React.createElement(VisuallyHidden, null, " available")));
+    }, item.value.count), /*#__PURE__*/React.createElement(VisuallyHidden, null, " available"))));
   };
   MultiSelectOption.displayName = "FilterMultiSelect.Option";
   return MultiSelectOption;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectOption.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { useFocusRing } from \"@react-aria/focus\"\nimport { useOption } from \"@react-aria/listbox\"\nimport { mergeProps } from \"@react-aria/utils\"\nimport classnames from \"classnames\"\nimport { Badge } from \"~components/Badge\"\nimport { CheckIcon } from \"~components/Icon\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { useSelectionContext } from \"../../context\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./MultiSelectOption.module.scss\"\n\nexport interface MultiSelectOptionProps {\n classNameOverride?: string\n item: MultiSelectItem\n}\n\nexport const MultiSelectOption = ({\n classNameOverride,\n item,\n}: MultiSelectOptionProps): JSX.Element => {\n const { selectionState: state } = useSelectionContext()\n // Get props for the option element\n const ref = React.createRef<HTMLLIElement>()\n const { optionProps, isSelected, isDisabled } = useOption(\n { key: item.key },\n state,\n ref\n )\n\n // Determine whether we should show a keyboard\n // focus ring for accessibility\n const { isFocusVisible, focusProps } = useFocusRing()\n const countElementId = useId()\n\n return (\n <li\n {...mergeProps(optionProps, focusProps)}\n ref={ref}\n className={classnames(\n styles.option,\n classNameOverride,\n isSelected && styles.isSelected,\n isFocusVisible && styles.isFocusVisible,\n isDisabled && styles.isDisabled\n )}\n aria-label={item.value?.label}\n aria-describedby={item.value?.count ? countElementId : undefined}\n >\n <span\n className={classnames(styles.icon, isSelected && styles.isSelected)}\n >\n {isSelected && <CheckIcon role=\"presentation\" />}\n </span>\n {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}\n {item.rendered}\n {item.value?.count && (\n <span id={countElementId} className={styles.badgeContainer}>\n <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>\n <VisuallyHidden> available</VisuallyHidden>\n </span>\n )}\n </li>\n )\n}\n\nMultiSelectOption.displayName = \"FilterMultiSelect.Option\"\n"],"names":["MultiSelectOption","_a","classNameOverride","item","state","useSelectionContext","ref","React","createRef","_e","useOption","key","optionProps","isSelected","isDisabled","_f","useFocusRing","isFocusVisible","focusProps","countElementId","useId","createElement","__assign","mergeProps","className","classnames","styles","option","_b","value","label","_c","count","undefined","icon","CheckIcon","role","rendered","_d","id","badgeContainer","Badge","badge","VisuallyHidden","displayName"],"mappings":";;;;;;;;;;;;;MAiBaA,iBAAiB;EAAA,MAAjBA,iBAAiB,GAAG,SAAAA,CAACC,EAGT,EAAA;;QAFvBC,iBAAiB,GAAAD,EAAA,CAAAC,iBAAA;MACjBC,IAAI,GAAAF,EAAA,CAAAE,IAAA;IAEI,IAAgBC,KAAK,GAAKC,mBAAmB,CAAE,CAAA,eAA1B;;IAE7B,IAAMC,GAAG,gBAAGC,KAAK,CAACC,SAAS,EAAiB;IACtC,IAAAC,EAAA,GAA0CC,SAAS,CACvD;QAAEC,GAAG,EAAER,IAAI,CAACQ;MAAG,CAAE,EACjBP,KAAK,EACLE,GAAG,CACJ;MAJOM,WAAW,GAAAH,EAAA,CAAAG,WAAA;MAAEC,UAAU,GAAAJ,EAAA,CAAAI,UAAA;MAAEC,UAAU,GAAAL,EAAA,CAAAK,UAI1C;;;IAIK,IAAAC,EAAA,GAAiCC,YAAY,CAAA,CAAE;MAA7CC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,UAAU,GAAAH,EAAA,CAAAG,UAAmB;IACrD,IAAMC,cAAc,GAAGC,KAAK,EAAE;IAE9B,oBACEb,KAAA,CAAAc,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA,CAAA,CAAA,EACMC,UAAU,CAACX,WAAW,EAAEM,UAAU,CAAC,EACvC;MAAAZ,GAAG,EAAEA,GAAG;MACRkB,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,MAAM,EACbzB,iBAAiB,EACjBW,UAAU,IAAIa,MAAM,CAACb,UAAU,EAC/BI,cAAc,IAAIS,MAAM,CAACT,cAAc,EACvCH,UAAU,IAAIY,MAAM,CAACZ,UAAU,CAChC;MACW,YAAA,EAAA,CAAAc,EAAA,GAAAzB,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAE,KAAK;MACX,kBAAA,EAAA,CAAA,CAAAC,EAAA,GAAA5B,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAE,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,KAAK,IAAGb,cAAc,GAAGc;IAAS,CAAA,CAAA,eAEhE1B,KACE,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAG,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACQ,IAAI,EAAErB,UAAU,IAAIa,MAAM,CAACb,UAAU;IAAC,CAAA,EAElEA,UAAU,iBAAIN,KAAC,CAAAc,aAAA,CAAAc,SAAS;MAACC,IAAI,EAAC;IAAc,CAAA,CAAG,CAC3C,EAENjC,IAAI,CAACkC,QAAQ,EACb,CAAA,MAAAlC,IAAI,CAAC0B,KAAK,MAAA,IAAA,IAAAS,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEN,KAAK,~~kBAChBzB~~,KAAM,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAkB,EAAE,EAAEpB,cAAc;MAAEK,SAAS,EAAEE,MAAM,CAACc;IAAc,CAAA,eACxDjC,KAAA,CAAAc,aAAA,CAACoB,KAAK,EAAA;MAACvC,iBAAiB,EAAEwB,MAAM,CAACgB;KAAK,EAAGvC,IAAI,CAAC0B,KAAK,CAACG,KAAK,CAAS,eAClEzB,KAAA,CAAAc,aAAA,CAACsB,cAAc,EAA4B,IAAA,EAAA,YAAA,CAAA,~~CAE9C~~,CACE;EAET,CAAC;EAED3C,iBAAiB,CAAC4C,WAAW,GAAG,0BAA0B;EAAA,OAjD7C5C,iBAAiB;AAAA;"}
1	+ {"version":3,"file":"MultiSelectOption.mjs","sources":["../../../../../../src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport { useFocusRing } from \"@react-aria/focus\"\nimport { useOption } from \"@react-aria/listbox\"\nimport { mergeProps } from \"@react-aria/utils\"\nimport classnames from \"classnames\"\nimport { Badge } from \"~components/Badge\"\nimport { CheckIcon } from \"~components/Icon\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { useSelectionContext } from \"../../context\"\nimport { MultiSelectItem } from \"../../types\"\nimport styles from \"./MultiSelectOption.module.scss\"\n\nexport interface MultiSelectOptionProps {\n classNameOverride?: string\n item: MultiSelectItem\n}\n\nexport const MultiSelectOption = ({\n classNameOverride,\n item,\n}: MultiSelectOptionProps): JSX.Element => {\n const { selectionState: state } = useSelectionContext()\n // Get props for the option element\n const ref = React.createRef<HTMLLIElement>()\n const { optionProps, isSelected, isDisabled } = useOption(\n { key: item.key },\n state,\n ref\n )\n\n // Determine whether we should show a keyboard\n // focus ring for accessibility\n const { isFocusVisible, focusProps } = useFocusRing()\n const countElementId = useId()\n\n return (\n <li\n {...mergeProps(optionProps, focusProps)}\n ref={ref}\n className={classnames(\n styles.option,\n classNameOverride,\n isSelected && styles.isSelected,\n isFocusVisible && styles.isFocusVisible,\n isDisabled && styles.isDisabled\n )}\n aria-label={item.value?.label}\n aria-describedby={item.value?.count ? countElementId : undefined}\n >\n <span\n className={classnames(styles.icon, isSelected && styles.isSelected)}\n >\n {isSelected && <CheckIcon role=\"presentation\" />}\n </span>\n {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}\n {item.rendered}\n {item.value?.count && (\n <span id={countElementId} className={styles.badgeContainer}>\n <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>\n <VisuallyHidden> available</VisuallyHidden>\n </span>\n )}\n </li>\n )\n}\n\nMultiSelectOption.displayName = \"FilterMultiSelect.Option\"\n"],"names":["MultiSelectOption","_a","classNameOverride","item","state","useSelectionContext","ref","React","createRef","_e","useOption","key","optionProps","isSelected","isDisabled","_f","useFocusRing","isFocusVisible","focusProps","countElementId","useId","createElement","__assign","mergeProps","className","classnames","styles","option","_b","value","label","_c","count","undefined","icon","CheckIcon","role","rendered","_d","id","badgeContainer","Badge","badge","VisuallyHidden","displayName"],"mappings":";;;;;;;;;;;;;MAiBaA,iBAAiB;EAAA,MAAjBA,iBAAiB,GAAG,SAAAA,CAACC,EAGT,EAAA;;QAFvBC,iBAAiB,GAAAD,EAAA,CAAAC,iBAAA;MACjBC,IAAI,GAAAF,EAAA,CAAAE,IAAA;IAEI,IAAgBC,KAAK,GAAKC,mBAAmB,CAAE,CAAA,eAA1B;;IAE7B,IAAMC,GAAG,gBAAGC,KAAK,CAACC,SAAS,EAAiB;IACtC,IAAAC,EAAA,GAA0CC,SAAS,CACvD;QAAEC,GAAG,EAAER,IAAI,CAACQ;MAAG,CAAE,EACjBP,KAAK,EACLE,GAAG,CACJ;MAJOM,WAAW,GAAAH,EAAA,CAAAG,WAAA;MAAEC,UAAU,GAAAJ,EAAA,CAAAI,UAAA;MAAEC,UAAU,GAAAL,EAAA,CAAAK,UAI1C;;;IAIK,IAAAC,EAAA,GAAiCC,YAAY,CAAA,CAAE;MAA7CC,cAAc,GAAAF,EAAA,CAAAE,cAAA;MAAEC,UAAU,GAAAH,EAAA,CAAAG,UAAmB;IACrD,IAAMC,cAAc,GAAGC,KAAK,EAAE;IAE9B,oBACEb,KAAA,CAAAc,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA,CAAA,CAAA,EACMC,UAAU,CAACX,WAAW,EAAEM,UAAU,CAAC,EACvC;MAAAZ,GAAG,EAAEA,GAAG;MACRkB,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,MAAM,EACbzB,iBAAiB,EACjBW,UAAU,IAAIa,MAAM,CAACb,UAAU,EAC/BI,cAAc,IAAIS,MAAM,CAACT,cAAc,EACvCH,UAAU,IAAIY,MAAM,CAACZ,UAAU,CAChC;MACW,YAAA,EAAA,CAAAc,EAAA,GAAAzB,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAE,KAAK;MACX,kBAAA,EAAA,CAAA,CAAAC,EAAA,GAAA5B,IAAI,CAAC0B,KAAK,MAAE,IAAA,IAAAE,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,KAAK,IAAGb,cAAc,GAAGc;IAAS,CAAA,CAAA,eAEhE1B,KACE,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAG,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACQ,IAAI,EAAErB,UAAU,IAAIa,MAAM,CAACb,UAAU;IAAC,CAAA,EAElEA,UAAU,iBAAIN,KAAC,CAAAc,aAAA,CAAAc,SAAS;MAACC,IAAI,EAAC;IAAc,CAAA,CAAG,CAC3C,EAENjC,IAAI,CAACkC,QAAQ,EACb,CAAA,MAAAlC,IAAI,CAAC0B,KAAK,MAAA,IAAA,IAAAS,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAEN,KAAK,oBAChBzB,KAAM,CAAAc,aAAA,CAAA,MAAA,EAAA;MAAAkB,EAAE,EAAEpB,cAAc;MAAEK,SAAS,EAAEE,MAAM,CAACc;IAAc,CAAA,eACxDjC,KAAA,CAAAc,aAAA,CAACoB,KAAK,EAAA;MAACvC,iBAAiB,EAAEwB,MAAM,CAACgB;KAAK,EAAGvC,IAAI,CAAC0B,KAAK,CAACG,KAAK,CAAS,eAClEzB,KAAA,CAAAc,aAAA,CAACsB,cAAc,EAA4B,IAAA,EAAA,YAAA,CAAA,CACtC,CACR,CACE;EAET,CAAC;EAED3C,iBAAiB,CAAC4C,WAAW,GAAG,0BAA0B;EAAA,OAjD7C5C,iBAAiB;AAAA;"}

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs CHANGED Viewed

@@ -13,7 +13,7 @@ import styles from './GuidanceBlock.module.scss.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;
-  return !!tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  return !!tooltipProps ? ( /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, children));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
@@ -106,7 +106,7 @@ const GuidanceBlock = /*#__PURE__*/function () {
       className: styles.descriptionAndActions
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.descriptionContainer
-    }, "content" in restProps && restProps.content, "text" in restProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    }, "content" in restProps && restProps.content, "text" in restProps && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: styles.headingWrapper
     }, /*#__PURE__*/React.createElement(Heading, {
       tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
@@ -114,7 +114,7 @@ const GuidanceBlock = /*#__PURE__*/function () {
     }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), /*#__PURE__*/React.createElement(Text, {
       tag: "p",
       variant: "body"
-    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) && /*#__PURE__*/React.createElement(Media, {
+    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), (actions === null || actions === void 0 ? void 0 : actions.primary) && ( /*#__PURE__*/React.createElement(Media, {
       query: "(max-width: 767px)"
     }, function (isMobile) {
       var _a;
@@ -128,13 +128,13 @@ const GuidanceBlock = /*#__PURE__*/function () {
       }, /*#__PURE__*/React.createElement(WithTooltip, {
         tooltipProps: actions.primary.tooltip
       }, /*#__PURE__*/React.createElement(Button, __assign({
-        icon: withActionButtonArrow ? /*#__PURE__*/React.createElement(ArrowForwardIcon, {
+        icon: withActionButtonArrow ? ( /*#__PURE__*/React.createElement(ArrowForwardIcon, {
           role: "presentation"
-        }) : undefined,
+        })) : undefined,
         iconPosition: "end"
       }, actions.primary, {
         fullWidth: isMobile || componentIsMobile
-      }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && /*#__PURE__*/React.createElement(WithTooltip, {
+      }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && ( /*#__PURE__*/React.createElement(WithTooltip, {
         tooltipProps: actions.secondary.tooltip
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.secondaryAction
@@ -145,8 +145,8 @@ const GuidanceBlock = /*#__PURE__*/function () {
           return handleDismissBanner();
         } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
         fullWidth: isMobile || componentIsMobile
-      }))))));
-    })));
+      })))))));
+    }))));
   };
   GuidanceBlock.displayName = "GuidanceBlock";
   return GuidanceBlock;

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GuidanceBlock.mjs","sources":["../../../src/GuidanceBlock/GuidanceBlock.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport classNames from \"classnames\"\nimport Media from \"react-media\"\nimport { Button, ButtonProps } from \"~components/Button\"\nimport { Heading, HeadingProps } from \"~components/Heading\"\nimport { ArrowForwardIcon } from \"~components/Icon\"\nimport { SceneProps, SpotProps } from \"~components/Illustration\"\nimport { Text } from \"~components/Text\"\nimport { Tooltip, TooltipProps } from \"~components/Tooltip\"\nimport { VariantType } from \"./types\"\nimport styles from \"./GuidanceBlock.module.scss\"\n\nexport type ActionProps = ButtonProps & {\n tooltip?: TooltipProps\n}\n\ntype LayoutType = \"default\" \| \"inline\" \| \"stacked\"\n\ntype IllustrationType = \"spot\" \| \"scene\"\n\ntype TextAlignment = \"center\" \| \"left\"\n\ntype GuidanceBlockActions = {\n primary: ActionProps\n secondary?: ActionProps\n dismiss?: {\n onClick: () => void\n }\n}\n\ntype BaseGuidanceBlockProps = {\n layout?: LayoutType\n illustration: React.ReactElement<SpotProps \| SceneProps>\n /\n Sets how the width and aspect ratio will respond to the Illustration passed in.\n /\n illustrationType?: IllustrationType\n\n smallScreenTextAlignment?: TextAlignment\n actions?: GuidanceBlockActions\n /\n * This will still require the secondary object to be passed into the actions ie: {secondary: { label: \"Dismiss action\" }}`\n /\n secondaryDismiss?: boolean\n variant?: VariantType\n withActionButtonArrow?: boolean\n noMaxWidth?: boolean\n}\n\ntype GuidanceBlockWithText = {\n text: {\n title: string\n titleTag?: HeadingProps[\"tag\"]\n description: string \| React.ReactNode\n }\n} & BaseGuidanceBlockProps\n\ntype GuidanceBlockPropsWithContent = {\n content: React.ReactElement\n} & BaseGuidanceBlockProps\n\nexport type GuidanceBlockProps =\n \| GuidanceBlockWithText\n \| GuidanceBlockPropsWithContent\n\nexport type GuidanceBlockState = {\n hidden: boolean\n removed: boolean\n mediaQueryLayout: string\n}\n\ntype WithTooltipProps = {\n children: React.ReactNode\n tooltipProps?: TooltipProps\n}\n\nconst WithTooltip = ({\n tooltipProps,\n children,\n}: WithTooltipProps): JSX.Element =>\n !!tooltipProps ? (\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n ) : (\n <>{children}</>\n )\n\n/\n {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} \|\n * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}\n */\nexport const GuidanceBlock = ({\n layout = \"default\",\n variant = \"default\",\n withActionButtonArrow = true,\n noMaxWidth = false,\n illustrationType = \"spot\",\n smallScreenTextAlignment = \"center\",\n actions,\n illustration,\n secondaryDismiss,\n ...restProps\n}: GuidanceBlockProps): JSX.Element => {\n const [hidden, setHidden] = useState<boolean>(false)\n const [removed, setRemoved] = useState<boolean>(false)\n const [mediaQueryLayout, setMediaQueryLayout] = useState<string>(\"\")\n\n const containerRef = React.createRef<HTMLDivElement>()\n\n useEffect(() => {\n if (layout === \"inline\" \|\| layout === \"stacked\") {\n containerQuery()\n }\n }, [])\n\n const handleDismissBanner = (): void => {\n setHidden(true)\n actions?.dismiss?.onClick()\n }\n\n const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {\n // Be careful: this assumes the final CSS property to be animated is \"margin-top\".\n if (hidden && e.propertyName === \"margin-top\") {\n setRemoved(true)\n }\n }\n\n const containerQuery = (): void => {\n const resizeObserver = new ResizeObserver(entries => {\n if (entries.length === 1) {\n handleMediaQueryLayout(entries[0].contentRect.width)\n }\n })\n\n resizeObserver.observe(containerRef.current as HTMLElement)\n }\n\n const handleMediaQueryLayout = (width: number): void => {\n if (width <= 320) {\n setMediaQueryLayout(\"centerContent\")\n } else {\n setMediaQueryLayout(\"\")\n }\n }\n\n const marginTop = (): string => {\n if (hidden && containerRef.current) {\n return -containerRef.current.clientHeight + \"px\"\n }\n\n return \"0\"\n }\n\n if (removed) {\n return <></>\n }\n\n const componentIsMobile = mediaQueryLayout.includes(\"centerContent\")\n\n return (\n <div\n className={classNames(\n styles.banner,\n variant && styles[variant],\n layout && styles[layout],\n hidden && styles.hidden,\n mediaQueryLayout === \"centerContent\" && styles.centerContent,\n noMaxWidth && styles.noMaxWidth,\n illustrationType === \"scene\" && styles.hasSceneIllustration,\n smallScreenTextAlignment === \"left\" && styles.smallScreenTextAlignment\n )}\n style={{\n marginTop: marginTop(),\n }}\n ref={containerRef}\n onTransitionEnd={onTransitionEnd}\n >\n <div className={styles.illustrationWrapper}>\n <div className={styles.illustration}>\n {illustrationType === \"scene\"\n ? React.cloneElement(illustration, { enableAspectRatio: true })\n : illustration}\n </div>\n </div>\n <div className={styles.descriptionAndActions}>\n <div className={styles.descriptionContainer}>\n {\"content\" in restProps && restProps.content}\n {\"text\" in restProps && (\n <>\n <div className={styles.headingWrapper}>\n <Heading\n tag={restProps?.text?.titleTag ?? \"h3\"}\n variant=\"heading-3\"\n >\n {restProps?.text?.title}\n </Heading>\n </div>\n <Text tag=\"p\" variant=\"body\">\n {restProps?.text?.description}\n </Text>\n </>\n )}\n </div>\n {actions?.primary && (\n <Media query=\"(max-width: 767px)\">\n {(isMobile: boolean): JSX.Element => (\n <div\n className={classNames({\n noRightMargin: isMobile \|\| componentIsMobile,\n rightMargin:\n !(isMobile \|\| componentIsMobile) && layout === \"default\",\n })}\n >\n <div\n className={classNames(\n styles.buttonContainer,\n actions?.secondary && styles.secondaryAction\n )}\n >\n <WithTooltip tooltipProps={actions.primary.tooltip}>\n <Button\n icon={\n withActionButtonArrow ? (\n <ArrowForwardIcon role=\"presentation\" />\n ) : undefined\n }\n iconPosition=\"end\"\n {...actions.primary}\n fullWidth={isMobile \|\| componentIsMobile}\n />\n </WithTooltip>\n\n {actions?.secondary && (\n <WithTooltip tooltipProps={actions.secondary.tooltip}>\n <div className={styles.secondaryAction}>\n <Button\n secondary\n {...actions.secondary}\n onClick={\n secondaryDismiss\n ? (): void => handleDismissBanner()\n : actions?.secondary?.onClick\n }\n fullWidth={isMobile \|\| componentIsMobile}\n />\n </div>\n </WithTooltip>\n )}\n </div>\n </div>\n )}\n </Media>\n )}\n </div>\n </div>\n )\n}\n\nGuidanceBlock.displayName = \"GuidanceBlock\"\n"],"names":["WithTooltip","_a","tooltipProps","children","React","createElement","Tooltip","__assign","Fragment","GuidanceBlock","_f","layout","_g","variant","_h","withActionButtonArrow","_j","noMaxWidth","_k","illustrationType","_l","smallScreenTextAlignment","actions","illustration","secondaryDismiss","restProps","__rest","_m","useState","hidden","setHidden","_o","removed","setRemoved","_p","mediaQueryLayout","setMediaQueryLayout","containerRef","createRef","useEffect","containerQuery","handleDismissBanner","dismiss","onClick","onTransitionEnd","e","propertyName","resizeObserver","ResizeObserver","entries","length","handleMediaQueryLayout","contentRect","width","observe","current","marginTop","clientHeight","componentIsMobile","includes","className","classNames","styles","banner","centerContent","hasSceneIllustration","style","ref","illustrationWrapper","cloneElement","enableAspectRatio","descriptionAndActions","descriptionContainer","content","headingWrapper","Heading","tag","_b","text","titleTag","_c","_d","title","Text","_e","description","primary","Media","query","isMobile","noRightMargin","rightMargin","buttonContainer","secondary","secondaryAction","tooltip","Button","icon","ArrowForwardIcon","role","undefined","iconPosition","fullWidth","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"GuidanceBlock.mjs","sources":["../../../src/GuidanceBlock/GuidanceBlock.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport classNames from \"classnames\"\nimport Media from \"react-media\"\nimport { Button, ButtonProps } from \"~components/Button\"\nimport { Heading, HeadingProps } from \"~components/Heading\"\nimport { ArrowForwardIcon } from \"~components/Icon\"\nimport { SceneProps, SpotProps } from \"~components/Illustration\"\nimport { Text } from \"~components/Text\"\nimport { Tooltip, TooltipProps } from \"~components/Tooltip\"\nimport { VariantType } from \"./types\"\nimport styles from \"./GuidanceBlock.module.scss\"\n\nexport type ActionProps = ButtonProps & {\n tooltip?: TooltipProps\n}\n\ntype LayoutType = \"default\" \| \"inline\" \| \"stacked\"\n\ntype IllustrationType = \"spot\" \| \"scene\"\n\ntype TextAlignment = \"center\" \| \"left\"\n\ntype GuidanceBlockActions = {\n primary: ActionProps\n secondary?: ActionProps\n dismiss?: {\n onClick: () => void\n }\n}\n\ntype BaseGuidanceBlockProps = {\n layout?: LayoutType\n illustration: React.ReactElement<SpotProps \| SceneProps>\n /\n Sets how the width and aspect ratio will respond to the Illustration passed in.\n /\n illustrationType?: IllustrationType\n\n smallScreenTextAlignment?: TextAlignment\n actions?: GuidanceBlockActions\n /\n * This will still require the secondary object to be passed into the actions ie: {secondary: { label: \"Dismiss action\" }}`\n /\n secondaryDismiss?: boolean\n variant?: VariantType\n withActionButtonArrow?: boolean\n noMaxWidth?: boolean\n}\n\ntype GuidanceBlockWithText = {\n text: {\n title: string\n titleTag?: HeadingProps[\"tag\"]\n description: string \| React.ReactNode\n }\n} & BaseGuidanceBlockProps\n\ntype GuidanceBlockPropsWithContent = {\n content: React.ReactElement\n} & BaseGuidanceBlockProps\n\nexport type GuidanceBlockProps =\n \| GuidanceBlockWithText\n \| GuidanceBlockPropsWithContent\n\nexport type GuidanceBlockState = {\n hidden: boolean\n removed: boolean\n mediaQueryLayout: string\n}\n\ntype WithTooltipProps = {\n children: React.ReactNode\n tooltipProps?: TooltipProps\n}\n\nconst WithTooltip = ({\n tooltipProps,\n children,\n}: WithTooltipProps): JSX.Element =>\n !!tooltipProps ? (\n <Tooltip {...tooltipProps}>{children}</Tooltip>\n ) : (\n <>{children}</>\n )\n\n/\n {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} \|\n * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}\n */\nexport const GuidanceBlock = ({\n layout = \"default\",\n variant = \"default\",\n withActionButtonArrow = true,\n noMaxWidth = false,\n illustrationType = \"spot\",\n smallScreenTextAlignment = \"center\",\n actions,\n illustration,\n secondaryDismiss,\n ...restProps\n}: GuidanceBlockProps): JSX.Element => {\n const [hidden, setHidden] = useState<boolean>(false)\n const [removed, setRemoved] = useState<boolean>(false)\n const [mediaQueryLayout, setMediaQueryLayout] = useState<string>(\"\")\n\n const containerRef = React.createRef<HTMLDivElement>()\n\n useEffect(() => {\n if (layout === \"inline\" \|\| layout === \"stacked\") {\n containerQuery()\n }\n }, [])\n\n const handleDismissBanner = (): void => {\n setHidden(true)\n actions?.dismiss?.onClick()\n }\n\n const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {\n // Be careful: this assumes the final CSS property to be animated is \"margin-top\".\n if (hidden && e.propertyName === \"margin-top\") {\n setRemoved(true)\n }\n }\n\n const containerQuery = (): void => {\n const resizeObserver = new ResizeObserver(entries => {\n if (entries.length === 1) {\n handleMediaQueryLayout(entries[0].contentRect.width)\n }\n })\n\n resizeObserver.observe(containerRef.current as HTMLElement)\n }\n\n const handleMediaQueryLayout = (width: number): void => {\n if (width <= 320) {\n setMediaQueryLayout(\"centerContent\")\n } else {\n setMediaQueryLayout(\"\")\n }\n }\n\n const marginTop = (): string => {\n if (hidden && containerRef.current) {\n return -containerRef.current.clientHeight + \"px\"\n }\n\n return \"0\"\n }\n\n if (removed) {\n return <></>\n }\n\n const componentIsMobile = mediaQueryLayout.includes(\"centerContent\")\n\n return (\n <div\n className={classNames(\n styles.banner,\n variant && styles[variant],\n layout && styles[layout],\n hidden && styles.hidden,\n mediaQueryLayout === \"centerContent\" && styles.centerContent,\n noMaxWidth && styles.noMaxWidth,\n illustrationType === \"scene\" && styles.hasSceneIllustration,\n smallScreenTextAlignment === \"left\" && styles.smallScreenTextAlignment\n )}\n style={{\n marginTop: marginTop(),\n }}\n ref={containerRef}\n onTransitionEnd={onTransitionEnd}\n >\n <div className={styles.illustrationWrapper}>\n <div className={styles.illustration}>\n {illustrationType === \"scene\"\n ? React.cloneElement(illustration, { enableAspectRatio: true })\n : illustration}\n </div>\n </div>\n <div className={styles.descriptionAndActions}>\n <div className={styles.descriptionContainer}>\n {\"content\" in restProps && restProps.content}\n {\"text\" in restProps && (\n <>\n <div className={styles.headingWrapper}>\n <Heading\n tag={restProps?.text?.titleTag ?? \"h3\"}\n variant=\"heading-3\"\n >\n {restProps?.text?.title}\n </Heading>\n </div>\n <Text tag=\"p\" variant=\"body\">\n {restProps?.text?.description}\n </Text>\n </>\n )}\n </div>\n {actions?.primary && (\n <Media query=\"(max-width: 767px)\">\n {(isMobile: boolean): JSX.Element => (\n <div\n className={classNames({\n noRightMargin: isMobile \|\| componentIsMobile,\n rightMargin:\n !(isMobile \|\| componentIsMobile) && layout === \"default\",\n })}\n >\n <div\n className={classNames(\n styles.buttonContainer,\n actions?.secondary && styles.secondaryAction\n )}\n >\n <WithTooltip tooltipProps={actions.primary.tooltip}>\n <Button\n icon={\n withActionButtonArrow ? (\n <ArrowForwardIcon role=\"presentation\" />\n ) : undefined\n }\n iconPosition=\"end\"\n {...actions.primary}\n fullWidth={isMobile \|\| componentIsMobile}\n />\n </WithTooltip>\n\n {actions?.secondary && (\n <WithTooltip tooltipProps={actions.secondary.tooltip}>\n <div className={styles.secondaryAction}>\n <Button\n secondary\n {...actions.secondary}\n onClick={\n secondaryDismiss\n ? (): void => handleDismissBanner()\n : actions?.secondary?.onClick\n }\n fullWidth={isMobile \|\| componentIsMobile}\n />\n </div>\n </WithTooltip>\n )}\n </div>\n </div>\n )}\n </Media>\n )}\n </div>\n </div>\n )\n}\n\nGuidanceBlock.displayName = \"GuidanceBlock\"\n"],"names":["WithTooltip","_a","tooltipProps","children","React","createElement","Tooltip","__assign","Fragment","GuidanceBlock","_f","layout","_g","variant","_h","withActionButtonArrow","_j","noMaxWidth","_k","illustrationType","_l","smallScreenTextAlignment","actions","illustration","secondaryDismiss","restProps","__rest","_m","useState","hidden","setHidden","_o","removed","setRemoved","_p","mediaQueryLayout","setMediaQueryLayout","containerRef","createRef","useEffect","containerQuery","handleDismissBanner","dismiss","onClick","onTransitionEnd","e","propertyName","resizeObserver","ResizeObserver","entries","length","handleMediaQueryLayout","contentRect","width","observe","current","marginTop","clientHeight","componentIsMobile","includes","className","classNames","styles","banner","centerContent","hasSceneIllustration","style","ref","illustrationWrapper","cloneElement","enableAspectRatio","descriptionAndActions","descriptionContainer","content","headingWrapper","Heading","tag","_b","text","titleTag","_c","_d","title","Text","_e","description","primary","Media","query","isMobile","noRightMargin","rightMargin","buttonContainer","secondary","secondaryAction","tooltip","Button","icon","ArrowForwardIcon","role","undefined","iconPosition","fullWidth","displayName"],"mappings":"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"}

package/dist/esm/Illustration/subcomponents/Base/Base.mjs CHANGED Viewed

@@ -12,17 +12,17 @@ const Base = /*#__PURE__*/function () {
       aspectRatio = _a.aspectRatio,
       restProps = __rest(_a, ["name", "alt", "classNameOverride", "aspectRatio"]);
     var className = classnames(styles.wrapper, classNameOverride);
-    return aspectRatio ? /*#__PURE__*/React.createElement("figure", {
+    return aspectRatio ? ( /*#__PURE__*/React.createElement("figure", {
       className: classnames(styles.aspectRatioWrapper, aspectRatio && styles[aspectRatio])
     }, /*#__PURE__*/React.createElement("img", __assign({}, restProps, {
       className: className,
       alt: alt,
       src: assetUrl(name)
-    }))) : /*#__PURE__*/React.createElement("img", __assign({}, restProps, {
+    })))) : ( /*#__PURE__*/React.createElement("img", __assign({}, restProps, {
       className: className,
       alt: alt,
       src: assetUrl(name)
-    }));
+    })));
   };
   Base.displayName = "Base";
   return Base;

package/dist/esm/Illustration/subcomponents/Base/Base.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Base.mjs","sources":["../../../../../src/Illustration/subcomponents/Base/Base.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Base.module.scss\"\n\nexport type BaseProps = {\n /*\n Refer to the Base Illustration Sticker Sheet in Heart UI Kit\n /\n name: string\n\n /\n Only provide if there is context/text required surrounding this illustration.\n * @default \"\"\n /\n alt?: string\n\n /\n Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n * component in a container, forcing the aspect ratio.\n */\n aspectRatio?: \"landscape\" \| \"portrait\" \| \"square\"\n} & OverrideClassName<HTMLAttributes<HTMLImageElement>>\n\nexport const Base = ({\n name,\n alt = \"\",\n classNameOverride,\n aspectRatio,\n ...restProps\n}: BaseProps): JSX.Element => {\n const className = classnames(styles.wrapper, classNameOverride)\n\n return aspectRatio ? (\n <figure\n className={classnames(\n styles.aspectRatioWrapper,\n aspectRatio && styles[aspectRatio]\n )}\n >\n <img\n {...restProps}\n className={className}\n alt={alt}\n src={assetUrl(name)}\n />\n </figure>\n ) : (\n <img {...restProps} className={className} alt={alt} src={assetUrl(name)} />\n )\n}\n\nBase.displayName = \"Base\"\n"],"names":["Base","_a","name","_b","alt","classNameOverride","aspectRatio","restProps","__rest","className","classnames","styles","wrapper","React","createElement","aspectRatioWrapper","__assign","src","assetUrl","displayName"],"mappings":";;;;;MAyBaA,IAAI;EAAA,MAAJA,IAAI,GAAG,SAAAA,CAACC,EAMT,EAAA;IALV,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;MACJC,WAAQ;MAARC,GAAG,mBAAG,EAAE,GAAAD,EAAA;MACRE,iBAAiB,GAAAJ,EAAA,CAAAI,iBAAA;MACjBC,WAAW,GAAAL,EAAA,CAAAK,WAAA;MACRC,SAAS,GAAAC,MAAA,CAAAP,EAAA,EALO,mDAMpB,CADa;IAEZ,IAAMQ,SAAS,GAAGC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAEP,iBAAiB,CAAC;IAE/D,OAAOC,WAAW,~~gBAChBO~~,KACE,CAAAC,aAAA,CAAA,QAAA,EAAA;MAAAL,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACI,kBAAkB,EACzBT,WAAW,IAAIK,MAAM,CAACL,WAAW,CAAC;IACnC,CAAA,eAEDO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,QAAA,CAAA,CAAA,CAAA,EACMT,SAAS,EACb;MAAAE,SAAS,EAAEA,SAAS;MACpBL,GAAG,EAAEA,GAAG;MACRa,GAAG,EAAEC,QAAQ,CAAChB,IAAI;IAAC,CACnB,CAAA,CAAA,CACK,~~gBAETW~~,wCAASN,SAAS,EAAA;MAAEE,SAAS,EAAEA,SAAS;MAAEL,GAAG,EAAEA,GAAG;MAAEa,GAAG,EAAEC,QAAQ,CAAChB,IAAI;IAAC,CAAA,CAAA,~~CACxE~~;EACH,CAAC;EAEDF,IAAI,CAACmB,WAAW,GAAG,MAAM;EAAA,OA5BZnB,IAAI;AAAA;"}
1	+ {"version":3,"file":"Base.mjs","sources":["../../../../../src/Illustration/subcomponents/Base/Base.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Base.module.scss\"\n\nexport type BaseProps = {\n /*\n Refer to the Base Illustration Sticker Sheet in Heart UI Kit\n /\n name: string\n\n /\n Only provide if there is context/text required surrounding this illustration.\n * @default \"\"\n /\n alt?: string\n\n /\n Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n * component in a container, forcing the aspect ratio.\n */\n aspectRatio?: \"landscape\" \| \"portrait\" \| \"square\"\n} & OverrideClassName<HTMLAttributes<HTMLImageElement>>\n\nexport const Base = ({\n name,\n alt = \"\",\n classNameOverride,\n aspectRatio,\n ...restProps\n}: BaseProps): JSX.Element => {\n const className = classnames(styles.wrapper, classNameOverride)\n\n return aspectRatio ? (\n <figure\n className={classnames(\n styles.aspectRatioWrapper,\n aspectRatio && styles[aspectRatio]\n )}\n >\n <img\n {...restProps}\n className={className}\n alt={alt}\n src={assetUrl(name)}\n />\n </figure>\n ) : (\n <img {...restProps} className={className} alt={alt} src={assetUrl(name)} />\n )\n}\n\nBase.displayName = \"Base\"\n"],"names":["Base","_a","name","_b","alt","classNameOverride","aspectRatio","restProps","__rest","className","classnames","styles","wrapper","React","createElement","aspectRatioWrapper","__assign","src","assetUrl","displayName"],"mappings":";;;;;MAyBaA,IAAI;EAAA,MAAJA,IAAI,GAAG,SAAAA,CAACC,EAMT,EAAA;IALV,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;MACJC,WAAQ;MAARC,GAAG,mBAAG,EAAE,GAAAD,EAAA;MACRE,iBAAiB,GAAAJ,EAAA,CAAAI,iBAAA;MACjBC,WAAW,GAAAL,EAAA,CAAAK,WAAA;MACRC,SAAS,GAAAC,MAAA,CAAAP,EAAA,EALO,mDAMpB,CADa;IAEZ,IAAMQ,SAAS,GAAGC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAEP,iBAAiB,CAAC;IAE/D,OAAOC,WAAW,kBAChBO,KACE,CAAAC,aAAA,CAAA,QAAA,EAAA;MAAAL,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACI,kBAAkB,EACzBT,WAAW,IAAIK,MAAM,CAACL,WAAW,CAAC;IACnC,CAAA,eAEDO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAE,QAAA,CAAA,CAAA,CAAA,EACMT,SAAS,EACb;MAAAE,SAAS,EAAEA,SAAS;MACpBL,GAAG,EAAEA,GAAG;MACRa,GAAG,EAAEC,QAAQ,CAAChB,IAAI;IAAC,CACnB,CAAA,CAAA,CACK,mBAETW,wCAASN,SAAS,EAAA;MAAEE,SAAS,EAAEA,SAAS;MAAEL,GAAG,EAAEA,GAAG;MAAEa,GAAG,EAAEC,QAAQ,CAAChB,IAAI;IAAC,CAAA,CAAA,CAAI,CAC5E;EACH,CAAC;EAEDF,IAAI,CAACmB,WAAW,GAAG,MAAM;EAAA,OA5BZnB,IAAI;AAAA;"}

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs CHANGED Viewed

@@ -69,7 +69,7 @@ var VideoPlayer = function (_a) {
     } else if (autoplay && !prefersReducedMotion) {
       try {
         // Older browsers may not return a promise, so .play could return undefined
-        (_a = videoElement.play()) === null || _a === void 0 ? void 0 : _a["catch"](function () {
+        (_a = videoElement.play()) === null || _a === void 0 ? void 0 : _a.catch(function () {
           /*
            * An DOMException _may_ be raised by some browsers if we
            * programatically interact with the video before the
@@ -116,10 +116,10 @@ var VideoPlayer = function (_a) {
     autoPlay: prefersReducedMotion ? false : autoplay,
     playsInline: true,
     tabIndex: -1
-  }, canPlayWebm() && /*#__PURE__*/React.createElement("source", {
+  }, canPlayWebm() && ( /*#__PURE__*/React.createElement("source", {
     src: assetUrl("".concat(source, ".webm")),
     type: "video/webm"
-  }), /*#__PURE__*/React.createElement("source", {
+  })), /*#__PURE__*/React.createElement("source", {
     src: assetUrl("".concat(source, ".mp4")),
     type: "video/mp4"
   })), /*#__PURE__*/React.createElement(IconButton, {

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n /*\n Specifies whether the animation plays as soon as it is rendered.\n * If the user has enabled prefer-reduced-motion their preferences\n * take precedent over this prop.\n /\n autoplay?: boolean\n\n /\n Replay from start when active animation reaches the end of the animation.\n /\n loop?: boolean\n\n /\n Fallback image. Used when rendering of the asset fails, or as a\n * poster for the video player.\n /\n fallback: string\n\n /\n The path of the animation source, excluding the file extension. This\n * Player will preference Webm over mp4.\n /\n source: string\n\n /\n Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n * component in a container, forcing the aspect ratio.\n /\n aspectRatio?: \"landscape\" \| \"portrait\" \| \"square\"\n\n onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n autoplay = true,\n loop = false,\n fallback,\n source,\n aspectRatio,\n onEnded,\n}: VideoPlayerProps): JSX.Element => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const [prefersReducedMotion, setPrefersReducedMotion] =\n React.useState<boolean>(true)\n\n useEffect(() => {\n /\n Setting `muted` on the player is required in Safari/Webkit and older\n * versions of Chome for the video to autoplay (regardless of whether\n * the format contains an audio stream or not).\n \n React does not guarentee the `muted` attribute is set on the\n * `video` element. So on load we force set this attribute. See issue:\n * https://github.com/facebook/react/issues/10389\n /\n const { current: videoElement } = videoRef\n if (videoElement !== null) {\n videoElement.setAttribute(\"muted\", \"\")\n }\n }, [])\n\n useEffect(() => {\n // when the source of the animation is updated, we need to reload the asset\n // to ensure the video player is in sync with the new source.\n const { current: videoElement } = videoRef\n if (videoElement !== null) {\n videoElement.load()\n }\n }, [source])\n\n useEffect(() => {\n if (!window) return\n\n const reducedMotionQuery = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n )\n setPrefersReducedMotion(reducedMotionQuery.matches)\n const updateMotionPreferences = (): void => {\n const { matches = false } = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n )\n setPrefersReducedMotion(matches)\n }\n\n const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n const isUnsupportedSafari =\n window.matchMedia(\"\").addEventListener === undefined\n\n if (isLegacyEdge \|\| isUnsupportedSafari) return\n\n reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n return function cleanup() {\n reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n }\n }, [])\n\n useEffect(() => {\n const { current: videoElement } = videoRef\n if (!videoElement) return\n\n if (prefersReducedMotion) {\n videoElement.pause()\n } else if (autoplay && !prefersReducedMotion) {\n try {\n // Older browsers may not return a promise, so .play could return undefined\n videoElement.play()?.catch(() => {\n /\n * An DOMException _may_ be raised by some browsers if we\n * programatically interact with the video before the\n * user has interacted with the page. This is okay - so\n * we're going to catch this error without handling it. See:\n * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n /\n })\n } catch (e) {\n /\n Older browsers will raise a synchronous error because their first implementation\n * of `.play` was not a promise.\n /\n }\n }\n /\n Chrome seems to have an issue with changes to autoplay after the video\n * has been mounted. If there is a change in autoplay we need to force the\n * play() method to be called.\n /\n }, [prefersReducedMotion, autoplay])\n\n useEffect(() => {\n // Add event listeners for the video element\n const { current: videoElement } = videoRef\n if (!videoElement \|\| !onEnded) return\n\n videoElement.addEventListener(\"ended\", onEnded)\n\n return function cleanup() {\n videoElement.removeEventListener(\"ended\", onEnded)\n }\n }, [videoRef])\n\n const pausePlay = usePausePlay(videoRef)\n\n return (\n <figure\n className={classnames(styles.figure, {\n [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n Boolean(aspectRatio),\n })}\n >\n <video\n muted={true}\n aria-hidden={true}\n preload=\"metadata\"\n ref={videoRef}\n width=\"100%\"\n data-testid=\"kz-video-player\"\n className={styles.wrapper}\n loop={loop}\n poster={assetUrl(`${fallback}.png`)}\n autoPlay={prefersReducedMotion ? false : autoplay}\n playsInline={true}\n tabIndex={-1}\n >\n {/\n This seems counter-intuitive, but webm support is codec specific.\n * Only offer webm if we are positive the browser supports it.\n * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\n */}\n {canPlayWebm() && (\n <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n )}\n <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n </video>\n <IconButton\n onClick={(): void => pausePlay.toggle()}\n icon={pausePlay.icon}\n label={pausePlay.label}\n classNameOverride={styles.pausePlayButton}\n />\n </figure>\n )\n}\n"],"names":["VideoPlayer","_a","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","React","useState","prefersReducedMotion","setPrefersReducedMotion","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","e","pausePlay","usePausePlay","className","classnames","styles","figure","_b","concat","aspectRatioWrapper","Boolean","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","autoPlay","playsInline","tabIndex","canPlayWebm","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}
1	+ {"version":3,"file":"VideoPlayer.mjs","sources":["../../../../../src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\"\nimport classnames from \"classnames\"\nimport { assetUrl } from \"@kaizen/hosted-assets\"\nimport { IconButton } from \"~components/Button\"\nimport { canPlayWebm } from \"../../utils/canPlayWebm\"\nimport { usePausePlay } from \"../../utils/usePausePlay\"\nimport styles from \"../Base/Base.module.scss\"\n\nexport type VideoPlayerProps = {\n /*\n Specifies whether the animation plays as soon as it is rendered.\n * If the user has enabled prefer-reduced-motion their preferences\n * take precedent over this prop.\n /\n autoplay?: boolean\n\n /\n Replay from start when active animation reaches the end of the animation.\n /\n loop?: boolean\n\n /\n Fallback image. Used when rendering of the asset fails, or as a\n * poster for the video player.\n /\n fallback: string\n\n /\n The path of the animation source, excluding the file extension. This\n * Player will preference Webm over mp4.\n /\n source: string\n\n /\n Aspect ratio that is set on the illustration in Scene/Spot which wraps the\n * component in a container, forcing the aspect ratio.\n /\n aspectRatio?: \"landscape\" \| \"portrait\" \| \"square\"\n\n onEnded?: () => void\n}\n\nexport const VideoPlayer = ({\n autoplay = true,\n loop = false,\n fallback,\n source,\n aspectRatio,\n onEnded,\n}: VideoPlayerProps): JSX.Element => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const [prefersReducedMotion, setPrefersReducedMotion] =\n React.useState<boolean>(true)\n\n useEffect(() => {\n /\n Setting `muted` on the player is required in Safari/Webkit and older\n * versions of Chome for the video to autoplay (regardless of whether\n * the format contains an audio stream or not).\n \n React does not guarentee the `muted` attribute is set on the\n * `video` element. So on load we force set this attribute. See issue:\n * https://github.com/facebook/react/issues/10389\n /\n const { current: videoElement } = videoRef\n if (videoElement !== null) {\n videoElement.setAttribute(\"muted\", \"\")\n }\n }, [])\n\n useEffect(() => {\n // when the source of the animation is updated, we need to reload the asset\n // to ensure the video player is in sync with the new source.\n const { current: videoElement } = videoRef\n if (videoElement !== null) {\n videoElement.load()\n }\n }, [source])\n\n useEffect(() => {\n if (!window) return\n\n const reducedMotionQuery = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n )\n setPrefersReducedMotion(reducedMotionQuery.matches)\n const updateMotionPreferences = (): void => {\n const { matches = false } = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n )\n setPrefersReducedMotion(matches)\n }\n\n const isLegacyEdge = navigator.userAgent.match(/Edge/)\n\n const isUnsupportedSafari =\n window.matchMedia(\"\").addEventListener === undefined\n\n if (isLegacyEdge \|\| isUnsupportedSafari) return\n\n reducedMotionQuery.addEventListener(\"change\", updateMotionPreferences, true)\n\n return function cleanup() {\n reducedMotionQuery.removeEventListener(\"change\", updateMotionPreferences)\n }\n }, [])\n\n useEffect(() => {\n const { current: videoElement } = videoRef\n if (!videoElement) return\n\n if (prefersReducedMotion) {\n videoElement.pause()\n } else if (autoplay && !prefersReducedMotion) {\n try {\n // Older browsers may not return a promise, so .play could return undefined\n videoElement.play()?.catch(() => {\n /\n * An DOMException _may_ be raised by some browsers if we\n * programatically interact with the video before the\n * user has interacted with the page. This is okay - so\n * we're going to catch this error without handling it. See:\n * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability\n /\n })\n } catch (e) {\n /\n Older browsers will raise a synchronous error because their first implementation\n * of `.play` was not a promise.\n /\n }\n }\n /\n Chrome seems to have an issue with changes to autoplay after the video\n * has been mounted. If there is a change in autoplay we need to force the\n * play() method to be called.\n /\n }, [prefersReducedMotion, autoplay])\n\n useEffect(() => {\n // Add event listeners for the video element\n const { current: videoElement } = videoRef\n if (!videoElement \|\| !onEnded) return\n\n videoElement.addEventListener(\"ended\", onEnded)\n\n return function cleanup() {\n videoElement.removeEventListener(\"ended\", onEnded)\n }\n }, [videoRef])\n\n const pausePlay = usePausePlay(videoRef)\n\n return (\n <figure\n className={classnames(styles.figure, {\n [`${styles[aspectRatio!]} ${styles.aspectRatioWrapper}`]:\n Boolean(aspectRatio),\n })}\n >\n <video\n muted={true}\n aria-hidden={true}\n preload=\"metadata\"\n ref={videoRef}\n width=\"100%\"\n data-testid=\"kz-video-player\"\n className={styles.wrapper}\n loop={loop}\n poster={assetUrl(`${fallback}.png`)}\n autoPlay={prefersReducedMotion ? false : autoplay}\n playsInline={true}\n tabIndex={-1}\n >\n {/\n This seems counter-intuitive, but webm support is codec specific.\n * Only offer webm if we are positive the browser supports it.\n * Reference: https://bugs.webkit.org/show_bug.cgi?id=216652#c1\n */}\n {canPlayWebm() && (\n <source src={assetUrl(`${source}.webm`)} type=\"video/webm\" />\n )}\n <source src={assetUrl(`${source}.mp4`)} type=\"video/mp4\" />\n </video>\n <IconButton\n onClick={(): void => pausePlay.toggle()}\n icon={pausePlay.icon}\n label={pausePlay.label}\n classNameOverride={styles.pausePlayButton}\n />\n </figure>\n )\n}\n"],"names":["VideoPlayer","_a","_c","autoplay","_d","loop","fallback","source","aspectRatio","onEnded","videoRef","useRef","_e","React","useState","prefersReducedMotion","setPrefersReducedMotion","useEffect","videoElement","current","setAttribute","load","window","reducedMotionQuery","matchMedia","matches","updateMotionPreferences","isLegacyEdge","navigator","userAgent","match","isUnsupportedSafari","addEventListener","undefined","cleanup","removeEventListener","pause","play","catch","e","pausePlay","usePausePlay","className","classnames","styles","figure","_b","concat","aspectRatioWrapper","Boolean","createElement","muted","preload","ref","width","wrapper","poster","assetUrl","autoPlay","playsInline","tabIndex","canPlayWebm","src","type","IconButton","onClick","toggle","icon","label","classNameOverride","pausePlayButton"],"mappings":"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"}

package/dist/esm/Illustration/utils/usePausePlay.mjs CHANGED Viewed

@@ -18,11 +18,11 @@ var usePausePlay = function (videoRef) {
         videoRef.current.pause();
       }
     },
-    icon: isPaused ? /*#__PURE__*/React.createElement(LaunchIcon, {
+    icon: isPaused ? ( /*#__PURE__*/React.createElement(LaunchIcon, {
       role: "presentation"
-    }) : /*#__PURE__*/React.createElement(PauseIcon, {
+    })) : ( /*#__PURE__*/React.createElement(PauseIcon, {
       role: "presentation"
-    }),
+    })),
     label: isPaused ? "Play animation" : "Pause animation"
   };
 };

package/dist/esm/Illustration/utils/usePausePlay.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePausePlay.mjs","sources":["../../../../src/Illustration/utils/usePausePlay.tsx"],"sourcesContent":["import React, { useState, RefObject } from \"react\"\nimport { LaunchIcon, PauseIcon } from \"~components/Icon\"\n\nexport type usePausePlayHook = {\n toggle: () => void\n icon: JSX.Element\n label: string\n}\n\nexport const usePausePlay = (\n videoRef: RefObject<HTMLVideoElement>\n): usePausePlayHook => {\n const [isPaused, setPaused] = useState(false)\n\n return {\n toggle: (): void => {\n if (!videoRef.current) return\n\n if (videoRef.current.paused) {\n setPaused(false)\n videoRef.current.play()\n } else {\n setPaused(true)\n videoRef.current.pause()\n }\n },\n icon: isPaused ? (\n <LaunchIcon role=\"presentation\" />\n ) : (\n <PauseIcon role=\"presentation\" />\n ),\n label: isPaused ? \"Play animation\" : \"Pause animation\",\n }\n}\n"],"names":["usePausePlay","videoRef","_a","useState","isPaused","setPaused","toggle","current","paused","play","pause","icon","React","createElement","LaunchIcon","role","PauseIcon","label"],"mappings":";;;;;AASO,IAAMA,YAAY,GAAG,SAAAA,CAC1BC,QAAqC,EAAA;EAE/B,IAAAC,EAAA,GAAwBC,QAAQ,CAAC,KAAK,CAAC;IAAtCC,QAAQ,GAAAF,EAAA,CAAA,CAAA,CAAA;IAAEG,SAAS,GAAAH,EAAA,CAAA,CAAA,CAAmB;EAE7C,OAAO;IACLI,MAAM,EAAE,SAAAA,CAAA,EAAA;MACN,IAAI,CAACL,QAAQ,CAACM,OAAO,EAAE;MAEvB,IAAIN,QAAQ,CAACM,OAAO,CAACC,MAAM,EAAE;QAC3BH,SAAS,CAAC,KAAK,CAAC;QAChBJ,QAAQ,CAACM,OAAO,CAACE,IAAI,EAAE;MACxB,CAAA,MAAM;QACLJ,SAAS,CAAC,IAAI,CAAC;QACfJ,QAAQ,CAACM,OAAO,CAACG,KAAK,EAAE;MACzB;IACF,CAAA;IACDC,IAAI,EAAEP,QAAQ,~~gBACZQ~~,KAAC,CAAAC,aAAA,CAAAC,UAAU,EAAC;MAAAC,IAAI,EAAC;MAAiB,~~gBAElCH~~,KAAA,CAAAC,aAAA,CAACG,SAAS,EAAA;MAACD,IAAI,EAAC;IAAc,CAAA,~~CAC/B~~;IACDE,KAAK,EAAEb,QAAQ,GAAG,gBAAgB,GAAG;GACtC;AACH,CAAA;"}
1	+ {"version":3,"file":"usePausePlay.mjs","sources":["../../../../src/Illustration/utils/usePausePlay.tsx"],"sourcesContent":["import React, { useState, RefObject } from \"react\"\nimport { LaunchIcon, PauseIcon } from \"~components/Icon\"\n\nexport type usePausePlayHook = {\n toggle: () => void\n icon: JSX.Element\n label: string\n}\n\nexport const usePausePlay = (\n videoRef: RefObject<HTMLVideoElement>\n): usePausePlayHook => {\n const [isPaused, setPaused] = useState(false)\n\n return {\n toggle: (): void => {\n if (!videoRef.current) return\n\n if (videoRef.current.paused) {\n setPaused(false)\n videoRef.current.play()\n } else {\n setPaused(true)\n videoRef.current.pause()\n }\n },\n icon: isPaused ? (\n <LaunchIcon role=\"presentation\" />\n ) : (\n <PauseIcon role=\"presentation\" />\n ),\n label: isPaused ? \"Play animation\" : \"Pause animation\",\n }\n}\n"],"names":["usePausePlay","videoRef","_a","useState","isPaused","setPaused","toggle","current","paused","play","pause","icon","React","createElement","LaunchIcon","role","PauseIcon","label"],"mappings":";;;;;AASO,IAAMA,YAAY,GAAG,SAAAA,CAC1BC,QAAqC,EAAA;EAE/B,IAAAC,EAAA,GAAwBC,QAAQ,CAAC,KAAK,CAAC;IAAtCC,QAAQ,GAAAF,EAAA,CAAA,CAAA,CAAA;IAAEG,SAAS,GAAAH,EAAA,CAAA,CAAA,CAAmB;EAE7C,OAAO;IACLI,MAAM,EAAE,SAAAA,CAAA,EAAA;MACN,IAAI,CAACL,QAAQ,CAACM,OAAO,EAAE;MAEvB,IAAIN,QAAQ,CAACM,OAAO,CAACC,MAAM,EAAE;QAC3BH,SAAS,CAAC,KAAK,CAAC;QAChBJ,QAAQ,CAACM,OAAO,CAACE,IAAI,EAAE;MACxB,CAAA,MAAM;QACLJ,SAAS,CAAC,IAAI,CAAC;QACfJ,QAAQ,CAACM,OAAO,CAACG,KAAK,EAAE;MACzB;IACF,CAAA;IACDC,IAAI,EAAEP,QAAQ,kBACZQ,KAAC,CAAAC,aAAA,CAAAC,UAAU,EAAC;MAAAC,IAAI,EAAC;MAAiB,mBAElCH,KAAA,CAAAC,aAAA,CAACG,SAAS,EAAA;MAACD,IAAI,EAAC;IAAc,CAAA,CAAG,CAClC;IACDE,KAAK,EAAEb,QAAQ,GAAG,gBAAgB,GAAG;GACtC;AACH,CAAA;"}

package/dist/esm/Input/Input/Input.mjs CHANGED Viewed

@@ -20,20 +20,20 @@ const Input = /*#__PURE__*/function () {
       restProps = __rest(_a, ["inputRef", "status", "startIconAdornment", "endIconAdornment", "reversed", "type", "value", "defaultValue", "classNameOverride", "disabled"]);
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.wrapper, reversed && styles.withReversed, disabled && styles.withDisabled, startIconAdornment && styles.withStartIconAdornment, endIconAdornment && styles.withEndIconAdornment, status != "default" && styles.hasStatus)
-    }, startIconAdornment && /*#__PURE__*/React.createElement("div", {
+    }, startIconAdornment && ( /*#__PURE__*/React.createElement("div", {
       className: styles.startIconAdornment
-    }, startIconAdornment), /*#__PURE__*/React.createElement("input", __assign({
+    }, startIconAdornment)), /*#__PURE__*/React.createElement("input", __assign({
       ref: inputRef,
       type: type,
       value: value,
       defaultValue: defaultValue,
       disabled: disabled,
-      className: classnames(styles.input, styles[status], classNameOverride, reversed ? styles.reversed : styles["default"], disabled && styles.disabled)
+      className: classnames(styles.input, styles[status], classNameOverride, reversed ? styles.reversed : styles.default, disabled && styles.disabled)
     }, restProps)), /*#__PURE__*/React.createElement("div", {
       className: styles.focusRing
-    }), endIconAdornment && /*#__PURE__*/React.createElement("div", {
+    }), endIconAdornment && ( /*#__PURE__*/React.createElement("div", {
       className: styles.endIconAdornment
-    }, endIconAdornment));
+    }, endIconAdornment)));
   };
   Input.displayName = "Input";
   return Input;

package/dist/esm/Input/Input/Input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.mjs","sources":["../../../../src/Input/Input/Input.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { InputStatus, InputTypes } from \"./types\"\nimport styles from \"./Input.module.scss\"\n\nexport type InputType = (typeof InputTypes)[number]\nexport type InputStatusType = (typeof InputStatus)[number]\n\nexport type InputProps = {\n inputRef?: React.RefObject<HTMLInputElement>\n status?: InputStatusType\n startIconAdornment?: React.ReactNode\n endIconAdornment?: React.ReactNode\n reversed?: boolean\n type?: InputType\n} & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>\n\nexport const Input = ({\n inputRef,\n status = \"default\",\n startIconAdornment,\n endIconAdornment,\n reversed = false,\n type = \"text\",\n value,\n defaultValue,\n classNameOverride,\n disabled,\n ...restProps\n}: InputProps): JSX.Element => (\n <div\n className={classnames(\n styles.wrapper,\n reversed && styles.withReversed,\n disabled && styles.withDisabled,\n startIconAdornment && styles.withStartIconAdornment,\n endIconAdornment && styles.withEndIconAdornment,\n status != \"default\" && styles.hasStatus\n )}\n >\n {startIconAdornment && (\n <div className={styles.startIconAdornment}>{startIconAdornment}</div>\n )}\n\n <input\n ref={inputRef}\n type={type}\n value={value}\n defaultValue={defaultValue}\n disabled={disabled}\n className={classnames(\n styles.input,\n styles[status],\n classNameOverride,\n reversed ? styles.reversed : styles.default,\n disabled && styles.disabled\n )}\n {...restProps}\n />\n\n {/* Inputs aren't able to have pseudo elements like ::after on them,\n so we have to create an element ourselves for the focus ring */}\n <div className={styles.focusRing} />\n\n {endIconAdornment && (\n <div className={styles.endIconAdornment}>{endIconAdornment}</div>\n )}\n </div>\n)\n\nInput.displayName = \"Input\"\n"],"names":["Input","_a","inputRef","_b","status","startIconAdornment","endIconAdornment","_c","reversed","_d","type","value","defaultValue","classNameOverride","disabled","restProps","__rest","React","createElement","className","classnames","styles","wrapper","withReversed","withDisabled","withStartIconAdornment","withEndIconAdornment","hasStatus","__assign","ref","input","focusRing","displayName"],"mappings":";;;;MAkBaA,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAYT,EAAA;IAXX,IAAAC,QAAQ,cAAA;MACRC,EAAA,GAAAF,EAAA,CAAAG,MAAkB;MAAlBA,MAAM,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAAA,EAAA;MAClBE,kBAAkB,GAAAJ,EAAA,CAAAI,kBAAA;MAClBC,gBAAgB,GAAAL,EAAA,CAAAK,gBAAA;MAChBC,gBAAgB;MAAhBC,QAAQ,mBAAG,KAAK,GAAAD,EAAA;MAChBE,EAAa,GAAAR,EAAA,CAAAS,IAAA;MAAbA,IAAI,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA;MACbE,KAAK,WAAA;MACLC,YAAY,kBAAA;MACZC,iBAAiB,uBAAA;MACjBC,QAAQ,cAAA;MACLC,SAAS,GAXQC,MAAA,CAAAf,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,UAAA,CAYrB,CADa;IACiB,oBAC7BgB,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,OAAO,EACdd,QAAQ,IAAIa,MAAM,CAACE,YAAY,EAC/BT,QAAQ,IAAIO,MAAM,CAACG,YAAY,EAC/BnB,kBAAkB,IAAIgB,MAAM,CAACI,sBAAsB,EACnDnB,gBAAgB,IAAIe,MAAM,CAACK,oBAAoB,EAC/CtB,MAAM,IAAI,SAAS,IAAIiB,MAAM,CAACM,SAAS;IACxC,CAAA,EAEAtB,kBAAkB,~~iBACjBY~~,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKC,SAAS,EAAEE,MAAM,CAAChB;KAAkB,EAAGA,kBAAkB,~~CAC/D~~,eAEDY,KACE,CAAAC,aAAA,CAAA,OAAA,EAAAU,QAAA,CAAA;MAAAC,GAAG,EAAE3B,QAAQ;MACbQ,IAAI,EAAEA,IAAI;MACVC,KAAK,EAAEA,KAAK;MACZC,YAAY,EAAEA,YAAY;MAC1BE,QAAQ,EAAEA,QAAQ;MAClBK,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACS,KAAK,EACZT,MAAM,CAACjB,MAAM,CAAC,EACdS,iBAAiB,EACjBL,QAAQ,GAAGa,MAAM,CAACb,QAAQ,GAAGa,MAAM,~~CAAC~~,~~SAAO~~,~~CAAA~~,~~EAC3CP,~~QAAQ,IAAIO,MAAM,CAACP,QAAQ;IAC5B,CACG,EAAAC,SAAS,CACb,CAAA,eAIFE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKC,SAAS,EAAEE,MAAM,~~CAACU~~;KAAa,CAAA,~~EAEnCzB~~,gBAAgB,~~iBACfW~~,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEE,MAAM,CAACf;IAAgB,CAAA,EAAGA,gBAAgB,~~CAC3D~~,CACG;GACP;EAEDN,KAAK,~~CAACgC~~,WAAW,GAAG,OAAO;EAAA,~~OArDdhC~~,KAAK;AAAA;"}
1	+ {"version":3,"file":"Input.mjs","sources":["../../../../src/Input/Input/Input.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { InputStatus, InputTypes } from \"./types\"\nimport styles from \"./Input.module.scss\"\n\nexport type InputType = (typeof InputTypes)[number]\nexport type InputStatusType = (typeof InputStatus)[number]\n\nexport type InputProps = {\n inputRef?: React.RefObject<HTMLInputElement>\n status?: InputStatusType\n startIconAdornment?: React.ReactNode\n endIconAdornment?: React.ReactNode\n reversed?: boolean\n type?: InputType\n} & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>\n\nexport const Input = ({\n inputRef,\n status = \"default\",\n startIconAdornment,\n endIconAdornment,\n reversed = false,\n type = \"text\",\n value,\n defaultValue,\n classNameOverride,\n disabled,\n ...restProps\n}: InputProps): JSX.Element => (\n <div\n className={classnames(\n styles.wrapper,\n reversed && styles.withReversed,\n disabled && styles.withDisabled,\n startIconAdornment && styles.withStartIconAdornment,\n endIconAdornment && styles.withEndIconAdornment,\n status != \"default\" && styles.hasStatus\n )}\n >\n {startIconAdornment && (\n <div className={styles.startIconAdornment}>{startIconAdornment}</div>\n )}\n\n <input\n ref={inputRef}\n type={type}\n value={value}\n defaultValue={defaultValue}\n disabled={disabled}\n className={classnames(\n styles.input,\n styles[status],\n classNameOverride,\n reversed ? styles.reversed : styles.default,\n disabled && styles.disabled\n )}\n {...restProps}\n />\n\n {/* Inputs aren't able to have pseudo elements like ::after on them,\n so we have to create an element ourselves for the focus ring */}\n <div className={styles.focusRing} />\n\n {endIconAdornment && (\n <div className={styles.endIconAdornment}>{endIconAdornment}</div>\n )}\n </div>\n)\n\nInput.displayName = \"Input\"\n"],"names":["Input","_a","inputRef","_b","status","startIconAdornment","endIconAdornment","_c","reversed","_d","type","value","defaultValue","classNameOverride","disabled","restProps","__rest","React","createElement","className","classnames","styles","wrapper","withReversed","withDisabled","withStartIconAdornment","withEndIconAdornment","hasStatus","__assign","ref","input","default","focusRing","displayName"],"mappings":";;;;MAkBaA,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAYT,EAAA;IAXX,IAAAC,QAAQ,cAAA;MACRC,EAAA,GAAAF,EAAA,CAAAG,MAAkB;MAAlBA,MAAM,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,SAAS,GAAAA,EAAA;MAClBE,kBAAkB,GAAAJ,EAAA,CAAAI,kBAAA;MAClBC,gBAAgB,GAAAL,EAAA,CAAAK,gBAAA;MAChBC,gBAAgB;MAAhBC,QAAQ,mBAAG,KAAK,GAAAD,EAAA;MAChBE,EAAa,GAAAR,EAAA,CAAAS,IAAA;MAAbA,IAAI,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA;MACbE,KAAK,WAAA;MACLC,YAAY,kBAAA;MACZC,iBAAiB,uBAAA;MACjBC,QAAQ,cAAA;MACLC,SAAS,GAXQC,MAAA,CAAAf,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,UAAA,CAYrB,CADa;IACiB,oBAC7BgB,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,OAAO,EACdd,QAAQ,IAAIa,MAAM,CAACE,YAAY,EAC/BT,QAAQ,IAAIO,MAAM,CAACG,YAAY,EAC/BnB,kBAAkB,IAAIgB,MAAM,CAACI,sBAAsB,EACnDnB,gBAAgB,IAAIe,MAAM,CAACK,oBAAoB,EAC/CtB,MAAM,IAAI,SAAS,IAAIiB,MAAM,CAACM,SAAS;IACxC,CAAA,EAEAtB,kBAAkB,mBACjBY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKC,SAAS,EAAEE,MAAM,CAAChB;KAAkB,EAAGA,kBAAkB,CAAO,CACtE,eAEDY,KACE,CAAAC,aAAA,CAAA,OAAA,EAAAU,QAAA,CAAA;MAAAC,GAAG,EAAE3B,QAAQ;MACbQ,IAAI,EAAEA,IAAI;MACVC,KAAK,EAAEA,KAAK;MACZC,YAAY,EAAEA,YAAY;MAC1BE,QAAQ,EAAEA,QAAQ;MAClBK,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACS,KAAK,EACZT,MAAM,CAACjB,MAAM,CAAC,EACdS,iBAAiB,EACjBL,QAAQ,GAAGa,MAAM,CAACb,QAAQ,GAAGa,MAAM,CAACU,OAAO,EAC3CjB,QAAQ,IAAIO,MAAM,CAACP,QAAQ;IAC5B,CACG,EAAAC,SAAS,CACb,CAAA,eAIFE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKC,SAAS,EAAEE,MAAM,CAACW;KAAa,CAAA,EAEnC1B,gBAAgB,mBACfW,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEE,MAAM,CAACf;IAAgB,CAAA,EAAGA,gBAAgB,CAAO,CAClE,CACG;GACP;EAEDN,KAAK,CAACiC,WAAW,GAAG,OAAO;EAAA,OArDdjC,KAAK;AAAA;"}

package/dist/esm/Input/InputRange/InputRange.mjs CHANGED Viewed

@@ -64,7 +64,7 @@ const InputRange = /*#__PURE__*/function () {
       id: visuallyHiddenHintId
     }, min, " is ", minLabel, ", ", max, " is ", maxLabel), /*#__PURE__*/React.createElement("div", {
       className: styles.labelsContainer
-    }, !readOnlyWithNoValue && /*#__PURE__*/React.createElement("div", {
+    }, !readOnlyWithNoValue && ( /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.sliderLabels, disabled && styles.disabled)
     }, /*#__PURE__*/React.createElement(Text, {
       variant: "small",
@@ -74,7 +74,7 @@ const InputRange = /*#__PURE__*/function () {
       variant: "small",
       color: "dark-reduced-opacity",
       tag: "span"
-    }, maxLabel))));
+    }, maxLabel)))));
   };
   InputRange.displayName = "InputRange";
   return InputRange;