npm - @vibe/core - Versions diffs - 3.82.4 → 3.83.2 - Mend

@vibe/core 3.82.4 → 3.83.2

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

package/dist/mocked_classnames/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AttentionBoxDefault.js","sources":["../../../../../../../../src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { Text } from \"~~../../../../Text~~\";\nimport { Flex } from \"@vibe/layout\";\nimport AttentionBoxButton from \"../../components/AttentionBoxButton/AttentionBoxButton\";\nimport AttentionBoxLink from \"../../components/AttentionBoxLink/AttentionBoxLink\";\nimport AttentionBoxCloseButton from \"../../components/AttentionBoxCloseButton/AttentionBoxCloseButton\";\nimport AttentionBoxLeadingIcon from \"../../components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon\";\nimport styles from \"./AttentionBoxDefault.module.scss\";\nimport type { AttentionBoxLayoutSharedProps, AttentionBoxProps } from \"../../AttentionBox.types\";\n\nexport type AttentionBoxDefaultProps = AttentionBoxLayoutSharedProps & Pick<AttentionBoxProps, \"title\">;\n\nconst AttentionBoxDefault = ({\n title,\n icon,\n iconType,\n onClose,\n closeButtonAriaLabel = \"Close\",\n action,\n link,\n content\n}: AttentionBoxDefaultProps) => {\n const hasActions = action \|\| link;\n\n return (\n <div\n className={cx(styles.container, {\n [styles.hasIcon]: !!icon,\n [styles.hasTitle]: !!title,\n [styles.hasActions]: hasActions,\n [styles.hasCloseButton]: !!onClose\n })}\n >\n {icon && <AttentionBoxLeadingIcon icon={icon} iconType={iconType} className={styles.icon} />}\n\n {title && (\n <Text type=\"text1\" weight=\"medium\" className={styles.title}>\n {title}\n </Text>\n )}\n\n {!!onClose && (\n <AttentionBoxCloseButton\n onClose={onClose}\n closeButtonAriaLabel={closeButtonAriaLabel}\n className={styles.closeButton}\n />\n )}\n\n <Text\n type=\"text2\"\n className={styles.text}\n ellipsis={false}\n element={typeof content === \"string\" ? \"p\" : undefined}\n >\n {content}\n </Text>\n\n {hasActions && (\n <Flex gap=\"medium\" className={styles.actions}>\n {link && <AttentionBoxLink {...link} inlineText={false} />}\n {action && <AttentionBoxButton {...action} />}\n </Flex>\n )}\n </div>\n );\n};\n\nexport default AttentionBoxDefault;\n"],"names":["AttentionBoxDefault","_ref","title","icon","iconType","onClose","_ref$closeButtonAriaL","closeButtonAriaLabel","action","link","content","hasActions","React","className","cx","styles","container","_defineProperty","hasIcon","hasTitle","hasCloseButton","createElement","AttentionBoxLeadingIcon","Text","type","weight","AttentionBoxCloseButton","closeButton","text","ellipsis","element","undefined","Flex","gap","actions","AttentionBoxLink","Object","assign","inlineText","AttentionBoxButton"],"mappings":"~~6kBAaA~~,IAAMA,EAAsB,SAAHC,GASM,IAR7BC,EAAKD,EAALC,MACAC,EAAIF,EAAJE,KACAC,EAAQH,EAARG,SACAC,EAAOJ,EAAPI,QAAOC,EAAAL,EACPM,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAC9BE,EAAMP,EAANO,OACAC,EAAIR,EAAJQ,KACAC,EAAOT,EAAPS,QAEMC,EAAaH,GAAUC,EAE7B,OACEG,uBACEC,UAAWC,EAAGC,EAAOC,UAASC,EAAAA,EAAAA,EAAAA,EAC3BF,CAAAA,EAAAA,EAAOG,UAAYf,GACnBY,EAAOI,WAAajB,GACpBa,EAAOJ,WAAaA,GACpBI,EAAOK,iBAAmBf,KAG5BF,GAAQS,EAACS,cAAAC,EAAwB,CAAAnB,KAAMA,EAAMC,SAAUA,EAAUS,UAAWE,EAAOZ,OAEnFD,GACCU,EAACS,cAAAE,GAAKC,KAAK,QAAQC,OAAO,SAASZ,UAAWE,EAAOb,OAClDA,KAIFG,GACDO,gBAACc,EAAuB,CACtBrB,QAASA,EACTE,qBAAsBA,EACtBM,UAAWE,EAAOY,cAItBf,EAAAS,cAACE,EAAI,CACHC,KAAK,QACLX,UAAWE,EAAOa,KAClBC,UAAU,EACVC,QAA4B,iBAAZpB,EAAuB,SAAMqB,GAE5CrB,GAGFC,GACCC,EAACS,cAAAW,EAAK,CAAAC,IAAI,SAASpB,UAAWE,EAAOmB,SAClCzB,GAAQG,gBAACuB,EAAgBC,OAAAC,OAAA,CAAA,EAAK5B,EAAM,CAAA6B,YAAY,KAChD9B,GAAUI,EAACS,cAAAkB,EAAuBH,OAAAC,OAAA,CAAA,EAAA7B,KAK7C"}
1	+ {"version":3,"file":"AttentionBoxDefault.js","sources":["../../../../../../../../src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport AttentionBoxButton from \"../../components/AttentionBoxButton/AttentionBoxButton\";\nimport AttentionBoxLink from \"../../components/AttentionBoxLink/AttentionBoxLink\";\nimport AttentionBoxCloseButton from \"../../components/AttentionBoxCloseButton/AttentionBoxCloseButton\";\nimport AttentionBoxLeadingIcon from \"../../components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon\";\nimport styles from \"./AttentionBoxDefault.module.scss\";\nimport type { AttentionBoxLayoutSharedProps, AttentionBoxProps } from \"../../AttentionBox.types\";\n\nexport type AttentionBoxDefaultProps = AttentionBoxLayoutSharedProps & Pick<AttentionBoxProps, \"title\">;\n\nconst AttentionBoxDefault = ({\n title,\n icon,\n iconType,\n onClose,\n closeButtonAriaLabel = \"Close\",\n action,\n link,\n content\n}: AttentionBoxDefaultProps) => {\n const hasActions = action \|\| link;\n\n return (\n <div\n className={cx(styles.container, {\n [styles.hasIcon]: !!icon,\n [styles.hasTitle]: !!title,\n [styles.hasActions]: hasActions,\n [styles.hasCloseButton]: !!onClose\n })}\n >\n {icon && <AttentionBoxLeadingIcon icon={icon} iconType={iconType} className={styles.icon} />}\n\n {title && (\n <Text type=\"text1\" weight=\"medium\" className={styles.title}>\n {title}\n </Text>\n )}\n\n {!!onClose && (\n <AttentionBoxCloseButton\n onClose={onClose}\n closeButtonAriaLabel={closeButtonAriaLabel}\n className={styles.closeButton}\n />\n )}\n\n <Text\n type=\"text2\"\n className={styles.text}\n ellipsis={false}\n element={typeof content === \"string\" ? \"p\" : undefined}\n >\n {content}\n </Text>\n\n {hasActions && (\n <Flex gap=\"medium\" className={styles.actions}>\n {link && <AttentionBoxLink {...link} inlineText={false} />}\n {action && <AttentionBoxButton {...action} />}\n </Flex>\n )}\n </div>\n );\n};\n\nexport default AttentionBoxDefault;\n"],"names":["AttentionBoxDefault","_ref","title","icon","iconType","onClose","_ref$closeButtonAriaL","closeButtonAriaLabel","action","link","content","hasActions","React","className","cx","styles","container","_defineProperty","hasIcon","hasTitle","hasCloseButton","createElement","AttentionBoxLeadingIcon","Text","type","weight","AttentionBoxCloseButton","closeButton","text","ellipsis","element","undefined","Flex","gap","actions","AttentionBoxLink","Object","assign","inlineText","AttentionBoxButton"],"mappings":"8lBAaA,IAAMA,EAAsB,SAAHC,GASM,IAR7BC,EAAKD,EAALC,MACAC,EAAIF,EAAJE,KACAC,EAAQH,EAARG,SACAC,EAAOJ,EAAPI,QAAOC,EAAAL,EACPM,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAC9BE,EAAMP,EAANO,OACAC,EAAIR,EAAJQ,KACAC,EAAOT,EAAPS,QAEMC,EAAaH,GAAUC,EAE7B,OACEG,uBACEC,UAAWC,EAAGC,EAAOC,UAASC,EAAAA,EAAAA,EAAAA,EAC3BF,CAAAA,EAAAA,EAAOG,UAAYf,GACnBY,EAAOI,WAAajB,GACpBa,EAAOJ,WAAaA,GACpBI,EAAOK,iBAAmBf,KAG5BF,GAAQS,EAACS,cAAAC,EAAwB,CAAAnB,KAAMA,EAAMC,SAAUA,EAAUS,UAAWE,EAAOZ,OAEnFD,GACCU,EAACS,cAAAE,GAAKC,KAAK,QAAQC,OAAO,SAASZ,UAAWE,EAAOb,OAClDA,KAIFG,GACDO,gBAACc,EAAuB,CACtBrB,QAASA,EACTE,qBAAsBA,EACtBM,UAAWE,EAAOY,cAItBf,EAAAS,cAACE,EAAI,CACHC,KAAK,QACLX,UAAWE,EAAOa,KAClBC,UAAU,EACVC,QAA4B,iBAAZpB,EAAuB,SAAMqB,GAE5CrB,GAGFC,GACCC,EAACS,cAAAW,EAAK,CAAAC,IAAI,SAASpB,UAAWE,EAAOmB,SAClCzB,GAAQG,gBAACuB,EAAgBC,OAAAC,OAAA,CAAA,EAAK5B,EAAM,CAAA6B,YAAY,KAChD9B,GAAUI,EAACS,cAAAkB,EAAuBH,OAAAC,OAAA,CAAA,EAAA7B,KAK7C"}

package/dist/mocked_classnames/src/components/next/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={container:"container",icon:"icon",title:"title",text:"text",actions:"actions",closeButton:"closeButton",hasIcon:"hasIcon",hasCloseButton:"hasCloseButton",hasTitle:"hasTitle"};!function(n){const t="s_id-d1aa0b2532e6_3_82_3";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const e=document.createElement("style");e.id=t,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".container {\n  --grid-columns: auto 1fr auto;\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  grid-template-columns: var(--grid-columns);\n}\n.container .icon {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n}\n.container .title {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: center;\n}\n.container .text,\n.container .actions {\n  grid-column: 2/-1;\n}\n.container .text {\n  grid-row: 2;\n  min-width: 0;\n  margin-inline-end: var(--space-8);\n}\n.container .closeButton {\n  grid-row: 1;\n  grid-column: 3;\n  align-self: start;\n}\n.container .actions {\n  grid-row: 3;\n  margin-block-start: var(--space-8);\n}\n.container:not(.hasIcon) {\n  --grid-columns: 1fr auto;\n}\n.container:not(.hasIcon):not(.hasCloseButton) {\n  --grid-columns: 1fr;\n}\n.container:not(.hasIcon) .title {\n  grid-column: 1;\n}\n.container:not(.hasIcon) .text,\n.container:not(.hasIcon) .actions {\n  grid-column: 1/-1;\n}\n.container:not(.hasIcon) .closeButton {\n  grid-column: 2;\n}\n.container:not(.hasCloseButton) {\n  --grid-columns: auto 1fr;\n}\n.container:not(.hasTitle) .icon {\n  align-self: start;\n}\n.container:not(.hasTitle) .text {\n  grid-row: 1;\n  grid-column-end: -2;\n}\n.container:not(.hasTitle) .closeButton {\n  margin-block-start: -1px;\n}\n.container:not(.hasTitle) .actions {\n  grid-row: 2;\n}");export{n as default};
+var n={container:"container",icon:"icon",title:"title",text:"text",actions:"actions",closeButton:"closeButton",hasIcon:"hasIcon",hasCloseButton:"hasCloseButton",hasTitle:"hasTitle"};!function(n){const t="s_id-d1aa0b2532e6_3_83_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const e=document.createElement("style");e.id=t,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".container {\n  --grid-columns: auto 1fr auto;\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  grid-template-columns: var(--grid-columns);\n}\n.container .icon {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n}\n.container .title {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: center;\n}\n.container .text,\n.container .actions {\n  grid-column: 2/-1;\n}\n.container .text {\n  grid-row: 2;\n  min-width: 0;\n  margin-inline-end: var(--space-8);\n}\n.container .closeButton {\n  grid-row: 1;\n  grid-column: 3;\n  align-self: start;\n}\n.container .actions {\n  grid-row: 3;\n  margin-block-start: var(--space-8);\n}\n.container:not(.hasIcon) {\n  --grid-columns: 1fr auto;\n}\n.container:not(.hasIcon):not(.hasCloseButton) {\n  --grid-columns: 1fr;\n}\n.container:not(.hasIcon) .title {\n  grid-column: 1;\n}\n.container:not(.hasIcon) .text,\n.container:not(.hasIcon) .actions {\n  grid-column: 1/-1;\n}\n.container:not(.hasIcon) .closeButton {\n  grid-column: 2;\n}\n.container:not(.hasCloseButton) {\n  --grid-columns: auto 1fr;\n}\n.container:not(.hasTitle) .icon {\n  align-self: start;\n}\n.container:not(.hasTitle) .text {\n  grid-row: 1;\n  grid-column-end: -2;\n}\n.container:not(.hasTitle) .closeButton {\n  margin-block-start: -1px;\n}\n.container:not(.hasTitle) .actions {\n  grid-row: 2;\n}");export{n as default};
 //# sourceMappingURL=AttentionBoxDefault.module.scss.js.map

package/dist/mocked_classnames/src/components/next/DatePicker/DatePicker.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={datePicker:"datePicker",datePickerMonths:"datePickerMonths",withWeekNumber:"withWeekNumber",datePickerHead:"datePickerHead",datePickerBody:"datePickerBody",datePickerTable:"datePickerTable",datePickerDay:"datePickerDay",datePickerDayContent:"datePickerDayContent",datePickerDayDisabled:"datePickerDayDisabled",datePickerAddToRangeStart:"datePickerAddToRangeStart",datePickerAddToRangeEnd:"datePickerAddToRangeEnd",datePickerAddToRangeMiddle:"datePickerAddToRangeMiddle",datePickerDayRangeStart:"datePickerDayRangeStart",datePickerDayRangeEnd:"datePickerDayRangeEnd",datePickerDayOutside:"datePickerDayOutside",datePickerDaySelected:"datePickerDaySelected",datePickerDayRangeMiddle:"datePickerDayRangeMiddle",datePickerRemoveFromRange:"datePickerRemoveFromRange",datePickerHalfRangeSelected:"datePickerHalfRangeSelected"};!function(e){const a="s_id-18acaee8f787_3_82_3";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n.datePicker {\n  --day-picker-header-height: 34px;\n  --day-picker-content-height: 234px;\n  --day-picker-day-width: 30px;\n  --day-picker-day-height: 30px;\n  --day-picker-days-horizontal-gap: 4px;\n  --day-picker-days-vertical-gap: 2px;\n  --day-picker-day-change-range: var(--primary-surface-color);\n}\n.datePicker .datePickerMonths {\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-medium);\n  align-items: flex-start;\n}\n.datePicker.withWeekNumber {\n  --day-picker-days-horizontal-gap: 2px;\n  width: 284px;\n  margin: 0;\n}\n.datePicker.withWeekNumber .datePickerHead td:first-child {\n  width: var(--day-picker-day-width);\n  border-top-left-radius: var(--border-radius-medium);\n  border-top-right-radius: var(--border-radius-medium);\n  background-color: var(--primary-background-hover-color);\n}\n.datePicker.withWeekNumber .datePickerHead td:first-child::after {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  display: flex;\n  justify-content: center;\n  content: "No.";\n}\n.datePicker.withWeekNumber .datePickerBody td:first-child {\n  background-color: var(--primary-background-hover-color);\n}\n.datePicker.withWeekNumber .datePickerBody tr:last-child td:first-child {\n  border-bottom-left-radius: var(--border-radius-medium);\n  border-bottom-right-radius: var(--border-radius-medium);\n}\n.datePicker .datePickerTable {\n  margin-top: var(--spacing-small);\n  border-collapse: collapse;\n  height: var(--day-picker-content-height);\n}\n.datePicker .datePickerHead th {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  padding-block: var(--space-2);\n  text-align: center;\n  height: var(--day-picker-day-height);\n}\n.datePicker .datePickerBody td {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  text-align: center;\n  padding: 0;\n}\n.datePicker .datePickerBody .datePickerDay {\n  color: var(--primary-text-color);\n  font: var(--font-text2-normal);\n  width: var(--day-picker-day-width);\n  height: var(--day-picker-day-height);\n  background: none;\n  border: none;\n  cursor: pointer;\n  border-radius: var(--border-radius-small);\n  margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);\n  padding: 0;\n}\n.datePicker .datePickerBody .datePickerDay .datePickerDayContent {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody .datePickerDay:focus-visible {\n  outline: none;\n}\n.datePicker .datePickerBody .datePickerDay:focus-visible .datePickerDayContent {\n  outline: 2px solid var(--primary-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayDisabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.datePicker .datePickerBody .datePickerDay:not(.datePickerDayDisabled):not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd):not(.datePickerAddToRangeMiddle):not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) .datePickerDayContent:hover {\n  background: var(--primary-background-hover-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayOutside {\n  color: var(--disabled-text-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDaySelected:not(.datePickerDayRangeMiddle):not(.datePickerRemoveFromRange) {\n  background: var(--primary-color);\n  color: var(--text-color-on-primary);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd):not(.datePickerRemoveFromRange), .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart):not(.datePickerRemoveFromRange) {\n  background: var(--primary-color);\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart.datePickerRemoveFromRange, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd.datePickerRemoveFromRange {\n  background: var(--primary-color);\n  color: var(--text-color-on-primary);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n  margin-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n  margin-left: 0;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle {\n  margin: var(--day-picker-days-vertical-gap) 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n  background-color: var(--primary-selected-color);\n  border: var(--day-picker-days-horizontal-gap) var(--border-style) var(--primary-selected-color);\n  border-top: none;\n  border-bottom: none;\n  width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n  background: var(--primary-selected-color);\n  margin: var(--day-picker-days-vertical-gap) 0;\n  border-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerRemoveFromRange:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeStart), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle {\n  background: var(--day-picker-day-change-range);\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDayRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n  border: none;\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n  margin-left: var(--day-picker-days-horizontal-gap);\n  border-right: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n  border-top-left-radius: var(--border-radius-small);\n  border-bottom-left-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerRemoveFromRange {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n  margin-right: 0;\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDayRangeMiddle, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n  border: none;\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n  margin-right: var(--day-picker-days-horizontal-gap);\n  border-left: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n  border-top-right-radius: var(--border-radius-small);\n  border-bottom-right-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerRemoveFromRange {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n  margin-left: 0;\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle), .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle),\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeMiddle,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n  border-left-width: 0;\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n  border-right-width: 0;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n  border-radius: var(--border-radius-small) !important;\n  border-color: var(--primary-color) !important;\n  background-color: var(--primary-color) !important;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart:not(.datePickerHalfRangeSelected) {\n  margin-left: calc(var(--day-picker-days-horizontal-gap) * -1);\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n  border-radius: var(--border-radius-small) !important;\n  border-color: var(--primary-color) !important;\n  background-color: var(--primary-color) !important;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd:not(.datePickerHalfRangeSelected) {\n  margin-right: calc(var(--day-picker-days-horizontal-gap) * -1);\n}');export{e as default};
+var e={datePicker:"datePicker",datePickerMonths:"datePickerMonths",withWeekNumber:"withWeekNumber",datePickerHead:"datePickerHead",datePickerBody:"datePickerBody",datePickerTable:"datePickerTable",datePickerDay:"datePickerDay",datePickerDayContent:"datePickerDayContent",datePickerDayDisabled:"datePickerDayDisabled",datePickerAddToRangeStart:"datePickerAddToRangeStart",datePickerAddToRangeEnd:"datePickerAddToRangeEnd",datePickerAddToRangeMiddle:"datePickerAddToRangeMiddle",datePickerDayRangeStart:"datePickerDayRangeStart",datePickerDayRangeEnd:"datePickerDayRangeEnd",datePickerDayOutside:"datePickerDayOutside",datePickerDaySelected:"datePickerDaySelected",datePickerDayRangeMiddle:"datePickerDayRangeMiddle",datePickerRemoveFromRange:"datePickerRemoveFromRange",datePickerHalfRangeSelected:"datePickerHalfRangeSelected"};!function(e){const a="s_id-18acaee8f787_3_83_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n.datePicker {\n  --day-picker-header-height: 34px;\n  --day-picker-content-height: 234px;\n  --day-picker-day-width: 30px;\n  --day-picker-day-height: 30px;\n  --day-picker-days-horizontal-gap: 4px;\n  --day-picker-days-vertical-gap: 2px;\n  --day-picker-day-change-range: var(--primary-surface-color);\n}\n.datePicker .datePickerMonths {\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-medium);\n  align-items: flex-start;\n}\n.datePicker.withWeekNumber {\n  --day-picker-days-horizontal-gap: 2px;\n  width: 284px;\n  margin: 0;\n}\n.datePicker.withWeekNumber .datePickerHead td:first-child {\n  width: var(--day-picker-day-width);\n  border-top-left-radius: var(--border-radius-medium);\n  border-top-right-radius: var(--border-radius-medium);\n  background-color: var(--primary-background-hover-color);\n}\n.datePicker.withWeekNumber .datePickerHead td:first-child::after {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  display: flex;\n  justify-content: center;\n  content: "No.";\n}\n.datePicker.withWeekNumber .datePickerBody td:first-child {\n  background-color: var(--primary-background-hover-color);\n}\n.datePicker.withWeekNumber .datePickerBody tr:last-child td:first-child {\n  border-bottom-left-radius: var(--border-radius-medium);\n  border-bottom-right-radius: var(--border-radius-medium);\n}\n.datePicker .datePickerTable {\n  margin-top: var(--spacing-small);\n  border-collapse: collapse;\n  height: var(--day-picker-content-height);\n}\n.datePicker .datePickerHead th {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  padding-block: var(--space-2);\n  text-align: center;\n  height: var(--day-picker-day-height);\n}\n.datePicker .datePickerBody td {\n  color: var(--secondary-text-color);\n  font: var(--font-text2-normal);\n  text-align: center;\n  padding: 0;\n}\n.datePicker .datePickerBody .datePickerDay {\n  color: var(--primary-text-color);\n  font: var(--font-text2-normal);\n  width: var(--day-picker-day-width);\n  height: var(--day-picker-day-height);\n  background: none;\n  border: none;\n  cursor: pointer;\n  border-radius: var(--border-radius-small);\n  margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);\n  padding: 0;\n}\n.datePicker .datePickerBody .datePickerDay .datePickerDayContent {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody .datePickerDay:focus-visible {\n  outline: none;\n}\n.datePicker .datePickerBody .datePickerDay:focus-visible .datePickerDayContent {\n  outline: 2px solid var(--primary-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayDisabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.datePicker .datePickerBody .datePickerDay:not(.datePickerDayDisabled):not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd):not(.datePickerAddToRangeMiddle):not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) .datePickerDayContent:hover {\n  background: var(--primary-background-hover-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayOutside {\n  color: var(--disabled-text-color);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDaySelected:not(.datePickerDayRangeMiddle):not(.datePickerRemoveFromRange) {\n  background: var(--primary-color);\n  color: var(--text-color-on-primary);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd):not(.datePickerRemoveFromRange), .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart):not(.datePickerRemoveFromRange) {\n  background: var(--primary-color);\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart.datePickerRemoveFromRange, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd.datePickerRemoveFromRange {\n  background: var(--primary-color);\n  color: var(--text-color-on-primary);\n}\n.datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n  margin-right: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n  margin-left: 0;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle {\n  margin: var(--day-picker-days-vertical-gap) 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n  background-color: var(--primary-selected-color);\n  border: var(--day-picker-days-horizontal-gap) var(--border-style) var(--primary-selected-color);\n  border-top: none;\n  border-bottom: none;\n  width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));\n}\n.datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody .datePickerDay.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n  background: var(--primary-selected-color);\n  margin: var(--day-picker-days-vertical-gap) 0;\n  border-radius: 0;\n}\n.datePicker .datePickerBody .datePickerDay.datePickerRemoveFromRange:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeEnd), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeStart), .datePicker .datePickerBody .datePickerDay.datePickerAddToRangeMiddle {\n  background: var(--day-picker-day-change-range);\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDayRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n  border: none;\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n  margin-left: var(--day-picker-days-horizontal-gap);\n  border-right: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n  border-top-left-radius: var(--border-radius-small);\n  border-bottom-left-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerRemoveFromRange {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n  margin-right: 0;\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDayRangeMiddle, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd), .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n  border: none;\n  width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n  margin-right: var(--day-picker-days-horizontal-gap);\n  border-left: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n  border-top-right-radius: var(--border-radius-small);\n  border-bottom-right-radius: var(--border-radius-small);\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerRemoveFromRange {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart, .datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n  margin-left: 0;\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle), .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeMiddle, .datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle),\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeMiddle,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {\n  border-color: var(--day-picker-day-change-range);\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n  border-left-width: 0;\n}\n.datePicker .datePickerBody tr td:first-child .datePickerDay.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd,\n.datePicker .datePickerBody tr td:last-child .datePickerDay.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n  border-right-width: 0;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n  border-radius: var(--border-radius-small) !important;\n  border-color: var(--primary-color) !important;\n  background-color: var(--primary-color) !important;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart:not(.datePickerHalfRangeSelected) {\n  margin-left: calc(var(--day-picker-days-horizontal-gap) * -1);\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n  border-radius: var(--border-radius-small) !important;\n  border-color: var(--primary-color) !important;\n  background-color: var(--primary-color) !important;\n}\n.datePicker .datePickerBody .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd:not(.datePickerHalfRangeSelected) {\n  margin-right: calc(var(--day-picker-days-horizontal-gap) * -1);\n}');export{e as default};
 //# sourceMappingURL=DatePicker.module.scss.js.map

package/dist/mocked_classnames/src/components/next/DatePicker/DatePickerHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useCallback as n,useMemo as t}from"react";import r from"classnames";import{useDayPicker as a,useNavigation as o}from"react-day-picker";import{Button as i}from"@vibe/button/mockedClassNames";import l from"../../IconButton/IconButton.js";import{Flex as s}from"@vibe/layout/mockedClassNames";import u from"../Dropdown/Dropdown.js";import{DropdownChevronLeft as c,DropdownChevronRight as m}from"@vibe/icons";import f from"./DatePickerHeader.module.scss.js";import{useMonthsOptionItems as p,useYearsOptionItems as d}from"./datePickerHooks.js";import{format as b}from"date-fns";var v=function(b){var v=b.setDisplayMonth,L=b.monthSelectionAriaLabel,M=b.yearSelectionAriaLabel,g=b.nextButtonAriaLabel,y=b.prevButtonAriaLabel,D=b.locale,E=b.className,j=a().month,w=o(),A=w.goToMonth,B=w.nextMonth,C=w.previousMonth,N=n((function(){return A(B)}),[A,B]),z=n((function(){return A(C)}),[A,C]),R=p({locale:D}),T=d({locale:D}),I=t((function(){return R.map((function(e){return Object.assign(Object.assign({},e),{value:e.id})}))}),[R]),O=t((function(){return T.map((function(e){return Object.assign(Object.assign({},e),{value:e.id})}))}),[T]),S=t((function(){return k(j,D)}),[j,D]),Y=t((function(){return h(j,D)}),[j,D]),x=n((function(e){var n=e.value,t=new Date(j);t.setMonth(+n),v(t)}),[j,v]),H=n((function(e){var n=e.value,t=new Date(j);t.setFullYear(+n),v(t)}),[j,v]),P=t((function(){return I.find((function(e){return e.value===""+j.getMonth()}))}),[I,j]),F=t((function(){return O.find((function(e){return e.value===""+j.getFullYear()}))}),[O,j]);return e.createElement("div",{className:r(f.datePickerHeader,E)},e.createElement(s,{gap:"small"},e.createElement(u,{className:f.monthButtonDropdown,ariaLabel:L,options:I,value:P,onChange:x,menuWrapperClassName:f.monthButtonDropdown,size:"small",valueRenderer:function(e){return S},searchable:!1,clearable:!1,borderless:!0}),e.createElement(u,{className:f.yearButtonDropdown,ariaLabel:M,options:O,value:F,onChange:H,menuWrapperClassName:f.yearButtonDropdown,size:"small",valueRenderer:function(e){return Y},searchable:!1,clearable:!1,borderless:!0})),e.createElement(s,null,e.createElement(l,{kind:i.kinds.TERTIARY,size:i.sizes.SMALL,ariaLabel:y,onClick:z,icon:c}),e.createElement(l,{kind:i.kinds.TERTIARY,size:i.sizes.SMALL,ariaLabel:g,onClick:N,icon:m})))};function h(e,n){return b(e,"yyyy",{locale:n})}function k(e,n){return b(e,"MMM",{locale:n})}export{v as default,k as getMonthButtonLabel,h as getYearButtonLabel};
+import e,{useCallback as n,useMemo as r}from"react";import t from"classnames";import{useDayPicker as a,useNavigation as o}from"react-day-picker";import{Button as i}from"@vibe/button/mockedClassNames";import{IconButton as l}from"@vibe/icon-button/mockedClassNames";import{Flex as s}from"@vibe/layout/mockedClassNames";import u from"../Dropdown/Dropdown.js";import{DropdownChevronLeft as c,DropdownChevronRight as m}from"@vibe/icons";import f from"./DatePickerHeader.module.scss.js";import{useMonthsOptionItems as p,useYearsOptionItems as d}from"./datePickerHooks.js";import{format as b}from"date-fns";var v=function(b){var v=b.setDisplayMonth,L=b.monthSelectionAriaLabel,M=b.yearSelectionAriaLabel,g=b.nextButtonAriaLabel,y=b.prevButtonAriaLabel,D=b.locale,C=b.className,E=a().month,N=o(),w=N.goToMonth,A=N.nextMonth,j=N.previousMonth,z=n((function(){return w(A)}),[w,A]),B=n((function(){return w(j)}),[w,j]),R=p({locale:D}),T=d({locale:D}),O=r((function(){return R.map((function(e){return Object.assign(Object.assign({},e),{value:e.id})}))}),[R]),S=r((function(){return T.map((function(e){return Object.assign(Object.assign({},e),{value:e.id})}))}),[T]),Y=r((function(){return k(E,D)}),[E,D]),x=r((function(){return h(E,D)}),[E,D]),H=n((function(e){var n=e.value,r=new Date(E);r.setMonth(+n),v(r)}),[E,v]),P=n((function(e){var n=e.value,r=new Date(E);r.setFullYear(+n),v(r)}),[E,v]),F=r((function(){return O.find((function(e){return e.value===""+E.getMonth()}))}),[O,E]),I=r((function(){return S.find((function(e){return e.value===""+E.getFullYear()}))}),[S,E]);return e.createElement("div",{className:t(f.datePickerHeader,C)},e.createElement(s,{gap:"small"},e.createElement(u,{className:f.monthButtonDropdown,ariaLabel:L,options:O,value:F,onChange:H,menuWrapperClassName:f.monthButtonDropdown,size:"small",valueRenderer:function(e){return Y},searchable:!1,clearable:!1,borderless:!0}),e.createElement(u,{className:f.yearButtonDropdown,ariaLabel:M,options:S,value:I,onChange:P,menuWrapperClassName:f.yearButtonDropdown,size:"small",valueRenderer:function(e){return x},searchable:!1,clearable:!1,borderless:!0})),e.createElement(s,null,e.createElement(l,{kind:i.kinds.TERTIARY,size:i.sizes.SMALL,ariaLabel:y,onClick:B,icon:c}),e.createElement(l,{kind:i.kinds.TERTIARY,size:i.sizes.SMALL,ariaLabel:g,onClick:z,icon:m})))};function h(e,n){return b(e,"yyyy",{locale:n})}function k(e,n){return b(e,"MMM",{locale:n})}export{v as default,k as getMonthButtonLabel,h as getYearButtonLabel};
 //# sourceMappingURL=DatePickerHeader.js.map

package/dist/mocked_classnames/src/components/next/DatePicker/DatePickerHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerHeader.js","sources":["../../../../../../src/components/next/DatePicker/DatePickerHeader.tsx"],"sourcesContent":["import React, { type FC, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { useDayPicker, useNavigation } from \"react-day-picker\";\nimport { Button } from \"@vibe/button\";\nimport IconButton from \"~~../../IconButton~~/~~IconButton~~\";\nimport { Flex } from \"@vibe/layout\";\nimport Dropdown from \"../../next/Dropdown/Dropdown\";\nimport { DropdownChevronRight, DropdownChevronLeft } from \"@vibe/icons\";\nimport styles from \"./DatePickerHeader.module.scss\";\nimport { useMonthsOptionItems, useYearsOptionItems, type DatePickerDropdownItem } from \"./datePickerHooks\";\nimport { format, type Locale } from \"date-fns\";\n\nexport interface DatePickerHeaderProps {\n setDisplayMonth: (displayMonth: Date) => void;\n monthSelectionAriaLabel?: string;\n yearSelectionAriaLabel?: string;\n nextButtonAriaLabel?: string;\n prevButtonAriaLabel?: string;\n locale?: Locale;\n className?: string;\n dropdownsClassName?: string;\n dialogContainerSelector?: string;\n}\n\nconst DatePickerHeader: FC<DatePickerHeaderProps> = ({\n setDisplayMonth,\n monthSelectionAriaLabel,\n yearSelectionAriaLabel,\n nextButtonAriaLabel,\n prevButtonAriaLabel,\n locale,\n className,\n dialogContainerSelector: _dialogContainerSelector\n}) => {\n const { month: displayMonth } = useDayPicker();\n const { goToMonth, nextMonth, previousMonth } = useNavigation();\n const goToNextMonth = useCallback(() => goToMonth(nextMonth), [goToMonth, nextMonth]);\n const goToPreviousMonth = useCallback(() => goToMonth(previousMonth), [goToMonth, previousMonth]);\n const monthsData = useMonthsOptionItems({ locale });\n const yearsData = useYearsOptionItems({ locale });\n\n const months = useMemo(() => monthsData.map(item => ({ ...item, value: item.id })), [monthsData]);\n const years = useMemo(() => yearsData.map(item => ({ ...item, value: item.id })), [yearsData]);\n const monthButtonLabel = useMemo(() => getMonthButtonLabel(displayMonth, locale), [displayMonth, locale]);\n const yearsButtonLabel = useMemo(() => getYearButtonLabel(displayMonth, locale), [displayMonth, locale]);\n\n const onMonthSelect = useCallback(\n (option: DatePickerDropdownItem) => {\n const month = option.value;\n const date = new Date(displayMonth);\n date.setMonth(+month);\n setDisplayMonth(date);\n },\n [displayMonth, setDisplayMonth]\n );\n\n const onYearSelect = useCallback(\n (option: DatePickerDropdownItem) => {\n const year = option.value;\n const date = new Date(displayMonth);\n date.setFullYear(+year);\n setDisplayMonth(date);\n },\n [displayMonth, setDisplayMonth]\n );\n\n const selectedMonth = useMemo(\n () => months.find(month => month.value === displayMonth.getMonth().toString()),\n [months, displayMonth]\n );\n const selectedYear = useMemo(\n () => years.find(year => year.value === displayMonth.getFullYear().toString()),\n [years, displayMonth]\n );\n\n return (\n <div className={cx(styles.datePickerHeader, className)}>\n <Flex gap=\"small\">\n <Dropdown\n className={styles.monthButtonDropdown}\n ariaLabel={monthSelectionAriaLabel}\n options={months}\n value={selectedMonth}\n onChange={onMonthSelect}\n menuWrapperClassName={styles.monthButtonDropdown}\n size=\"small\"\n valueRenderer={(_option: DatePickerDropdownItem) => monthButtonLabel}\n searchable={false}\n clearable={false}\n borderless\n />\n <Dropdown\n className={styles.yearButtonDropdown}\n ariaLabel={yearSelectionAriaLabel}\n options={years}\n value={selectedYear}\n onChange={onYearSelect}\n menuWrapperClassName={styles.yearButtonDropdown}\n size=\"small\"\n valueRenderer={(_option: DatePickerDropdownItem) => yearsButtonLabel}\n searchable={false}\n clearable={false}\n borderless\n />\n </Flex>\n <Flex>\n <IconButton\n kind={Button.kinds.TERTIARY}\n size={Button.sizes.SMALL}\n ariaLabel={prevButtonAriaLabel}\n onClick={goToPreviousMonth}\n icon={DropdownChevronLeft}\n />\n <IconButton\n kind={Button.kinds.TERTIARY}\n size={Button.sizes.SMALL}\n ariaLabel={nextButtonAriaLabel}\n onClick={goToNextMonth}\n icon={DropdownChevronRight}\n />\n </Flex>\n </div>\n );\n};\n\nexport default DatePickerHeader;\n\nexport function getYearButtonLabel(displayMonth: Date, locale: Locale) {\n return format(displayMonth, \"yyyy\", { locale });\n}\n\nexport function getMonthButtonLabel(displayMonth: Date, locale: Locale) {\n return format(displayMonth, \"MMM\", { locale });\n}\n"],"names":["DatePickerHeader","_ref","setDisplayMonth","monthSelectionAriaLabel","yearSelectionAriaLabel","nextButtonAriaLabel","prevButtonAriaLabel","locale","className","displayMonth","useDayPicker","month","_useNavigation","useNavigation","goToMonth","nextMonth","previousMonth","goToNextMonth","useCallback","goToPreviousMonth","monthsData","useMonthsOptionItems","yearsData","useYearsOptionItems","months","useMemo","map","item","Object","assign","value","id","years","monthButtonLabel","getMonthButtonLabel","yearsButtonLabel","getYearButtonLabel","onMonthSelect","option","date","Date","setMonth","onYearSelect","year","setFullYear","selectedMonth","find","getMonth","selectedYear","getFullYear","React","createElement","cx","styles","datePickerHeader","Flex","gap","Dropdown","monthButtonDropdown","ariaLabel","options","onChange","menuWrapperClassName","size","valueRenderer","_option","searchable","clearable","borderless","yearButtonDropdown","IconButton","kind","Button","kinds","TERTIARY","sizes","SMALL","onClick","icon","DropdownChevronLeft","DropdownChevronRight","format"],"mappings":"~~skBAwBA~~,IAAMA,EAA8C,SAA9BC,GASjB,IARHC,EAAeD,EAAfC,gBACAC,EAAuBF,EAAvBE,wBACAC,EAAsBH,EAAtBG,uBACAC,EAAmBJ,EAAnBI,oBACAC,EAAmBL,EAAnBK,oBACAC,EAAMN,EAANM,OACAC,EAASP,EAATO,UAGeC,EAAiBC,IAAxBC,MACRC,EAAgDC,IAAxCC,EAASF,EAATE,UAAWC,EAASH,EAATG,UAAWC,EAAaJ,EAAbI,cACxBC,EAAgBC,GAAY,WAAA,OAAMJ,EAAUC,EAAU,GAAE,CAACD,EAAWC,IACpEI,EAAoBD,GAAY,WAAA,OAAMJ,EAAUE,EAAc,GAAE,CAACF,EAAWE,IAC5EI,EAAaC,EAAqB,CAAEd,OAAAA,IACpCe,EAAYC,EAAoB,CAAEhB,OAAAA,IAElCiB,EAASC,GAAQ,WAAA,OAAML,EAAWM,KAAI,SAAAC,GAAI,OAAUC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAF,GAAM,CAAAG,MAAOH,EAAKI,IAAK,MAAG,CAACX,IAC/EY,EAAQP,GAAQ,WAAA,OAAMH,EAAUI,KAAI,SAAAC,GAAI,OAAUC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAF,GAAM,CAAAG,MAAOH,EAAKI,IAAK,MAAG,CAACT,IAC7EW,EAAmBR,GAAQ,WAAA,OAAMS,EAAoBzB,EAAcF,EAAO,GAAE,CAACE,EAAcF,IAC3F4B,EAAmBV,GAAQ,WAAA,OAAMW,EAAmB3B,EAAcF,EAAO,GAAE,CAACE,EAAcF,IAE1F8B,EAAgBnB,GACpB,SAACoB,GACC,IAAM3B,EAAQ2B,EAAOR,MACfS,EAAO,IAAIC,KAAK/B,GACtB8B,EAAKE,UAAU9B,GACfT,EAAgBqC,EAClB,GACA,CAAC9B,EAAcP,IAGXwC,EAAexB,GACnB,SAACoB,GACC,IAAMK,EAAOL,EAAOR,MACdS,EAAO,IAAIC,KAAK/B,GACtB8B,EAAKK,aAAaD,GAClBzC,EAAgBqC,EAClB,GACA,CAAC9B,EAAcP,IAGX2C,EAAgBpB,GACpB,WAAA,OAAMD,EAAOsB,MAAK,SAAAnC,GAAK,OAAIA,EAAMmB,QAAUrB,KAAasC,aAAsB,GAC9E,CAACvB,EAAQf,IAELuC,EAAevB,GACnB,WAAA,OAAMO,EAAMc,MAAK,SAAAH,GAAI,OAAIA,EAAKb,QAAUrB,KAAawC,gBAAyB,GAC9E,CAACjB,EAAOvB,IAGV,OACEyC,EAAKC,cAAA,MAAA,CAAA3C,UAAW4C,EAAGC,EAAOC,iBAAkB9C,IAC1C0C,EAAAC,cAACI,EAAI,CAACC,IAAI,SACRN,EAACC,cAAAM,EACC,CAAAjD,UAAW6C,EAAOK,oBAClBC,UAAWxD,EACXyD,QAASpC,EACTM,MAAOe,EACPgB,SAAUxB,EACVyB,qBAAsBT,EAAOK,oBAC7BK,KAAK,QACLC,cAAe,SAACC,GAA+B,OAAKhC,CAAgB,EACpEiC,YAAY,EACZC,WAAW,EACXC,YACA,IACFlB,EAACC,cAAAM,EACC,CAAAjD,UAAW6C,EAAOgB,mBAClBV,UAAWvD,EACXwD,QAAS5B,EACTF,MAAOkB,EACPa,SAAUnB,EACVoB,qBAAsBT,EAAOgB,mBAC7BN,KAAK,QACLC,cAAe,SAACC,GAA+B,OAAK9B,CAAgB,EACpE+B,YAAY,EACZC,WAAW,EACXC,YAAU,KAGdlB,EAAAC,cAACI,EAAI,KACHL,EAAAC,cAACmB,EAAU,CACTC,KAAMC,EAAOC,MAAMC,SACnBX,KAAMS,EAAOG,MAAMC,MACnBjB,UAAWrD,EACXuE,QAAS1D,EACT2D,KAAMC,IAER7B,EAAAC,cAACmB,EAAU,CACTC,KAAMC,EAAOC,MAAMC,SACnBX,KAAMS,EAAOG,MAAMC,MACnBjB,UAAWtD,EACXwE,QAAS5D,EACT6D,KAAME,KAKhB,EAIgB,SAAA5C,EAAmB3B,EAAoBF,GACrD,OAAO0E,EAAOxE,EAAc,OAAQ,CAAEF,OAAAA,GACxC,CAEgB,SAAA2B,EAAoBzB,EAAoBF,GACtD,OAAO0E,EAAOxE,EAAc,MAAO,CAAEF,OAAAA,GACvC"}
1	+ {"version":3,"file":"DatePickerHeader.js","sources":["../../../../../../src/components/next/DatePicker/DatePickerHeader.tsx"],"sourcesContent":["import React, { type FC, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { useDayPicker, useNavigation } from \"react-day-picker\";\nimport { Button } from \"@vibe/button\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Flex } from \"@vibe/layout\";\nimport Dropdown from \"../../next/Dropdown/Dropdown\";\nimport { DropdownChevronRight, DropdownChevronLeft } from \"@vibe/icons\";\nimport styles from \"./DatePickerHeader.module.scss\";\nimport { useMonthsOptionItems, useYearsOptionItems, type DatePickerDropdownItem } from \"./datePickerHooks\";\nimport { format, type Locale } from \"date-fns\";\n\nexport interface DatePickerHeaderProps {\n setDisplayMonth: (displayMonth: Date) => void;\n monthSelectionAriaLabel?: string;\n yearSelectionAriaLabel?: string;\n nextButtonAriaLabel?: string;\n prevButtonAriaLabel?: string;\n locale?: Locale;\n className?: string;\n dropdownsClassName?: string;\n dialogContainerSelector?: string;\n}\n\nconst DatePickerHeader: FC<DatePickerHeaderProps> = ({\n setDisplayMonth,\n monthSelectionAriaLabel,\n yearSelectionAriaLabel,\n nextButtonAriaLabel,\n prevButtonAriaLabel,\n locale,\n className,\n dialogContainerSelector: _dialogContainerSelector\n}) => {\n const { month: displayMonth } = useDayPicker();\n const { goToMonth, nextMonth, previousMonth } = useNavigation();\n const goToNextMonth = useCallback(() => goToMonth(nextMonth), [goToMonth, nextMonth]);\n const goToPreviousMonth = useCallback(() => goToMonth(previousMonth), [goToMonth, previousMonth]);\n const monthsData = useMonthsOptionItems({ locale });\n const yearsData = useYearsOptionItems({ locale });\n\n const months = useMemo(() => monthsData.map(item => ({ ...item, value: item.id })), [monthsData]);\n const years = useMemo(() => yearsData.map(item => ({ ...item, value: item.id })), [yearsData]);\n const monthButtonLabel = useMemo(() => getMonthButtonLabel(displayMonth, locale), [displayMonth, locale]);\n const yearsButtonLabel = useMemo(() => getYearButtonLabel(displayMonth, locale), [displayMonth, locale]);\n\n const onMonthSelect = useCallback(\n (option: DatePickerDropdownItem) => {\n const month = option.value;\n const date = new Date(displayMonth);\n date.setMonth(+month);\n setDisplayMonth(date);\n },\n [displayMonth, setDisplayMonth]\n );\n\n const onYearSelect = useCallback(\n (option: DatePickerDropdownItem) => {\n const year = option.value;\n const date = new Date(displayMonth);\n date.setFullYear(+year);\n setDisplayMonth(date);\n },\n [displayMonth, setDisplayMonth]\n );\n\n const selectedMonth = useMemo(\n () => months.find(month => month.value === displayMonth.getMonth().toString()),\n [months, displayMonth]\n );\n const selectedYear = useMemo(\n () => years.find(year => year.value === displayMonth.getFullYear().toString()),\n [years, displayMonth]\n );\n\n return (\n <div className={cx(styles.datePickerHeader, className)}>\n <Flex gap=\"small\">\n <Dropdown\n className={styles.monthButtonDropdown}\n ariaLabel={monthSelectionAriaLabel}\n options={months}\n value={selectedMonth}\n onChange={onMonthSelect}\n menuWrapperClassName={styles.monthButtonDropdown}\n size=\"small\"\n valueRenderer={(_option: DatePickerDropdownItem) => monthButtonLabel}\n searchable={false}\n clearable={false}\n borderless\n />\n <Dropdown\n className={styles.yearButtonDropdown}\n ariaLabel={yearSelectionAriaLabel}\n options={years}\n value={selectedYear}\n onChange={onYearSelect}\n menuWrapperClassName={styles.yearButtonDropdown}\n size=\"small\"\n valueRenderer={(_option: DatePickerDropdownItem) => yearsButtonLabel}\n searchable={false}\n clearable={false}\n borderless\n />\n </Flex>\n <Flex>\n <IconButton\n kind={Button.kinds.TERTIARY}\n size={Button.sizes.SMALL}\n ariaLabel={prevButtonAriaLabel}\n onClick={goToPreviousMonth}\n icon={DropdownChevronLeft}\n />\n <IconButton\n kind={Button.kinds.TERTIARY}\n size={Button.sizes.SMALL}\n ariaLabel={nextButtonAriaLabel}\n onClick={goToNextMonth}\n icon={DropdownChevronRight}\n />\n </Flex>\n </div>\n );\n};\n\nexport default DatePickerHeader;\n\nexport function getYearButtonLabel(displayMonth: Date, locale: Locale) {\n return format(displayMonth, \"yyyy\", { locale });\n}\n\nexport function getMonthButtonLabel(displayMonth: Date, locale: Locale) {\n return format(displayMonth, \"MMM\", { locale });\n}\n"],"names":["DatePickerHeader","_ref","setDisplayMonth","monthSelectionAriaLabel","yearSelectionAriaLabel","nextButtonAriaLabel","prevButtonAriaLabel","locale","className","displayMonth","useDayPicker","month","_useNavigation","useNavigation","goToMonth","nextMonth","previousMonth","goToNextMonth","useCallback","goToPreviousMonth","monthsData","useMonthsOptionItems","yearsData","useYearsOptionItems","months","useMemo","map","item","Object","assign","value","id","years","monthButtonLabel","getMonthButtonLabel","yearsButtonLabel","getYearButtonLabel","onMonthSelect","option","date","Date","setMonth","onYearSelect","year","setFullYear","selectedMonth","find","getMonth","selectedYear","getFullYear","React","createElement","cx","styles","datePickerHeader","Flex","gap","Dropdown","monthButtonDropdown","ariaLabel","options","onChange","menuWrapperClassName","size","valueRenderer","_option","searchable","clearable","borderless","yearButtonDropdown","IconButton","kind","Button","kinds","TERTIARY","sizes","SMALL","onClick","icon","DropdownChevronLeft","DropdownChevronRight","format"],"mappings":"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"}

package/dist/mocked_classnames/src/components/next/DatePicker/DatePickerHeader.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={monthButtonDropdown:"monthButtonDropdown",yearButtonDropdown:"yearButtonDropdown",datePickerHeader:"datePickerHeader"};!function(e){const t="s_id-25798679a710_3_82_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.monthButtonDropdown {\n  min-width: 70px;\n  justify-content: space-between;\n}\n.yearButtonDropdown {\n  justify-content: space-between;\n}\n.datePickerHeader {\n  font: var(--font-text2-normal);\n  height: var(--day-picker-header-height);\n  color: var(--primary-text-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.datePickerHeader button:focus:not(:active), .datePickerHeader button:focus-visible {\n  box-shadow: 0 0 0 2px var(--primary-color);\n  background: var(--primary-background-color) !important;\n}");export{e as default};
+var e={monthButtonDropdown:"monthButtonDropdown",yearButtonDropdown:"yearButtonDropdown",datePickerHeader:"datePickerHeader"};!function(e){const t="s_id-25798679a710_3_83_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.monthButtonDropdown {\n  min-width: 70px;\n  justify-content: space-between;\n}\n.yearButtonDropdown {\n  justify-content: space-between;\n}\n.datePickerHeader {\n  font: var(--font-text2-normal);\n  height: var(--day-picker-header-height);\n  color: var(--primary-text-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.datePickerHeader button:focus:not(:active), .datePickerHeader button:focus-visible {\n  box-shadow: 0 0 0 2px var(--primary-color);\n  background: var(--primary-background-color) !important;\n}");export{e as default};
 //# sourceMappingURL=DatePickerHeader.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBase/DropdownBase.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"react";import t from"classnames";import o from"../../../../FieldLabel/FieldLabel.js";import a from"../../../../Text/Text.js";import s from"./DropdownBase.module.scss.js";import{getTestId as l}from"../../../../../tests/testIds.js";import{ComponentDefaultTestId as i,ComponentVibeId as d}from"../../../../../tests/constants.js";import{useDropdownContext as m}from"../../context/DropdownContext.js";import n from"../../../../Tooltip/Tooltip.js";var p=function(p){var c=p.dropdownRef,b=p.children,f=m(),u=f.label,j=f.required,x=f.getLabelProps,v=f.className,O=f.id,T=f.ariaLabel,D=f["data-testid"],N=f.readOnly,P=f.error,g=f.isFocused,E=f.isOpen,w=f.helperText,y=f.dir,L=f.tooltipProps,h=f.boxMode,F=f.borderless,R=r.createElement("div",{ref:c,className:t(s.wrapper,e(e(e(e(e(e({},s.disabled,f.disabled),s.readOnly,N),s.error,P),s.active,g||E),s.boxMode,h),s.borderless,F),v),id:O,"aria-label":T,"data-testid":D||l(i.DROPDOWN,O),"data-vibe":d.DROPDOWN},b);return r.createElement("div",{dir:y,className:s.outerWrapper},u&&r.createElement(o,Object.assign({labelText:u,required:j},x())),r.createElement(n,Object.assign({},L,{content:null==L?void 0:L.content}),R),w&&r.createElement(a,{color:P?"negative":"secondary",className:s.helperText},w))};export{p as default};
+import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"react";import t from"classnames";import o from"../../../../FieldLabel/FieldLabel.js";import{Text as a}from"@vibe/typography/mockedClassNames";import s from"./DropdownBase.module.scss.js";import{getTestId as l}from"../../../../../tests/testIds.js";import{ComponentDefaultTestId as i,ComponentVibeId as d}from"../../../../../tests/constants.js";import{useDropdownContext as m}from"../../context/DropdownContext.js";import{Tooltip as n}from"@vibe/tooltip/mockedClassNames";var p=function(p){var c=p.dropdownRef,b=p.children,f=m(),u=f.label,v=f.required,O=f.getLabelProps,j=f.className,x=f.id,N=f.ariaLabel,g=f["data-testid"],y=f.readOnly,D=f.error,P=f.isFocused,E=f.isOpen,h=f.helperText,w=f.dir,L=f.tooltipProps,C=f.boxMode,F=f.borderless,R=r.createElement("div",{ref:c,className:t(s.wrapper,e(e(e(e(e(e({},s.disabled,f.disabled),s.readOnly,y),s.error,D),s.active,P||E),s.boxMode,C),s.borderless,F),j),id:x,"aria-label":N,"data-testid":g||l(i.DROPDOWN,x),"data-vibe":d.DROPDOWN},b);return r.createElement("div",{dir:w,className:s.outerWrapper},u&&r.createElement(o,Object.assign({labelText:u,required:v},O())),r.createElement(n,Object.assign({},L,{content:null==L?void 0:L.content}),R),h&&r.createElement(a,{color:D?"negative":"secondary",className:s.helperText},h))};export{p as default};
 //# sourceMappingURL=DropdownBase.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBase/DropdownBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBase.js","sources":["../../../../../../../../src/components/next/Dropdown/components/DropdownBase/DropdownBase.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport FieldLabel from \"../../../../FieldLabel/FieldLabel\";\nimport Text from \"~~../../../../Text~~/~~Text~~\";\nimport styles from \"./DropdownBase.module.scss\";\nimport { getTestId } from \"../../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../../../tests/constants\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport Tooltip from \"~~../../../../Tooltip~~/~~Tooltip~~\";\n\ninterface DropdownBaseProps {\n dropdownRef: React.Ref<HTMLDivElement>;\n children: React.ReactNode;\n}\n\nconst DropdownBase = ({ dropdownRef, children }: DropdownBaseProps) => {\n const {\n label,\n required,\n getLabelProps,\n className,\n id,\n ariaLabel,\n \"data-testid\": dataTestIdFromContext,\n disabled,\n readOnly,\n error,\n isFocused,\n isOpen,\n helperText,\n dir,\n tooltipProps,\n boxMode,\n borderless\n } = useDropdownContext<BaseItemData>();\n\n const coreDropdownElement = (\n <div\n ref={dropdownRef}\n className={cx(\n styles.wrapper,\n {\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly,\n [styles.error]: error,\n [styles.active]: isFocused \|\| isOpen,\n [styles.boxMode]: boxMode,\n [styles.borderless]: borderless\n },\n className\n )}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestIdFromContext \|\| getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n data-vibe={ComponentVibeId.DROPDOWN}\n >\n {children}\n </div>\n );\n\n return (\n <div dir={dir} className={styles.outerWrapper}>\n {label && <FieldLabel labelText={label} required={required} {...getLabelProps()} />}\n <Tooltip {...tooltipProps} content={tooltipProps?.content}>\n {coreDropdownElement}\n </Tooltip>\n {helperText && (\n <Text color={error ? \"negative\" : \"secondary\"} className={styles.helperText}>\n {helperText}\n </Text>\n )}\n </div>\n );\n};\n\nexport default DropdownBase;\n"],"names":["DropdownBase","_ref","dropdownRef","children","_useDropdownContext","useDropdownContext","label","required","getLabelProps","className","id","ariaLabel","dataTestIdFromContext","readOnly","error","isFocused","isOpen","helperText","dir","tooltipProps","boxMode","borderless","coreDropdownElement","React","createElement","ref","cx","styles","wrapper","_defineProperty","disabled","active","getTestId","ComponentDefaultTestId","DROPDOWN","ComponentVibeId","outerWrapper","FieldLabel","Object","assign","labelText","Tooltip","content","Text","color"],"mappings":"~~iiBAgBA~~,IAAMA,EAAe,SAAHC,GAAoD,IAA9CC,EAAWD,EAAXC,YAAaC,EAAQF,EAARE,SACnCC,EAkBIC,IAjBFC,EAAKF,EAALE,MACAC,EAAQH,EAARG,SACAC,EAAaJ,EAAbI,cACAC,EAASL,EAATK,UACAC,EAAEN,EAAFM,GACAC,EAASP,EAATO,UACeC,EAAqBR,EAApC,eAEAS,EAAQT,EAARS,SACAC,EAAKV,EAALU,MACAC,EAASX,EAATW,UACAC,EAAMZ,EAANY,OACAC,EAAUb,EAAVa,WACAC,EAAGd,EAAHc,IACAC,EAAYf,EAAZe,aACAC,EAAOhB,EAAPgB,QACAC,EAAUjB,EAAViB,WAGIC,EACJC,EAAAC,cAAA,MAAA,CACEC,IAAKvB,EACLO,UAAWiB,EACTC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOG,SAlBN1B,EAAR0B,UAmBOH,EAAOd,SAAWA,GAClBc,EAAOb,MAAQA,GACfa,EAAOI,OAAShB,GAAaC,GAC7BW,EAAOP,QAAUA,GACjBO,EAAON,WAAaA,GAEvBZ,GAEFC,GAAIA,EAAE,aACMC,EAAS,cACRC,GAAyBoB,EAAUC,EAAuBC,SAAUxB,GACtE,YAAAyB,EAAgBD,UAE1B/B,GAIL,OACEoB,EAAKC,cAAA,MAAA,CAAAN,IAAKA,EAAKT,UAAWkB,EAAOS,cAC9B9B,GAASiB,EAAAC,cAACa,EAAUC,OAAAC,OAAA,CAACC,UAAWlC,EAAOC,SAAUA,GAAcC,MAChEe,EAAAC,cAACiB,EAAOH,OAAAC,OAAA,CAAA,EAAKpB,EAAY,CAAEuB,QAASvB,eAAAA,EAAcuB,UAC/CpB,GAEFL,GACCM,EAACC,cAAAmB,EAAK,CAAAC,MAAO9B,EAAQ,WAAa,YAAaL,UAAWkB,EAAOV,YAC9DA,GAKX"}
1	+ {"version":3,"file":"DropdownBase.js","sources":["../../../../../../../../src/components/next/Dropdown/components/DropdownBase/DropdownBase.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport FieldLabel from \"../../../../FieldLabel/FieldLabel\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./DropdownBase.module.scss\";\nimport { getTestId } from \"../../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../../../tests/constants\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport { Tooltip } from \"@vibe/tooltip\";\n\ninterface DropdownBaseProps {\n dropdownRef: React.Ref<HTMLDivElement>;\n children: React.ReactNode;\n}\n\nconst DropdownBase = ({ dropdownRef, children }: DropdownBaseProps) => {\n const {\n label,\n required,\n getLabelProps,\n className,\n id,\n ariaLabel,\n \"data-testid\": dataTestIdFromContext,\n disabled,\n readOnly,\n error,\n isFocused,\n isOpen,\n helperText,\n dir,\n tooltipProps,\n boxMode,\n borderless\n } = useDropdownContext<BaseItemData>();\n\n const coreDropdownElement = (\n <div\n ref={dropdownRef}\n className={cx(\n styles.wrapper,\n {\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly,\n [styles.error]: error,\n [styles.active]: isFocused \|\| isOpen,\n [styles.boxMode]: boxMode,\n [styles.borderless]: borderless\n },\n className\n )}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestIdFromContext \|\| getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n data-vibe={ComponentVibeId.DROPDOWN}\n >\n {children}\n </div>\n );\n\n return (\n <div dir={dir} className={styles.outerWrapper}>\n {label && <FieldLabel labelText={label} required={required} {...getLabelProps()} />}\n <Tooltip {...tooltipProps} content={tooltipProps?.content}>\n {coreDropdownElement}\n </Tooltip>\n {helperText && (\n <Text color={error ? \"negative\" : \"secondary\"} className={styles.helperText}>\n {helperText}\n </Text>\n )}\n </div>\n );\n};\n\nexport default DropdownBase;\n"],"names":["DropdownBase","_ref","dropdownRef","children","_useDropdownContext","useDropdownContext","label","required","getLabelProps","className","id","ariaLabel","dataTestIdFromContext","readOnly","error","isFocused","isOpen","helperText","dir","tooltipProps","boxMode","borderless","coreDropdownElement","React","createElement","ref","cx","styles","wrapper","_defineProperty","disabled","active","getTestId","ComponentDefaultTestId","DROPDOWN","ComponentVibeId","outerWrapper","FieldLabel","Object","assign","labelText","Tooltip","content","Text","color"],"mappings":"6jBAgBA,IAAMA,EAAe,SAAHC,GAAoD,IAA9CC,EAAWD,EAAXC,YAAaC,EAAQF,EAARE,SACnCC,EAkBIC,IAjBFC,EAAKF,EAALE,MACAC,EAAQH,EAARG,SACAC,EAAaJ,EAAbI,cACAC,EAASL,EAATK,UACAC,EAAEN,EAAFM,GACAC,EAASP,EAATO,UACeC,EAAqBR,EAApC,eAEAS,EAAQT,EAARS,SACAC,EAAKV,EAALU,MACAC,EAASX,EAATW,UACAC,EAAMZ,EAANY,OACAC,EAAUb,EAAVa,WACAC,EAAGd,EAAHc,IACAC,EAAYf,EAAZe,aACAC,EAAOhB,EAAPgB,QACAC,EAAUjB,EAAViB,WAGIC,EACJC,EAAAC,cAAA,MAAA,CACEC,IAAKvB,EACLO,UAAWiB,EACTC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOG,SAlBN1B,EAAR0B,UAmBOH,EAAOd,SAAWA,GAClBc,EAAOb,MAAQA,GACfa,EAAOI,OAAShB,GAAaC,GAC7BW,EAAOP,QAAUA,GACjBO,EAAON,WAAaA,GAEvBZ,GAEFC,GAAIA,EAAE,aACMC,EAAS,cACRC,GAAyBoB,EAAUC,EAAuBC,SAAUxB,GACtE,YAAAyB,EAAgBD,UAE1B/B,GAIL,OACEoB,EAAKC,cAAA,MAAA,CAAAN,IAAKA,EAAKT,UAAWkB,EAAOS,cAC9B9B,GAASiB,EAAAC,cAACa,EAAUC,OAAAC,OAAA,CAACC,UAAWlC,EAAOC,SAAUA,GAAcC,MAChEe,EAAAC,cAACiB,EAAOH,OAAAC,OAAA,CAAA,EAAKpB,EAAY,CAAEuB,QAASvB,eAAAA,EAAcuB,UAC/CpB,GAEFL,GACCM,EAACC,cAAAmB,EAAK,CAAAC,MAAO9B,EAAQ,WAAa,YAAaL,UAAWkB,EAAOV,YAC9DA,GAKX"}

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBase/DropdownBase.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var r={outerWrapper:"outerWrapper",wrapper:"wrapper",active:"active",disabled:"disabled",readOnly:"readOnly",error:"error",boxMode:"boxMode",borderless:"borderless",helperText:"helperText"};!function(r){const e="s_id-a1f1f819eb29_3_82_3";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(r))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=r)}(".outerWrapper {\n  width: 100%;\n}\n\n.wrapper {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  cursor: pointer;\n}\n\n.wrapper:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.wrapper.active, .wrapper:focus {\n  --border-color: var(--primary-color);\n}\n\n.wrapper.disabled {\n  --border-color: var(--disabled-background-color);\n  --background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n\n.wrapper.readOnly {\n  --border-color: var(--allgrey-background-color);\n  --background-color: var(--allgrey-background-color);\n  cursor: default;\n}\n\n.wrapper.error {\n  --border-color: var(--negative-color);\n}\n\n.wrapper.boxMode {\n  box-shadow: none;\n  background: transparent;\n  cursor: default;\n}\n\n.wrapper.borderless {\n  --border-color: transparent;\n}\n\n.wrapper.borderless:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.wrapper.borderless.active, .wrapper.borderless:focus {\n  --border-color: var(--primary-color);\n}\n\n.helperText {\n  margin-top: var(--spacing-xs);\n}");export{r as default};
+var r={outerWrapper:"outerWrapper",wrapper:"wrapper",active:"active",disabled:"disabled",readOnly:"readOnly",error:"error",boxMode:"boxMode",borderless:"borderless",helperText:"helperText"};!function(r){const e="s_id-a1f1f819eb29_3_83_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.appendChild(document.createTextNode(r))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=r)}(".outerWrapper {\n  width: 100%;\n}\n\n.wrapper {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  cursor: pointer;\n}\n\n.wrapper:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.wrapper.active, .wrapper:focus {\n  --border-color: var(--primary-color);\n}\n\n.wrapper.disabled {\n  --border-color: var(--disabled-background-color);\n  --background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n\n.wrapper.readOnly {\n  --border-color: var(--allgrey-background-color);\n  --background-color: var(--allgrey-background-color);\n  cursor: default;\n}\n\n.wrapper.error {\n  --border-color: var(--negative-color);\n}\n\n.wrapper.boxMode {\n  box-shadow: none;\n  background: transparent;\n  cursor: default;\n}\n\n.wrapper.borderless {\n  --border-color: transparent;\n}\n\n.wrapper.borderless:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.wrapper.borderless.active, .wrapper.borderless:focus {\n  --border-color: var(--primary-color);\n}\n\n.helperText {\n  margin-top: var(--spacing-xs);\n}");export{r as default};
 //# sourceMappingURL=DropdownBase.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i}from"react";import l from"../../../../BaseItem/BaseItem.js";import r from"./DropdownBaseList.module.scss.js";import{Flex as o}from"@vibe/layout/mockedClassNames";import n from"../../../../Text/Text.js";import s from"classnames";import a from"../../../../Divider/Divider.js";var m=i((function(i,m){var d=i.options,u=i.selectedItems,v=i.highlightedIndex,p=i.menuAriaLabel,c=i.getMenuProps,f=i.getItemProps,g=i.size,h=void 0===g?"medium":g,y=i.withGroupDivider,b=void 0!==y&&y,x=i.dir,E=void 0===x?"ltr":x,j=i.itemRenderer,I=i.menuRenderer,k=i.noOptionsMessage,O=void 0===k?"No results":k,P=i.stickyGroupTitle,B=void 0!==P&&P,D=i.renderOptions,N=void 0===D||D,T=i.onScroll,w=i.maxMenuHeight,z=void 0===w?300:w,H="small"===h?"text2":"text1",M=N?d.every((function(e){var t;return 0===(null===(t=e.options)||void 0===t?void 0:t.length)}))?t.createElement("div",{role:"status"},"string"==typeof O?t.createElement(o,{justify:"center"},t.createElement(l,{component:"div",item:{label:O,value:""},size:h,readOnly:!0})):O):d.map((function(i,o){var m;return t.createElement(t.Fragment,{key:null!==(m=i.label)&&void 0!==m?m:o},i.label&&t.createElement("li",{className:s(r.groupTitle,e({},r.sticky,B))},t.createElement(n,{type:H,color:"inherit"},i.label)),i.options.map((function(e,i){var r,o=null!==(r=null==f?void 0:f({item:e,index:e.index}))&&void 0!==r?r:{},n=void 0!==v&&v===e.index&&!e.disabled,s=(null==u?void 0:u.some((function(t){return(null==t?void 0:t.value)===e.value})))&&!e.disabled;return t.createElement(l,{itemProps:o,key:"string"==typeof e.value?e.value:i,size:h,highlighted:n,selected:s,itemRenderer:j,item:e,role:"option"})})),b&&d.length-1>o&&t.createElement(a,null))})):null;return t.createElement("ul",Object.assign({ref:m,dir:E,className:r.wrapper},null==c?void 0:c({"aria-label":p}),{onScroll:T,style:{maxHeight:z}}),I&&N?I({children:M,filteredOptions:d,selectedItem:(null==u?void 0:u[0])||null,selectedItems:u||[]}):M)}));export{m as default};
+import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as i}from"react";import l from"../../../../BaseItem/BaseItem.js";import r from"./DropdownBaseList.module.scss.js";import{Flex as o}from"@vibe/layout/mockedClassNames";import{Text as n}from"@vibe/typography/mockedClassNames";import s from"classnames";import a from"../../../../Divider/Divider.js";var m=i((function(i,m){var d=i.options,u=i.selectedItems,p=i.highlightedIndex,v=i.menuAriaLabel,c=i.getMenuProps,f=i.getItemProps,g=i.size,y=void 0===g?"medium":g,h=i.withGroupDivider,b=void 0!==h&&h,x=i.dir,E=void 0===x?"ltr":x,I=i.itemRenderer,j=i.menuRenderer,k=i.noOptionsMessage,N=void 0===k?"No results":k,O=i.stickyGroupTitle,P=void 0!==O&&O,B=i.renderOptions,D=void 0===B||B,w=i.onScroll,z=i.maxMenuHeight,H=void 0===z?300:z,M="small"===y?"text2":"text1",R=D?d.every((function(e){var t;return 0===(null===(t=e.options)||void 0===t?void 0:t.length)}))?t.createElement("div",{role:"status"},"string"==typeof N?t.createElement(o,{justify:"center"},t.createElement(l,{component:"div",item:{label:N,value:""},size:y,readOnly:!0})):N):d.map((function(i,o){var m;return t.createElement(t.Fragment,{key:null!==(m=i.label)&&void 0!==m?m:o},i.label&&t.createElement("li",{className:s(r.groupTitle,e({},r.sticky,P))},t.createElement(n,{type:M,color:"inherit"},i.label)),i.options.map((function(e,i){var r,o=null!==(r=null==f?void 0:f({item:e,index:e.index}))&&void 0!==r?r:{},n=void 0!==p&&p===e.index&&!e.disabled,s=(null==u?void 0:u.some((function(t){return(null==t?void 0:t.value)===e.value})))&&!e.disabled;return t.createElement(l,{itemProps:o,key:"string"==typeof e.value?e.value:i,size:y,highlighted:n,selected:s,itemRenderer:I,item:e,role:"option"})})),b&&d.length-1>o&&t.createElement(a,null))})):null;return t.createElement("ul",Object.assign({ref:m,dir:E,className:r.wrapper},null==c?void 0:c({"aria-label":v}),{onScroll:w,style:{maxHeight:H}}),j&&D?j({children:R,filteredOptions:d,selectedItem:(null==u?void 0:u[0])||null,selectedItems:u||[]}):R)}));export{m as default};
 //# sourceMappingURL=DropdownBaseList.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBaseList.js","sources":["../../../../../../../../src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport BaseItem from \"../../../../BaseItem/BaseItem\";\nimport styles from \"./DropdownBaseList.module.scss\";\nimport { type DropdownBaseListProps } from \"./DropdownBaseList.types\";\nimport { Flex } from \"@vibe/layout\";\nimport { type TextType } from \"~~../../../../Text\";\nimport Text from \"../../../../Text~~/~~Text~~\";\nimport cx from \"classnames\";\nimport { Divider } from \"../../../../Divider\";\n\nconst DropdownBaseList = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n options,\n selectedItems,\n highlightedIndex,\n menuAriaLabel,\n getMenuProps,\n getItemProps,\n size = \"medium\",\n withGroupDivider = false,\n dir = \"ltr\",\n itemRenderer,\n menuRenderer,\n noOptionsMessage = \"No results\",\n stickyGroupTitle = false,\n renderOptions = true,\n onScroll,\n maxMenuHeight = 300\n }: DropdownBaseListProps<Item>,\n ref: React.Ref<HTMLUListElement>\n ) => {\n const textVariant: TextType = size === \"small\" ? \"text2\" : \"text1\";\n\n const defaultContent = renderOptions ? (\n options.every(group => group.options?.length === 0) ? (\n <div role=\"status\">\n {typeof noOptionsMessage === \"string\" ? (\n <Flex justify=\"center\">\n <BaseItem component=\"div\" item={{ label: noOptionsMessage, value: \"\" }} size={size} readOnly />\n </Flex>\n ) : (\n noOptionsMessage\n )}\n </div>\n ) : (\n options.map((group, groupIndex) => (\n <React.Fragment key={group.label ?? groupIndex}>\n {group.label && (\n <li className={cx(styles.groupTitle, { [styles.sticky]: stickyGroupTitle })}>\n <Text type={textVariant} color=\"inherit\">\n {group.label}\n </Text>\n </li>\n )}\n {group.options.map((option, itemIndex) => {\n const itemProps = getItemProps?.({ item: option, index: option.index }) ?? {};\n const isHighlighted =\n highlightedIndex !== undefined && highlightedIndex === option.index && !option.disabled;\n const isSelected =\n selectedItems?.some(selectedItem => selectedItem?.value === option.value) && !option.disabled;\n\n return (\n <BaseItem<Item>\n itemProps={itemProps}\n key={typeof option.value === \"string\" ? option.value : itemIndex}\n size={size}\n highlighted={isHighlighted}\n selected={isSelected}\n itemRenderer={itemRenderer}\n item={option}\n role=\"option\"\n />\n );\n })}\n {withGroupDivider && groupIndex < options.length - 1 && <Divider />}\n </React.Fragment>\n ))\n )\n ) : null;\n\n return (\n <ul\n ref={ref}\n dir={dir}\n className={styles.wrapper}\n {...getMenuProps?.({ \"aria-label\": menuAriaLabel })}\n onScroll={onScroll}\n style={{ maxHeight: maxMenuHeight }}\n >\n {menuRenderer && renderOptions\n ? menuRenderer({\n children: defaultContent,\n filteredOptions: options,\n selectedItem: selectedItems?.[0] \|\| null,\n selectedItems: selectedItems \|\| []\n })\n : defaultContent}\n </ul>\n );\n }\n);\n\nexport default DropdownBaseList as <Item extends Record<string, unknown>>(\n props: DropdownBaseListProps<Item> & { ref?: React.Ref<HTMLUListElement> }\n) => React.ReactElement;\n"],"names":["DropdownBaseList","forwardRef","_ref","ref","options","selectedItems","highlightedIndex","menuAriaLabel","getMenuProps","getItemProps","_ref$size","size","_ref$withGroupDivider","withGroupDivider","_ref$dir","dir","itemRenderer","menuRenderer","_ref$noOptionsMessage","noOptionsMessage","_ref$stickyGroupTitle","stickyGroupTitle","_ref$renderOptions","renderOptions","onScroll","_ref$maxMenuHeight","maxMenuHeight","textVariant","defaultContent","every","group","_a","length","React","createElement","role","Flex","justify","BaseItem","component","item","label","value","readOnly","map","groupIndex","Fragment","key","className","cx","styles","groupTitle","_defineProperty","sticky","Text","type","color","option","itemIndex","itemProps","index","isHighlighted","undefined","disabled","isSelected","some","selectedItem","highlighted","selected","Divider","Object","assign","wrapper","style","maxHeight","children","filteredOptions"],"mappings":"~~qYAUMA~~,IAAAA,EAAmBC,GACvB,SAAAC,EAmBEC,GACE,IAlBAC,EAAOF,EAAPE,QACAC,EAAaH,EAAbG,cACAC,EAAgBJ,EAAhBI,iBACAC,EAAaL,EAAbK,cACAC,EAAYN,EAAZM,aACAC,EAAYP,EAAZO,aAAYC,EAAAR,EACZS,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAV,EACfW,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAAZ,EACxBa,IAAAA,OAAM,IAAHD,EAAG,MAAKA,EACXE,EAAYd,EAAZc,aACAC,EAAYf,EAAZe,aAAYC,EAAAhB,EACZiB,iBAAAA,OAAmB,IAAHD,EAAG,aAAYA,EAAAE,EAAAlB,EAC/BmB,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAApB,EACxBqB,cAAAA,OAAgB,IAAHD,GAAOA,EACpBE,EAAQtB,EAARsB,SAAQC,EAAAvB,EACRwB,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAIfE,EAAiC,UAAThB,EAAmB,QAAU,QAErDiB,EAAiBL,EACrBnB,EAAQyB,OAAM,SAAAC,GAAS,IAAAC,EAAA,OAA0B,KAAX,QAAfA,EAAAD,EAAM1B,eAAS,IAAA2B,OAAA,EAAAA,EAAAC,OAAY,IAChDC,EAAKC,cAAA,MAAA,CAAAC,KAAK,UACqB,iBAArBhB,EACNc,gBAACG,EAAI,CAACC,QAAQ,UACZJ,EAACC,cAAAI,GAASC,UAAU,MAAMC,KAAM,CAAEC,MAAOtB,EAAkBuB,MAAO,IAAM/B,KAAMA,EAAMgC,eAGtFxB,GAIJf,EAAQwC,KAAI,SAACd,EAAOe,SAAe,OACjCZ,EAAAC,cAACD,EAAMa,SAAQ,CAACC,YAAKhB,EAAAD,EAAMW,qBAASI,GACjCf,EAAMW,OACLR,sBAAIe,UAAWC,EAAGC,EAAOC,WAAUC,EAAA,CAAA,EAAKF,EAAOG,OAAShC,KACtDY,EAAAC,cAACoB,EAAI,CAACC,KAAM5B,EAAa6B,MAAM,WAC5B1B,EAAMW,QAIZX,EAAM1B,QAAQwC,KAAI,SAACa,EAAQC,SACpBC,EAAqE,QAAzD5B,EAAAtB,aAAY,EAAZA,EAAe,CAAE+B,KAAMiB,EAAQG,MAAOH,EAAOG,eAAY,IAAA7B,EAAAA,EAAA,CAAA,EACrE8B,OACiBC,IAArBxD,GAAkCA,IAAqBmD,EAAOG,QAAUH,EAAOM,SAC3EC,GACJ3D,aAAa,EAAbA,EAAe4D,MAAK,SAAAC,GAAY,OAAIA,aAAY,EAAZA,EAAcxB,SAAUe,EAAOf,KAAK,OAAMe,EAAOM,SAEvF,OACE9B,EAACC,cAAAI,EACC,CAAAqB,UAAWA,EACXZ,IAA6B,iBAAjBU,EAAOf,MAAqBe,EAAOf,MAAQgB,EACvD/C,KAAMA,EACNwD,YAAaN,EACbO,SAAUJ,EACVhD,aAAcA,EACdwB,KAAMiB,EACNtB,KAAK,UAGV,IACAtB,GAAiCT,EAAQ4B,OAAS,EAA9Ba,GAAmCZ,EAACC,cAAAmC,EAAU,MAEtE,IAED,KAEJ,OACEpC,EACEC,cAAA,KAAAoC,OAAAC,OAAA,CAAApE,IAAKA,EACLY,IAAKA,EACLiC,UAAWE,EAAOsB,SACdhE,aAAA,EAAAA,EAAe,CAAE,aAAcD,IACnC,CAAAiB,SAAUA,EACViD,MAAO,CAAEC,UAAWhD,KAEnBT,GAAgBM,EACbN,EAAa,CACX0D,SAAU/C,EACVgD,gBAAiBxE,EACjB8D,cAAc7D,aAAA,EAAAA,EAAgB,KAAM,KACpCA,cAAeA,GAAiB,KAElCuB,EAGV"}
1	+ {"version":3,"file":"DropdownBaseList.js","sources":["../../../../../../../../src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport BaseItem from \"../../../../BaseItem/BaseItem\";\nimport styles from \"./DropdownBaseList.module.scss\";\nimport { type DropdownBaseListProps } from \"./DropdownBaseList.types\";\nimport { Flex } from \"@vibe/layout\";\nimport { Text, type TextType } from \"@vibe/typography\";\nimport cx from \"classnames\";\nimport { Divider } from \"../../../../Divider\";\n\nconst DropdownBaseList = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n options,\n selectedItems,\n highlightedIndex,\n menuAriaLabel,\n getMenuProps,\n getItemProps,\n size = \"medium\",\n withGroupDivider = false,\n dir = \"ltr\",\n itemRenderer,\n menuRenderer,\n noOptionsMessage = \"No results\",\n stickyGroupTitle = false,\n renderOptions = true,\n onScroll,\n maxMenuHeight = 300\n }: DropdownBaseListProps<Item>,\n ref: React.Ref<HTMLUListElement>\n ) => {\n const textVariant: TextType = size === \"small\" ? \"text2\" : \"text1\";\n\n const defaultContent = renderOptions ? (\n options.every(group => group.options?.length === 0) ? (\n <div role=\"status\">\n {typeof noOptionsMessage === \"string\" ? (\n <Flex justify=\"center\">\n <BaseItem component=\"div\" item={{ label: noOptionsMessage, value: \"\" }} size={size} readOnly />\n </Flex>\n ) : (\n noOptionsMessage\n )}\n </div>\n ) : (\n options.map((group, groupIndex) => (\n <React.Fragment key={group.label ?? groupIndex}>\n {group.label && (\n <li className={cx(styles.groupTitle, { [styles.sticky]: stickyGroupTitle })}>\n <Text type={textVariant} color=\"inherit\">\n {group.label}\n </Text>\n </li>\n )}\n {group.options.map((option, itemIndex) => {\n const itemProps = getItemProps?.({ item: option, index: option.index }) ?? {};\n const isHighlighted =\n highlightedIndex !== undefined && highlightedIndex === option.index && !option.disabled;\n const isSelected =\n selectedItems?.some(selectedItem => selectedItem?.value === option.value) && !option.disabled;\n\n return (\n <BaseItem<Item>\n itemProps={itemProps}\n key={typeof option.value === \"string\" ? option.value : itemIndex}\n size={size}\n highlighted={isHighlighted}\n selected={isSelected}\n itemRenderer={itemRenderer}\n item={option}\n role=\"option\"\n />\n );\n })}\n {withGroupDivider && groupIndex < options.length - 1 && <Divider />}\n </React.Fragment>\n ))\n )\n ) : null;\n\n return (\n <ul\n ref={ref}\n dir={dir}\n className={styles.wrapper}\n {...getMenuProps?.({ \"aria-label\": menuAriaLabel })}\n onScroll={onScroll}\n style={{ maxHeight: maxMenuHeight }}\n >\n {menuRenderer && renderOptions\n ? menuRenderer({\n children: defaultContent,\n filteredOptions: options,\n selectedItem: selectedItems?.[0] \|\| null,\n selectedItems: selectedItems \|\| []\n })\n : defaultContent}\n </ul>\n );\n }\n);\n\nexport default DropdownBaseList as <Item extends Record<string, unknown>>(\n props: DropdownBaseListProps<Item> & { ref?: React.Ref<HTMLUListElement> }\n) => React.ReactElement;\n"],"names":["DropdownBaseList","forwardRef","_ref","ref","options","selectedItems","highlightedIndex","menuAriaLabel","getMenuProps","getItemProps","_ref$size","size","_ref$withGroupDivider","withGroupDivider","_ref$dir","dir","itemRenderer","menuRenderer","_ref$noOptionsMessage","noOptionsMessage","_ref$stickyGroupTitle","stickyGroupTitle","_ref$renderOptions","renderOptions","onScroll","_ref$maxMenuHeight","maxMenuHeight","textVariant","defaultContent","every","group","_a","length","React","createElement","role","Flex","justify","BaseItem","component","item","label","value","readOnly","map","groupIndex","Fragment","key","className","cx","styles","groupTitle","_defineProperty","sticky","Text","type","color","option","itemIndex","itemProps","index","isHighlighted","undefined","disabled","isSelected","some","selectedItem","highlighted","selected","Divider","Object","assign","wrapper","style","maxHeight","children","filteredOptions"],"mappings":"sZASMA,IAAAA,EAAmBC,GACvB,SAAAC,EAmBEC,GACE,IAlBAC,EAAOF,EAAPE,QACAC,EAAaH,EAAbG,cACAC,EAAgBJ,EAAhBI,iBACAC,EAAaL,EAAbK,cACAC,EAAYN,EAAZM,aACAC,EAAYP,EAAZO,aAAYC,EAAAR,EACZS,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAV,EACfW,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAAZ,EACxBa,IAAAA,OAAM,IAAHD,EAAG,MAAKA,EACXE,EAAYd,EAAZc,aACAC,EAAYf,EAAZe,aAAYC,EAAAhB,EACZiB,iBAAAA,OAAmB,IAAHD,EAAG,aAAYA,EAAAE,EAAAlB,EAC/BmB,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAApB,EACxBqB,cAAAA,OAAgB,IAAHD,GAAOA,EACpBE,EAAQtB,EAARsB,SAAQC,EAAAvB,EACRwB,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAIfE,EAAiC,UAAThB,EAAmB,QAAU,QAErDiB,EAAiBL,EACrBnB,EAAQyB,OAAM,SAAAC,GAAS,IAAAC,EAAA,OAA0B,KAAX,QAAfA,EAAAD,EAAM1B,eAAS,IAAA2B,OAAA,EAAAA,EAAAC,OAAY,IAChDC,EAAKC,cAAA,MAAA,CAAAC,KAAK,UACqB,iBAArBhB,EACNc,gBAACG,EAAI,CAACC,QAAQ,UACZJ,EAACC,cAAAI,GAASC,UAAU,MAAMC,KAAM,CAAEC,MAAOtB,EAAkBuB,MAAO,IAAM/B,KAAMA,EAAMgC,eAGtFxB,GAIJf,EAAQwC,KAAI,SAACd,EAAOe,SAAe,OACjCZ,EAAAC,cAACD,EAAMa,SAAQ,CAACC,YAAKhB,EAAAD,EAAMW,qBAASI,GACjCf,EAAMW,OACLR,sBAAIe,UAAWC,EAAGC,EAAOC,WAAUC,EAAA,CAAA,EAAKF,EAAOG,OAAShC,KACtDY,EAAAC,cAACoB,EAAI,CAACC,KAAM5B,EAAa6B,MAAM,WAC5B1B,EAAMW,QAIZX,EAAM1B,QAAQwC,KAAI,SAACa,EAAQC,SACpBC,EAAqE,QAAzD5B,EAAAtB,aAAY,EAAZA,EAAe,CAAE+B,KAAMiB,EAAQG,MAAOH,EAAOG,eAAY,IAAA7B,EAAAA,EAAA,CAAA,EACrE8B,OACiBC,IAArBxD,GAAkCA,IAAqBmD,EAAOG,QAAUH,EAAOM,SAC3EC,GACJ3D,aAAa,EAAbA,EAAe4D,MAAK,SAAAC,GAAY,OAAIA,aAAY,EAAZA,EAAcxB,SAAUe,EAAOf,KAAK,OAAMe,EAAOM,SAEvF,OACE9B,EAACC,cAAAI,EACC,CAAAqB,UAAWA,EACXZ,IAA6B,iBAAjBU,EAAOf,MAAqBe,EAAOf,MAAQgB,EACvD/C,KAAMA,EACNwD,YAAaN,EACbO,SAAUJ,EACVhD,aAAcA,EACdwB,KAAMiB,EACNtB,KAAK,UAGV,IACAtB,GAAiCT,EAAQ4B,OAAS,EAA9Ba,GAAmCZ,EAACC,cAAAmC,EAAU,MAEtE,IAED,KAEJ,OACEpC,EACEC,cAAA,KAAAoC,OAAAC,OAAA,CAAApE,IAAKA,EACLY,IAAKA,EACLiC,UAAWE,EAAOsB,SACdhE,aAAA,EAAAA,EAAe,CAAE,aAAcD,IACnC,CAAAiB,SAAUA,EACViD,MAAO,CAAEC,UAAWhD,KAEnBT,GAAgBM,EACbN,EAAa,CACX0D,SAAU/C,EACVgD,gBAAiBxE,EACjB8D,cAAc7D,aAAA,EAAAA,EAAgB,KAAM,KACpCA,cAAeA,GAAiB,KAElCuB,EAGV"}

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper",groupTitle:"groupTitle",sticky:"sticky"};!function(e){const n="s_id-b5d224c4ed03_3_82_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper {\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n}\n.wrapper .groupTitle {\n  color: var(--secondary-text-color);\n  padding: var(--spacing-small) var(--spacing-xs);\n  background-color: var(--secondary-background-color);\n}\n.wrapper .groupTitle.sticky {\n  position: sticky;\n  top: 0;\n}\n.wrapper > li:not(:last-child) {\n  margin-bottom: 2px;\n}");export{e as default};
+var e={wrapper:"wrapper",groupTitle:"groupTitle",sticky:"sticky"};!function(e){const n="s_id-b5d224c4ed03_3_83_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper {\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n}\n.wrapper .groupTitle {\n  color: var(--secondary-text-color);\n  padding: var(--spacing-small) var(--spacing-xs);\n  background-color: var(--secondary-background-color);\n}\n.wrapper .groupTitle.sticky {\n  position: sticky;\n  top: 0;\n}\n.wrapper > li:not(:last-child) {\n  margin-bottom: 2px;\n}");export{e as default};
 //# sourceMappingURL=DropdownBaseList.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={boxModeContainer:"boxModeContainer",inputContainer:"inputContainer",disabled:"disabled",readOnly:"readOnly",error:"error",menuContainer:"menuContainer"};!function(n){const r="s_id-f92aa28952f8_3_82_3";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=n)}(".boxModeContainer {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.inputContainer {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  width: 100%;\n}\n\n.inputContainer:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.inputContainer:focus-within {\n  --border-color: var(--primary-color);\n}\n\n.inputContainer.disabled {\n  --border-color: var(--disabled-background-color);\n  --background-color: var(--disabled-background-color);\n}\n\n.inputContainer.readOnly {\n  --border-color: var(--allgrey-background-color);\n  --background-color: var(--allgrey-background-color);\n}\n\n.inputContainer.error {\n  --border-color: var(--negative-color);\n}\n\n.menuContainer {\n  width: 100%;\n}");export{n as default};
+var n={boxModeContainer:"boxModeContainer",inputContainer:"inputContainer",disabled:"disabled",readOnly:"readOnly",error:"error",menuContainer:"menuContainer"};!function(n){const r="s_id-f92aa28952f8_3_83_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=n)}(".boxModeContainer {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.inputContainer {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  width: 100%;\n}\n\n.inputContainer:hover {\n  --border-color: var(--primary-text-color);\n}\n\n.inputContainer:focus-within {\n  --border-color: var(--primary-color);\n}\n\n.inputContainer.disabled {\n  --border-color: var(--disabled-background-color);\n  --background-color: var(--disabled-background-color);\n}\n\n.inputContainer.readOnly {\n  --border-color: var(--allgrey-background-color);\n  --background-color: var(--allgrey-background-color);\n}\n\n.inputContainer.error {\n  --border-color: var(--negative-color);\n}\n\n.menuContainer {\n  width: 100%;\n}");export{n as default};
 //# sourceMappingURL=DropdownBoxMode.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Menu/Menu.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={menuVisible:"menuVisible",menuHidden:"menuHidden"};!function(e){const i="s_id-448dc11ee0f4_3_82_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".menuVisible {\n  visibility: visible;\n}\n\n.menuHidden {\n  visibility: hidden;\n}");export{e as default};
+var e={menuVisible:"menuVisible",menuHidden:"menuHidden"};!function(e){const i="s_id-448dc11ee0f4_3_83_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".menuVisible {\n  visibility: visible;\n}\n\n.menuHidden {\n  visibility: hidden;\n}");export{e as default};
 //# sourceMappingURL=Menu.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useRef as t,useMemo as o,createRef as i}from"react";import r from"../../../../Chips/Chips.js";import{Flex as a}from"@vibe/layout/mockedClassNames";import{DialogContentContainer as l,Dialog as s}from"@vibe/dialog/mockedClassNames";import c from"../../../../../hooks/useItemsOverflow/useItemsOverflow.js";import d from"./MultiSelectedValues.module.scss.js";import u from"classnames";import m from"../Trigger/DropdownChip.js";function p(p){var f=p.selectedItems,h=p.onRemove,g=p.renderInput,v=p.disabled,C=p.readOnly,b=p.minVisibleCount,w=void 0===b?0:b,y=t(null),E=t(null),k=o((function(){return f.map((function(){return i()}))}),[f]),D=c({containerRef:y,itemRefs:k,gap:4,deductedSpaceRef:E,minVisibleCount:1===f.length?1:w}),N=D.visibleCount,O=D.hasMeasured,I=o((function(){var e=f.length>N?f.slice(N):[];return{hiddenItems:e,hiddenCount:e.length}}),[f,N]),j=I.hiddenItems,M=I.hiddenCount,P=o((function(){return function(){return n.createElement(l,null,n.createElement(a,{direction:"column",gap:"xs",align:"start",className:d.hiddenChipsDialog},j.map((function(e){return n.createElement(m,{key:"dropdown-chip-dialog-".concat(e.value),item:e,onDelete:function(){return h(e)},className:d.dialogChip,disabled:v,readOnly:C})}))))}}),[j,h,v,C]),R=o((function(){return f.map((function(t,o){var i=N>o;return n.createElement("div",{key:"dropdown-chip-visible-".concat(t.value),ref:k[o],className:u(e(e({},d.chipWrapperWithOverflow,void 0!==w),d.hiddenChip,!i)),"aria-hidden":!i,"data-testid":"dropdown-chip-".concat(t.value)},n.createElement(m,{item:t,onDelete:function(){return h(t)},disabled:v,readOnly:C,className:d.visibleChip}))}))}),[f,N,h,k,v,C,w]);return(null==f?void 0:f.length)?n.createElement(a,{align:"center",wrap:!1,gap:"xs",ref:y,className:u(d.containerWrapper,e(e({},d.singleChip,1===f.length),d.measuring,!O))},R,n.createElement(a,{ref:E,gap:"xs"},M>0&&n.createElement("div",{onClick:function(e){e.stopPropagation()},onKeyDown:function(e){e.stopPropagation()},onMouseDown:function(e){e.stopPropagation()}},n.createElement(s,{content:P,showTrigger:["click","enter"],hideTrigger:["clickoutside","enter"],position:"bottom",moveBy:{main:4},hideWhenReferenceHidden:!0,addKeyboardHideShowTriggersByDefault:!0},n.createElement(r,{label:"+ ".concat(M),readOnly:!0,noMargin:!0,ariaLabel:"+".concat(M,". ").concat(f.length-M," items are visible out of ").concat(f.length),"data-testid":"dropdown-overflow-counter",className:d.overflowCounter,onClick:function(){},onMouseDown:function(e){e.preventDefault()}}))),g&&n.createElement("div",{className:d.inputWrapper},g()))):null}export{p as default};
+import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useRef as t,useMemo as o,createRef as r}from"react";import i from"../../../../Chips/Chips.js";import{Flex as a}from"@vibe/layout/mockedClassNames";import{DialogContentContainer as l,Dialog as s}from"@vibe/dialog/mockedClassNames";import c from"../../../../../hooks/useItemsOverflow/useItemsOverflow.js";import d from"./MultiSelectedValues.module.scss.js";import u from"classnames";import m from"../Trigger/DropdownChip.js";function p(p){var f=p.selectedItems,h=p.onRemove,g=p.renderInput,v=p.disabled,C=p.readOnly,b=p.minVisibleCount,w=void 0===b?0:b,y=t(null),E=t(null),N=o((function(){return f.map((function(){return r()}))}),[f]),k=c({containerRef:y,itemRefs:N,gap:4,deductedSpaceRef:E,deductedWidth:g?48:0,minVisibleCount:1===f.length?1:w}),D=k.visibleCount,O=k.hasMeasured,W=o((function(){var e=f.length>D?f.slice(D):[];return{hiddenItems:e,hiddenCount:e.length}}),[f,D]),I=W.hiddenItems,j=W.hiddenCount,M=o((function(){return function(){return n.createElement(l,null,n.createElement(a,{direction:"column",gap:"xs",align:"start",className:d.hiddenChipsDialog},I.map((function(e){return n.createElement(m,{key:"dropdown-chip-dialog-".concat(e.value),item:e,onDelete:function(){return h(e)},className:d.dialogChip,disabled:v,readOnly:C})}))))}}),[I,h,v,C]),P=o((function(){return f.map((function(t,o){var r=D>o;return n.createElement("div",{key:"dropdown-chip-visible-".concat(t.value),ref:N[o],className:u(e(e({},d.chipWrapperWithOverflow,void 0!==w),d.hiddenChip,!r)),"aria-hidden":!r,"data-testid":"dropdown-chip-".concat(t.value)},n.createElement(m,{item:t,onDelete:function(){return h(t)},disabled:v,readOnly:C,className:d.visibleChip}))}))}),[f,D,h,N,v,C,w]);return(null==f?void 0:f.length)?n.createElement(a,{align:"center",wrap:!1,gap:"xs",ref:y,className:u(d.containerWrapper,e(e({},d.singleChip,1===f.length),d.measuring,!O))},P,n.createElement(a,{gap:"xs",className:d.inputAndCounterWrapper},j>0&&n.createElement("div",{ref:E,onClick:function(e){e.stopPropagation()},onKeyDown:function(e){e.stopPropagation()},onMouseDown:function(e){e.stopPropagation()}},n.createElement(s,{content:M,showTrigger:["click","enter"],hideTrigger:["clickoutside","enter"],position:"bottom",moveBy:{main:4},hideWhenReferenceHidden:!0,addKeyboardHideShowTriggersByDefault:!0},n.createElement(i,{label:"+ ".concat(j),readOnly:!0,noMargin:!0,ariaLabel:"+".concat(j,". ").concat(f.length-j," items are visible out of ").concat(f.length),"data-testid":"dropdown-overflow-counter",className:d.overflowCounter,onClick:function(){},onMouseDown:function(e){e.preventDefault()}}))),g&&n.createElement("div",{className:d.inputWrapper},g()))):null}export{p as default};
 //# sourceMappingURL=MultiSelectedValues.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectedValues.js","sources":["../../../../../../../../src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx"],"sourcesContent":["import React, { useRef, useMemo, createRef } from \"react\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport { Chips } from \"../../../../Chips\";\nimport { Flex } from \"@vibe/layout\";\nimport { DialogContentContainer, Dialog } from \"@vibe/dialog\";\nimport useItemsOverflow from \"../../../../../hooks/useItemsOverflow/useItemsOverflow\";\nimport styles from \"./MultiSelectedValues.module.scss\";\nimport cx from \"classnames\";\nimport DropdownChip from \"../Trigger/DropdownChip\";\n\ntype MultiSelectedValuesProps<Item> = {\n selectedItems: Item[];\n onRemove: (item: Item) => void;\n renderInput?: () => React.ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n minVisibleCount?: number;\n};\n\nfunction MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({\n selectedItems,\n onRemove,\n renderInput,\n disabled,\n readOnly,\n minVisibleCount = 0\n}: MultiSelectedValuesProps<Item>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const deductedSpaceRef = useRef<HTMLDivElement>(null);\n\n const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);\n\n const { visibleCount, hasMeasured } = useItemsOverflow({\n containerRef,\n itemRefs,\n gap: 4,\n deductedSpaceRef,\n minVisibleCount: selectedItems.length === 1 ? 1 : minVisibleCount\n });\n\n const { hiddenItems, hiddenCount } = useMemo(() => {\n const hiddenItems = selectedItems.length > visibleCount ? selectedItems.slice(visibleCount) : [];\n return {\n hiddenItems,\n hiddenCount: hiddenItems.length\n };\n }, [selectedItems, visibleCount]);\n\n const dialogContent = useMemo(() => {\n return () => (\n <DialogContentContainer>\n <Flex direction=\"column\" gap=\"xs\" align=\"start\" className={styles.hiddenChipsDialog}>\n {hiddenItems.map(item => {\n return (\n <DropdownChip\n key={`dropdown-chip-dialog-${item.value}`}\n item={item}\n onDelete={() => onRemove(item)}\n className={styles.dialogChip}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n })}\n </Flex>\n </DialogContentContainer>\n );\n }, [hiddenItems, onRemove, disabled, readOnly]);\n\n const chipElements = useMemo(() => {\n return selectedItems.map((item, index) => {\n const isVisible = index < visibleCount;\n\n return (\n <div\n key={`dropdown-chip-visible-${item.value}`}\n ref={itemRefs[index]}\n className={cx({\n [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,\n [styles.hiddenChip]: !isVisible\n })}\n aria-hidden={!isVisible}\n data-testid={`dropdown-chip-${item.value}`}\n >\n <DropdownChip\n item={item}\n onDelete={() => onRemove(item)}\n disabled={disabled}\n readOnly={readOnly}\n className={styles.visibleChip}\n />\n </div>\n );\n });\n }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount]);\n\n if (!selectedItems?.length) return null;\n\n const isSingleChip = selectedItems.length === 1;\n\n return (\n <Flex\n align=\"center\"\n wrap={false}\n gap=\"xs\"\n ref={containerRef}\n className={cx(styles.containerWrapper, {\n [styles.singleChip]: isSingleChip,\n [styles.measuring]: !hasMeasured\n })}\n >\n {chipElements}\n\n <Flex ~~ref={deductedSpaceRef}~~ gap=\"xs\">\n {hiddenCount > 0 && (\n <div\n onClick={e => {\n e.stopPropagation();\n }}\n onKeyDown={e => {\n e.stopPropagation();\n }}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n <Dialog\n content={dialogContent}\n showTrigger={[\"click\", \"enter\"]}\n hideTrigger={[\"clickoutside\", \"enter\"]}\n position=\"bottom\"\n moveBy={{ main: 4 }}\n hideWhenReferenceHidden\n addKeyboardHideShowTriggersByDefault\n >\n <Chips\n label={`+ ${hiddenCount}`}\n readOnly\n noMargin\n ariaLabel={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${\n selectedItems.length\n }`}\n data-testid=\"dropdown-overflow-counter\"\n className={styles.overflowCounter}\n onClick={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </Dialog>\n </div>\n )}\n {renderInput && <div className={styles.inputWrapper}>{renderInput()}</div>}\n </Flex>\n </Flex>\n );\n}\n\nexport default MultiSelectedValues;\n"],"names":["MultiSelectedValues","_ref","selectedItems","onRemove","renderInput","disabled","readOnly","_ref$minVisibleCount","minVisibleCount","containerRef","useRef","deductedSpaceRef","itemRefs","useMemo","map","createRef","_useItemsOverflow","useItemsOverflow","gap","length","visibleCount","hasMeasured","_useMemo","hiddenItems","slice","hiddenCount","dialogContent","React","DialogContentContainer","createElement","Flex","direction","align","className","styles","hiddenChipsDialog","item","DropdownChip","key","concat","value","onDelete","dialogChip","chipElements","index","isVisible","ref","cx","_defineProperty","chipWrapperWithOverflow","undefined","hiddenChip","visibleChip","wrap","containerWrapper","singleChip","measuring","onClick","e","stopPropagation","onKeyDown","onMouseDown","Dialog","content","showTrigger","hideTrigger","position","moveBy","main","hideWhenReferenceHidden","addKeyboardHideShowTriggersByDefault","Chips","label","noMargin","ariaLabel","overflowCounter","preventDefault","inputWrapper"],"mappings":"~~0gBAmBA~~,SAASA,EAAmBC,GAOK,IAN/BC,EAAaD,EAAbC,cACAC,EAAQF,EAARE,SACAC,EAAWH,EAAXG,YACAC,EAAQJ,EAARI,SACAC,EAAQL,EAARK,SAAQC,EAAAN,EACRO,gBAAAA,OAAkB,IAAHD,EAAG,EAACA,EAEbE,EAAeC,EAAuB,MACtCC,EAAmBD,EAAuB,MAE1CE,EAAWC,GAAQ,WAAA,OAAMX,EAAcY,KAAI,WAAA,OAAMC,SAA8B,CAACb,IAEtFc,EAAsCC,EAAiB,CACrDR,aAAAA,EACAG,SAAAA,EACAM,IAAK,EACLP,iBAAAA,~~EACAH~~,gBAA0C,IAAzBN,~~EAAciB~~,OAAe,~~EAAIX~~,~~IAL5CY~~,~~EAAYJ~~,~~EAAZI~~,aAAcC,~~EAAWL~~,~~EAAXK~~,~~YAQtBC~~,~~EAAqCT~~,GAAQ,WAC3C,~~IAAMU~~,~~EAAcrB~~,~~EAAciB~~,OAASC,~~EAAelB~~,~~EAAcsB~~,MAAMJ,GAAgB,GAC9F,MAAO,CACLG,YAAAA,EACAE,YAAaF,EAAYJ,OAE7B,GAAG,~~CAACjB~~,~~EAAekB~~,IANXG,EAAWD,EAAXC,YAAaE,EAAWH,EAAXG,YAQfC,~~EAAgBb~~,GAAQ,WAC5B,OAAO,WAAA,~~OACLc~~,gBAACC,EAAsB,KACrBD,EAACE,cAAAC,EAAK,CAAAC,UAAU,~~SAASb~~,IAAI,~~KAAKc~~,MAAM,QAAQC,UAAWC,EAAOC,mBAC/DZ,~~EAAYT~~,KAAI,~~SAAAsB~~,GACf,OACET,EAACE,cAAAQ,GACCC,4BAAGC,OAA0BH,EAAKI,OAClCJ,KAAMA,EACNK,SAAU,WAAA,~~OAAMtC~~,~~EAASiC~~,EAAK,EAC9BH,UAAWC,EAAOQ,~~WAClBrC~~,SAAUA,EACVC,SAAUA,GAGf,MAIR,GAAE,~~CAACiB~~,~~EAAapB~~,EAAUE,EAAUC,IAE/~~BqC~~,~~EAAe9B~~,GAAQ,WAC3B,OAAOX,EAAcY,KAAI,~~SAACsB~~,EAAMQ,GAC9B,IAAMC,EAAoBzB,EAARwB,EAElB,OACEjB,uBACEW,6BAAGC,OAA2BH,EAAKI,OACnCM,~~IAAKlC~~,~~EAASgC~~,GACdX,UAAWc,EAAEC,EAAAA,EAAA,CAAA,EACVd,EAAOe,6BAA8CC,~~IAApB1C~~,~~GACjC0B~~,EAAOiB,YAAcN,IACtB,eACYA,EAAS,cAAAN,iBAAAA,OACOH,EAAKI,QAEnCb,EAAAE,cAACQ,EAAY,CACXD,KAAMA,EACNK,SAAU,WAAA,~~OAAMtC~~,~~EAASiC~~,EAAK,~~EAC9B/B~~,SAAUA,EACVC,SAAUA,~~EACV2B~~,UAAWC,EAAOkB,cAI1B,GACF,GAAG,~~CAAClD~~,~~EAAekB~~,~~EAAcjB~~,EAAUS,EAAUP,EAAUC,EAAUE,IAEzE,OAAKN,aAAA,EAAAA,~~EAAeiB~~,QAKlBQ,EAACE,cAAAC,EACC,CAAAE,MAAM,SACNqB,MAAM,~~EACNnC~~,IAAI,~~KACJ4B~~,~~IAAKrC~~,~~EACLwB~~,UAAWc,EAAGb,EAAOoB,iBAAgBN,EAAAA,EAAA,CAAA,EAClCd,EAAOqB,WATgC,~~IAAzBrD~~,~~EAAciB~~,QAU5Be,EAAOsB,WAAanC,KAGtBsB,EAEDhB,EAACE,cAAAC,~~GAAKgB~~,~~IAAKnC~~,~~EAAkBO,~~IAAI,~~MAC9BO~~,EAAc,GACbE,~~uBACE8B~~,QAAS,SAAAC,GACPA,EAAEC,iBACH,EACDC,UAAW,SAAAF,GACTA,EAAEC,iBACH,EACDE,YAAa,SAAAH,GACXA,EAAEC,iBACJ,~~GAEAhC~~,EAAAE,~~cAACiC~~,EACC,CAAAC,~~QAASrC~~,~~EACTsC~~,YAAa,CAAC,QAAS,SACvBC,YAAa,CAAC,eAAgB,SAC9BC,SAAS,SACTC,OAAQ,CAAEC,KAAM,GAChBC,2BACAC,sCAAoC,~~GAEpC3C~~,EAACE,~~cAAA0C~~,GACCC,~~MAAKjC~~,KAAAA,OAAOd,~~GACZnB~~,UAAQ,~~EACRmE~~,UACA,EAAAC,~~cAASnC~~,OAAMd,EAAWc,MAAAA,~~OAAKrC~~,~~EAAciB~~,OAASM,EAAWc,8BAAAA,OAC/~~DrC~~,~~EAAciB~~,QAEJ,cAAA,4BACZc,UAAWC,~~EAAOyC~~,gBAClBlB,QAAS,WAAQ,EACjBI,YAAa,SAAAH,GACXA,EAAEkB,gBACJ,~~MAKPxE~~,~~GAAeuB~~,EAAAE,cAAA,MAAA,CAAKI,UAAWC,~~EAAO2C~~,~~cAAezE~~,~~OAxDzB~~,~~IA4DrC~~"}
1	+ {"version":3,"file":"MultiSelectedValues.js","sources":["../../../../../../../../src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx"],"sourcesContent":["import React, { useRef, useMemo, createRef } from \"react\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport { Chips } from \"../../../../Chips\";\nimport { Flex } from \"@vibe/layout\";\nimport { DialogContentContainer, Dialog } from \"@vibe/dialog\";\nimport useItemsOverflow from \"../../../../../hooks/useItemsOverflow/useItemsOverflow\";\nimport styles from \"./MultiSelectedValues.module.scss\";\nimport cx from \"classnames\";\nimport DropdownChip from \"../Trigger/DropdownChip\";\n\nconst INPUT_DEDUCTED_WIDTH = 48;\n\ntype MultiSelectedValuesProps<Item> = {\n selectedItems: Item[];\n onRemove: (item: Item) => void;\n renderInput?: () => React.ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n minVisibleCount?: number;\n};\n\nfunction MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({\n selectedItems,\n onRemove,\n renderInput,\n disabled,\n readOnly,\n minVisibleCount = 0\n}: MultiSelectedValuesProps<Item>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const deductedSpaceRef = useRef<HTMLDivElement>(null);\n\n const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);\n\n const { visibleCount, hasMeasured } = useItemsOverflow({\n containerRef,\n itemRefs,\n gap: 4,\n deductedSpaceRef,\n deductedWidth: renderInput ? INPUT_DEDUCTED_WIDTH : 0,\n minVisibleCount: selectedItems.length === 1 ? 1 : minVisibleCount\n });\n\n const { hiddenItems, hiddenCount } = useMemo(() => {\n const hiddenItems = selectedItems.length > visibleCount ? selectedItems.slice(visibleCount) : [];\n return {\n hiddenItems,\n hiddenCount: hiddenItems.length\n };\n }, [selectedItems, visibleCount]);\n\n const dialogContent = useMemo(() => {\n return () => (\n <DialogContentContainer>\n <Flex direction=\"column\" gap=\"xs\" align=\"start\" className={styles.hiddenChipsDialog}>\n {hiddenItems.map(item => {\n return (\n <DropdownChip\n key={`dropdown-chip-dialog-${item.value}`}\n item={item}\n onDelete={() => onRemove(item)}\n className={styles.dialogChip}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n })}\n </Flex>\n </DialogContentContainer>\n );\n }, [hiddenItems, onRemove, disabled, readOnly]);\n\n const chipElements = useMemo(() => {\n return selectedItems.map((item, index) => {\n const isVisible = index < visibleCount;\n\n return (\n <div\n key={`dropdown-chip-visible-${item.value}`}\n ref={itemRefs[index]}\n className={cx({\n [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,\n [styles.hiddenChip]: !isVisible\n })}\n aria-hidden={!isVisible}\n data-testid={`dropdown-chip-${item.value}`}\n >\n <DropdownChip\n item={item}\n onDelete={() => onRemove(item)}\n disabled={disabled}\n readOnly={readOnly}\n className={styles.visibleChip}\n />\n </div>\n );\n });\n }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount]);\n\n if (!selectedItems?.length) return null;\n\n const isSingleChip = selectedItems.length === 1;\n\n return (\n <Flex\n align=\"center\"\n wrap={false}\n gap=\"xs\"\n ref={containerRef}\n className={cx(styles.containerWrapper, {\n [styles.singleChip]: isSingleChip,\n [styles.measuring]: !hasMeasured\n })}\n >\n {chipElements}\n\n <Flex gap=\"xs\" className={styles.inputAndCounterWrapper}>\n {hiddenCount > 0 && (\n <div\n ref={deductedSpaceRef}\n onClick={e => {\n e.stopPropagation();\n }}\n onKeyDown={e => {\n e.stopPropagation();\n }}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n <Dialog\n content={dialogContent}\n showTrigger={[\"click\", \"enter\"]}\n hideTrigger={[\"clickoutside\", \"enter\"]}\n position=\"bottom\"\n moveBy={{ main: 4 }}\n hideWhenReferenceHidden\n addKeyboardHideShowTriggersByDefault\n >\n <Chips\n label={`+ ${hiddenCount}`}\n readOnly\n noMargin\n ariaLabel={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${\n selectedItems.length\n }`}\n data-testid=\"dropdown-overflow-counter\"\n className={styles.overflowCounter}\n onClick={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </Dialog>\n </div>\n )}\n {renderInput && <div className={styles.inputWrapper}>{renderInput()}</div>}\n </Flex>\n </Flex>\n );\n}\n\nexport default MultiSelectedValues;\n"],"names":["MultiSelectedValues","_ref","selectedItems","onRemove","renderInput","disabled","readOnly","_ref$minVisibleCount","minVisibleCount","containerRef","useRef","deductedSpaceRef","itemRefs","useMemo","map","createRef","_useItemsOverflow","useItemsOverflow","gap","deductedWidth","length","visibleCount","hasMeasured","_useMemo","hiddenItems","slice","hiddenCount","dialogContent","React","DialogContentContainer","createElement","Flex","direction","align","className","styles","hiddenChipsDialog","item","DropdownChip","key","concat","value","onDelete","dialogChip","chipElements","index","isVisible","ref","cx","_defineProperty","chipWrapperWithOverflow","undefined","hiddenChip","visibleChip","wrap","containerWrapper","singleChip","measuring","inputAndCounterWrapper","onClick","e","stopPropagation","onKeyDown","onMouseDown","Dialog","content","showTrigger","hideTrigger","position","moveBy","main","hideWhenReferenceHidden","addKeyboardHideShowTriggersByDefault","Chips","label","noMargin","ariaLabel","overflowCounter","preventDefault","inputWrapper"],"mappings":"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"}

package/dist/mocked_classnames/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var i={containerWrapper:"containerWrapper",singleChip:"singleChip",measuring:"measuring",hiddenChip:"hiddenChip",chipWrapperWithOverflow:"chipWrapperWithOverflow",visibleChip:"visibleChip",hiddenChipsDialog:"hiddenChipsDialog",dialogChip:"dialogChip"};!function(i){const n="s_id-d7a7eaf424d8_3_82_3";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,e.firstChild?e.insertBefore(d,e.firstChild):e.appendChild(d),d.appendChild(document.createTextNode(i))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=i)}(".containerWrapper {\n  min-width: 1px;\n  flex-grow: 1;\n}\n.containerWrapper.singleChip > div:first-child {\n  min-width: 50px;\n  flex-shrink: 1;\n}\n.containerWrapper.singleChip > div:first-child div {\n  max-width: 100%;\n}\n.containerWrapper.measuring > div:not(.hiddenChip) {\n  opacity: 0;\n}\n.chipWrapperWithOverflow {\n  max-width: 100%;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.chipWrapperWithOverflow .visibleChip {\n  max-width: 100%;\n}\n.hiddenChip {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: -1;\n}\n.hiddenChipsDialog {\n  max-width: 192px;\n}\n.dialogChip {\n  max-width: 100%;\n}");export{i as default};
+var n={containerWrapper:"containerWrapper",singleChip:"singleChip",measuring:"measuring",hiddenChip:"hiddenChip",inputAndCounterWrapper:"inputAndCounterWrapper",inputWrapper:"inputWrapper",chipWrapperWithOverflow:"chipWrapperWithOverflow",visibleChip:"visibleChip",hiddenChipsDialog:"hiddenChipsDialog",dialogChip:"dialogChip"};!function(n){const i="s_id-a777ca35d111_3_83_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+i))return;const p=document.createElement("style");p.id=i,e.firstChild?e.insertBefore(p,e.firstChild):e.appendChild(p),p.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=n)}(".containerWrapper {\n  min-width: 1px;\n  flex-grow: 1;\n}\n.containerWrapper.singleChip > div:first-child {\n  min-width: 50px;\n  flex-shrink: 1;\n}\n.containerWrapper.singleChip > div:first-child div {\n  max-width: 100%;\n}\n.containerWrapper.measuring > div:not(.hiddenChip) {\n  opacity: 0;\n}\n.inputAndCounterWrapper {\n  flex-grow: 1;\n  min-width: 0;\n}\n.inputWrapper {\n  flex-grow: 1;\n}\n.inputWrapper input {\n  width: 100%;\n}\n.chipWrapperWithOverflow {\n  max-width: 100%;\n  flex-shrink: 0;\n}\n.chipWrapperWithOverflow .visibleChip {\n  max-width: 100%;\n}\n.hiddenChip {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: -1;\n}\n.hiddenChipsDialog {\n  max-width: 192px;\n}\n.dialogChip {\n  max-width: 100%;\n}");export{n as default};
 //# sourceMappingURL=MultiSelectedValues.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import l,{useRef as t}from"react";import a from"classnames";import{BaseInput as r}from"@vibe/base/mockedClassNames";import o from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";import i from"../../../../Text/Text.js";var m=function(m){var n,p=m.inputSize,d=s(),c=d.inputValue,u=d.autoFocus,b=d.disabled,f=d.readOnly,g=d.placeholder,v=d.multi,x=d.selectedItem,y=d.selectedItems,h=void 0===y?[]:y,j=d.inputAriaLabel,O=d.searchable,P=d.size,E=d.label,F=d.isOpen,T=d.getDropdownProps,z=d.getLabelProps,I=d.getInputProps,N=t(null),S=v?h.length>0:!!x,w=T?T({preventKeyAction:F}):{};return l.createElement(l.Fragment,null,O?l.createElement(r,Object.assign({},I(Object.assign({"aria-labelledby":E?z().id:void 0,"aria-label":j||(E||null===(n=z())||void 0===n?void 0:n.id),placeholder:S?"":g,ref:N},w)),{inputRole:"combobox",value:c||"",autoFocus:u,size:p||P,className:a(o.inputWrapper,e(e(e(e({},o.hasSelected,!v&&x&&!c),o.small,"small"===p),o.multi,v&&S),o.multiSelected,v&&S&&"small"===p)),disabled:b,readOnly:f})):l.createElement(l.Fragment,null,!S&&g&&l.createElement(i,{color:"secondary",className:a(o.placeholderText,e({},o.disabled,!!b)),type:"small"===P?"text2":"text1"},g)))};export{m as default};
+import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import l,{useRef as t}from"react";import a from"classnames";import{BaseInput as r}from"@vibe/base/mockedClassNames";import o from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";import{Text as i}from"@vibe/typography/mockedClassNames";var m=function(m){var n,d=m.inputSize,p=m.fullWidth,c=s(),u=c.inputValue,b=c.autoFocus,f=c.disabled,g=c.readOnly,v=c.placeholder,h=c.multi,y=c.selectedItem,x=c.selectedItems,j=void 0===x?[]:x,O=c.inputAriaLabel,P=c.searchable,E=c.size,F=c.label,N=c.isOpen,z=c.getDropdownProps,C=c.getLabelProps,I=c.getInputProps,S=t(null),W=h?j.length>0:!!y,k=z?z({preventKeyAction:N}):{};return l.createElement(l.Fragment,null,P?l.createElement(r,Object.assign({},I(Object.assign({"aria-labelledby":F?C().id:void 0,"aria-label":O||(F||null===(n=C())||void 0===n?void 0:n.id),placeholder:W?"":v,ref:S},k)),{inputRole:"combobox",value:u||"",autoFocus:b,size:d||E,className:a(o.inputWrapper,e(e(e(e(e({},o.hasSelected,!h&&y&&!u),o.small,"small"===d),o.multi,h&&W),o.multiSelected,h&&W&&"small"===d),o.fullWidth,p)),disabled:f,readOnly:g})):l.createElement(l.Fragment,null,!W&&v&&l.createElement(i,{color:"secondary",className:a(o.placeholderText,e({},o.disabled,!!f)),type:"small"===E?"text2":"text1"},v)))};export{m as default};
 //# sourceMappingURL=DropdownInput.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownInput.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport { Text } from \"~~../../../../Text~~\";\n\nconst DropdownInput = ({ inputSize }: { inputSize?: \"small\" \| \"medium\" \| \"large\" }) => {\n const {\n inputValue,\n autoFocus,\n disabled,\n readOnly,\n placeholder,\n multi,\n selectedItem,\n selectedItems = [],\n inputAriaLabel,\n searchable,\n size,\n label,\n isOpen,\n getDropdownProps,\n getLabelProps,\n getInputProps\n } = useDropdownContext<BaseItemData>();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n return (\n <>\n {searchable ? (\n <BaseInput\n {...getInputProps({\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": inputAriaLabel \|\| (label ? undefined : getLabelProps()?.id),\n placeholder: hasSelection ? \"\" : placeholder,\n ref: inputRef,\n ...multipleSelectionDropdownProps\n })}\n inputRole=\"combobox\"\n value={inputValue \|\| \"\"}\n autoFocus={autoFocus}\n size={inputSize \|\| size}\n className={cx(styles.inputWrapper, {\n [styles.hasSelected]: !multi && selectedItem && !inputValue,\n [styles.small]: inputSize === \"small\",\n [styles.multi]: multi && hasSelection,\n [styles.multiSelected]: multi && hasSelection && inputSize === \"small\"\n })}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <>\n {!hasSelection && placeholder && (\n <Text\n color=\"secondary\"\n className={cx(styles.placeholderText, {\n [styles.disabled]: !!disabled\n })}\n type={size === \"small\" ? \"text2\" : \"text1\"}\n >\n {placeholder}\n </Text>\n )}\n </>\n )}\n </>\n );\n};\n\nexport default DropdownInput;\n"],"names":["DropdownInput","_ref","inputSize","_useDropdownContext","useDropdownContext","inputValue","autoFocus","disabled","readOnly","placeholder","multi","selectedItem","_useDropdownContext$s","selectedItems","inputAriaLabel","searchable","size","label","isOpen","getDropdownProps","getLabelProps","getInputProps","inputRef","useRef","hasSelection","length","multipleSelectionDropdownProps","preventKeyAction","React","BaseInput","Object","assign","id","undefined","ref","inputRole","value","className","cx","styles","inputWrapper","_defineProperty","hasSelected","small","multiSelected","createElement","Text","color","placeholderText","type"],"mappings":"~~mWAQA~~,IAAMA,EAAgB,SAAHC,~~GAAmE~~,~~MAA7DC~~,EAASD,EAATC,~~UACvBC~~,EAiBIC,IAhBFC,EAAUF,EAAVE,WACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SACAC,EAAQL,EAARK,SACAC,EAAWN,EAAXM,YACAC,EAAKP,EAALO,MACAC,EAAYR,EAAZQ,aAAYC,EAAAT,EACZU,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAcX,EAAdW,eACAC,EAAUZ,EAAVY,WACAC,EAAIb,EAAJa,KACAC,EAAKd,EAALc,MACAC,EAAMf,EAANe,OACAC,EAAgBhB,EAAhBgB,iBACAC,EAAajB,EAAbiB,cACAC,EAAalB,EAAbkB,cAGIC,EAAWC,EAAyB,MACpCC,EAAed,EAAQG,EAAcY,OAAS,IAAMd,EACpDe,EAAiCP,EAAmBA,EAAiB,CAAEQ,iBAAkBT,IAAY,CAAA,EAE3G,OACEU,gCACGb,EACCa,gBAACC,EAASC,OAAAC,OAAA,CAAA,EACJV,EACFS,OAAAC,OAAA,CAAA,kBAAmBd,EAAQG,IAAgBY,QAAKC,EAChD,aAAcnB,IAAmBG,aAAoBG,sBAAZa,IAA6BD,IACtEvB,YAAae,EAAe,GAAKf,EACjCyB,IAAKZ,GACFI,IAEL,CAAAS,UAAU,WACVC,MAAO/B,GAAc,GACrBC,UAAWA,EACXU,~~KAAMd~~,~~GAAac~~,EACnBqB,UAAWC,EAAGC,EAAOC,aAAYC,EAAAA,EAAAA,EAAAA,~~EAAA~~,~~CAAA,~~EAC9BF,EAAOG,aAAehC,GAASC,IAAiBN,GAChDkC,EAAOI,MAAsB,~~UAAdzC~~,~~GACfqC~~,EAAO7B,MAAQA,GAASc,GACxBe,EAAOK,cAAgBlC,GAASc,GAA8B,~~UAAdtB~~,~~IAEnDK~~,SAAUA,EACVC,SAAUA,KAGZoB,iCACIJ,GAAgBf,GAChBmB,EAAAiB,cAACC,EAAI,CACHC,MAAM,YACNV,UAAWC,EAAGC,EAAOS,gBAAeP,EACjCF,GAAAA,EAAOhC,WAAaA,IAEvB0C,KAAe,UAATjC,EAAmB,QAAU,SAElCP,IAOf"}
1	+ {"version":3,"file":"DropdownInput.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport { Text } from \"@vibe/typography\";\n\nconst DropdownInput = ({ inputSize, fullWidth }: { inputSize?: \"small\" \| \"medium\" \| \"large\"; fullWidth?: boolean }) => {\n const {\n inputValue,\n autoFocus,\n disabled,\n readOnly,\n placeholder,\n multi,\n selectedItem,\n selectedItems = [],\n inputAriaLabel,\n searchable,\n size,\n label,\n isOpen,\n getDropdownProps,\n getLabelProps,\n getInputProps\n } = useDropdownContext<BaseItemData>();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n return (\n <>\n {searchable ? (\n <BaseInput\n {...getInputProps({\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": inputAriaLabel \|\| (label ? undefined : getLabelProps()?.id),\n placeholder: hasSelection ? \"\" : placeholder,\n ref: inputRef,\n ...multipleSelectionDropdownProps\n })}\n inputRole=\"combobox\"\n value={inputValue \|\| \"\"}\n autoFocus={autoFocus}\n size={inputSize \|\| size}\n className={cx(styles.inputWrapper, {\n [styles.hasSelected]: !multi && selectedItem && !inputValue,\n [styles.small]: inputSize === \"small\",\n [styles.multi]: multi && hasSelection,\n [styles.multiSelected]: multi && hasSelection && inputSize === \"small\",\n [styles.fullWidth]: fullWidth\n })}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <>\n {!hasSelection && placeholder && (\n <Text\n color=\"secondary\"\n className={cx(styles.placeholderText, {\n [styles.disabled]: !!disabled\n })}\n type={size === \"small\" ? \"text2\" : \"text1\"}\n >\n {placeholder}\n </Text>\n )}\n </>\n )}\n </>\n );\n};\n\nexport default DropdownInput;\n"],"names":["DropdownInput","_ref","inputSize","fullWidth","_useDropdownContext","useDropdownContext","inputValue","autoFocus","disabled","readOnly","placeholder","multi","selectedItem","_useDropdownContext$s","selectedItems","inputAriaLabel","searchable","size","label","isOpen","getDropdownProps","getLabelProps","getInputProps","inputRef","useRef","hasSelection","length","multipleSelectionDropdownProps","preventKeyAction","React","BaseInput","Object","assign","id","undefined","ref","inputRole","value","className","cx","styles","inputWrapper","_defineProperty","hasSelected","small","multiSelected","createElement","Text","color","placeholderText","type"],"mappings":"oXAQA,IAAMA,EAAgB,SAAHC,GAAmG,MAA7FC,EAASD,EAATC,UAAWC,EAASF,EAATE,UAClCC,EAiBIC,IAhBFC,EAAUF,EAAVE,WACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SACAC,EAAQL,EAARK,SACAC,EAAWN,EAAXM,YACAC,EAAKP,EAALO,MACAC,EAAYR,EAAZQ,aAAYC,EAAAT,EACZU,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAcX,EAAdW,eACAC,EAAUZ,EAAVY,WACAC,EAAIb,EAAJa,KACAC,EAAKd,EAALc,MACAC,EAAMf,EAANe,OACAC,EAAgBhB,EAAhBgB,iBACAC,EAAajB,EAAbiB,cACAC,EAAalB,EAAbkB,cAGIC,EAAWC,EAAyB,MACpCC,EAAed,EAAQG,EAAcY,OAAS,IAAMd,EACpDe,EAAiCP,EAAmBA,EAAiB,CAAEQ,iBAAkBT,IAAY,CAAA,EAE3G,OACEU,gCACGb,EACCa,gBAACC,EAASC,OAAAC,OAAA,CAAA,EACJV,EACFS,OAAAC,OAAA,CAAA,kBAAmBd,EAAQG,IAAgBY,QAAKC,EAChD,aAAcnB,IAAmBG,aAAoBG,sBAAZa,IAA6BD,IACtEvB,YAAae,EAAe,GAAKf,EACjCyB,IAAKZ,GACFI,IAEL,CAAAS,UAAU,WACVC,MAAO/B,GAAc,GACrBC,UAAWA,EACXU,KAAMf,GAAae,EACnBqB,UAAWC,EAAGC,EAAOC,aAAYC,EAAAA,EAAAA,EAAAA,EAAAA,EAC9BF,CAAAA,EAAAA,EAAOG,aAAehC,GAASC,IAAiBN,GAChDkC,EAAOI,MAAsB,UAAd1C,GACfsC,EAAO7B,MAAQA,GAASc,GACxBe,EAAOK,cAAgBlC,GAASc,GAA8B,UAAdvB,GAChDsC,EAAOrC,UAAYA,IAEtBK,SAAUA,EACVC,SAAUA,KAGZoB,iCACIJ,GAAgBf,GAChBmB,EAAAiB,cAACC,EAAI,CACHC,MAAM,YACNV,UAAWC,EAAGC,EAAOS,gBAAeP,EACjCF,GAAAA,EAAOhC,WAAaA,IAEvB0C,KAAe,UAATjC,EAAmB,QAAU,SAElCP,IAOf"}

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"react";import{Flex as t}from"@vibe/layout/mockedClassNames";import r from"../MultiSelectedValues/MultiSelectedValues.js";import l from"./DropdownInput.js";import{useDropdownContext as i}from"../../context/DropdownContext.js";import a from"./TriggerActions.js";import n from"./Trigger.module.scss.js";import{getStyle as o}from"../../../../../helpers/typesciptCssModulesHelper.js";import s from"classnames";import m from"./DropdownChip.js";var d=function(){var d,u=i(),p=u.selectedItems,c=void 0===p?[]:p,v=u.contextOnOptionRemove,f=u.multiline,b=u.disabled,g=u.readOnly,E=u.error,y=u.searchable,j=u.getToggleButtonProps,h=u.label,x=u.getLabelProps,C=u.ariaLabel,O=u.minVisibleCount;return e.createElement(t,{justify:"space-between",align:"center"},e.createElement("div",Object.assign({className:s(n.triggerWrapper,o(n,u.size))},y?{}:j({"aria-haspopup":"dialog","aria-labelledby":h?x().id:void 0,"aria-label":C||(h||null===(d=x())||void 0===d?void 0:d.id),"aria-disabled":b?"true":void 0,"aria-invalid":E?"true":void 0,"aria-readonly":g?"true":void 0})),c.length>0?e.createElement("div",{className:n.multiWrapper},f?e.createElement(t,{gap:"xs",wrap:!0},c.map((function(r,i){var a,n;return e.createElement(t,{key:(null!==(n=null!==(a=r.id)&&void 0!==a?a:r.value)&&void 0!==n?n:i)+""},e.createElement("div",{style:{flexShrink:0}},e.createElement(m,{item:r,onDelete:function(){null==v||v(r)},readOnly:g,disabled:b})),i===c.length-1&&e.createElement(l,{inputSize:"small"}))}))):e.createElement(r,{disabled:b,readOnly:g,selectedItems:c,onRemove:function(e){null==v||v(e)},renderInput:function(){return e.createElement(l,{inputSize:"small"})},minVisibleCount:O})):e.createElement(l,null)),e.createElement(a,null))};export{d as default};
+import e from"react";import{Flex as t}from"@vibe/layout/mockedClassNames";import l from"../MultiSelectedValues/MultiSelectedValues.js";import r from"./DropdownInput.js";import{useDropdownContext as i}from"../../context/DropdownContext.js";import a from"./TriggerActions.js";import n from"./Trigger.module.scss.js";import{getStyle as o}from"../../../../../helpers/typesciptCssModulesHelper.js";import s from"classnames";import m from"./DropdownChip.js";var d=function(){var d,u=i(),p=u.selectedItems,c=void 0===p?[]:p,v=u.contextOnOptionRemove,f=u.multiline,b=u.disabled,g=u.readOnly,E=u.error,y=u.searchable,j=u.getToggleButtonProps,h=u.label,x=u.getLabelProps,C=u.ariaLabel,O=u.minVisibleCount;return e.createElement(t,{justify:"space-between",align:"center"},e.createElement("div",Object.assign({className:s(n.triggerWrapper,o(n,u.size))},y?{}:j({"aria-haspopup":"dialog","aria-labelledby":h?x().id:void 0,"aria-label":C||(h||null===(d=x())||void 0===d?void 0:d.id),"aria-disabled":b?"true":void 0,"aria-invalid":E?"true":void 0,"aria-readonly":g?"true":void 0})),c.length>0?e.createElement("div",{className:n.multiWrapper},f?e.createElement(t,{gap:"xs",wrap:!0},c.map((function(l,i){var a,n;return e.createElement(t,{key:(null!==(n=null!==(a=l.id)&&void 0!==a?a:l.value)&&void 0!==n?n:i)+""},e.createElement("div",{style:{flexShrink:0}},e.createElement(m,{item:l,onDelete:function(){null==v||v(l)},readOnly:g,disabled:b})),i===c.length-1&&e.createElement(r,{inputSize:"small"}))}))):e.createElement(l,{disabled:b,readOnly:g,selectedItems:c,onRemove:function(e){null==v||v(e)},renderInput:y?function(){return e.createElement(r,{inputSize:"small",fullWidth:!0})}:void 0,minVisibleCount:O})):e.createElement(r,null)),e.createElement(a,null))};export{d as default};
 //# sourceMappingURL=MultiSelectTrigger.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectTrigger.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport MultiSelectedValues from \"../MultiSelectedValues/MultiSelectedValues\";\nimport DropdownInput from \"./DropdownInput\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport TriggerActions from \"./TriggerActions\";\nimport styles from \"./Trigger.module.scss\";\nimport { getStyle } from \"../../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport DropdownChip from \"./DropdownChip\";\n\nconst MultiSelectTrigger = () => {\n const {\n selectedItems = [],\n contextOnOptionRemove,\n multiline,\n disabled,\n readOnly,\n error,\n size,\n searchable,\n getToggleButtonProps,\n label,\n getLabelProps,\n ariaLabel,\n minVisibleCount\n } = useDropdownContext<BaseItemData>();\n\n return (\n <Flex justify=\"space-between\" align=\"center\">\n <div\n className={cx(styles.triggerWrapper, getStyle(styles, size))}\n {...(!searchable\n ? getToggleButtonProps({\n \"aria-haspopup\": \"dialog\",\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": ariaLabel \|\| (label ? undefined : getLabelProps()?.id),\n \"aria-disabled\": disabled ? \"true\" : undefined,\n \"aria-invalid\": error ? \"true\" : undefined,\n \"aria-readonly\": readOnly ? \"true\" : undefined\n })\n : {})}\n >\n {selectedItems.length > 0 ? (\n <div className={styles.multiWrapper}>\n {!multiline ? (\n <MultiSelectedValues\n disabled={disabled}\n readOnly={readOnly}\n selectedItems={selectedItems}\n onRemove={item => {\n contextOnOptionRemove?.(item);\n }}\n renderInput={() => <DropdownInput inputSize=\"small\" />}\n minVisibleCount={minVisibleCount}\n />\n ) : (\n <Flex gap=\"xs\" wrap>\n {selectedItems.map((item, index) => (\n <Flex key={String(item.id ?? item.value ?? index)}>\n <div style={{ flexShrink: 0 }}>\n <DropdownChip\n item={item}\n onDelete={() => {\n contextOnOptionRemove?.(item);\n }}\n readOnly={readOnly}\n disabled={disabled}\n />\n </div>\n {index === selectedItems.length - 1 && <DropdownInput inputSize=\"small\" />}\n </Flex>\n ))}\n </Flex>\n )}\n </div>\n ) : (\n <DropdownInput />\n )}\n </div>\n <TriggerActions />\n </Flex>\n );\n};\n\nexport default MultiSelectTrigger;\n"],"names":["MultiSelectTrigger","_useDropdownContext","useDropdownContext","_useDropdownContext$s","selectedItems","contextOnOptionRemove","multiline","disabled","readOnly","error","searchable","getToggleButtonProps","label","getLabelProps","ariaLabel","minVisibleCount","React","createElement","Flex","justify","align","Object","assign","className","cx","styles","triggerWrapper","getStyle","size","id","undefined","_a","length","multiWrapper","gap","wrap","map","item","index","key","_b","value","String","style","flexShrink","DropdownChip","onDelete","DropdownInput","inputSize","MultiSelectedValues","onRemove","renderInput","TriggerActions"],"mappings":"ocAYA,IAAMA,EAAqB,iBACzBC,EAcIC,IAAkCC,EAAAF,EAbpCG,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAqBJ,EAArBI,sBACAC,EAASL,EAATK,UACAC,EAAQN,EAARM,SACAC,EAAQP,EAARO,SACAC,EAAKR,EAALQ,MAEAC,EAAUT,EAAVS,WACAC,EAAoBV,EAApBU,qBACAC,EAAKX,EAALW,MACAC,EAAaZ,EAAbY,cACAC,EAASb,EAATa,UACAC,EAAed,EAAfc,gBAGF,OACEC,EAACC,cAAAC,EAAK,CAAAC,QAAQ,gBAAgBC,MAAM,UAClCJ,EAAAC,cAAA,MAAAI,OAAAC,OAAA,CACEC,UAAWC,EAAGC,EAAOC,eAAgBC,EAASF,EAZ9CxB,EAAJ2B,QAaUlB,EASF,CAAA,EARAC,EAAqB,CACnB,gBAAiB,SACjB,kBAAmBC,EAAQC,IAAgBgB,QAAKC,EAChD,aAAchB,IAAcF,GAAmC,QAAfmB,EAAAlB,WAAe,IAAAkB,OAA3BD,EAA2BC,EAAEF,IACjE,gBAAiBtB,EAAW,YAASuB,EACrC,eAAgBrB,EAAQ,YAASqB,EACjC,gBAAiBtB,EAAW,YAASsB,KAI1C1B,EAAc4B,OAAS,EACtBhB,uBAAKO,UAAWE,EAAOQ,cACnB3B,EAYAU,EAACC,cAAAC,~~GAAKgB~~,IAAI,KAAKC,~~SACZ~~/B,EAAcgC,KAAI,SAACC,EAAMC,WAAU,OAClCtB,EAACC,cAAAC,GAAKqB,KAAiC,QAArBC,EAAW,UAAXH,EAAKR,UAAM,IAAAE,EAAAA,EAAAM,EAAKI,aAAK,IAAAD,EAAAA,EAAIF,GAAhCI,IACT1B,EAAAC,cAAA,MAAA,CAAK0B,MAAO,CAAEC,WAAY,IACxB5B,EAACC,cAAA4B,GACCR,KAAMA,EACNS,SAAU,WACRzC,SAAAA,EAAwBgC,EACzB,EACD7B,SAAUA,EACVD,SAAUA,KAGb+B,IAAUlC,EAAc4B,OAAS,GAAKhB,EAAAC,cAAC8B,EAAa,CAACC,UAAU,UAEnE,KA1BHhC,EAACC,cAAAgC,GACC1C,SAAUA,EACVC,SAAUA,EACVJ,cAAeA,EACf8C,SAAU,SAAAb,GACRhC,SAAAA,EAAwBgC,EACzB,EACDc,~~YAAa~~,WAAA,~~OAAMnC~~,~~gBAAC+B~~,~~EAAa~~,~~CAACC~~,UAAU,~~SAAU~~,~~EACtDjC~~,gBAAiBA,KAuBvBC,EAACC,cAAA8B,EAAgB,OAGrB/B,EAAAC,~~cAACmC~~,EAAc,MAGrB"}
1	+ {"version":3,"file":"MultiSelectTrigger.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/MultiSelectTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport MultiSelectedValues from \"../MultiSelectedValues/MultiSelectedValues\";\nimport DropdownInput from \"./DropdownInput\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\nimport TriggerActions from \"./TriggerActions\";\nimport styles from \"./Trigger.module.scss\";\nimport { getStyle } from \"../../../../../helpers/typesciptCssModulesHelper\";\nimport cx from \"classnames\";\nimport DropdownChip from \"./DropdownChip\";\n\nconst MultiSelectTrigger = () => {\n const {\n selectedItems = [],\n contextOnOptionRemove,\n multiline,\n disabled,\n readOnly,\n error,\n size,\n searchable,\n getToggleButtonProps,\n label,\n getLabelProps,\n ariaLabel,\n minVisibleCount\n } = useDropdownContext<BaseItemData>();\n\n return (\n <Flex justify=\"space-between\" align=\"center\">\n <div\n className={cx(styles.triggerWrapper, getStyle(styles, size))}\n {...(!searchable\n ? getToggleButtonProps({\n \"aria-haspopup\": \"dialog\",\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": ariaLabel \|\| (label ? undefined : getLabelProps()?.id),\n \"aria-disabled\": disabled ? \"true\" : undefined,\n \"aria-invalid\": error ? \"true\" : undefined,\n \"aria-readonly\": readOnly ? \"true\" : undefined\n })\n : {})}\n >\n {selectedItems.length > 0 ? (\n <div className={styles.multiWrapper}>\n {!multiline ? (\n <MultiSelectedValues\n disabled={disabled}\n readOnly={readOnly}\n selectedItems={selectedItems}\n onRemove={item => {\n contextOnOptionRemove?.(item);\n }}\n renderInput={searchable ? () => <DropdownInput inputSize=\"small\" fullWidth /> : undefined}\n minVisibleCount={minVisibleCount}\n />\n ) : (\n <Flex gap=\"xs\" wrap>\n {selectedItems.map((item, index) => (\n <Flex key={String(item.id ?? item.value ?? index)}>\n <div style={{ flexShrink: 0 }}>\n <DropdownChip\n item={item}\n onDelete={() => {\n contextOnOptionRemove?.(item);\n }}\n readOnly={readOnly}\n disabled={disabled}\n />\n </div>\n {index === selectedItems.length - 1 && <DropdownInput inputSize=\"small\" />}\n </Flex>\n ))}\n </Flex>\n )}\n </div>\n ) : (\n <DropdownInput />\n )}\n </div>\n <TriggerActions />\n </Flex>\n );\n};\n\nexport default MultiSelectTrigger;\n"],"names":["MultiSelectTrigger","_useDropdownContext","useDropdownContext","_useDropdownContext$s","selectedItems","contextOnOptionRemove","multiline","disabled","readOnly","error","searchable","getToggleButtonProps","label","getLabelProps","ariaLabel","minVisibleCount","React","createElement","Flex","justify","align","Object","assign","className","cx","styles","triggerWrapper","getStyle","size","id","undefined","_a","length","multiWrapper","gap","wrap","map","item","index","key","_b","value","String","style","flexShrink","DropdownChip","onDelete","DropdownInput","inputSize","MultiSelectedValues","onRemove","renderInput","fullWidth","TriggerActions"],"mappings":"ocAYA,IAAMA,EAAqB,iBACzBC,EAcIC,IAAkCC,EAAAF,EAbpCG,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAqBJ,EAArBI,sBACAC,EAASL,EAATK,UACAC,EAAQN,EAARM,SACAC,EAAQP,EAARO,SACAC,EAAKR,EAALQ,MAEAC,EAAUT,EAAVS,WACAC,EAAoBV,EAApBU,qBACAC,EAAKX,EAALW,MACAC,EAAaZ,EAAbY,cACAC,EAASb,EAATa,UACAC,EAAed,EAAfc,gBAGF,OACEC,EAACC,cAAAC,EAAK,CAAAC,QAAQ,gBAAgBC,MAAM,UAClCJ,EAAAC,cAAA,MAAAI,OAAAC,OAAA,CACEC,UAAWC,EAAGC,EAAOC,eAAgBC,EAASF,EAZ9CxB,EAAJ2B,QAaUlB,EASF,CAAA,EARAC,EAAqB,CACnB,gBAAiB,SACjB,kBAAmBC,EAAQC,IAAgBgB,QAAKC,EAChD,aAAchB,IAAcF,GAAmC,QAAfmB,EAAAlB,WAAe,IAAAkB,OAA3BD,EAA2BC,EAAEF,IACjE,gBAAiBtB,EAAW,YAASuB,EACrC,eAAgBrB,EAAQ,YAASqB,EACjC,gBAAiBtB,EAAW,YAASsB,KAI1C1B,EAAc4B,OAAS,EACtBhB,uBAAKO,UAAWE,EAAOQ,cACnB3B,EAYAU,EAACC,cAAAC,EAAK,CAAAgB,IAAI,KAAKC,MAAI,GAChB/B,EAAcgC,KAAI,SAACC,EAAMC,WAAU,OAClCtB,EAACC,cAAAC,GAAKqB,KAAiC,QAArBC,EAAW,UAAXH,EAAKR,UAAM,IAAAE,EAAAA,EAAAM,EAAKI,aAAK,IAAAD,EAAAA,EAAIF,GAAhCI,IACT1B,EAAAC,cAAA,MAAA,CAAK0B,MAAO,CAAEC,WAAY,IACxB5B,EAACC,cAAA4B,GACCR,KAAMA,EACNS,SAAU,WACRzC,SAAAA,EAAwBgC,EACzB,EACD7B,SAAUA,EACVD,SAAUA,KAGb+B,IAAUlC,EAAc4B,OAAS,GAAKhB,EAAAC,cAAC8B,EAAa,CAACC,UAAU,UAEnE,KA1BHhC,EAACC,cAAAgC,GACC1C,SAAUA,EACVC,SAAUA,EACVJ,cAAeA,EACf8C,SAAU,SAAAb,GACRhC,SAAAA,EAAwBgC,EACzB,EACDc,YAAazC,EAAa,WAAA,OAAMM,EAAAC,cAAC8B,EAAc,CAAAC,UAAU,QAAQI,cAAY,OAAGtB,EAChFf,gBAAiBA,KAuBvBC,EAACC,cAAA8B,EAAgB,OAGrB/B,EAAAC,cAACoC,EAAc,MAGrB"}

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/Trigger.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={triggerWrapper:"triggerWrapper",small:"small",medium:"medium",large:"large",inputWrapper:"inputWrapper",multiSelected:"multiSelected",hasSelected:"hasSelected",selectedItem:"selectedItem",faded:"faded",placeholderText:"placeholderText",disabled:"disabled",multiWrapper:"multiWrapper",actionsWrapper:"actionsWrapper"};!function(e){const n="s_id-03657525809b_3_82_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.triggerWrapper {\n  flex-grow: 1;\n  position: relative;\n  min-width: 1px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n}\n.triggerWrapper.small {\n  min-height: 32px;\n}\n.triggerWrapper.medium {\n  min-height: 40px;\n}\n.triggerWrapper.large {\n  min-height: 48px;\n}\n.triggerWrapper .inputWrapper {\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n.triggerWrapper .inputWrapper.small {\n  height: 24px;\n  min-height: 24px;\n}\n.triggerWrapper .inputWrapper.multiSelected {\n  width: 48px;\n  flex-shrink: 0;\n  padding: 0 var(--spacing-xs);\n}\n.triggerWrapper .inputWrapper.hasSelected {\n  position: absolute;\n  inset: 0;\n  cursor: pointer;\n}\n.triggerWrapper .selectedItem {\n  position: relative;\n  pointer-events: none;\n  inset: 0;\n  padding-inline-start: var(--spacing-xs);\n  width: 100%;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper .selectedItem.small {\n  padding-inline-start: var(--spacing-small);\n  min-height: 32px;\n  height: 32px;\n}\n.triggerWrapper .selectedItem.medium {\n  min-height: 40px;\n  height: 40px;\n}\n.triggerWrapper .selectedItem.large {\n  min-height: 48px;\n  height: 48px;\n}\n.triggerWrapper .selectedItem.faded {\n  opacity: 0.6;\n}\n.triggerWrapper .placeholderText {\n  padding-inline-start: var(--spacing-medium);\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper .placeholderText.disabled {\n  color: var(--disabled-text-color);\n}\n.multiWrapper {\n  padding: var(--spacing-xs) var(--spacing-small);\n  width: 100%;\n}\n.actionsWrapper {\n  padding: 0 var(--spacing-xs);\n}");export{e as default};
+var e={triggerWrapper:"triggerWrapper",small:"small",medium:"medium",large:"large",inputWrapper:"inputWrapper",multiSelected:"multiSelected",fullWidth:"fullWidth",hasSelected:"hasSelected",selectedItem:"selectedItem",faded:"faded",placeholderText:"placeholderText",disabled:"disabled",multiWrapper:"multiWrapper",actionsWrapper:"actionsWrapper"};!function(e){const n="s_id-ee38598d1c53_3_83_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.triggerWrapper {\n  flex-grow: 1;\n  position: relative;\n  min-width: 1px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n}\n.triggerWrapper.small {\n  min-height: 32px;\n}\n.triggerWrapper.medium {\n  min-height: 40px;\n}\n.triggerWrapper.large {\n  min-height: 48px;\n}\n.triggerWrapper .inputWrapper {\n  border: none;\n  width: 100%;\n  background: transparent;\n}\n.triggerWrapper .inputWrapper.small {\n  height: 24px;\n  min-height: 24px;\n}\n.triggerWrapper .inputWrapper.multiSelected {\n  width: 48px;\n  flex-shrink: 0;\n  padding: 0 var(--spacing-xs);\n}\n.triggerWrapper .inputWrapper.multiSelected.fullWidth {\n  width: 100%;\n  flex-grow: 1;\n}\n.triggerWrapper .inputWrapper.hasSelected {\n  position: absolute;\n  inset: 0;\n  cursor: pointer;\n}\n.triggerWrapper .selectedItem {\n  position: relative;\n  pointer-events: none;\n  inset: 0;\n  padding-inline-start: var(--spacing-xs);\n  width: 100%;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper .selectedItem.small {\n  padding-inline-start: var(--spacing-small);\n  min-height: 32px;\n  height: 32px;\n}\n.triggerWrapper .selectedItem.medium {\n  min-height: 40px;\n  height: 40px;\n}\n.triggerWrapper .selectedItem.large {\n  min-height: 48px;\n  height: 48px;\n}\n.triggerWrapper .selectedItem.faded {\n  opacity: 0.6;\n}\n.triggerWrapper .placeholderText {\n  padding-inline-start: var(--spacing-medium);\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper .placeholderText.disabled {\n  color: var(--disabled-text-color);\n}\n.multiWrapper {\n  padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-small);\n  width: 100%;\n}\n.actionsWrapper {\n  padding: 0 var(--spacing-xs);\n}");export{e as default};
 //# sourceMappingURL=Trigger.module.scss.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/TriggerActions.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"react";import{CloseSmall as o,DropdownChevronUp as t,DropdownChevronDown as a}from"@vibe/icons";import r from"../../../../IconButton/IconButton.js";import{Flex as i}from"@vibe/layout/mockedClassNames";import{Loader as l}from"@vibe/loader/mockedClassNames";import n from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";var m={large:"medium",medium:"small",small:"xs"},d=function(){var d=s(),c=d.isOpen,p=d.reset,u=d.contextOnClear,b=d.disabled,f=d.clearable,g=d.selectedItems,x=void 0===g?[]:g,v=d.toggleMenu,C=d.getMenuProps,E=d.clearAriaLabel,y=d.boxMode,I=d.multi?(null==x?void 0:x.length)>0:!!d.selectedItem,k=m[d.size]||"small";return d.readOnly?null:e.createElement("div",{onKeyDown:function(e){e.stopPropagation()}},e.createElement(i,{className:n.actionsWrapper},d.loading&&e.createElement(l,{size:"xs"===k?16:"small"===k?20:24,color:"secondary"}),I&&f&&!b&&e.createElement(r,{"data-testid":"dropdown-clear-button",icon:o,onClick:function(e){e.stopPropagation(),u?u():p()},size:k,ariaLabel:E,hideTooltip:!0}),!y&&e.createElement(r,{icon:c?t:a,size:k,disabled:b,ariaControls:C().id,ariaExpanded:c,ariaLabeledBy:C().id,tabIndex:-1,onClick:function(){v()}})))};export{d as default};
+import e from"react";import{CloseSmall as o,DropdownChevronUp as a,DropdownChevronDown as t}from"@vibe/icons";import{IconButton as r}from"@vibe/icon-button/mockedClassNames";import{Flex as i}from"@vibe/layout/mockedClassNames";import{Loader as l}from"@vibe/loader/mockedClassNames";import n from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";var m={large:"medium",medium:"small",small:"xs"},d=function(){var d=s(),c=d.isOpen,p=d.reset,u=d.contextOnClear,b=d.disabled,f=d.clearable,g=d.selectedItems,v=void 0===g?[]:g,x=d.toggleMenu,C=d.getMenuProps,E=d.clearAriaLabel,k=d.boxMode,y=d.multi?(null==v?void 0:v.length)>0:!!d.selectedItem,z=m[d.size]||"small";return d.readOnly?null:e.createElement("div",{onKeyDown:function(e){e.stopPropagation()}},e.createElement(i,{className:n.actionsWrapper},d.loading&&e.createElement(l,{size:"xs"===z?16:"small"===z?20:24,color:"secondary"}),y&&f&&!b&&e.createElement(r,{"data-testid":"dropdown-clear-button",icon:o,onClick:function(e){e.stopPropagation(),u?u():p()},size:z,ariaLabel:E,hideTooltip:!0}),!k&&e.createElement(r,{icon:c?a:t,size:z,disabled:b,ariaControls:C().id,ariaExpanded:c,ariaLabeledBy:C().id,tabIndex:-1,onClick:function(){x()}})))};export{d as default};
 //# sourceMappingURL=TriggerActions.js.map

package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/TriggerActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TriggerActions.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/TriggerActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloseSmall, DropdownChevronDown, DropdownChevronUp } from \"@vibe/icons\";\nimport { IconButton } from \"~~../../../../IconButton~~\";\nimport { Flex } from \"@vibe/layout\";\nimport { Loader } from \"@vibe/loader\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\n\nconst sizeMap = {\n large: \"medium\",\n medium: \"small\",\n small: \"xs\"\n} as const;\n\nconst TriggerActions = () => {\n const {\n isOpen,\n reset,\n contextOnClear,\n size,\n disabled,\n clearable,\n readOnly,\n multi,\n selectedItem,\n selectedItems = [],\n toggleMenu,\n getMenuProps,\n loading,\n clearAriaLabel,\n boxMode\n } = useDropdownContext<BaseItemData>();\n\n const hasSelection = multi ? selectedItems?.length > 0 : !!selectedItem;\n const iconButtonSize = sizeMap[size] \|\| \"small\";\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (contextOnClear) {\n contextOnClear();\n } else {\n reset();\n }\n };\n\n if (readOnly) {\n return null;\n }\n\n return (\n <div\n onKeyDown={e => {\n e.stopPropagation();\n }}\n >\n <Flex className={styles.actionsWrapper}>\n {loading && (\n <Loader size={iconButtonSize === \"xs\" ? 16 : iconButtonSize === \"small\" ? 20 : 24} color=\"secondary\" />\n )}\n {hasSelection && clearable && !disabled && (\n <IconButton\n data-testid=\"dropdown-clear-button\"\n icon={CloseSmall}\n onClick={handleClear}\n size={iconButtonSize}\n ariaLabel={clearAriaLabel}\n hideTooltip\n />\n )}\n {!boxMode && (\n <IconButton\n icon={isOpen ? DropdownChevronUp : DropdownChevronDown}\n size={iconButtonSize}\n disabled={disabled}\n ariaControls={getMenuProps().id}\n ariaExpanded={isOpen}\n ariaLabeledBy={getMenuProps().id}\n tabIndex={-1}\n onClick={() => {\n toggleMenu();\n }}\n />\n )}\n </Flex>\n </div>\n );\n};\n\nexport default TriggerActions;\n"],"names":["sizeMap","large","medium","small","TriggerActions","_useDropdownContext","useDropdownContext","isOpen","reset","contextOnClear","disabled","clearable","_useDropdownContext$s","selectedItems","toggleMenu","getMenuProps","clearAriaLabel","boxMode","hasSelection","multi","length","selectedItem","iconButtonSize","size","readOnly","React","createElement","onKeyDown","e","stopPropagation","Flex","className","styles","actionsWrapper","loading","Loader","color","IconButton","icon","CloseSmall","onClick","ariaLabel","hideTooltip","DropdownChevronUp","DropdownChevronDown","ariaControls","id","ariaExpanded","ariaLabeledBy","tabIndex"],"mappings":"~~4XASA~~,IAAMA,EAAU,CACdC,MAAO,SACPC,OAAQ,QACRC,MAAO,MAGHC,EAAiB,WACrB,IAAAC,EAgBIC,IAfFC,EAAMF,EAANE,OACAC,EAAKH,EAALG,MACAC,EAAcJ,EAAdI,eAEAC,EAAQL,EAARK,SACAC,EAASN,EAATM,UAGYC,EAAAP,EACZQ,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAUT,EAAVS,WACAC,EAAYV,EAAZU,aAEAC,EAAcX,EAAdW,eACAC,EAAOZ,EAAPY,QAGIC,EAVCb,EAALc,OAU2BN,aAAa,EAAbA,EAAeO,QAAS,IATvCf,EAAZgB,aAUIC,EAAiBtB,EAfjBK,EAAJkB,OAesC,QAWxC,OAvBUlB,EAARmB,SAwBO,KAIPC,EACEC,cAAA,MAAA,CAAAC,UAAW,SAAAC,GACTA,EAAEC,iBACJ,GAEAJ,EAAAC,cAACI,EAAK,CAAAC,UAAWC,EAAOC,gBA3BnB5B,EAAP6B,SA6BMT,EAACC,cAAAS,GAAOZ,KAAyB,OAAnBD,EAA0B,GAAwB,UAAnBA,EAA6B,GAAK,GAAIc,MAAM,cAE1FlB,GAAgBP,IAAcD,GAC7Be,EAAAC,cAACW,EAAU,CAAA,cACG,wBACZC,KAAMC,EACNC,QA3BU,SAACZ,GACnBA,EAAEC,kBACEpB,EACFA,IAEAD,KAuBMe,KAAMD,EACNmB,UAAWzB,EACX0B,kBAGFzB,GACAQ,EAACC,cAAAW,GACCC,KAAM/B,EAASoC,EAAoBC,EACnCrB,KAAMD,EACNZ,SAAUA,EACVmC,aAAc9B,IAAe+B,GAC7BC,aAAcxC,EACdyC,cAAejC,IAAe+B,GAC9BG,UAAW,EACXT,QAAS,WACP1B,GACF,KAMZ"}
1	+ {"version":3,"file":"TriggerActions.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/TriggerActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { CloseSmall, DropdownChevronDown, DropdownChevronUp } from \"@vibe/icons\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Flex } from \"@vibe/layout\";\nimport { Loader } from \"@vibe/loader\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../../BaseItem\";\n\nconst sizeMap = {\n large: \"medium\",\n medium: \"small\",\n small: \"xs\"\n} as const;\n\nconst TriggerActions = () => {\n const {\n isOpen,\n reset,\n contextOnClear,\n size,\n disabled,\n clearable,\n readOnly,\n multi,\n selectedItem,\n selectedItems = [],\n toggleMenu,\n getMenuProps,\n loading,\n clearAriaLabel,\n boxMode\n } = useDropdownContext<BaseItemData>();\n\n const hasSelection = multi ? selectedItems?.length > 0 : !!selectedItem;\n const iconButtonSize = sizeMap[size] \|\| \"small\";\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (contextOnClear) {\n contextOnClear();\n } else {\n reset();\n }\n };\n\n if (readOnly) {\n return null;\n }\n\n return (\n <div\n onKeyDown={e => {\n e.stopPropagation();\n }}\n >\n <Flex className={styles.actionsWrapper}>\n {loading && (\n <Loader size={iconButtonSize === \"xs\" ? 16 : iconButtonSize === \"small\" ? 20 : 24} color=\"secondary\" />\n )}\n {hasSelection && clearable && !disabled && (\n <IconButton\n data-testid=\"dropdown-clear-button\"\n icon={CloseSmall}\n onClick={handleClear}\n size={iconButtonSize}\n ariaLabel={clearAriaLabel}\n hideTooltip\n />\n )}\n {!boxMode && (\n <IconButton\n icon={isOpen ? DropdownChevronUp : DropdownChevronDown}\n size={iconButtonSize}\n disabled={disabled}\n ariaControls={getMenuProps().id}\n ariaExpanded={isOpen}\n ariaLabeledBy={getMenuProps().id}\n tabIndex={-1}\n onClick={() => {\n toggleMenu();\n }}\n />\n )}\n </Flex>\n </div>\n );\n};\n\nexport default TriggerActions;\n"],"names":["sizeMap","large","medium","small","TriggerActions","_useDropdownContext","useDropdownContext","isOpen","reset","contextOnClear","disabled","clearable","_useDropdownContext$s","selectedItems","toggleMenu","getMenuProps","clearAriaLabel","boxMode","hasSelection","multi","length","selectedItem","iconButtonSize","size","readOnly","React","createElement","onKeyDown","e","stopPropagation","Flex","className","styles","actionsWrapper","loading","Loader","color","IconButton","icon","CloseSmall","onClick","ariaLabel","hideTooltip","DropdownChevronUp","DropdownChevronDown","ariaControls","id","ariaExpanded","ariaLabeledBy","tabIndex"],"mappings":"wYASA,IAAMA,EAAU,CACdC,MAAO,SACPC,OAAQ,QACRC,MAAO,MAGHC,EAAiB,WACrB,IAAAC,EAgBIC,IAfFC,EAAMF,EAANE,OACAC,EAAKH,EAALG,MACAC,EAAcJ,EAAdI,eAEAC,EAAQL,EAARK,SACAC,EAASN,EAATM,UAGYC,EAAAP,EACZQ,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAUT,EAAVS,WACAC,EAAYV,EAAZU,aAEAC,EAAcX,EAAdW,eACAC,EAAOZ,EAAPY,QAGIC,EAVCb,EAALc,OAU2BN,aAAa,EAAbA,EAAeO,QAAS,IATvCf,EAAZgB,aAUIC,EAAiBtB,EAfjBK,EAAJkB,OAesC,QAWxC,OAvBUlB,EAARmB,SAwBO,KAIPC,EACEC,cAAA,MAAA,CAAAC,UAAW,SAAAC,GACTA,EAAEC,iBACJ,GAEAJ,EAAAC,cAACI,EAAK,CAAAC,UAAWC,EAAOC,gBA3BnB5B,EAAP6B,SA6BMT,EAACC,cAAAS,GAAOZ,KAAyB,OAAnBD,EAA0B,GAAwB,UAAnBA,EAA6B,GAAK,GAAIc,MAAM,cAE1FlB,GAAgBP,IAAcD,GAC7Be,EAAAC,cAACW,EAAU,CAAA,cACG,wBACZC,KAAMC,EACNC,QA3BU,SAACZ,GACnBA,EAAEC,kBACEpB,EACFA,IAEAD,KAuBMe,KAAMD,EACNmB,UAAWzB,EACX0B,kBAGFzB,GACAQ,EAACC,cAAAW,GACCC,KAAM/B,EAASoC,EAAoBC,EACnCrB,KAAMD,EACNZ,SAAUA,EACVmC,aAAc9B,IAAe+B,GAC7BC,aAAcxC,EACdyC,cAAejC,IAAe+B,GAC9BG,UAAW,EACXT,QAAS,WACP1B,GACF,KAMZ"}