npm - @vibe/core - Versions diffs - 3.87.0 → 4.0.0-alpha.1 - Mend

@vibe/core 3.87.0 → 4.0.0-alpha.1

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

package/dist/src/components/Slider/SliderHooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderHooks.js","sources":["../../../../src/components/Slider/SliderHooks.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useResizeObserver } from \"@vibe/hooks\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { UPDATE_SLIDER_SIZE_DEBOUNCE } from \"./SliderConstants\";\nimport { ensureValueText } from \"./SliderHelpers\";\n\nfunction _useIsStateControlledFromOutside(value: number \| number[]): boolean {\n const [isControlled] = useState(typeof value !== \"undefined\");\n return isControlled;\n}\n\nfunction _useSliderValue(\n defaultValue: number \| number[],\n isControlled: boolean,\n value: number \| number[]\n): [number \| number[], (value: number \| number[]) => void] {\n const initialValue = isControlled ? value : defaultValue;\n const [internalStateValue, setInternalStateValue] = useState(initialValue);\n if (isControlled) {\n return [value as number, NOOP];\n }\n return [internalStateValue, setInternalStateValue];\n}\n\nexport function useSliderActionsContextValue(\n actualValue: number \| number[],\n focused: number,\n getDragging: () => number,\n getSelectedValue: () => number \| number[],\n max: number,\n min: number,\n onChange: (value: number \| number[]) => void,\n ranged: boolean,\n setActive: (value: number) => void,\n setFocused: (value: number) => void,\n setDragging: (value: number) => void,\n setSelectedValue: (value: number \| number[]) => void,\n step: number\n) {\n const _changeValueOrValues = useCallback(\n (newValueOrValues: number \| number[]) => {\n setSelectedValue(newValueOrValues);\n if (typeof onChange === \"function\") {\n onChange(newValueOrValues);\n }\n },\n [setSelectedValue, onChange]\n );\n\n const _validateValue = useCallback(\n (index: number, newValue: number \| number[] \| string): number => {\n if (newValue === \"\" \|\| Number.isNaN(Number(newValue))) {\n return index === 1 ? max : min;\n }\n if (newValue > max) {\n return max;\n }\n if (newValue < min) {\n return min;\n }\n return newValue as number;\n },\n [min, max]\n );\n\n const _calculateNewValues = useCallback(\n (thumb: { index: number; newValue: number \| number[] \| string }): number[] => {\n const [startValue, endValue] = [...(getSelectedValue() as number[])];\n if (thumb.index === 1) {\n return [startValue, _validateValue(thumb.index, thumb.newValue)];\n }\n return [_validateValue(thumb.index, thumb.newValue), endValue];\n },\n [_validateValue, getSelectedValue]\n );\n\n const _manageRangedValues = useCallback(\n (thumb: { index: number; newValue: number \| number[] \| string }, switchCb: (value: number) => void = NOOP) => {\n const [startValue, endValue] = _calculateNewValues(thumb);\n if (startValue < endValue) {\n // no need to switch, same thumb stay active\n return [startValue, endValue];\n }\n // switch active thumb + end and start values\n switchCb(thumb.index === 0 ? 1 : 0);\n return [endValue, startValue];\n },\n [_calculateNewValues]\n );\n\n const _switchDraggingThumb = useCallback(\n (switchTo: number) => {\n setActive(switchTo);\n setFocused(switchTo);\n setDragging(switchTo);\n },\n [setActive, setFocused, setDragging]\n );\n\n const changeThumbValue = useCallback(\n (newValue: number \| string, thumbIndex: number = undefined, cancelFocus = false) => {\n if (!ranged) {\n _changeValueOrValues(_validateValue(null, newValue));\n return;\n }\n const currentThumb = { newValue, index: thumbIndex ?? focused };\n const switchCb = cancelFocus ? NOOP : setFocused;\n const newValues = _manageRangedValues(currentThumb, switchCb);\n _changeValueOrValues(newValues);\n },\n [_changeValueOrValues, _manageRangedValues, _validateValue, focused, ranged, setFocused]\n );\n\n const drugThumb = useCallback(\n (newValue: number \| number[]) => {\n if (!ranged) {\n _changeValueOrValues(_validateValue(null, newValue));\n return;\n }\n const currentThumb = { newValue, index: getDragging() ?? 0 };\n const newValues = _manageRangedValues(currentThumb, _switchDraggingThumb);\n _changeValueOrValues(newValues);\n },\n [_changeValueOrValues, _manageRangedValues, _switchDraggingThumb, _validateValue, getDragging, ranged]\n );\n\n const decreaseValue = useCallback(\n (consumerStep: number) => {\n const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n if (currentValue === min) {\n return;\n }\n const finalStep = consumerStep \|\| step;\n const newValue = currentValue - finalStep;\n changeThumbValue(newValue);\n },\n [actualValue, changeThumbValue, focused, min, ranged, step]\n );\n\n const increaseValue = useCallback(\n (consumerStep?: number) => {\n const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n if (currentValue === max) {\n return;\n }\n const finalStep = consumerStep \|\| step;\n const newValue = currentValue + finalStep;\n changeThumbValue(newValue);\n },\n [actualValue, changeThumbValue, focused, max, ranged, step]\n );\n\n return useMemo(\n () => ({\n changeThumbValue,\n decreaseValue,\n drugThumb,\n increaseValue,\n setActive,\n setDragging,\n setFocused\n }),\n [changeThumbValue, decreaseValue, drugThumb, increaseValue, setActive, setDragging, setFocused]\n );\n}\n\nexport function useDragging(): [number, (value: number) => void, () => number] {\n const [dragging, setStateDragging] = useState<number>(null);\n const draggingRef = useRef(null);\n\n const setDragging = useCallback(\n (index: number) => {\n setStateDragging(index);\n draggingRef.current = index;\n },\n [setStateDragging, draggingRef]\n );\n const getDragging = useCallback(() => draggingRef.current, [draggingRef]);\n return [dragging, setDragging, getDragging];\n}\n\nexport function useSliderRail() {\n const railRef = useRef(null);\n const [railCoords, setRailCoords] = useState({ left: 0, right: 100, width: 100 });\n\n const defineRailCoords = useCallback(() => {\n if (!railRef.current) {\n return;\n }\n const railRect = railRef.current.getBoundingClientRect();\n const { left, right, width } = railRect;\n setRailCoords({ left, right, width });\n }, [railRef, setRailCoords]);\n\n useResizeObserver({\n ref: railRef,\n callback: defineRailCoords,\n debounceTime: UPDATE_SLIDER_SIZE_DEBOUNCE\n });\n\n useEffect(() => {\n defineRailCoords();\n }, [defineRailCoords]);\n\n return { railCoords, railRef };\n}\n\nexport function useSliderValues(\n defaultValue: number \| number[],\n value: number \| number[],\n valueFormatter: (value: number) => string,\n valueText: string\n): {\n actualValue: number \| number[];\n actualValueText: string \| string[];\n getSelectedValue: () => number \| number[];\n isControlled: boolean;\n setSelectedValue: (value: number) => void;\n} {\n const isControlled = _useIsStateControlledFromOutside(value);\n const [actualValue, setStateSelectedValue] = _useSliderValue(defaultValue, isControlled, value);\n const valueRef = useRef(actualValue);\n\n // Update ref when actualValue was changed from outside in controlled mode\n useEffect(() => {\n if (isControlled && valueRef.current !== actualValue) {\n valueRef.current = actualValue;\n }\n }, [isControlled, actualValue]);\n\n const setSelectedValue = useCallback(\n (newValue: number) => {\n setStateSelectedValue(newValue);\n valueRef.current = newValue;\n },\n [valueRef, setStateSelectedValue]\n );\n\n const getSelectedValue = () => valueRef.current;\n\n const actualValueText = ensureValueText(valueText, actualValue, valueFormatter);\n return { actualValue, actualValueText, getSelectedValue, isControlled, setSelectedValue };\n}\n"],"names":["useSliderActionsContextValue","actualValue","focused","getDragging","getSelectedValue","max","min","onChange","ranged","setActive","setFocused","setDragging","setSelectedValue","step","_changeValueOrValues","useCallback","newValueOrValues","_validateValue","index","newValue","Number","isNaN","_calculateNewValues","thumb","_ref","_toConsumableArray","endValue","_manageRangedValues","switchCb","arguments","length","undefined","NOOP","_calculateNewValues2","_calculateNewValues3","_slicedToArray","startValue","_switchDraggingThumb","switchTo","changeThumbValue","thumbIndex","newValues","drugThumb","currentThumb","_a","decreaseValue","consumerStep","currentValue","increaseValue","useMemo","useDragging","_useState5","useState","_useState6","dragging","setStateDragging","draggingRef","useRef","current","useSliderRail","railRef","_useState7","left","right","width","_useState8","railCoords","setRailCoords","defineRailCoords","railRect","getBoundingClientRect","useResizeObserver","ref","callback","debounceTime","UPDATE_SLIDER_SIZE_DEBOUNCE","useEffect","useSliderValues","defaultValue","value","valueFormatter","valueText","isControlled","_useState","_useIsStateControlledFromOutside","_useSliderValue2","_useState3","_useState4","_useSliderValue","_useSliderValue3","setStateSelectedValue","valueRef","actualValueText","ensureValueText"],"mappings":"2aAwBM,SAAUA,EACdC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAuBC,GAC3B,SAACC,GACCJ,EAAiBI,GACO,mBAAbT,GACTA,EAASS,EAEb,GACA,CAACJ,EAAkBL,IAGfU,EAAiBF,GACrB,SAACG,EAAeC,GACd,MAAiB,KAAbA,GAAmBC,OAAOC,MAAMD,OAAOD,IACxB,IAAVD,EAAcb,EAAMC,EAEzBa,EAAWd,EACNA,EAEMC,EAAXa,EACKb,EAEFa,CACT,GACA,CAACb,EAAKD,IAGFiB,EAAsBP,GAC1B,SAACQ,GACC,IAAAC,EAAAC,EAAoCrB,KAAjBsB,EAAQF,EAAA,GAC3B,OAAoB,IAAhBD,EAAML,MACD,CAFQM,EAAA,GAEKP,EAAeM,EAAML,MAAOK,EAAMJ,WAEjD,CAACF,EAAeM,EAAML,MAAOK,EAAMJ,UAAWO,EACvD,GACA,CAACT,EAAgBb,IAGbuB,EAAsBZ,GAC1B,SAACQ,GAA4G,IAA5CK,EAAAC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAoCG,EACnGC,EAA+BX,EAAoBC,GAAMW,EAAAC,EAAAF,EAAA,GAAlDG,EAAUF,EAAA,GAAER,EAAQQ,EAAA,GAC3B,OAAiBR,EAAbU,EAEK,CAACA,EAAYV,IAGtBE,EAAyB,IAAhBL,EAAML,MAAc,EAAI,GAC1B,CAACQ,EAAUU,GACpB,GACA,CAACd,IAGGe,EAAuBtB,GAC3B,SAACuB,GACC7B,EAAU6B,GACV5B,EAAW4B,GACX3B,EAAY2B,EACb,GACD,CAAC7B,EAAWC,EAAYC,IAGpB4B,EAAmBxB,GACvB,SAACI,GAAkF,IAAvDqB,EAAqBX,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,QAAAE,EAC/C,GAAKvB,EAAL,CAIA,IAEMiC,EAAYd,EAFG,CAAER,SAAAA,EAAUD,MAAOsB,QAAAA,EAActC,GALe2B,UAAAC,OAAA,QAAAC,IAAAF,UAAA,IAAAA,UAAA,GAMtCG,EAAOtB,GAEtCI,EAAqB2B,EAJpB,MAFC3B,EAAqBG,EAAe,KAAME,GAO9C,GACA,CAACL,EAAsBa,EAAqBV,EAAgBf,EAASM,EAAQE,IAGzEgC,EAAY3B,GAChB,SAACI,SACC,GAAKX,EAAL,CAIA,IAAMmC,EAAe,CAAExB,SAAAA,EAAUD,MAAwB,QAAjB0B,EAAAzC,WAAiB,IAAAyC,EAAAA,EAAA,GACnDH,EAAYd,EAAoBgB,EAAcN,GACpDvB,EAAqB2B,EAHpB,MAFC3B,EAAqBG,EAAe,KAAME,GAM9C,GACA,CAACL,EAAsBa,EAAqBU,EAAsBpB,EAAgBd,EAAaK,IAG3FqC,EAAgB9B,GACpB,SAAC+B,GACC,IAAMC,EAAevC,EAAUP,EAAyBC,GAAYD,EAChE8C,IAAiBzC,GAKrBiC,EADiBQ,GADCD,GAAgBjC,GAGpC,GACA,CAACZ,EAAasC,EAAkBrC,EAASI,EAAKE,EAAQK,IAGlDmC,EAAgBjC,GACpB,SAAC+B,GACC,IAAMC,EAAevC,EAAUP,EAAyBC,GAAYD,EAChE8C,IAAiB1C,GAKrBkC,EADiBQ,GADCD,GAAgBjC,GAGpC,GACA,CAACZ,EAAasC,EAAkBrC,EAASG,EAAKG,EAAQK,IAGxD,OAAOoC,GACL,WAAA,MAAO,CACLV,iBAAAA,EACAM,cAAAA,EACAH,UAAAA,EACAM,cAAAA,EACAvC,UAAAA,EACAE,YAAAA,EACAD,WAAAA,EACD,GACD,CAAC6B,EAAkBM,EAAeH,EAAWM,EAAevC,EAAWE,EAAaD,GAExF,UAEgBwC,IACd,IAAAC,EAAqCC,EAAiB,MAAKC,EAAAlB,EAAAgB,EAAA,GAApDG,EAAQD,EAAA,GAAEE,EAAgBF,EAAA,GAC3BG,EAAcC,EAAO,MAU3B,MAAO,CAACH,EARYvC,GAClB,SAACG,GACCqC,EAAiBrC,GACjBsC,EAAYE,QAAUxC,CACxB,GACA,CAACqC,EAAkBC,IAEDzC,GAAY,WAAA,OAAMyC,EAAYE,UAAS,CAACF,IAE9D,UAEgBG,IACd,IAAMC,EAAUH,EAAO,MACvBI,EAAoCT,EAAS,CAAEU,KAAM,EAAGC,MAAO,IAAKC,MAAO,MAAMC,EAAA9B,EAAA0B,EAAA,GAA1EK,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAE1BG,EAAmBrD,GAAY,WACnC,GAAK6C,EAAQF,QAAb,CAGA,IAAMW,EAAWT,EAAQF,QAAQY,wBAEjCH,EAAc,CAAEL,KADeO,EAAvBP,KACcC,MADSM,EAAjBN,MACeC,MADEK,EAAVL,OAFpB,CAIH,GAAG,CAACJ,EAASO,IAYb,OAVAI,EAAkB,CAChBC,IAAKZ,EACLa,SAAUL,EACVM,aAAcC,IAGhBC,GAAU,WACRR,GACF,GAAG,CAACA,IAEG,CAAEF,WAAAA,EAAYN,QAAAA,EACvB,CAEM,SAAUiB,EACdC,EACAC,EACAC,EACAC,GAQA,IAAMC,EArNR,SAA0CH,GACxC,IAAAI,EAAuB/B,OAA0B,IAAV2B,GACvC,OAD6D5C,EAAAgD,EAAA,GAA1C,EAErB,CAkNuBC,CAAiCL,GACtDM,EAjNF,SACEP,EACAI,EACAH,GAEA,IACAO,EAAoDlC,EAD/B8B,EAAeH,EAAQD,GAC8BS,EAAApD,EAAAmD,EAAA,GAC1E,OAAIJ,EACK,CAACH,EAAiB/C,GAEpB,CAJkBuD,EAAA,GAAuBA,EAAA,GAKlD,CAsM+CC,CAAgBV,EAAcI,EAAcH,GAAMU,EAAAtD,EAAAkD,EAAA,GAAxFpF,EAAWwF,EAAA,GAAEC,EAAqBD,EAAA,GACnCE,EAAWlC,EAAOxD,GAGxB2E,GAAU,WACJM,GAAgBS,EAASjC,UAAYzD,IACvC0F,EAASjC,QAAUzD,EAEvB,GAAG,CAACiF,EAAcjF,IAElB,IAAMW,EAAmBG,GACvB,SAACI,GACCuE,EAAsBvE,GACtBwE,EAASjC,QAAUvC,CACrB,GACA,CAACwE,EAAUD,IAKPE,EAAkBC,EAAgBZ,EAAWhF,EAAa+E,GAChE,MAAO,CAAE/E,YAAAA,EAAa2F,gBAAAA,EAAiBxF,iBAHd,WAAH,OAASuF,EAASjC,OAAO,EAGUwB,aAAAA,EAActE,iBAAAA,EACzE"}
1	+ {"version":3,"file":"SliderHooks.js","sources":["../../../../src/components/Slider/SliderHooks.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useResizeObserver } from \"@vibe/hooks\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { UPDATE_SLIDER_SIZE_DEBOUNCE } from \"./SliderConstants\";\nimport { ensureValueText } from \"./SliderHelpers\";\n\nfunction _useIsStateControlledFromOutside(value: number \| number[]): boolean {\n const [isControlled] = useState(typeof value !== \"undefined\");\n return isControlled;\n}\n\nfunction _useSliderValue(\n defaultValue: number \| number[],\n isControlled: boolean,\n value: number \| number[]\n): [number \| number[], (value: number \| number[]) => void] {\n const initialValue = isControlled ? value : defaultValue;\n const [internalStateValue, setInternalStateValue] = useState(initialValue);\n if (isControlled) {\n return [value as number, NOOP];\n }\n return [internalStateValue, setInternalStateValue];\n}\n\nexport function useSliderActionsContextValue(\n actualValue: number \| number[],\n focused: number,\n getDragging: () => number,\n getSelectedValue: () => number \| number[],\n max: number,\n min: number,\n onChange: (value: number \| number[]) => void,\n ranged: boolean,\n setActive: (value: number) => void,\n setFocused: (value: number) => void,\n setDragging: (value: number) => void,\n setSelectedValue: (value: number \| number[]) => void,\n step: number\n) {\n const _changeValueOrValues = useCallback(\n (newValueOrValues: number \| number[]) => {\n setSelectedValue(newValueOrValues);\n if (typeof onChange === \"function\") {\n onChange(newValueOrValues);\n }\n },\n [setSelectedValue, onChange]\n );\n\n const _validateValue = useCallback(\n (index: number, newValue: number \| number[] \| string): number => {\n const numericValue = Number(newValue);\n if (newValue === \"\" \|\| Number.isNaN(numericValue)) {\n return index === 1 ? max : min;\n }\n if (numericValue > max) {\n return max;\n }\n if (numericValue < min) {\n return min;\n }\n return numericValue;\n },\n [min, max]\n );\n\n const _calculateNewValues = useCallback(\n (thumb: { index: number; newValue: number \| number[] \| string }): number[] => {\n const [startValue, endValue] = [...(getSelectedValue() as number[])];\n if (thumb.index === 1) {\n return [startValue, _validateValue(thumb.index, thumb.newValue)];\n }\n return [_validateValue(thumb.index, thumb.newValue), endValue];\n },\n [_validateValue, getSelectedValue]\n );\n\n const _manageRangedValues = useCallback(\n (thumb: { index: number; newValue: number \| number[] \| string }, switchCb: (value: number) => void = NOOP) => {\n const [startValue, endValue] = _calculateNewValues(thumb);\n if (startValue < endValue) {\n // no need to switch, same thumb stay active\n return [startValue, endValue];\n }\n // switch active thumb + end and start values\n switchCb(thumb.index === 0 ? 1 : 0);\n return [endValue, startValue];\n },\n [_calculateNewValues]\n );\n\n const _switchDraggingThumb = useCallback(\n (switchTo: number) => {\n setActive(switchTo);\n setFocused(switchTo);\n setDragging(switchTo);\n },\n [setActive, setFocused, setDragging]\n );\n\n const changeThumbValue = useCallback(\n (newValue: number \| string, thumbIndex: number = undefined, cancelFocus = false) => {\n if (!ranged) {\n _changeValueOrValues(_validateValue(null, newValue));\n return;\n }\n const currentThumb = { newValue, index: thumbIndex ?? focused };\n const switchCb = cancelFocus ? NOOP : setFocused;\n const newValues = _manageRangedValues(currentThumb, switchCb);\n _changeValueOrValues(newValues);\n },\n [_changeValueOrValues, _manageRangedValues, _validateValue, focused, ranged, setFocused]\n );\n\n const drugThumb = useCallback(\n (newValue: number \| number[]) => {\n if (!ranged) {\n _changeValueOrValues(_validateValue(null, newValue));\n return;\n }\n const currentThumb = { newValue, index: getDragging() ?? 0 };\n const newValues = _manageRangedValues(currentThumb, _switchDraggingThumb);\n _changeValueOrValues(newValues);\n },\n [_changeValueOrValues, _manageRangedValues, _switchDraggingThumb, _validateValue, getDragging, ranged]\n );\n\n const decreaseValue = useCallback(\n (consumerStep: number) => {\n const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n if (currentValue === min) {\n return;\n }\n const finalStep = consumerStep \|\| step;\n const newValue = currentValue - finalStep;\n changeThumbValue(newValue);\n },\n [actualValue, changeThumbValue, focused, min, ranged, step]\n );\n\n const increaseValue = useCallback(\n (consumerStep?: number) => {\n const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n if (currentValue === max) {\n return;\n }\n const finalStep = consumerStep \|\| step;\n const newValue = currentValue + finalStep;\n changeThumbValue(newValue);\n },\n [actualValue, changeThumbValue, focused, max, ranged, step]\n );\n\n return useMemo(\n () => ({\n changeThumbValue,\n decreaseValue,\n drugThumb,\n increaseValue,\n setActive,\n setDragging,\n setFocused\n }),\n [changeThumbValue, decreaseValue, drugThumb, increaseValue, setActive, setDragging, setFocused]\n );\n}\n\nexport function useDragging(): [number, (value: number) => void, () => number] {\n const [dragging, setStateDragging] = useState<number>(null);\n const draggingRef = useRef(null);\n\n const setDragging = useCallback(\n (index: number) => {\n setStateDragging(index);\n draggingRef.current = index;\n },\n [setStateDragging, draggingRef]\n );\n const getDragging = useCallback(() => draggingRef.current, [draggingRef]);\n return [dragging, setDragging, getDragging];\n}\n\nexport function useSliderRail() {\n const railRef = useRef(null);\n const [railCoords, setRailCoords] = useState({ left: 0, right: 100, width: 100 });\n\n const defineRailCoords = useCallback(() => {\n if (!railRef.current) {\n return;\n }\n const railRect = railRef.current.getBoundingClientRect();\n const { left, right, width } = railRect;\n setRailCoords({ left, right, width });\n }, [railRef, setRailCoords]);\n\n useResizeObserver({\n ref: railRef,\n callback: defineRailCoords,\n debounceTime: UPDATE_SLIDER_SIZE_DEBOUNCE\n });\n\n useEffect(() => {\n defineRailCoords();\n }, [defineRailCoords]);\n\n return { railCoords, railRef };\n}\n\nexport function useSliderValues(\n defaultValue: number \| number[],\n value: number \| number[],\n valueFormatter: (value: number) => string,\n valueText: string\n): {\n actualValue: number \| number[];\n actualValueText: string \| string[];\n getSelectedValue: () => number \| number[];\n isControlled: boolean;\n setSelectedValue: (value: number) => void;\n} {\n const isControlled = _useIsStateControlledFromOutside(value);\n const [actualValue, setStateSelectedValue] = _useSliderValue(defaultValue, isControlled, value);\n const valueRef = useRef(actualValue);\n\n // Update ref when actualValue was changed from outside in controlled mode\n useEffect(() => {\n if (isControlled && valueRef.current !== actualValue) {\n valueRef.current = actualValue;\n }\n }, [isControlled, actualValue]);\n\n const setSelectedValue = useCallback(\n (newValue: number) => {\n setStateSelectedValue(newValue);\n valueRef.current = newValue;\n },\n [valueRef, setStateSelectedValue]\n );\n\n const getSelectedValue = () => valueRef.current;\n\n const actualValueText = ensureValueText(valueText, actualValue, valueFormatter);\n return { actualValue, actualValueText, getSelectedValue, isControlled, setSelectedValue };\n}\n"],"names":["useSliderActionsContextValue","actualValue","focused","getDragging","getSelectedValue","max","min","onChange","ranged","setActive","setFocused","setDragging","setSelectedValue","step","_changeValueOrValues","useCallback","newValueOrValues","_validateValue","index","newValue","numericValue","Number","isNaN","_calculateNewValues","thumb","_ref","_toConsumableArray","endValue","_manageRangedValues","switchCb","arguments","length","undefined","NOOP","_calculateNewValues2","_calculateNewValues3","_slicedToArray","startValue","_switchDraggingThumb","switchTo","changeThumbValue","thumbIndex","newValues","drugThumb","currentThumb","_a","decreaseValue","consumerStep","currentValue","increaseValue","useMemo","useDragging","_useState5","useState","_useState6","dragging","setStateDragging","draggingRef","useRef","current","useSliderRail","railRef","_useState7","left","right","width","_useState8","railCoords","setRailCoords","defineRailCoords","railRect","getBoundingClientRect","useResizeObserver","ref","callback","debounceTime","UPDATE_SLIDER_SIZE_DEBOUNCE","useEffect","useSliderValues","defaultValue","value","valueFormatter","valueText","isControlled","_useState","_useIsStateControlledFromOutside","_useSliderValue2","_useState3","_useState4","_useSliderValue","_useSliderValue3","setStateSelectedValue","valueRef","actualValueText","ensureValueText"],"mappings":"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"}

package/dist/src/components/Slider/SliderInfix.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import s from"react";import{InfixKind as o}from"./SliderConstants.js";import{useSliderInfixComponent as i}from"./SliderInfixHooks.js";import t from"classnames";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{withStaticPropsWithoutForwardRef as m}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import l from"./SliderInfix.module.scss.js";var p=m((function o(m){var p=m.kind,a=void 0===p?o.kinds.PREFIX:p,n=i(a),f=r(n,4),d=f[1],c=f[2],u=f[3];return f[0]&&s.createElement("div",{className:t(l.infix,e(l,a),d.map((function(r){return e(l,r)}))),style:u},c)}),{kinds:o});export{p as default};
+import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"react";import{useSliderInfixComponent as s}from"./SliderInfixHooks.js";import i from"classnames";import{getStyle as o}from"../../helpers/typesciptCssModulesHelper.js";import t from"./SliderInfix.module.scss.js";var l=function(l){var m=l.kind,a=void 0===m?"prefix":m,p=s(a),f=r(p,4),n=f[1],u=f[2],c=f[3];return f[0]&&e.createElement("div",{className:i(t.infix,o(t,a),n.map((function(r){return o(t,r)}))),style:c},u)};export{l as default};
 //# sourceMappingURL=SliderInfix.js.map

package/dist/src/components/Slider/SliderInfix.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInfix.js","sources":["../../../../src/components/Slider/SliderInfix.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { ~~InfixKind as InfixKindEnum } from \"./SliderConstants\";\nimport {~~ useSliderInfixComponent } from \"./SliderInfixHooks\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps, ~~withStaticPropsWithoutForwardRef~~ } from \"../../types\";\nimport styles from \"./SliderInfix.module.scss\";\nimport { type InfixKind } from \"./Slider.types\";\n\nexport interface SliderInfixProps extends VibeComponentProps {\n /*\n Specifies the type of infix (prefix or postfix).\n */\n kind?: InfixKind;\n}\n\nconst SliderInfix: FC<SliderInfixProps> ~~& { kinds?: typeof InfixKindEnum }~~ = ({ kind = ~~SliderInfix.kinds.PREFIX~~ }) => {\n const [isShow, modificators, InfixComponent, inlineStyle] = useSliderInfixComponent(kind);\n return (\n isShow && (\n <div\n className={cx(\n styles.infix,\n getStyle(styles, kind),\n modificators.map(m => getStyle(styles, m))\n )}\n style={inlineStyle}\n >\n {InfixComponent}\n </div>\n )\n );\n};\n\nexport default ~~withStaticPropsWithoutForwardRef<SliderInfixProps, { kinds: typeof InfixKindEnum }>(~~SliderInfix~~, {\n kinds: InfixKindEnum\n})~~;\n"],"names":["~~withStaticPropsWithoutForwardRef","~~SliderInfix","_ref","_ref$kind","kind","~~kinds","PREFIX","~~_useSliderInfixCompon","useSliderInfixComponent","_useSliderInfixCompon2","_slicedToArray","modificators","InfixComponent","inlineStyle","React","className","cx","styles","infix","getStyle","map","m","style"~~,"InfixKindEnum"~~],"mappings":"~~0dAgBA~~,~~IAkBeA~~,~~EAAAA~~,~~GAlB8D~~,~~SAAvEC~~,~~EAAWC,GAAoG,~~IAAAC,EAAAD,~~EAArCE~~,KAAAA,~~OAAOH~~,~~IAAHE~~,~~EAAGF~~,~~EAAYI~~,~~MAAMC~~,~~OAAMH,EAC7GI,~~EAA4DC,~~EAAwBJ~~,~~GAAKK~~,EAAAC,EAAAH,EAAA,GAA1EI,EAAYF,EAAA,GAAEG,EAAcH,EAAA,GAAEI,EAAWJ,EAAA,GACxD,OADaA,EAAA,IAGTK,uBACEC,UAAWC,EACTC,EAAOC,MACPC,EAASF,~~EAAQb~~,~~GACjBO~~,EAAaS,KAAI,SAAAC,GAAC,OAAIF,EAASF,EAAQI,EAAE,KAE3CC,MAAOT,GAEND,EAIT~~,GAEgH,CAC9GP,MAAOkB~~"}
1	+ {"version":3,"file":"SliderInfix.js","sources":["../../../../src/components/Slider/SliderInfix.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { useSliderInfixComponent } from \"./SliderInfixHooks\";\nimport cx from \"classnames\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./SliderInfix.module.scss\";\nimport { type InfixKind } from \"./Slider.types\";\n\nexport interface SliderInfixProps extends VibeComponentProps {\n /*\n Specifies the type of infix (prefix or postfix).\n */\n kind?: InfixKind;\n}\n\nconst SliderInfix: FC<SliderInfixProps> = ({ kind = \"prefix\" }) => {\n const [isShow, modificators, InfixComponent, inlineStyle] = useSliderInfixComponent(kind);\n return (\n isShow && (\n <div\n className={cx(\n styles.infix,\n getStyle(styles, kind),\n modificators.map(m => getStyle(styles, m))\n )}\n style={inlineStyle}\n >\n {InfixComponent}\n </div>\n )\n );\n};\n\nexport default SliderInfix;\n"],"names":["SliderInfix","_ref","_ref$kind","kind","_useSliderInfixCompon","useSliderInfixComponent","_useSliderInfixCompon2","_slicedToArray","modificators","InfixComponent","inlineStyle","React","className","cx","styles","infix","getStyle","map","m","style"],"mappings":"gTAeA,IAAMA,EAAoC,SAAzBC,GAAiD,IAAAC,EAAAD,EAArBE,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAC1DE,EAA4DC,EAAwBF,GAAKG,EAAAC,EAAAH,EAAA,GAA1EI,EAAYF,EAAA,GAAEG,EAAcH,EAAA,GAAEI,EAAWJ,EAAA,GACxD,OADaA,EAAA,IAGTK,uBACEC,UAAWC,EACTC,EAAOC,MACPC,EAASF,EAAQX,GACjBK,EAAaS,KAAI,SAAAC,GAAC,OAAIF,EAASF,EAAQI,EAAE,KAE3CC,MAAOT,GAEND,EAIT"}

package/dist/src/components/Slider/SliderInfix.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={infix:"infix_e5b69a750d",txt:"txt_7f76f3d39f",prefix:"prefix_27531df33a",postfix:"postfix_ff4a2bf3f9"};!function(e){const n="s_id-4fd2a8cee614_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const f=document.createElement("style");f.id=n,t.firstChild?t.insertBefore(f,t.firstChild):t.appendChild(f),f.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".infix_e5b69a750d {\n  font-size: 14px;\n  font-family: var(--font-family);\n  flex: 0 0 auto;\n}\n\n.txt_7f76f3d39f {\n  white-space: nowrap;\n}\n\n.prefix_27531df33a {\n  margin-right: var(--spacing-small);\n}\n\n.postfix_ff4a2bf3f9 {\n  margin-left: var(--spacing-small);\n}");export{e as default};
+var e={infix:"infix_39fd5e955f",txt:"txt_7fc28a72ed",prefix:"prefix_4006417eb3",postfix:"postfix_b0643c4840"};!function(e){const n="s_id-a0238067a712_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".infix_39fd5e955f {\n  font-size: 14px;\n  font-family: var(--font-family);\n  flex: 0 0 auto;\n}\n\n.txt_7fc28a72ed {\n  white-space: nowrap;\n}\n\n.prefix_4006417eb3 {\n  margin-inline-end: var(--space-8);\n}\n\n.postfix_b0643c4840 {\n  margin-inline-start: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=SliderInfix.module.scss.js.map

package/dist/src/components/Slider/SliderInfixHooks.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{typeof as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../_virtual/_tslib.js";import i from"react";import{useSliderInfix as n,useSliderSelection as o}from"./SliderContext.js";import r from"./SelectionIndicator.js";import c from"../../../components/icon/dist/Icon/Icon.js";var l={clickable:!1,iconSize:18,ignoreFocusStyle:!0};function a(a){var s="postfix"===a,m=n(),f=m.prefix,p=m.postfix,u=m.indicateSelection,d=m.selectionIndicatorWidth,g=o(),j=g.value,v=g.valueText,x=s?p:f;if(u&&(s||g.ranged))return[!0,[],i.createElement(r,{key:a,kind:a}),{width:d}];if("object"===e(x)&&x.icon){var b=x.icon,y=t(x,["icon"]),S=Object.assign(Object.assign({},l),y);return[!0,[],i.createElement(c,Object.assign({key:"infix-icon",icon:b},S)),{}]}return"function"==typeof x?[!0,[],x(j,v),{}]:"string"==typeof x?[!0,["txt"],i.createElement(i.Fragment,null,x),{}]:void 0===x?[!1,[],null,{}]:[!0,[],i.createElement(i.Fragment,null,x),{}]}export{a as useSliderInfixComponent};
+import{typeof as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as t}from"../../../_virtual/_tslib.js";import i from"react";import{useSliderInfix as n,useSliderSelection as o}from"./SliderContext.js";import r from"./SelectionIndicator.js";import c from"../../../components/icon/dist/Icon/Icon.js";var l={clickable:!1,size:18,ignoreFocusStyle:!0};function a(a){var s="postfix"===a,m=n(),f=m.prefix,p=m.postfix,u=m.indicateSelection,d=m.selectionIndicatorWidth,g=o(),j=g.value,v=g.valueText,x=s?p:f;if(u&&(s||g.ranged))return[!0,[],i.createElement(r,{key:a,kind:a}),{width:d}];if("object"===e(x)&&x.icon){var b=x.icon,y=t(x,["icon"]),k=Object.assign(Object.assign({},l),y);return[!0,[],i.createElement(c,Object.assign({key:"infix-icon",icon:b},k)),{}]}return"function"==typeof x?[!0,[],x(j,v),{}]:"string"==typeof x?[!0,["txt"],i.createElement(i.Fragment,null,x),{}]:void 0===x?[!1,[],null,{}]:[!0,[],i.createElement(i.Fragment,null,x),{}]}export{a as useSliderInfixComponent};
 //# sourceMappingURL=SliderInfixHooks.js.map

package/dist/src/components/Slider/SliderInfixHooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInfixHooks.js","sources":["../../../../src/components/Slider/SliderInfixHooks.tsx"],"sourcesContent":["import React, { type CSSProperties, type ReactElement } from \"react\";\nimport { type IconType, Icon } from \"@vibe/icon\";\nimport { type InfixKind } from \"./Slider.types\";\nimport { useSliderInfix, useSliderSelection } from \"./SliderContext\";\nimport SelectionIndicator from \"./SelectionIndicator\";\n\nconst defaultIconProps = {\n clickable: false,\n ~~iconSize~~: 18,\n ignoreFocusStyle: true\n};\n\nexport function useSliderInfixComponent(kind: InfixKind): [boolean, string[], ReactElement, CSSProperties] {\n const isPostfix = kind === \"postfix\";\n const { prefix, postfix, indicateSelection, selectionIndicatorWidth } = useSliderInfix();\n const { ranged, value, valueText } = useSliderSelection();\n const infix = isPostfix ? postfix : prefix;\n\n if (indicateSelection && (isPostfix \|\| ranged)) {\n return [true, [], <SelectionIndicator key={kind} kind={kind} />, { width: selectionIndicatorWidth }];\n }\n if (typeof infix === \"object\" && (infix as { icon: IconType }).icon) {\n const { icon, ...restIconProps } = infix as { icon: IconType };\n const iconProps = { ...defaultIconProps, ...restIconProps };\n return [true, [], <Icon key=\"infix-icon\" icon={icon} {...iconProps} />, {}];\n }\n if (typeof infix === \"function\") {\n return [true, [], infix(value, valueText), {}];\n }\n if (typeof infix === \"string\") {\n return [true, [\"txt\"], <>{infix}</>, {}];\n }\n if (typeof infix === \"undefined\") {\n return [false, [], null, {}];\n }\n return [true, [], <>{infix}</>, {}];\n}\n"],"names":["defaultIconProps","clickable","~~iconSize~~","ignoreFocusStyle","useSliderInfixComponent","kind","isPostfix","_useSliderInfix","useSliderInfix","prefix","postfix","indicateSelection","selectionIndicatorWidth","_useSliderSelection","useSliderSelection","value","valueText","infix","ranged","React","createElement","SelectionIndicator","key","width","_typeof","icon","restIconProps","__rest","iconProps","Object","assign","Icon","Fragment"],"mappings":"+TAMA,IAAMA,EAAmB,CACvBC,WAAW,EACXC,~~SAAU~~,~~GACVC~~,kBAAkB,GAGd,SAAUC,EAAwBC,GACtC,IAAMC,EAAqB,YAATD,EAClBE,EAAwEC,IAAhEC,EAAMF,EAANE,OAAQC,EAAOH,EAAPG,QAASC,EAAiBJ,EAAjBI,kBAAmBC,EAAuBL,EAAvBK,wBAC5CC,EAAqCC,IAArBC,EAAKF,EAALE,MAAOC,EAASH,EAATG,UACjBC,EAAQX,EAAYI,EAAUD,EAEpC,GAAIE,IAAsBL,GAHZO,EAANK,QAIN,MAAO,EAAC,EAAM,GAAIC,EAACC,cAAAC,EAAmB,CAAAC,IAAKjB,EAAMA,KAAMA,IAAU,CAAEkB,MAAOX,IAE5E,GAAqB,WAAjBY,EAAOP,IAAuBA,EAA6BQ,KAAM,CAC7D,IAAEA,EAA2BR,EAA3BQ,KAASC,EAAaC,EAAKV,EAA7B,CAA0B,SAC1BW,EAAiBC,OAAAC,OAAAD,OAAAC,OAAA,GAAA9B,GAAqB0B,GAC5C,MAAO,EAAC,EAAM,GAAIP,EAACC,cAAAW,iBAAKT,IAAI,aAAaG,KAAMA,GAAUG,IAAe,CAAA,EACzE,CACD,MAAqB,mBAAVX,EACF,EAAC,EAAM,GAAIA,EAAMF,EAAOC,GAAY,CAAA,GAExB,iBAAVC,EACF,EAAC,EAAM,CAAC,OAAQE,EAAAC,cAAAD,EAAAa,SAAA,KAAGf,GAAW,CAAE,QAEpB,IAAVA,EACF,EAAC,EAAO,GAAI,KAAM,CAAE,GAEtB,EAAC,EAAM,GAAIE,EAAGC,cAAAD,EAAAa,SAAA,KAAAf,~~GAAW~~,CAAE,~~EACpC~~"}
1	+ {"version":3,"file":"SliderInfixHooks.js","sources":["../../../../src/components/Slider/SliderInfixHooks.tsx"],"sourcesContent":["import React, { type CSSProperties, type ReactElement } from \"react\";\nimport { type IconType, Icon } from \"@vibe/icon\";\nimport { type InfixKind } from \"./Slider.types\";\nimport { useSliderInfix, useSliderSelection } from \"./SliderContext\";\nimport SelectionIndicator from \"./SelectionIndicator\";\n\nconst defaultIconProps = {\n clickable: false,\n size: 18,\n ignoreFocusStyle: true\n};\n\nexport function useSliderInfixComponent(kind: InfixKind): [boolean, string[], ReactElement, CSSProperties] {\n const isPostfix = kind === \"postfix\";\n const { prefix, postfix, indicateSelection, selectionIndicatorWidth } = useSliderInfix();\n const { ranged, value, valueText } = useSliderSelection();\n const infix = isPostfix ? postfix : prefix;\n\n if (indicateSelection && (isPostfix \|\| ranged)) {\n return [true, [], <SelectionIndicator key={kind} kind={kind} />, { width: selectionIndicatorWidth }];\n }\n if (typeof infix === \"object\" && (infix as { icon: IconType }).icon) {\n const { icon, ...restIconProps } = infix as { icon: IconType };\n const iconProps = { ...defaultIconProps, ...restIconProps };\n return [true, [], <Icon key=\"infix-icon\" icon={icon} {...iconProps} />, {}];\n }\n if (typeof infix === \"function\") {\n return [true, [], infix(value, valueText), {}];\n }\n if (typeof infix === \"string\") {\n return [true, [\"txt\"], <>{infix}</>, {}];\n }\n if (typeof infix === \"undefined\") {\n return [false, [], null, {}];\n }\n return [true, [], <>{infix as ReactElement}</>, {}];\n}\n"],"names":["defaultIconProps","clickable","size","ignoreFocusStyle","useSliderInfixComponent","kind","isPostfix","_useSliderInfix","useSliderInfix","prefix","postfix","indicateSelection","selectionIndicatorWidth","_useSliderSelection","useSliderSelection","value","valueText","infix","ranged","React","createElement","SelectionIndicator","key","width","_typeof","icon","restIconProps","__rest","iconProps","Object","assign","Icon","Fragment"],"mappings":"+TAMA,IAAMA,EAAmB,CACvBC,WAAW,EACXC,KAAM,GACNC,kBAAkB,GAGd,SAAUC,EAAwBC,GACtC,IAAMC,EAAqB,YAATD,EAClBE,EAAwEC,IAAhEC,EAAMF,EAANE,OAAQC,EAAOH,EAAPG,QAASC,EAAiBJ,EAAjBI,kBAAmBC,EAAuBL,EAAvBK,wBAC5CC,EAAqCC,IAArBC,EAAKF,EAALE,MAAOC,EAASH,EAATG,UACjBC,EAAQX,EAAYI,EAAUD,EAEpC,GAAIE,IAAsBL,GAHZO,EAANK,QAIN,MAAO,EAAC,EAAM,GAAIC,EAACC,cAAAC,EAAmB,CAAAC,IAAKjB,EAAMA,KAAMA,IAAU,CAAEkB,MAAOX,IAE5E,GAAqB,WAAjBY,EAAOP,IAAuBA,EAA6BQ,KAAM,CAC7D,IAAEA,EAA2BR,EAA3BQ,KAASC,EAAaC,EAAKV,EAA7B,CAA0B,SAC1BW,EAAiBC,OAAAC,OAAAD,OAAAC,OAAA,GAAA9B,GAAqB0B,GAC5C,MAAO,EAAC,EAAM,GAAIP,EAACC,cAAAW,iBAAKT,IAAI,aAAaG,KAAMA,GAAUG,IAAe,CAAA,EACzE,CACD,MAAqB,mBAAVX,EACF,EAAC,EAAM,GAAIA,EAAMF,EAAOC,GAAY,CAAA,GAExB,iBAAVC,EACF,EAAC,EAAM,CAAC,OAAQE,EAAAC,cAAAD,EAAAa,SAAA,KAAGf,GAAW,CAAE,QAEpB,IAAVA,EACF,EAAC,EAAO,GAAI,KAAM,CAAE,GAEtB,EAAC,EAAM,GAAIE,EAAGC,cAAAD,EAAAa,SAAA,KAAAf,GAA2B,CAAE,EACpD"}

package/dist/src/components/SplitButton/SplitButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as o,defineProperty as t,toConsumableArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as i}from"../../../_virtual/_tslib.js";import{camelCase as n}from"es-toolkit";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import l from"classnames";import d,{useState as c,useRef as m,useCallback as u,useMemo as p}from"react";import{SplitButtonSecondaryContentPosition as g,ENTER_KEYS as f,DEFAULT_DIALOG_SHOW_TRIGGER as v,DEFAULT_DIALOG_HIDE_TRIGGER as y,DIALOG_MOVE_BY as D,SECONDARY_BUTTON_ARIA_LABEL as C,SECONDARY_BUTTON_WRAPPER_CLASSNAME as k}from"./SplitButtonConstants.js";import{withStaticPropsWithoutForwardRef as N}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{NOOP as T}from"../../utils/function-utils.js";import{isInsideClass as b}from"../../utils/dom-utils.js";import h from"../../hooks/useKeyEvent/index.js";import S from"../../hooks/useEventListener/index.js";import j from"./SplitButton.module.scss.js";import{ComponentVibeId as P}from"../../tests/constants.js";import I from"../../../components/button/dist/Button/Button.js";import B from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import{HideShowEvent as E,AnimationType as O}from"../../../components/dialog/dist/Dialog/DialogConstants.js";import _ from"../../../components/dialog/dist/Dialog/Dialog.js";import w from"../../../icons/dist/react/DropdownChevronDown.js";var z=N((function(g){var N=g.secondaryDialogContent,z=g.onSecondaryDialogDidShow,L=void 0===z?T:z,A=g.onSecondaryDialogDidHide,x=void 0===A?T:A,H=g.shouldCloseOnClickInsideDialog,R=g.zIndex,U=void 0===R?null:R,F=g.secondaryDialogClassName,K=void 0===F?"":F,M=g.secondaryDialogPosition,W=void 0===M?"bottom-start":M,Y=g.dialogContainerSelector,V=g.dialogPaddingSize,X=void 0===V?"medium":V,q=g.disabled,G=g.loading,J=g.kind,Q=void 0===J?"primary":J,Z=g.color,$=void 0===Z?"primary":Z,oo=g.className,to=g.leftIcon,eo=g.rightIcon,io=g.onClick,no=g.children,ao=g.marginLeft,ro=g.marginRight,so=g.active,lo=g.id,co=g["data-testid"],mo=i(g,["secondaryDialogContent","onSecondaryDialogDidShow","onSecondaryDialogDidHide","shouldCloseOnClickInsideDialog","zIndex","secondaryDialogClassName","secondaryDialogPosition","dialogContainerSelector","dialogPaddingSize","disabled","success","loading","kind","color","className","leftIcon","rightIcon","onClick","children","marginLeft","marginRight","active","id","data-testid"]),uo=c(!1),po=o(uo,2),go=po[0],fo=po[1],vo=c(!1),yo=o(vo,2),Do=yo[0],Co=yo[1],ko=c(!1),No=o(ko,2),To=No[0],bo=No[1],ho=m(null),So=m(null),jo=u((function(){return Co(!0)}),[Co]),Po=u((function(){return Co(!1)}),[Co]),Io=u((function(o){return!q&&!b(o.target,k)}),[q]),Bo=u((function(o){Io(o)&&bo(!0)}),[bo,Io]),Eo=u((function(){return bo(!1)}),[bo]),Oo=u((function(o){Io(o)&&bo(!0)}),[bo,Io]),_o=u((function(){fo(!0),L()}),[fo,L]),wo=u((function(o,t){fo(!1),x(),"esckey"===t&&So.current.focus()}),[fo,x]);S({eventName:"mouseenter",callback:jo,ref:ho}),S({eventName:"mouseleave",callback:Po,ref:ho}),S({eventName:"mousedown",callback:Bo,ref:ho}),S({eventName:"mouseup",callback:Eo,ref:ho}),S({eventName:"transitionend",callback:Eo,ref:ho}),h({keys:f,ref:ho,callback:Oo});var zo=p((function(){return l(j.button,a(j,n("kind-"+Q)),a(j,n("color-"+$)),t(t(t(t(t({},j.mainActive,so),j.active,To),j.splitContentOpen,go),j.hovered,Do),j.disabled,q),oo)}),[oo,Q,$,so,To,go,Do,q]),Lo=p((function(){return q?[]:v}),[q]),Ao=p((function(){return H?[].concat(e(y),[E.CONTENT_CLICK]):y}),[H]),xo=u((function(){var o="function"==typeof N?N():N;return d.createElement(B,{type:B.types.POPOVER,size:X},o)}),[N,X]),Ho=p((function(){return"bottom"===W?"":"bottom-start"===W?"bottom":"top"}),[W]);return d.createElement("div",{className:zo,ref:ho,id:lo,"data-testid":co||r(s.SPLIT_BUTTON,lo),"data-vibe":P.SPLIT_BUTTON},d.createElement(I,Object.assign({},mo,{preventClickAnimation:!0,leftIcon:to,rightIcon:eo,rightFlat:!0,color:$,kind:Q,active:so,onClick:io,className:j.mainButton,marginLeft:ao,onFocus:jo,onBlur:Po,disabled:q,loading:G,"data-testid":r(s.SPLIT_BUTTON_PRIMARY_BUTTON,lo)}),no),d.createElement("div",{className:j.secondaryButtonWrapper},d.createElement(_,{wrapperClassName:K,zIndex:U,content:xo,position:W,containerSelector:Y,startingEdge:Ho,animationType:O.EXPAND,moveBy:D,onDialogDidShow:_o,onDialogDidHide:wo,showTrigger:Lo,hideTrigger:Ao},d.createElement(I,Object.assign({},mo,{ref:So,preventClickAnimation:!0,leftFlat:!0,noSidePadding:!0,color:$,kind:Q,className:j.secondaryButton,active:go,marginRight:ro,onFocus:jo,onBlur:Po,disabled:q,ariaLabel:C,ariaHasPopup:!0,ariaExpanded:go,"data-testid":r(s.SPLIT_BUTTON_SECONDARY_BUTTON,lo)}),d.createElement("div",{className:j.secondaryButtonIconWrapper},d.createElement(w,{"aria-hidden":"true"}))))))}),{secondaryPositions:g,secondaryDialogPositions:g,sizes:I.sizes,colors:I.colors,kinds:I.kinds,inputTags:I.inputTags,dialogPaddingSizes:B.sizes});export{z as default};
+import{slicedToArray as o,defineProperty as e,toConsumableArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as n}from"../../../_virtual/_tslib.js";import{camelCase as i}from"es-toolkit";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import l from"classnames";import d,{useState as c,useRef as m,useCallback as u,useMemo as p}from"react";import{ENTER_KEYS as f,DEFAULT_DIALOG_SHOW_TRIGGER as g,DEFAULT_DIALOG_HIDE_TRIGGER as v,DIALOG_MOVE_BY as C,SECONDARY_BUTTON_ARIA_LABEL as D,SECONDARY_BUTTON_WRAPPER_CLASSNAME as y}from"./SplitButtonConstants.js";import{NOOP as b}from"../../utils/function-utils.js";import{isInsideClass as k}from"../../utils/dom-utils.js";import h from"../../hooks/useKeyEvent/index.js";import N from"../../hooks/useEventListener/index.js";import S from"./SplitButton.module.scss.js";import{ComponentVibeId as T}from"../../tests/constants.js";import B from"../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import I from"../../../components/button/dist/Button/Button.js";import j from"../../../components/dialog/dist/Dialog/Dialog.js";import E from"../../../icons/dist/react/DropdownChevronDown.js";var O=function(O){var P=O.secondaryDialogContent,_=O.onSecondaryDialogDidShow,w=void 0===_?b:_,x=O.onSecondaryDialogDidHide,L=void 0===x?b:x,A=O.shouldCloseOnClickInsideDialog,z=O.zIndex,R=void 0===z?null:z,U=O.secondaryDialogClassName,H=void 0===U?"":U,F=O.secondaryDialogPosition,M=void 0===F?"bottom-start":F,W=O.dialogContainerSelector,Y=O.dialogPaddingSize,K=void 0===Y?"medium":Y,q=O.disabled,G=O.loading,J=O.kind,Q=void 0===J?"primary":J,V=O.color,X=void 0===V?"primary":V,Z=O.className,$=O.leftIcon,oo=O.rightIcon,eo=O.onClick,to=O.children,no=O.marginLeft,io=O.marginRight,ao=O.active,ro=O.id,so=O["data-testid"],lo=n(O,["secondaryDialogContent","onSecondaryDialogDidShow","onSecondaryDialogDidHide","shouldCloseOnClickInsideDialog","zIndex","secondaryDialogClassName","secondaryDialogPosition","dialogContainerSelector","dialogPaddingSize","disabled","success","loading","kind","color","className","leftIcon","rightIcon","onClick","children","marginLeft","marginRight","active","id","data-testid"]),co=c(!1),mo=o(co,2),uo=mo[0],po=mo[1],fo=c(!1),go=o(fo,2),vo=go[0],Co=go[1],Do=c(!1),yo=o(Do,2),bo=yo[0],ko=yo[1],ho=m(null),No=m(null),So=u((function(){return Co(!0)}),[Co]),To=u((function(){return Co(!1)}),[Co]),Bo=u((function(o){return!q&&!k(o.target,y)}),[q]),Io=u((function(o){Bo(o)&&ko(!0)}),[ko,Bo]),jo=u((function(){return ko(!1)}),[ko]),Eo=u((function(o){Bo(o)&&ko(!0)}),[ko,Bo]),Oo=u((function(){po(!0),w()}),[po,w]),Po=u((function(o,e){po(!1),L(),"esckey"===e&&No.current.focus()}),[po,L]);N({eventName:"mouseenter",callback:So,ref:ho}),N({eventName:"mouseleave",callback:To,ref:ho}),N({eventName:"mousedown",callback:Io,ref:ho}),N({eventName:"mouseup",callback:jo,ref:ho}),N({eventName:"transitionend",callback:jo,ref:ho}),h({keys:f,ref:ho,callback:Eo});var _o=p((function(){return l(S.button,a(S,i("kind-"+Q)),a(S,i("color-"+X)),e(e(e(e(e({},S.mainActive,ao),S.active,bo),S.splitContentOpen,uo),S.hovered,vo),S.disabled,q),Z)}),[Z,Q,X,ao,bo,uo,vo,q]),wo=p((function(){return q?[]:g}),[q]),xo=p((function(){return A?[].concat(t(v),["onContentClick"]):v}),[A]),Lo=u((function(){var o="function"==typeof P?P():P;return d.createElement(B,{type:"popover",size:K},o)}),[P,K]),Ao=p((function(){if("bottom"!==M)return"bottom-start"===M?"bottom":"top"}),[M]);return d.createElement("div",{className:_o,ref:ho,id:ro,"data-testid":so||r(s.SPLIT_BUTTON,ro),"data-vibe":T.SPLIT_BUTTON},d.createElement(I,Object.assign({},lo,{preventClickAnimation:!0,leftIcon:$,rightIcon:oo,rightFlat:!0,color:X,kind:Q,active:ao,onClick:eo,className:S.mainButton,marginLeft:no,onFocus:So,onBlur:To,disabled:q,loading:G,"data-testid":r(s.SPLIT_BUTTON_PRIMARY_BUTTON,ro)}),to),d.createElement("div",{className:S.secondaryButtonWrapper},d.createElement(j,{wrapperClassName:H,zIndex:R,content:Lo,position:M,containerSelector:W,startingEdge:Ao,animationType:"expand",moveBy:C,onDialogDidShow:Oo,onDialogDidHide:Po,showTrigger:wo,hideTrigger:xo},d.createElement(I,Object.assign({},lo,{ref:No,preventClickAnimation:!0,leftFlat:!0,noSidePadding:!0,color:X,kind:Q,className:S.secondaryButton,active:uo,marginRight:io,onFocus:So,onBlur:To,disabled:q,"aria-label":D,"aria-haspopup":!0,"aria-expanded":uo,"data-testid":r(s.SPLIT_BUTTON_SECONDARY_BUTTON,ro)}),d.createElement("div",{className:S.secondaryButtonIconWrapper},d.createElement(E,{"aria-hidden":"true"}))))))};export{O as default};
 //# sourceMappingURL=SplitButton.js.map

package/dist/src/components/SplitButton/SplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.js","sources":["../../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading /\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\n// Libraries import\nimport React, { type ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\n// Constants import\nimport {\n DEFAULT_DIALOG_HIDE_TRIGGER,\n DEFAULT_DIALOG_SHOW_TRIGGER,\n DIALOG_MOVE_BY,\n ENTER_KEYS,\n SECONDARY_BUTTON_ARIA_LABEL,\n SECONDARY_BUTTON_WRAPPER_CLASSNAME,\n SplitButtonSecondaryContentPosition,\n type SplitButtonSecondaryContentPositionType\n} from \"./SplitButtonConstants\";\nimport { withStaticPropsWithoutForwardRef } from \"../../types\";\n// Utils import\nimport { NOOP } from \"../../utils/function-utils\";\nimport { isInsideClass } from \"../../utils/dom-utils\";\n// Hooks import\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport useEventListener from \"../../hooks/useEventListener\";\n// Components import\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport {\n DialogContentContainer,\n type DialogSize,\n type DialogTriggerEvent,\n Dialog,\n type DialogEvent,\n type DialogPosition\n} from \"@vibe/dialog\";\nimport { DialogAnimationTypeEnum as AnimationType, DialogTriggerEventEnum as HideShowEvent } from \"@vibe/dialog\";\nimport styles from \"./SplitButton.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface SplitButtonProps extends ButtonProps {\n /\n The element or renderer that is displayed inside the dialog opened by clicking the secondary button.\n /\n secondaryDialogContent?: ReactElement \| (() => string \| ReactElement);\n /\n Callback fired when the secondary dialog is shown.\n /\n onSecondaryDialogDidShow?: () => void;\n /\n Callback fired when the secondary dialog is hidden.\n /\n onSecondaryDialogDidHide?: () => void;\n /\n The z-index applied to the secondary dialog.\n /\n zIndex?: number;\n /\n Class name applied to the wrapper of the secondary dialog.\n /\n secondaryDialogClassName?: string;\n /\n The position of the secondary dialog.\n /\n secondaryDialogPosition?: SplitButtonSecondaryContentPositionType;\n /\n The padding size inside the secondary dialog.\n /\n dialogPaddingSize?: DialogSize;\n /\n The CSS selector of the container where the dialog should be rendered.\n /\n dialogContainerSelector?: string;\n /\n If true, clicking inside the dialog will close it.\n /\n shouldCloseOnClickInsideDialog?: boolean;\n}\n\nconst SplitButton = ({\n secondaryDialogContent,\n onSecondaryDialogDidShow = NOOP,\n onSecondaryDialogDidHide = NOOP,\n shouldCloseOnClickInsideDialog,\n zIndex = null,\n secondaryDialogClassName = \"\",\n secondaryDialogPosition = \"bottom-start\",\n dialogContainerSelector,\n dialogPaddingSize = \"medium\",\n disabled,\n // success mode not working right now, need to fix it in different pr\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n success,\n loading,\n kind = \"primary\",\n color = \"primary\",\n className,\n leftIcon,\n rightIcon,\n onClick,\n children,\n marginLeft,\n marginRight,\n active,\n id,\n \"data-testid\": dataTestId,\n ...buttonProps\n}: SplitButtonProps) => {\n // State //\n const [isDialogOpen, setDialogOpen] = useState(false);\n const [isHovered, setIsHover] = useState(false);\n const [isActive, setIsActive] = useState(false);\n\n // Refs //\n const ref = useRef(null);\n const secondaryButtonRef = useRef(null);\n\n // Callbacks //\n const setHovered = useCallback(() => setIsHover(true), [setIsHover]);\n const setNotHovered = useCallback(() => setIsHover(false), [setIsHover]);\n\n const shouldSetActive = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return false;\n return !isInsideClass(e.target as HTMLElement, SECONDARY_BUTTON_WRAPPER_CLASSNAME);\n },\n [disabled]\n );\n\n const setActive = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (!shouldSetActive(e)) return;\n setIsActive(true);\n },\n [setIsActive, shouldSetActive]\n );\n const setNotActive = useCallback(() => setIsActive(false), [setIsActive]);\n const setActiveOnEnter = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (!shouldSetActive(e)) return;\n setIsActive(true);\n },\n [setIsActive, shouldSetActive]\n );\n\n const showDialog = useCallback(() => {\n setDialogOpen(true);\n onSecondaryDialogDidShow();\n }, [setDialogOpen, onSecondaryDialogDidShow]);\n\n const hideDialog = useCallback(\n (_: DialogEvent, eventName: DialogTriggerEvent) => {\n setDialogOpen(false);\n onSecondaryDialogDidHide();\n if (eventName === \"esckey\") {\n secondaryButtonRef.current.focus();\n }\n },\n [setDialogOpen, onSecondaryDialogDidHide]\n );\n\n // Event listeners //\n\n // Used to set both buttons as hovered no matter what button was hovered\n useEventListener({ eventName: \"mouseenter\", callback: setHovered, ref });\n useEventListener({ eventName: \"mouseleave\", callback: setNotHovered, ref });\n\n useEventListener({ eventName: \"mousedown\", callback: setActive, ref });\n useEventListener({ eventName: \"mouseup\", callback: setNotActive, ref });\n\n // Used to finish active transition if clicked on enter\n useEventListener({ eventName: \"transitionend\", callback: setNotActive, ref });\n\n // Key events\n useKeyEvent({ keys: ENTER_KEYS, ref, callback: setActiveOnEnter });\n\n const classNames = useMemo(\n () =>\n cx(\n styles.button,\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.mainActive]: active,\n [styles.active]: isActive,\n [styles.splitContentOpen]: isDialogOpen,\n [styles.hovered]: isHovered,\n [styles.disabled]: disabled\n },\n className\n ),\n [className, kind, color, active, isActive, isDialogOpen, isHovered, disabled]\n );\n\n const dialogShowTrigger = useMemo(() => (disabled ? [] : DEFAULT_DIALOG_SHOW_TRIGGER), [disabled]);\n\n const dialogHideTrigger = useMemo(() => {\n if (shouldCloseOnClickInsideDialog) return [...DEFAULT_DIALOG_HIDE_TRIGGER, HideShowEvent.CONTENT_CLICK];\n return DEFAULT_DIALOG_HIDE_TRIGGER;\n }, [shouldCloseOnClickInsideDialog]);\n\n const actionsContent = useCallback(() => {\n const content = typeof secondaryDialogContent === \"function\" ? secondaryDialogContent() : secondaryDialogContent;\n return (\n <DialogContentContainer type={DialogContentContainer.types.POPOVER} size={dialogPaddingSize}>\n {content}\n </DialogContentContainer>\n );\n }, [secondaryDialogContent, dialogPaddingSize]);\n\n const animationEdgePosition = useMemo(() => {\n if (secondaryDialogPosition === \"bottom\") {\n return \"\";\n }\n if (secondaryDialogPosition === \"bottom-start\") {\n return \"bottom\";\n }\n\n return \"top\";\n }, [secondaryDialogPosition]);\n\n return (\n <div\n className={classNames}\n ref={ref}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.SPLIT_BUTTON, id)}\n data-vibe={ComponentVibeId.SPLIT_BUTTON}\n >\n <Button\n {\n ...buttonProps / We are enriching button with other props so we must use spreading */\n }\n preventClickAnimation\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n rightFlat\n color={color}\n kind={kind}\n active={active}\n onClick={onClick}\n className={styles.mainButton}\n marginLeft={marginLeft}\n onFocus={setHovered}\n onBlur={setNotHovered}\n disabled={disabled}\n loading={loading}\n data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_PRIMARY_BUTTON, id)}\n >\n {children}\n </Button>\n <div className={styles.secondaryButtonWrapper}>\n <Dialog\n wrapperClassName={secondaryDialogClassName}\n zIndex={zIndex}\n content={actionsContent}\n position={secondaryDialogPosition as DialogPosition}\n containerSelector={dialogContainerSelector}\n startingEdge={animationEdgePosition}\n animationType={AnimationType.EXPAND}\n moveBy={DIALOG_MOVE_BY}\n onDialogDidShow={showDialog}\n onDialogDidHide={hideDialog}\n showTrigger={dialogShowTrigger}\n hideTrigger={dialogHideTrigger}\n >\n <Button\n {...buttonProps}\n ref={secondaryButtonRef}\n preventClickAnimation\n leftFlat\n noSidePadding\n color={color}\n kind={kind}\n className={styles.secondaryButton}\n active={isDialogOpen}\n marginRight={marginRight}\n onFocus={setHovered}\n onBlur={setNotHovered}\n disabled={disabled}\n ariaLabel={SECONDARY_BUTTON_ARIA_LABEL}\n ariaHasPopup\n ariaExpanded={isDialogOpen}\n data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_SECONDARY_BUTTON, id)}\n >\n <div className={styles.secondaryButtonIconWrapper}>\n <DropdownChevronDown aria-hidden=\"true\" />\n </div>\n </Button>\n </Dialog>\n </div>\n </div>\n );\n};\n\ninterface SplitButtonStaticProps {\n secondaryPositions: typeof SplitButtonSecondaryContentPosition;\n secondaryDialogPositions: typeof SplitButtonSecondaryContentPosition;\n sizes: typeof Button.sizes;\n colors: typeof Button.colors;\n kinds: typeof Button.kinds;\n inputTags: typeof Button.inputTags;\n dialogPaddingSizes: typeof DialogContentContainer.sizes;\n}\n\nexport default withStaticPropsWithoutForwardRef<SplitButtonProps, SplitButtonStaticProps>(SplitButton, {\n secondaryPositions: SplitButtonSecondaryContentPosition,\n secondaryDialogPositions: SplitButtonSecondaryContentPosition,\n sizes: Button.sizes,\n colors: Button.colors,\n kinds: Button.kinds,\n inputTags: Button.inputTags,\n dialogPaddingSizes: DialogContentContainer.sizes\n});\n"],"names":["withStaticPropsWithoutForwardRef","_a","secondaryDialogContent","_a$onSecondaryDialogD","onSecondaryDialogDidShow","NOOP","_a$onSecondaryDialogD2","onSecondaryDialogDidHide","shouldCloseOnClickInsideDialog","_a$zIndex","zIndex","_a$secondaryDialogCla","secondaryDialogClassName","_a$secondaryDialogPos","secondaryDialogPosition","dialogContainerSelector","_a$dialogPaddingSize","dialogPaddingSize","disabled","loading","_a$kind","kind","_a$color","color","className","leftIcon","rightIcon","onClick","children","marginLeft","marginRight","active","id","dataTestId","buttonProps","__rest","_useState","useState","_useState2","_slicedToArray","isDialogOpen","setDialogOpen","_useState3","_useState4","isHovered","setIsHover","_useState5","_useState6","isActive","setIsActive","ref","useRef","secondaryButtonRef","setHovered","useCallback","setNotHovered","shouldSetActive","e","isInsideClass","target","SECONDARY_BUTTON_WRAPPER_CLASSNAME","setActive","setNotActive","setActiveOnEnter","showDialog","hideDialog","_","eventName","current","focus","useEventListener","callback","useKeyEvent","keys","ENTER_KEYS","classNames","useMemo","cx","styles","button","getStyle","camelCase","_defineProperty","mainActive","splitContentOpen","hovered","dialogShowTrigger","DEFAULT_DIALOG_SHOW_TRIGGER","dialogHideTrigger","concat","_toConsumableArray","DEFAULT_DIALOG_HIDE_TRIGGER","HideShowEvent","CONTENT_CLICK","actionsContent","content","React","createElement","DialogContentContainer","type","types","POPOVER","size","animationEdgePosition","getTestId","ComponentDefaultTestId","SPLIT_BUTTON","ComponentVibeId","Button","Object","assign","preventClickAnimation","rightFlat","mainButton","onFocus","onBlur","SPLIT_BUTTON_PRIMARY_BUTTON","secondaryButtonWrapper","Dialog","wrapperClassName","position","containerSelector","startingEdge","animationType","AnimationType","EXPAND","moveBy","DIALOG_MOVE_BY","onDialogDidShow","onDialogDidHide","showTrigger","hideTrigger","leftFlat","noSidePadding","secondaryButton","ariaLabel","SECONDARY_BUTTON_ARIA_LABEL","ariaHasPopup","ariaExpanded","SPLIT_BUTTON_SECONDARY_BUTTON","secondaryButtonIconWrapper","DropdownChevronDown","secondaryPositions","SplitButtonSecondaryContentPosition","secondaryDialogPositions","sizes","colors","kinds","inputTags","dialogPaddingSizes"],"mappings":"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"}
1	+ {"version":3,"file":"SplitButton.js","sources":["../../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading /\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\n// Libraries import\nimport React, { type ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\n// Constants import\nimport {\n DEFAULT_DIALOG_HIDE_TRIGGER,\n DEFAULT_DIALOG_SHOW_TRIGGER,\n DIALOG_MOVE_BY,\n ENTER_KEYS,\n SECONDARY_BUTTON_ARIA_LABEL,\n SECONDARY_BUTTON_WRAPPER_CLASSNAME,\n type SplitButtonSecondaryContentPositionType\n} from \"./SplitButtonConstants\";\n// Utils import\nimport { NOOP } from \"../../utils/function-utils\";\nimport { isInsideClass } from \"../../utils/dom-utils\";\n// Hooks import\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport useEventListener from \"../../hooks/useEventListener\";\n// Components import\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport {\n DialogContentContainer,\n type DialogSize,\n type DialogStartingEdge,\n type DialogTriggerEvent,\n Dialog,\n type DialogEvent,\n type DialogPosition\n} from \"@vibe/dialog\";\nimport styles from \"./SplitButton.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface SplitButtonProps extends ButtonProps {\n /\n The element or renderer that is displayed inside the dialog opened by clicking the secondary button.\n /\n secondaryDialogContent?: ReactElement \| (() => string \| ReactElement);\n /\n Callback fired when the secondary dialog is shown.\n /\n onSecondaryDialogDidShow?: () => void;\n /\n Callback fired when the secondary dialog is hidden.\n /\n onSecondaryDialogDidHide?: () => void;\n /\n The z-index applied to the secondary dialog.\n /\n zIndex?: number;\n /\n Class name applied to the wrapper of the secondary dialog.\n /\n secondaryDialogClassName?: string;\n /\n The position of the secondary dialog.\n /\n secondaryDialogPosition?: SplitButtonSecondaryContentPositionType;\n /\n The padding size inside the secondary dialog.\n /\n dialogPaddingSize?: DialogSize;\n /\n The CSS selector of the container where the dialog should be rendered.\n /\n dialogContainerSelector?: string;\n /\n If true, clicking inside the dialog will close it.\n /\n shouldCloseOnClickInsideDialog?: boolean;\n}\n\nconst SplitButton = ({\n secondaryDialogContent,\n onSecondaryDialogDidShow = NOOP,\n onSecondaryDialogDidHide = NOOP,\n shouldCloseOnClickInsideDialog,\n zIndex = null,\n secondaryDialogClassName = \"\",\n secondaryDialogPosition = \"bottom-start\",\n dialogContainerSelector,\n dialogPaddingSize = \"medium\",\n disabled,\n // success mode not working right now, need to fix it in different pr\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n success,\n loading,\n kind = \"primary\",\n color = \"primary\",\n className,\n leftIcon,\n rightIcon,\n onClick,\n children,\n marginLeft,\n marginRight,\n active,\n id,\n \"data-testid\": dataTestId,\n ...buttonProps\n}: SplitButtonProps) => {\n // State //\n const [isDialogOpen, setDialogOpen] = useState(false);\n const [isHovered, setIsHover] = useState(false);\n const [isActive, setIsActive] = useState(false);\n\n // Refs //\n const ref = useRef(null);\n const secondaryButtonRef = useRef(null);\n\n // Callbacks //\n const setHovered = useCallback(() => setIsHover(true), [setIsHover]);\n const setNotHovered = useCallback(() => setIsHover(false), [setIsHover]);\n\n const shouldSetActive = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (disabled) return false;\n return !isInsideClass(e.target as HTMLElement, SECONDARY_BUTTON_WRAPPER_CLASSNAME);\n },\n [disabled]\n );\n\n const setActive = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (!shouldSetActive(e)) return;\n setIsActive(true);\n },\n [setIsActive, shouldSetActive]\n );\n const setNotActive = useCallback(() => setIsActive(false), [setIsActive]);\n const setActiveOnEnter = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (!shouldSetActive(e)) return;\n setIsActive(true);\n },\n [setIsActive, shouldSetActive]\n );\n\n const showDialog = useCallback(() => {\n setDialogOpen(true);\n onSecondaryDialogDidShow();\n }, [setDialogOpen, onSecondaryDialogDidShow]);\n\n const hideDialog = useCallback(\n (_: DialogEvent, eventName: DialogTriggerEvent) => {\n setDialogOpen(false);\n onSecondaryDialogDidHide();\n if (eventName === \"esckey\") {\n secondaryButtonRef.current.focus();\n }\n },\n [setDialogOpen, onSecondaryDialogDidHide]\n );\n\n // Event listeners //\n\n // Used to set both buttons as hovered no matter what button was hovered\n useEventListener({ eventName: \"mouseenter\", callback: setHovered, ref });\n useEventListener({ eventName: \"mouseleave\", callback: setNotHovered, ref });\n\n useEventListener({ eventName: \"mousedown\", callback: setActive, ref });\n useEventListener({ eventName: \"mouseup\", callback: setNotActive, ref });\n\n // Used to finish active transition if clicked on enter\n useEventListener({ eventName: \"transitionend\", callback: setNotActive, ref });\n\n // Key events\n useKeyEvent({ keys: ENTER_KEYS, ref, callback: setActiveOnEnter });\n\n const classNames = useMemo(\n () =>\n cx(\n styles.button,\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.mainActive]: active,\n [styles.active]: isActive,\n [styles.splitContentOpen]: isDialogOpen,\n [styles.hovered]: isHovered,\n [styles.disabled]: disabled\n },\n className\n ),\n [className, kind, color, active, isActive, isDialogOpen, isHovered, disabled]\n );\n\n const dialogShowTrigger = useMemo(() => (disabled ? [] : DEFAULT_DIALOG_SHOW_TRIGGER), [disabled]);\n\n const dialogHideTrigger = useMemo(() => {\n if (shouldCloseOnClickInsideDialog)\n return [...DEFAULT_DIALOG_HIDE_TRIGGER, \"onContentClick\"] as DialogTriggerEvent[];\n return DEFAULT_DIALOG_HIDE_TRIGGER;\n }, [shouldCloseOnClickInsideDialog]);\n\n const actionsContent = useCallback(() => {\n const content = typeof secondaryDialogContent === \"function\" ? secondaryDialogContent() : secondaryDialogContent;\n return (\n <DialogContentContainer type=\"popover\" size={dialogPaddingSize}>\n {content}\n </DialogContentContainer>\n );\n }, [secondaryDialogContent, dialogPaddingSize]);\n\n const animationEdgePosition: DialogStartingEdge \| undefined = useMemo(() => {\n if (secondaryDialogPosition === \"bottom\") {\n return undefined;\n }\n if (secondaryDialogPosition === \"bottom-start\") {\n return \"bottom\";\n }\n\n return \"top\";\n }, [secondaryDialogPosition]);\n\n return (\n <div\n className={classNames}\n ref={ref}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.SPLIT_BUTTON, id)}\n data-vibe={ComponentVibeId.SPLIT_BUTTON}\n >\n <Button\n {\n ...buttonProps / We are enriching button with other props so we must use spreading */\n }\n preventClickAnimation\n leftIcon={leftIcon}\n rightIcon={rightIcon}\n rightFlat\n color={color}\n kind={kind}\n active={active}\n onClick={onClick}\n className={styles.mainButton}\n marginLeft={marginLeft}\n onFocus={setHovered}\n onBlur={setNotHovered}\n disabled={disabled}\n loading={loading}\n data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_PRIMARY_BUTTON, id)}\n >\n {children}\n </Button>\n <div className={styles.secondaryButtonWrapper}>\n <Dialog\n wrapperClassName={secondaryDialogClassName}\n zIndex={zIndex}\n content={actionsContent}\n position={secondaryDialogPosition as DialogPosition}\n containerSelector={dialogContainerSelector}\n startingEdge={animationEdgePosition}\n animationType=\"expand\"\n moveBy={DIALOG_MOVE_BY}\n onDialogDidShow={showDialog}\n onDialogDidHide={hideDialog}\n showTrigger={dialogShowTrigger}\n hideTrigger={dialogHideTrigger}\n >\n <Button\n {...buttonProps}\n ref={secondaryButtonRef}\n preventClickAnimation\n leftFlat\n noSidePadding\n color={color}\n kind={kind}\n className={styles.secondaryButton}\n active={isDialogOpen}\n marginRight={marginRight}\n onFocus={setHovered}\n onBlur={setNotHovered}\n disabled={disabled}\n aria-label={SECONDARY_BUTTON_ARIA_LABEL}\n aria-haspopup\n aria-expanded={isDialogOpen}\n data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_SECONDARY_BUTTON, id)}\n >\n <div className={styles.secondaryButtonIconWrapper}>\n <DropdownChevronDown aria-hidden=\"true\" />\n </div>\n </Button>\n </Dialog>\n </div>\n </div>\n );\n};\n\nexport default SplitButton;\n"],"names":["SplitButton","_a","secondaryDialogContent","_a$onSecondaryDialogD","onSecondaryDialogDidShow","NOOP","_a$onSecondaryDialogD2","onSecondaryDialogDidHide","shouldCloseOnClickInsideDialog","_a$zIndex","zIndex","_a$secondaryDialogCla","secondaryDialogClassName","_a$secondaryDialogPos","secondaryDialogPosition","dialogContainerSelector","_a$dialogPaddingSize","dialogPaddingSize","disabled","loading","_a$kind","kind","_a$color","color","className","leftIcon","rightIcon","onClick","children","marginLeft","marginRight","active","id","dataTestId","buttonProps","__rest","_useState","useState","_useState2","_slicedToArray","isDialogOpen","setDialogOpen","_useState3","_useState4","isHovered","setIsHover","_useState5","_useState6","isActive","setIsActive","ref","useRef","secondaryButtonRef","setHovered","useCallback","setNotHovered","shouldSetActive","e","isInsideClass","target","SECONDARY_BUTTON_WRAPPER_CLASSNAME","setActive","setNotActive","setActiveOnEnter","showDialog","hideDialog","_","eventName","current","focus","useEventListener","callback","useKeyEvent","keys","ENTER_KEYS","classNames","useMemo","cx","styles","button","getStyle","camelCase","_defineProperty","mainActive","splitContentOpen","hovered","dialogShowTrigger","DEFAULT_DIALOG_SHOW_TRIGGER","dialogHideTrigger","concat","_toConsumableArray","DEFAULT_DIALOG_HIDE_TRIGGER","actionsContent","content","React","createElement","DialogContentContainer","type","size","animationEdgePosition","getTestId","ComponentDefaultTestId","SPLIT_BUTTON","ComponentVibeId","Button","Object","assign","preventClickAnimation","rightFlat","mainButton","onFocus","onBlur","SPLIT_BUTTON_PRIMARY_BUTTON","secondaryButtonWrapper","Dialog","wrapperClassName","position","containerSelector","startingEdge","animationType","moveBy","DIALOG_MOVE_BY","onDialogDidShow","onDialogDidHide","showTrigger","hideTrigger","leftFlat","noSidePadding","secondaryButton","SECONDARY_BUTTON_ARIA_LABEL","SPLIT_BUTTON_SECONDARY_BUTTON","secondaryButtonIconWrapper","DropdownChevronDown"],"mappings":"mwCA6EA,IAAMA,EAAc,SAACC,GAAA,IACnBC,EAyByBD,EAzBzBC,uBAAsBC,EAyBGF,EAxBzBG,yBAAAA,OAA2BC,IAAHF,EAAGE,EAAIF,EAAAG,EAwBNL,EAvBzBM,yBAAAA,OAA2BF,IAAHC,EAAGD,EAAIC,EAC/BE,EAsByBP,EAtBzBO,+BAA8BC,EAsBLR,EArBzBS,OAAAA,OAAS,IAAHD,EAAG,KAAIA,EAAAE,EAqBYV,EApBzBW,yBAAAA,OAA2B,IAAHD,EAAG,GAAEA,EAAAE,EAoBJZ,EAnBzBa,wBAAAA,OAA0B,IAAHD,EAAG,eAAcA,EACxCE,EAkByBd,EAlBzBc,wBAAuBC,EAkBEf,EAjBzBgB,kBAAAA,OAAoB,IAAHD,EAAG,SAAQA,EAC5BE,EAgByBjB,EAhBzBiB,SAIAC,EAYyBlB,EAZzBkB,QAAOC,EAYkBnB,EAXzBoB,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAWSrB,EAVzBsB,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EACjBE,EASyBvB,EATzBuB,UACAC,EAQyBxB,EARzBwB,SACAC,GAOyBzB,EAPzByB,UACAC,GAMyB1B,EANzB0B,QACAC,GAKyB3B,EALzB2B,SACAC,GAIyB5B,EAJzB4B,WACAC,GAGyB7B,EAHzB6B,YACAC,GAEyB9B,EAFzB8B,OACAC,GACyB/B,EADzB+B,GACeC,GAAUhC,EAAzB,eACGiC,GAAWC,EAAAlC,EA3BK,4XA8BnBmC,GAAsCC,GAAS,GAAMC,GAAAC,EAAAH,GAAA,GAA9CI,GAAYF,GAAA,GAAEG,GAAaH,GAAA,GAClCI,GAAgCL,GAAS,GAAMM,GAAAJ,EAAAG,GAAA,GAAxCE,GAASD,GAAA,GAAEE,GAAUF,GAAA,GAC5BG,GAAgCT,GAAS,GAAMU,GAAAR,EAAAO,GAAA,GAAxCE,GAAQD,GAAA,GAAEE,GAAWF,GAAA,GAGtBG,GAAMC,EAAO,MACbC,GAAqBD,EAAO,MAG5BE,GAAaC,GAAY,WAAA,OAAMT,IAAW,KAAO,CAACA,KAClDU,GAAgBD,GAAY,WAAA,OAAMT,IAAW,KAAQ,CAACA,KAEtDW,GAAkBF,GACtB,SAACG,GACC,OAAIvC,IACIwC,EAAcD,EAAEE,OAAuBC,EACjD,GACA,CAAC1C,IAGG2C,GAAYP,GAChB,SAACG,GACMD,GAAgBC,IACrBR,IAAY,EACd,GACA,CAACA,GAAaO,KAEVM,GAAeR,GAAY,WAAA,OAAML,IAAY,KAAQ,CAACA,KACtDc,GAAmBT,GACvB,SAACG,GACMD,GAAgBC,IACrBR,IAAY,EACd,GACA,CAACA,GAAaO,KAGVQ,GAAaV,GAAY,WAC7Bb,IAAc,GACdrC,GACF,GAAG,CAACqC,GAAerC,IAEb6D,GAAaX,GACjB,SAACY,EAAgBC,GACf1B,IAAc,GACdlC,IACkB,WAAd4D,GACFf,GAAmBgB,QAAQC,OAE/B,GACA,CAAC5B,GAAelC,IAMlB+D,EAAiB,CAAEH,UAAW,aAAcI,SAAUlB,GAAYH,IAAAA,KAClEoB,EAAiB,CAAEH,UAAW,aAAcI,SAAUhB,GAAeL,IAAAA,KAErEoB,EAAiB,CAAEH,UAAW,YAAaI,SAAUV,GAAWX,IAAAA,KAChEoB,EAAiB,CAAEH,UAAW,UAAWI,SAAUT,GAAcZ,IAAAA,KAGjEoB,EAAiB,CAAEH,UAAW,gBAAiBI,SAAUT,GAAcZ,IAAAA,KAGvEsB,EAAY,CAAEC,KAAMC,EAAYxB,IAAAA,GAAKqB,SAAUR,KAE/C,IAAMY,GAAaC,GACjB,WAAA,OACEC,EACEC,EAAOC,OACPC,EAASF,EAAQG,EAAU,QAAU5D,IACrC2D,EAASF,EAAQG,EAAU,SAAW1D,IAAO2D,EAAAA,EAAAA,EAAAA,EAAAA,EAE1CJ,CAAAA,EAAAA,EAAOK,WAAapD,IACpB+C,EAAO/C,OAASiB,IAChB8B,EAAOM,iBAAmB5C,IAC1BsC,EAAOO,QAAUzC,IACjBkC,EAAO5D,SAAWA,GAErBM,EACD,GACH,CAACA,EAAWH,EAAME,EAAOQ,GAAQiB,GAAUR,GAAcI,GAAW1B,IAGhEoE,GAAoBV,GAAQ,WAAA,OAAO1D,EAAW,GAAKqE,CAA2B,GAAG,CAACrE,IAElFsE,GAAoBZ,GAAQ,WAChC,OAAIpE,EACFiF,GAAAA,OAAAC,EAAWC,GAA2B,CAAE,mBACnCA,CACT,GAAG,CAACnF,IAEEoF,GAAiBtC,GAAY,WACjC,IAAMuC,EAA4C,mBAA3B3F,EAAwCA,IAA2BA,EAC1F,OACE4F,EAAAC,cAACC,EAAsB,CAACC,KAAK,UAAUC,KAAMjF,GAC1C4E,EAGP,GAAG,CAAC3F,EAAwBe,IAEtBkF,GAAwDvB,GAAQ,WACpE,GAAgC,WAA5B9D,EAGJ,MAAgC,iBAA5BA,EACK,SAGF,KACT,GAAG,CAACA,IAEJ,OACEgF,EACEC,cAAA,MAAA,CAAAvE,UAAWmD,GACXzB,IAAKA,GACLlB,GAAIA,GACS,cAAAC,IAAcmE,EAAUC,EAAuBC,aAActE,IAAG,YAClEuE,EAAgBD,cAE3BR,EAAAC,cAACS,EAAMC,OAAAC,OAAA,CAAA,EAEAxE,GAEL,CAAAyE,uBACA,EAAAlF,SAAUA,EACVC,UAAWA,GACXkF,WAAS,EACTrF,MAAOA,EACPF,KAAMA,EACNU,OAAQA,GACRJ,QAASA,GACTH,UAAWsD,EAAO+B,WAClBhF,WAAYA,GACZiF,QAASzD,GACT0D,OAAQxD,GACRrC,SAAUA,EACVC,QAASA,gBACIiF,EAAUC,EAAuBW,4BAA6BhF,MAE1EJ,IAEHkE,EAAAC,cAAA,MAAA,CAAKvE,UAAWsD,EAAOmC,wBACrBnB,EAACC,cAAAmB,GACCC,iBAAkBvG,EAClBF,OAAQA,EACRmF,QAASD,GACTwB,SAAUtG,EACVuG,kBAAmBtG,EACnBuG,aAAcnB,GACdoB,cAAc,SACdC,OAAQC,EACRC,gBAAiB1D,GACjB2D,gBAAiB1D,GACjB2D,YAAatC,GACbuC,YAAarC,IAEbM,EAACC,cAAAS,EACKC,OAAAC,OAAA,CAAA,EAAAxE,GACJ,CAAAgB,IAAKE,GACLuD,uBACA,EAAAmB,UACA,EAAAC,eACA,EAAAxG,MAAOA,EACPF,KAAMA,EACNG,UAAWsD,EAAOkD,gBAClBjG,OAAQS,GACRV,YAAaA,GACbgF,QAASzD,GACT0D,OAAQxD,GACRrC,SAAUA,EACE,aAAA+G,EAEG,iBAAA,EAAA,gBAAAzF,GACF,cAAA4D,EAAUC,EAAuB6B,8BAA+BlG,MAE7E8D,EAAAC,cAAA,MAAA,CAAKvE,UAAWsD,EAAOqD,4BACrBrC,EAACC,cAAAqC,EAAgC,CAAA,cAAA,aAO/C"}

package/dist/src/components/SplitButton/SplitButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={button:"button_121ee329cc",mainButton:"mainButton_d844bfe393",secondaryButton:"secondaryButton_1143db088c",secondaryButtonWrapper:"secondaryButtonWrapper_806aa7359f",secondaryButtonIconWrapper:"secondaryButtonIconWrapper_2125fddf87",active:"active_d1c50e68cf",disabled:"disabled_f4f776077d",kindTertiary:"kindTertiary_0e2a3474af",colorPrimary:"colorPrimary_0e2a3474af",mainActive:"mainActive_0c24e10ff9",splitContentOpen:"splitContentOpen_3cff5b12be",hovered:"hovered_e4387fb074",colorBrand:"colorBrand_0c24e10ff9",colorPositive:"colorPositive_adb9812f05",colorNegative:"colorNegative_adb9812f05",kindPrimary:"kindPrimary_29b8edcebb",colorOnPrimaryColor:"colorOnPrimaryColor_68fcaf056d",kindSecondary:"kindSecondary_adb9812f05"};!function(n){const r="s_id-b26d62194c18_3_86_0";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)}(".button_121ee329cc {\n  display: inline-flex;\n  border-radius: var(--border-radius-small);\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n}\n\n.button_121ee329cc .mainButton_d844bfe393 {\n  margin-right: 0;\n}\n\n.button_121ee329cc .secondaryButton_1143db088c {\n  margin-left: 0;\n}\n\n.secondaryButtonWrapper_806aa7359f .secondaryButtonIconWrapper_2125fddf87 {\n  display: inline-flex;\n  padding: 0 4px;\n}\n\n.active_d1c50e68cf {\n  transform: scale(0.95);\n}\n\n.disabled_f4f776077d {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .mainButton_d844bfe393 {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .mainButton_d844bfe393:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .secondaryButton_1143db088c:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9.splitContentOpen_3cff5b12be.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9.splitContentOpen_3cff5b12be.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover,\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9.hovered_e4387fb074.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorPrimary_0e2a3474af.mainActive_0c24e10ff9.hovered_e4387fb074.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover {\n  color: var(--primary-color);\n}\n\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9 .mainButton_d844bfe393 {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9.splitContentOpen_3cff5b12be.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9.splitContentOpen_3cff5b12be.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover,\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9.hovered_e4387fb074.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorBrand_0c24e10ff9.mainActive_0c24e10ff9.hovered_e4387fb074.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover {\n  color: var(--brand-color);\n}\n\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05:hover .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05:focus .secondaryButton_1143db088c {\n  border-color: transparent;\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05.splitContentOpen_3cff5b12be .mainButton_d844bfe393,\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05:hover .mainButton_d844bfe393,\n.kindTertiary_0e2a3474af.colorPositive_adb9812f05:focus .mainButton_d844bfe393 {\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05:hover .secondaryButton_1143db088c,\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05:focus .secondaryButton_1143db088c {\n  border-color: transparent;\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05.splitContentOpen_3cff5b12be .mainButton_d844bfe393,\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05:hover .mainButton_d844bfe393,\n.kindTertiary_0e2a3474af.colorNegative_adb9812f05:focus .mainButton_d844bfe393 {\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary_0e2a3474af .secondaryButton_1143db088c {\n  border-left: 1px solid transparent;\n  margin-left: 1px;\n}\n\n.kindPrimary_29b8edcebb.disabled_f4f776077d .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--ui-border-color);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--primary-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorPrimary_0e2a3474af .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--primary-hover-color);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorBrand_0c24e10ff9.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--brand-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorBrand_0c24e10ff9 .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--brand-hover-color);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorPositive_adb9812f05 .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--positive-color-hover);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorNegative_adb9812f05 .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--negative-color-hover);\n}\n\n.kindPrimary_29b8edcebb:not(.disabled_f4f776077d).colorOnPrimaryColor_68fcaf056d .secondaryButton_1143db088c {\n  border-left: 1px solid;\n  border-color: var(--color-ui_grey);\n}\n\n.kindSecondary_adb9812f05 .mainButton_d844bfe393 {\n  border-right: none;\n}\n\n.kindSecondary_adb9812f05.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .mainButton_d844bfe393 {\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary_adb9812f05.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .mainButton_d844bfe393:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary_adb9812f05.colorPrimary_0e2a3474af.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.kindSecondary_adb9812f05.colorPrimary_0e2a3474af.splitContentOpen_3cff5b12be .secondaryButton_1143db088c {\n  color: var(--primary-color);\n  border-color: var(--primary-color);\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary_adb9812f05.colorPrimary_0e2a3474af.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary_adb9812f05.colorBrand_0c24e10ff9.mainActive_0c24e10ff9 .mainButton_d844bfe393 {\n  background-color: var(--brand-selected-color);\n}\n\n.kindSecondary_adb9812f05.colorBrand_0c24e10ff9.mainActive_0c24e10ff9 .secondaryButton_1143db088c {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n\n.kindSecondary_adb9812f05.colorBrand_0c24e10ff9.splitContentOpen_3cff5b12be .secondaryButton_1143db088c,\n.kindSecondary_adb9812f05.colorBrand_0c24e10ff9.splitContentOpen_3cff5b12be .secondaryButton_1143db088c:hover {\n  color: var(--brand-color);\n  border-color: var(--brand-color);\n  background-color: var(--brand-selected-color);\n}");export{n as default};
+var e={button:"button_ab2ac47e9e",mainButton:"mainButton_2ade24348b",secondaryButton:"secondaryButton_ce1114e9d5",secondaryButtonWrapper:"secondaryButtonWrapper_44c2d172a8",secondaryButtonIconWrapper:"secondaryButtonIconWrapper_1f2762d383",active:"active_94f4549a98",disabled:"disabled_2750476300",kindTertiary:"kindTertiary_050bce00ed",colorPrimary:"colorPrimary_050bce00ed",mainActive:"mainActive_b2aa6c5794",splitContentOpen:"splitContentOpen_88eafafb7e",hovered:"hovered_e235908ebd",colorBrand:"colorBrand_b2aa6c5794",colorPositive:"colorPositive_a54c589178",colorNegative:"colorNegative_a54c589178",kindPrimary:"kindPrimary_500ecbe800",colorOnPrimaryColor:"colorOnPrimaryColor_1adf6ed387",kindSecondary:"kindSecondary_a54c589178"};!function(e){const n="s_id-de44e8b791c3_4_0_0-alpha_0";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".button_ab2ac47e9e {\n  display: inline-flex;\n  border-radius: var(--border-radius-small);\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n}\n\n.button_ab2ac47e9e .mainButton_2ade24348b {\n  margin-inline-end: 0;\n}\n\n.button_ab2ac47e9e .secondaryButton_ce1114e9d5 {\n  margin-inline-start: 0;\n}\n\n.secondaryButtonWrapper_44c2d172a8 .secondaryButtonIconWrapper_1f2762d383 {\n  display: inline-flex;\n  padding: 0 4px;\n}\n\n.active_94f4549a98 {\n  transform: scale(0.95);\n}\n\n.disabled_2750476300 {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .mainButton_2ade24348b {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .mainButton_2ade24348b:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794.splitContentOpen_88eafafb7e.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794.splitContentOpen_88eafafb7e.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover,\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794.hovered_e235908ebd.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorPrimary_050bce00ed.mainActive_b2aa6c5794.hovered_e235908ebd.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover {\n  color: var(--primary-color);\n}\n\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794 .mainButton_2ade24348b {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794.splitContentOpen_88eafafb7e.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794.splitContentOpen_88eafafb7e.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover,\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794.hovered_e235908ebd.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorBrand_b2aa6c5794.mainActive_b2aa6c5794.hovered_e235908ebd.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover {\n  color: var(--brand-color);\n}\n\n.kindTertiary_050bce00ed.colorPositive_a54c589178.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorPositive_a54c589178:hover .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorPositive_a54c589178:focus .secondaryButton_ce1114e9d5 {\n  border-color: transparent;\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary_050bce00ed.colorPositive_a54c589178.splitContentOpen_88eafafb7e .mainButton_2ade24348b,\n.kindTertiary_050bce00ed.colorPositive_a54c589178:hover .mainButton_2ade24348b,\n.kindTertiary_050bce00ed.colorPositive_a54c589178:focus .mainButton_2ade24348b {\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary_050bce00ed.colorNegative_a54c589178.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorNegative_a54c589178:hover .secondaryButton_ce1114e9d5,\n.kindTertiary_050bce00ed.colorNegative_a54c589178:focus .secondaryButton_ce1114e9d5 {\n  border-color: transparent;\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary_050bce00ed.colorNegative_a54c589178.splitContentOpen_88eafafb7e .mainButton_2ade24348b,\n.kindTertiary_050bce00ed.colorNegative_a54c589178:hover .mainButton_2ade24348b,\n.kindTertiary_050bce00ed.colorNegative_a54c589178:focus .mainButton_2ade24348b {\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary_050bce00ed .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid transparent;\n  margin-inline-start: 1px;\n}\n\n.kindPrimary_500ecbe800.disabled_2750476300 .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--ui-border-color);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorPrimary_050bce00ed.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--primary-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorPrimary_050bce00ed .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--primary-hover-color);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorBrand_b2aa6c5794.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--brand-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorBrand_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--brand-hover-color);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorPositive_a54c589178 .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--positive-color-hover);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorNegative_a54c589178 .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--negative-color-hover);\n}\n\n.kindPrimary_500ecbe800:not(.disabled_2750476300).colorOnPrimaryColor_1adf6ed387 .secondaryButton_ce1114e9d5 {\n  border-inline-start: 1px solid;\n  border-color: var(--color-ui_grey);\n}\n\n.kindSecondary_a54c589178 .mainButton_2ade24348b {\n  border-inline-end: none;\n}\n\n.kindSecondary_a54c589178.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .mainButton_2ade24348b {\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary_a54c589178.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .mainButton_2ade24348b:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary_a54c589178.colorPrimary_050bce00ed.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.kindSecondary_a54c589178.colorPrimary_050bce00ed.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5 {\n  color: var(--primary-color);\n  border-color: var(--primary-color);\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary_a54c589178.colorPrimary_050bce00ed.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary_a54c589178.colorBrand_b2aa6c5794.mainActive_b2aa6c5794 .mainButton_2ade24348b {\n  background-color: var(--brand-selected-color);\n}\n\n.kindSecondary_a54c589178.colorBrand_b2aa6c5794.mainActive_b2aa6c5794 .secondaryButton_ce1114e9d5 {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n\n.kindSecondary_a54c589178.colorBrand_b2aa6c5794.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5,\n.kindSecondary_a54c589178.colorBrand_b2aa6c5794.splitContentOpen_88eafafb7e .secondaryButton_ce1114e9d5:hover {\n  color: var(--brand-color);\n  border-color: var(--brand-color);\n  background-color: var(--brand-selected-color);\n}");export{e as default};
 //# sourceMappingURL=SplitButton.module.scss.js.map

package/dist/src/components/SplitButton/SplitButtonConstants.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{keyCodes as t}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{HideShowEvent as o}from"../../../components/dialog/dist/Dialog/DialogConstants.js";var s={main:8,secondary:0},n=[o.CLICK],a=[o.CLICK_OUTSIDE,o.CLICK,o.ESCAPE_KEY],T="monday-style-split-button__secondary-button-wrapper",i=[t.ENTER],m={BOTTOM:"bottom",BOTTOM_START:"bottom-start",BOTTOM_END:"bottom-end"},e={BOTTOM_START:"bottom-start",BOTTOM_MIDDLE:"bottom",BOTTOM_END:"bottom-end"},r="additional actions";export{a as DEFAULT_DIALOG_HIDE_TRIGGER,n as DEFAULT_DIALOG_SHOW_TRIGGER,s as DIALOG_MOVE_BY,m as DialogPosition,i as ENTER_KEYS,r as SECONDARY_BUTTON_ARIA_LABEL,T as SECONDARY_BUTTON_WRAPPER_CLASSNAME,e as SplitButtonSecondaryContentPosition};
+import{keyCodes as s}from"../../constants/keyCodes.js";import"../../constants/sizes.js";var t={main:8,secondary:0},o=["click"],c=["clickoutside","click","esckey"],i="monday-style-split-button__secondary-button-wrapper",n=[s.ENTER],a="additional actions";export{c as DEFAULT_DIALOG_HIDE_TRIGGER,o as DEFAULT_DIALOG_SHOW_TRIGGER,t as DIALOG_MOVE_BY,n as ENTER_KEYS,a as SECONDARY_BUTTON_ARIA_LABEL,i as SECONDARY_BUTTON_WRAPPER_CLASSNAME};
 //# sourceMappingURL=SplitButtonConstants.js.map

package/dist/src/components/SplitButton/SplitButtonConstants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButtonConstants.js","sources":["../../../../src/components/SplitButton/SplitButtonConstants.ts"],"sourcesContent":["// Constants\nimport { keyCodes } from \"../../constants\";\nimport { ~~DialogTriggerEventEnum~~ ~~as HideShowEvent~~ } from \"@vibe/dialog\";\n\nexport const DIALOG_MOVE_BY = { main: 8, secondary: 0 };\nexport const DEFAULT_DIALOG_SHOW_TRIGGER = [~~HideShowEvent.CLICK~~];\nexport const DEFAULT_DIALOG_HIDE_TRIGGER = [~~HideShowEvent.CLICK_OUTSIDE~~, ~~HideShowEvent.CLICK~~, ~~HideShowEvent.ESCAPE_KEY~~];\nexport const SECONDARY_BUTTON_WRAPPER_CLASSNAME = \"monday-style-split-button__secondary-button-wrapper\";\nexport const EMPTY_ARR: string[] = [];\n\nexport const ENTER_KEYS = [keyCodes.ENTER];\n\n//TODO Remove once change dialogPosition to const\nexport const DialogPosition = {\n BOTTOM: \"bottom\",\n BOTTOM_START: \"bottom-start\",\n BOTTOM_END: \"bottom-end\"\n} as const;\n\nexport const SplitButtonSecondaryContentPosition = {\n BOTTOM_START: DialogPosition.BOTTOM_START,\n BOTTOM_MIDDLE: DialogPosition.BOTTOM,\n BOTTOM_END: DialogPosition.BOTTOM_END\n} as const;\n\nexport type SplitButtonSecondaryContentPositionType =\n (typeof SplitButtonSecondaryContentPosition)[keyof typeof SplitButtonSecondaryContentPosition];\n\nexport const SECONDARY_BUTTON_ARIA_LABEL = \"additional actions\";\n"],"names":["DIALOG_MOVE_BY","main","secondary","DEFAULT_DIALOG_SHOW_TRIGGER","~~HideShowEvent","CLICK","~~DEFAULT_DIALOG_HIDE_TRIGGER","~~CLICK_OUTSIDE","ESCAPE_KEY","~~SECONDARY_BUTTON_WRAPPER_CLASSNAME","ENTER_KEYS","keyCodes","ENTER","~~DialogPosition","BOTTOM","BOTTOM_START","BOTTOM_END","SplitButtonSecondaryContentPosition","BOTTOM_MIDDLE","~~SECONDARY_BUTTON_ARIA_LABEL"],"mappings":"~~kLAIO~~,IAAMA,EAAiB,CAAEC,KAAM,EAAGC,UAAW,GACvCC,~~EAA8B~~,~~CAACC~~,~~EAAcC~~,~~OAC7CC~~,~~EAA8B~~,~~CAACF~~,~~EAAcG~~,~~cAAeH~~,~~EAAcC,MAAOD,EAAcI,YAC/FC,~~EAAqC,sDAGrCC,EAAa,CAACC,EAASC,~~OAGvBC~~,~~EAAiB,CAC5BC,OAAQ,SACRC,aAAc,eACdC,WAAY,cAGDC,EAAsC,CACjDF,aAAcF,eACdK,cAAeL,SACfG,WAAYH,cAMDM,~~EAA8B"}
1	+ {"version":3,"file":"SplitButtonConstants.js","sources":["../../../../src/components/SplitButton/SplitButtonConstants.ts"],"sourcesContent":["// Constants\nimport { keyCodes } from \"../../constants\";\nimport type { DialogTriggerEvent } from \"@vibe/dialog\";\n\nexport const DIALOG_MOVE_BY = { main: 8, secondary: 0 };\nexport const DEFAULT_DIALOG_SHOW_TRIGGER: DialogTriggerEvent[] = [\"click\"];\nexport const DEFAULT_DIALOG_HIDE_TRIGGER: DialogTriggerEvent[] = [\"clickoutside\", \"click\", \"esckey\"];\nexport const SECONDARY_BUTTON_WRAPPER_CLASSNAME = \"monday-style-split-button__secondary-button-wrapper\";\nexport const EMPTY_ARR: string[] = [];\n\nexport const ENTER_KEYS = [keyCodes.ENTER];\n\n//TODO Remove once change dialogPosition to const\nexport const DialogPosition = {\n BOTTOM: \"bottom\",\n BOTTOM_START: \"bottom-start\",\n BOTTOM_END: \"bottom-end\"\n} as const;\n\nexport const SplitButtonSecondaryContentPosition = {\n BOTTOM_START: DialogPosition.BOTTOM_START,\n BOTTOM_MIDDLE: DialogPosition.BOTTOM,\n BOTTOM_END: DialogPosition.BOTTOM_END\n} as const;\n\nexport type SplitButtonSecondaryContentPositionType =\n (typeof SplitButtonSecondaryContentPosition)[keyof typeof SplitButtonSecondaryContentPosition];\n\nexport const SECONDARY_BUTTON_ARIA_LABEL = \"additional actions\";\n"],"names":["DIALOG_MOVE_BY","main","secondary","DEFAULT_DIALOG_SHOW_TRIGGER","DEFAULT_DIALOG_HIDE_TRIGGER","SECONDARY_BUTTON_WRAPPER_CLASSNAME","ENTER_KEYS","keyCodes","ENTER","SECONDARY_BUTTON_ARIA_LABEL"],"mappings":"wFAIO,IAAMA,EAAiB,CAAEC,KAAM,EAAGC,UAAW,GACvCC,EAAoD,CAAC,SACrDC,EAAoD,CAAC,eAAgB,QAAS,UAC9EC,EAAqC,sDAGrCC,EAAa,CAACC,EAASC,OAkBvBC,EAA8B"}

package/dist/src/components/Steps/Steps.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as s,useRef as e}from"react";import i from"classnames";import{NOOP as n}from"../../utils/function-utils.js";import r from"../../hooks/useMergeRef.js";import{StepsHeader as a}from"./StepsHeader.js";import{StepsType as p,StepsColor as d}from"./StepsConstants.js";import{getTestId as m,ComponentDefaultTestId as c}from"../../tests/testIds.js";import{withStaticProps as l}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import u from"./Steps.module.scss.js";import{ComponentVibeId as v}from"../../tests/constants.js";var f=l(s((function(s,p){var d=s.className,l=s.id,f=s["data-testid"],B=s.steps,S=void 0===B?[]:B,P=s.activeStepIndex,j=void 0===P?0:P,h=s.type,g=void 0===h?"gallery":h,y=s.onChangeActiveStep,H=void 0===y?n:y,x=s.onFinish,C=s.color,I=s.areNavigationButtonsHidden,N=void 0!==I&&I,b=s.isContentOnTop,E=void 0!==b&&b,T=s.backButtonProps,k=void 0===T?{}:T,O=s.nextButtonProps,A=void 0===O?{}:O,F=s.finishButtonProps,_=void 0===F?{}:F,w=s.areButtonsIconsHidden,M=void 0!==w&&w,R=e(null),q=r(p,R);return o.createElement("div",{ref:q,className:i(u.steps,d),id:l,"data-testid":f||m(c.STEPS,l),"data-vibe":v.STEPS},E&&S[j],o.createElement(a,{onChangeActiveStep:H,type:g,activeStepIndex:j,stepsCount:S.length,areNavigationButtonsHidden:N,color:C,backButtonProps:k,nextButtonProps:A,finishButtonProps:_,areButtonsIconsHidden:M,onFinish:x,className:i(t(t({},u.contentOnTop,E),u.contentOnBottom,!E))}),!E&&S[j])})),{types:p,colors:d});export{f as default};
+import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as e,useRef as s}from"react";import n from"classnames";import{NOOP as i}from"../../utils/function-utils.js";import r from"../../hooks/useMergeRef.js";import{StepsHeader as a}from"./StepsHeader.js";import{getTestId as d,ComponentDefaultTestId as p}from"../../tests/testIds.js";import m from"./Steps.module.scss.js";import{ComponentVibeId as c}from"../../tests/constants.js";var l=e((function(e,l){var u=e.className,v=e.id,f=e["data-testid"],B=e.steps,P=void 0===B?[]:B,S=e.activeStepIndex,g=void 0===S?0:S,h=e.type,j=void 0===h?"gallery":h,H=e.onChangeActiveStep,x=void 0===H?i:H,I=e.onFinish,N=e.color,b=e.areNavigationButtonsHidden,y=void 0!==b&&b,C=e.isContentOnTop,E=void 0!==C&&C,T=e.backButtonProps,k=void 0===T?{}:T,O=e.nextButtonProps,A=void 0===O?{}:O,F=e.finishButtonProps,_=void 0===F?{}:F,M=e.areButtonsIconsHidden,R=void 0!==M&&M,q=s(null),w=r(l,q);return o.createElement("div",{ref:w,className:n(m.steps,u),id:v,"data-testid":f||d(p.STEPS,v),"data-vibe":c.STEPS},E&&P[g],o.createElement(a,{onChangeActiveStep:x,type:j,activeStepIndex:g,stepsCount:P.length,areNavigationButtonsHidden:y,color:N,backButtonProps:k,nextButtonProps:A,finishButtonProps:_,areButtonsIconsHidden:R,onFinish:I,className:n(t(t({},m.contentOnTop,E),m.contentOnBottom,!E))}),!E&&P[g])}));export{l as default};
 //# sourceMappingURL=Steps.js.map

package/dist/src/components/Steps/Steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Steps.js","sources":["../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { StepsHeader } from \"./StepsHeader\";\nimport { ~~StepsColor as StepsColorEnum, StepsType as StepsTypeEnum } from \"./StepsConstants\";\nimport {~~ type StepsColor, type StepsType } from \"./Steps.types\";\nimport { type ButtonProps } from \"@vibe/button\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { ~~withStaticProps,~~ type VibeComponentProps } from \"../../types\";\nimport styles from \"./Steps.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface StepsProps extends VibeComponentProps {\n /*\n The index of the currently active step.\n /\n activeStepIndex?: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep?: (e: React.MouseEvent, stepIndex: number) => void;\n /\n If true, hides the navigation buttons.\n /\n areNavigationButtonsHidden?: boolean;\n /\n The list of steps in the steps component.\n /\n steps?: ReactElement[];\n /\n The visual style of the steps component.\n /\n type?: StepsType;\n /\n The color theme of the steps component.\n /\n color?: StepsColor;\n /\n If true, the content is displayed above the step navigation.\n /\n isContentOnTop?: boolean;\n /\n If true, hides the icons in the navigation buttons.\n /\n areButtonsIconsHidden?: boolean;\n /\n Props applied to the back button.\n /\n backButtonProps?: Partial<ButtonProps>;\n /\n Props applied to the next button.\n /\n nextButtonProps?: Partial<ButtonProps>;\n /\n Props applied to the finish button.\n /\n finishButtonProps?: Partial<ButtonProps>;\n /\n Callback fired when the finish button is clicked.\n */\n onFinish?: (e: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst Steps = forwardRef(\n (\n {\n className,\n id,\n \"data-testid\": dataTestId,\n steps = [],\n activeStepIndex = 0,\n type = \"gallery\",\n onChangeActiveStep = NOOP,\n onFinish,\n color,\n areNavigationButtonsHidden = false,\n isContentOnTop = false,\n backButtonProps = {},\n nextButtonProps = {},\n finishButtonProps = {},\n areButtonsIconsHidden = false\n }: StepsProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.steps, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.STEPS, id)}\n data-vibe={ComponentVibeId.STEPS}\n >\n {isContentOnTop && steps[activeStepIndex]}\n <StepsHeader\n onChangeActiveStep={onChangeActiveStep}\n type={type}\n activeStepIndex={activeStepIndex}\n stepsCount={steps.length}\n areNavigationButtonsHidden={areNavigationButtonsHidden}\n color={color}\n backButtonProps={backButtonProps}\n nextButtonProps={nextButtonProps}\n finishButtonProps={finishButtonProps}\n areButtonsIconsHidden={areButtonsIconsHidden}\n onFinish={onFinish}\n className={cx({\n [styles.contentOnTop]: isContentOnTop,\n [styles.contentOnBottom]: !isContentOnTop\n })}\n />\n {!isContentOnTop && steps[activeStepIndex]}\n </div>\n );\n }\n);\n\~~ninterface StepsStaticProps {\n types: typeof StepsTypeEnum;\n colors: typeof StepsColorEnum;\n}\n\~~nexport default ~~withStaticProps<StepsProps, StepsStaticProps>(~~Steps~~, {\n types: StepsTypeEnum,\n colors: StepsColorEnum\n})~~;\n"],"names":["~~withStaticProps~~","forwardRef","_ref","ref","className","id","dataTestId","_ref$steps","steps","_ref$activeStepIndex","activeStepIndex","_ref$type","type","_ref$onChangeActiveSt","onChangeActiveStep","NOOP","onFinish","color","_ref$areNavigationBut","areNavigationButtonsHidden","_ref$isContentOnTop","isContentOnTop","_ref$backButtonProps","backButtonProps","_ref$nextButtonProps","nextButtonProps","_ref$finishButtonProp","finishButtonProps","_ref$areButtonsIconsH","areButtonsIconsHidden","componentRef","useRef","mergedRef","useMergeRef","React","createElement","cx","styles","getTestId","ComponentDefaultTestId","STEPS","ComponentVibeId","StepsHeader","stepsCount","length","_defineProperty","contentOnTop","contentOnBottom"~~,"types","StepsTypeEnum","colors","StepsColorEnum"~~],"mappings":"~~koBAgEA~~,~~IA6DeA~~,~~EAAAA~~,~~EA7DDC,~~GACZ,SAAAC,EAkBEC,GACE,IAjBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GACeC,EAAUJ,EAAzB,eAAaK,EAAAL,EACbM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAP,EACVQ,gBAAAA,OAAkB,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACnBU,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EAChBY,mBAAAA,OAAqBC,IAAHF,EAAGE,EAAIF,EACzBG,EAAQd,EAARc,SACAC,EAAKf,EAALe,MAAKC,EAAAhB,EACLiB,2BAAAA,OAA6B,IAAHD,GAAQA,EAAAE,EAAAlB,EAClCmB,eAAAA,OAAiB,IAAHD,GAAQA,EAAAE,EAAApB,EACtBqB,gBAAAA,OAAe,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAAtB,EACpBuB,gBAAAA,OAAe,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAAxB,EACpByB,kBAAAA,OAAiB,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAA1B,EACtB2B,sBAAAA,OAAwB,IAAHD,GAAQA,EAIzBE,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAEnC,OACEI,EAAAC,cAAA,MAAA,CACEhC,IAAK6B,EACL5B,UAAWgC,EAAGC,EAAO7B,MAAOJ,GAC5BC,GAAIA,EAAE,cACOC,GAAcgC,EAAUC,EAAuBC,MAAOnC,GACxD,YAAAoC,EAAgBD,OAE1BnB,GAAkBb,EAAME,GACzBwB,EAACC,cAAAO,GACC5B,mBAAoBA,EACpBF,KAAMA,EACNF,gBAAiBA,EACjBiC,WAAYnC,EAAMoC,OAClBzB,2BAA4BA,EAC5BF,MAAOA,EACPM,gBAAiBA,EACjBE,gBAAiBA,EACjBE,kBAAmBA,EACnBE,sBAAuBA,EACvBb,SAAUA,EACVZ,UAAWgC,EAAES,EAAAA,KACVR,EAAOS,aAAezB,GACtBgB,EAAOU,iBAAmB1B,OAG7BA,GAAkBb,EAAME,GAGhC~~,IAQkE,CAClEsC,MAAOC,EACPC,OAAQC~~"}
1	+ {"version":3,"file":"Steps.js","sources":["../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { StepsHeader } from \"./StepsHeader\";\nimport { type StepsColor, type StepsType } from \"./Steps.types\";\nimport { type ButtonProps } from \"@vibe/button\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Steps.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface StepsProps extends VibeComponentProps {\n /*\n The index of the currently active step.\n /\n activeStepIndex?: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep?: (e: React.MouseEvent, stepIndex: number) => void;\n /\n If true, hides the navigation buttons.\n /\n areNavigationButtonsHidden?: boolean;\n /\n The list of steps in the steps component.\n /\n steps?: ReactElement[];\n /\n The visual style of the steps component.\n /\n type?: StepsType;\n /\n The color theme of the steps component.\n /\n color?: StepsColor;\n /\n If true, the content is displayed above the step navigation.\n /\n isContentOnTop?: boolean;\n /\n If true, hides the icons in the navigation buttons.\n /\n areButtonsIconsHidden?: boolean;\n /\n Props applied to the back button.\n /\n backButtonProps?: Partial<ButtonProps>;\n /\n Props applied to the next button.\n /\n nextButtonProps?: Partial<ButtonProps>;\n /\n Props applied to the finish button.\n /\n finishButtonProps?: Partial<ButtonProps>;\n /\n Callback fired when the finish button is clicked.\n */\n onFinish?: (e: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst Steps = forwardRef(\n (\n {\n className,\n id,\n \"data-testid\": dataTestId,\n steps = [],\n activeStepIndex = 0,\n type = \"gallery\",\n onChangeActiveStep = NOOP,\n onFinish,\n color,\n areNavigationButtonsHidden = false,\n isContentOnTop = false,\n backButtonProps = {},\n nextButtonProps = {},\n finishButtonProps = {},\n areButtonsIconsHidden = false\n }: StepsProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <div\n ref={mergedRef}\n className={cx(styles.steps, className)}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.STEPS, id)}\n data-vibe={ComponentVibeId.STEPS}\n >\n {isContentOnTop && steps[activeStepIndex]}\n <StepsHeader\n onChangeActiveStep={onChangeActiveStep}\n type={type}\n activeStepIndex={activeStepIndex}\n stepsCount={steps.length}\n areNavigationButtonsHidden={areNavigationButtonsHidden}\n color={color}\n backButtonProps={backButtonProps}\n nextButtonProps={nextButtonProps}\n finishButtonProps={finishButtonProps}\n areButtonsIconsHidden={areButtonsIconsHidden}\n onFinish={onFinish}\n className={cx({\n [styles.contentOnTop]: isContentOnTop,\n [styles.contentOnBottom]: !isContentOnTop\n })}\n />\n {!isContentOnTop && steps[activeStepIndex]}\n </div>\n );\n }\n);\n\nexport default Steps;\n"],"names":["Steps","forwardRef","_ref","ref","className","id","dataTestId","_ref$steps","steps","_ref$activeStepIndex","activeStepIndex","_ref$type","type","_ref$onChangeActiveSt","onChangeActiveStep","NOOP","onFinish","color","_ref$areNavigationBut","areNavigationButtonsHidden","_ref$isContentOnTop","isContentOnTop","_ref$backButtonProps","backButtonProps","_ref$nextButtonProps","nextButtonProps","_ref$finishButtonProp","finishButtonProps","_ref$areButtonsIconsH","areButtonsIconsHidden","componentRef","useRef","mergedRef","useMergeRef","React","createElement","cx","styles","getTestId","ComponentDefaultTestId","STEPS","ComponentVibeId","StepsHeader","stepsCount","length","_defineProperty","contentOnTop","contentOnBottom"],"mappings":"0dA+DMA,IAAAA,EAAQC,GACZ,SAAAC,EAkBEC,GACE,IAjBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GACeC,EAAUJ,EAAzB,eAAaK,EAAAL,EACbM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAP,EACVQ,gBAAAA,OAAkB,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACnBU,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EAChBY,mBAAAA,OAAqBC,IAAHF,EAAGE,EAAIF,EACzBG,EAAQd,EAARc,SACAC,EAAKf,EAALe,MAAKC,EAAAhB,EACLiB,2BAAAA,OAA6B,IAAHD,GAAQA,EAAAE,EAAAlB,EAClCmB,eAAAA,OAAiB,IAAHD,GAAQA,EAAAE,EAAApB,EACtBqB,gBAAAA,OAAe,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAAtB,EACpBuB,gBAAAA,OAAe,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAAxB,EACpByB,kBAAAA,OAAiB,IAAAD,EAAG,CAAE,EAAAA,EAAAE,EAAA1B,EACtB2B,sBAAAA,OAAwB,IAAHD,GAAQA,EAIzBE,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAEnC,OACEI,EAAAC,cAAA,MAAA,CACEhC,IAAK6B,EACL5B,UAAWgC,EAAGC,EAAO7B,MAAOJ,GAC5BC,GAAIA,EAAE,cACOC,GAAcgC,EAAUC,EAAuBC,MAAOnC,GACxD,YAAAoC,EAAgBD,OAE1BnB,GAAkBb,EAAME,GACzBwB,EAACC,cAAAO,GACC5B,mBAAoBA,EACpBF,KAAMA,EACNF,gBAAiBA,EACjBiC,WAAYnC,EAAMoC,OAClBzB,2BAA4BA,EAC5BF,MAAOA,EACPM,gBAAiBA,EACjBE,gBAAiBA,EACjBE,kBAAmBA,EACnBE,sBAAuBA,EACvBb,SAAUA,EACVZ,UAAWgC,EAAES,EAAAA,KACVR,EAAOS,aAAezB,GACtBgB,EAAOU,iBAAmB1B,OAG7BA,GAAkBb,EAAME,GAGhC"}

package/dist/src/components/Steps/Steps.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={steps:"steps_0e44a1e0b9",contentOnTop:"contentOnTop_fbe3e4fd33",contentOnBottom:"contentOnBottom_54f9512c23"};!function(e){const t="s_id-9e4623f942e8_3_86_0";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)}(".steps_0e44a1e0b9 .contentOnTop_fbe3e4fd33 {\n  margin-top: var(--spacing-medium);\n}\n.steps_0e44a1e0b9 .contentOnBottom_54f9512c23 {\n  margin-bottom: var(--spacing-small);\n}");export{e as default};
+var e={steps:"steps_bd72a10a2a",contentOnTop:"contentOnTop_3b51981490",contentOnBottom:"contentOnBottom_866c0a3ae7"};!function(e){const t="s_id-7ec46f3af3a6_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".steps_bd72a10a2a .contentOnTop_3b51981490 {\n  margin-top: var(--space-16);\n}\n.steps_bd72a10a2a .contentOnBottom_866c0a3ae7 {\n  margin-bottom: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=Steps.module.scss.js.map

package/dist/src/components/Steps/StepsCommand.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={command:"command_477ec97fea",backward:"backward_98c95c055e",icon:"icon_634b463ad9",disabled:"disabled_afc32eb59c",colorOnPrimaryColor:"colorOnPrimaryColor_c49a5008de",colorOnInvertedBackground:"colorOnInvertedBackground_472957d1c2"};!function(e){const n="s_id-b004c6aa2b0d_3_86_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".command_477ec97fea {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.command_477ec97fea.backward_98c95c055e {\n  flex-direction: row-reverse;\n}\n.icon_634b463ad9 {\n  color: var(--icon-color);\n  width: 15.5px;\n  height: 15.5px;\n}\n.icon_634b463ad9.disabled_afc32eb59c {\n  color: var(--disabled-text-color);\n}\n.icon_634b463ad9.colorOnPrimaryColor_c49a5008de {\n  color: var(--text-color-on-primary);\n}\n.icon_634b463ad9.colorOnInvertedBackground_472957d1c2 {\n  color: var(--text-color-on-inverted);\n}");export{e as default};
+var e={command:"command_f65bd86d31",backward:"backward_c51d692b83",icon:"icon_1479c1ec0e",disabled:"disabled_f5fefd55af",colorOnPrimaryColor:"colorOnPrimaryColor_4a5b3cc12f",colorOnInvertedBackground:"colorOnInvertedBackground_4983c709fb"};!function(e){const n="s_id-b004c6aa2b0d_4_0_0-alpha_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const c=document.createElement("style");c.id=n,o.firstChild?o.insertBefore(c,o.firstChild):o.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".command_f65bd86d31 {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.command_f65bd86d31.backward_c51d692b83 {\n  flex-direction: row-reverse;\n}\n.icon_1479c1ec0e {\n  color: var(--icon-color);\n  width: 15.5px;\n  height: 15.5px;\n}\n.icon_1479c1ec0e.disabled_f5fefd55af {\n  color: var(--disabled-text-color);\n}\n.icon_1479c1ec0e.colorOnPrimaryColor_4a5b3cc12f {\n  color: var(--text-color-on-primary);\n}\n.icon_1479c1ec0e.colorOnInvertedBackground_4983c709fb {\n  color: var(--text-color-on-inverted);\n}");export{e as default};
 //# sourceMappingURL=StepsCommand.module.scss.js.map

package/dist/src/components/Steps/StepsConstants.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n,o,r,e="Next",i="Back",t="Finish";!function(n){n.NUMBERS="numbers",n.GALLERY="gallery"}(n||(n={})),function(n){n.PAGE="page",n.STEP="step",n.LOCATION="location",n.DATE="date",n.TIME="time"}(o||(o={})),function(n){n.PRIMARY="primary",n.ON_PRIMARY_COLOR="on-primary-color",n.ON_INVERTED_BACKGROUND="on-inverted-background"}(r||(r={}));export{i as BACK_TEXT,t as FINISH_TEXT,e as NEXT_TEXT,r as StepsColor,o as StepsDotAriaCurrent,n as StepsType};
+var a="Next",e="Back",i="Finish";export{e as BACK_TEXT,i as FINISH_TEXT,a as NEXT_TEXT};
 //# sourceMappingURL=StepsConstants.js.map

package/dist/src/components/Steps/StepsConstants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsConstants.js","sources":["../../../../src/components/Steps/StepsConstants.ts"],"sourcesContent":["export const NEXT_TEXT = \"Next\";\nexport const BACK_TEXT = \"Back\";\nexport const FINISH_TEXT = \"Finish\";\n~~\n/*\n @deprecated\n /\nexport enum StepsType {\n NUMBERS = \~~"numbers\",\n GALLERY = \"gallery\"\n}\n\n/\n @deprecated\n /\nexport enum StepsDotAriaCurrent {\n PAGE = \"page\",\n STEP = \"step\",\n LOCATION = \"location\",\n DATE = \"date\",\n TIME = \"time\"\n}\n\n/\n @deprecated\n */\nexport enum StepsColor {\n PRIMARY = \"primary\",\n ON_PRIMARY_COLOR = \"on-primary-color\",\n ON_INVERTED_BACKGROUND = \"on-inverted-background\"\n}\n"],"names":["~~StepsType","StepsDotAriaCurrent","StepsColor","~~NEXT_TEXT","BACK_TEXT","FINISH_TEXT"],"mappings":"AAAO,~~IAOKA~~,~~EAQAC,EAWAC,EA1BCC,~~EAAY,OACZC,EAAY,OACZC,EAAc,UAK3B,SAAYL,GACVA,EAAA,QAAA,UACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,OACAA,EAAA,SAAA,WACAA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAND,CAAYA,IAAAA,EAMX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,iBAAA,mBACAA,EAAA,uBAAA,wBACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
1	+ {"version":3,"file":"StepsConstants.js","sources":["../../../../src/components/Steps/StepsConstants.ts"],"sourcesContent":["export const NEXT_TEXT = \"Next\";\nexport const BACK_TEXT = \"Back\";\nexport const FINISH_TEXT = \"Finish\";\n"],"names":["NEXT_TEXT","BACK_TEXT","FINISH_TEXT"],"mappings":"AAAO,IAAMA,EAAY,OACZC,EAAY,OACZC,EAAc"}

package/dist/src/components/Steps/StepsDot.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import{camelCase as o,noop as t}from"es-toolkit";import s from"react";import i from"./StepsDot.module.scss.js";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";var l=function(l){var m=l.isActive,p=l.onClick,c=void 0===p?t:p,n=l.ariaCurrent,u=l.className;return s.createElement("button",{type:"button","aria-label":l.ariaLabel,"aria-current":!!m&&(void 0===n?"step":n),className:e(i.dot,a(i,o("color-"+l.color)),r({},i.isActive,m),u),onClick:c})};export{l as StepsDot};
+import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import{camelCase as o,noop as t}from"es-toolkit";import s from"react";import i from"./StepsDot.module.scss.js";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";var l=function(l){var m=l.isActive,p=l.onClick,c=void 0===p?t:p,n=l.ariaCurrent,u=l.className;return s.createElement("button",{type:"button","aria-label":l["aria-label"],"aria-current":!!m&&(void 0===n?"step":n),className:e(i.dot,a(i,o("color-"+l.color)),r({},i.isActive,m),u),onClick:c})};export{l as StepsDot};
 //# sourceMappingURL=StepsDot.js.map

package/dist/src/components/Steps/StepsDot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsDot.js","sources":["../../../../src/components/Steps/StepsDot.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { type StepsColor, type StepsDotAriaCurrent } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport React, { type FC } from \"react\";\nimport styles from \"./StepsDot.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\n\nexport interface StepsDotProps extends VibeComponentProps {\n /*\n Callback fired when the dot is clicked.\n /\n onClick?: (e: React.MouseEvent) => void;\n /\n ARIA attribute to indicate the current step.\n /\n ariaCurrent?: StepsDotAriaCurrent \| boolean;\n /\n If true, marks the dot as active.\n /\n isActive?: boolean;\n /\n The ARIA label for the dot.\n /\n ~~ariaLabel~~?: string;\n /\n The color theme of the dot.\n */\n color?: StepsColor;\n}\n\nexport const StepsDot: FC<StepsDotProps> = ({\n isActive,\n onClick = NOOP,\n ariaCurrent = \"step\",\n ariaLabel,\n color,\n className\n}: StepsDotProps) => {\n return (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n aria-current={isActive ? ariaCurrent : false}\n className={cx(\n styles.dot,\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.isActive]: isActive\n },\n className\n )}\n onClick={onClick}\n />\n );\n};\n"],"names":["StepsDot","_ref","isActive","_ref$onClick","onClick","NOOP","_ref$ariaCurrent","ariaCurrent","className","React","createElement","type","~~ariaLabel","~~cx","styles","dot","getStyle","camelCase","color","_defineProperty"],"mappings":"mSA+BaA,EAA8B,SAAtBC,GAOD,IANlBC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAL,EACdM,YAGAC,EAASP,EAATO,UAEA,OACEC,EACEC,cAAA,SAAA,CAAAC,KAAK,~~sBANAV~~,~~EAATW~~,~~UAOyB~~,~~iBACPV~~,SATJ,IAAHI,EAAG,OAAMA,GAUhBE,~~UAAWK~~,EACTC,EAAOC,IACPC,EAASF,EAAQG,EAAU,~~SAV5BhB~~,~~EAALiB~~,QAUmDC,EAE1CL,GAAAA,~~EAAOZ~~,SAAWA,GAErBM,GAEFJ,QAASA,GAGf"}
1	+ {"version":3,"file":"StepsDot.js","sources":["../../../../src/components/Steps/StepsDot.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { type StepsColor, type StepsDotAriaCurrent } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport React, { type FC } from \"react\";\nimport styles from \"./StepsDot.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\n\nexport interface StepsDotProps extends VibeComponentProps {\n /*\n Callback fired when the dot is clicked.\n /\n onClick?: (e: React.MouseEvent) => void;\n /\n ARIA attribute to indicate the current step.\n /\n ariaCurrent?: StepsDotAriaCurrent \| boolean;\n /\n If true, marks the dot as active.\n /\n isActive?: boolean;\n /\n The ARIA label for the dot.\n /\n \"aria-label\"?: string;\n /\n The color theme of the dot.\n */\n color?: StepsColor;\n}\n\nexport const StepsDot: FC<StepsDotProps> = ({\n isActive,\n onClick = NOOP,\n ariaCurrent = \"step\",\n \"aria-label\": ariaLabel,\n color,\n className\n}: StepsDotProps) => {\n return (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n aria-current={isActive ? ariaCurrent : false}\n className={cx(\n styles.dot,\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.isActive]: isActive\n },\n className\n )}\n onClick={onClick}\n />\n );\n};\n"],"names":["StepsDot","_ref","isActive","_ref$onClick","onClick","NOOP","_ref$ariaCurrent","ariaCurrent","className","React","createElement","type","cx","styles","dot","getStyle","camelCase","color","_defineProperty"],"mappings":"mSA+BaA,EAA8B,SAAtBC,GAOD,IANlBC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAL,EACdM,YAGAC,EAASP,EAATO,UAEA,OACEC,EACEC,cAAA,SAAA,CAAAC,KAAK,sBANcV,EAAvB,cAOyB,iBACPC,SATJ,IAAHI,EAAG,OAAMA,GAUhBE,UAAWI,EACTC,EAAOC,IACPC,EAASF,EAAQG,EAAU,SAV5Bf,EAALgB,QAUmDC,EAE1CL,GAAAA,EAAOX,SAAWA,GAErBM,GAEFJ,QAASA,GAGf"}

package/dist/src/components/Steps/StepsDot.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={dot:"dot_48ee318a7b","focus-visible":"focus-visible_5db8d7a1e4",isActive:"isActive_2daf1339bc",colorOnPrimaryColor:"colorOnPrimaryColor_6c645965b7",colorOnInvertedBackground:"colorOnInvertedBackground_c0a8ef495d"};!function(n){const o="s_id-cedbbb07e913_3_86_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.dot_48ee318a7b {\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  width: 6px;\n  height: 6px;\n  cursor: pointer;\n  border-radius: 50%;\n  background: var(--ui-border-color);\n  transform-origin: center;\n  transform: scale(1);\n  transition: transform var(--motion-productive-long) var(--motion-timing-transition), background var(--motion-productive-long) var(--motion-timing-transition);\n}\n.dot_48ee318a7b:focus-visible, .dot_48ee318a7b.focus-visible_5db8d7a1e4 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.dot_48ee318a7b:focus:not(.focus-visible_5db8d7a1e4) {\n  outline: none;\n}\n.dot_48ee318a7b:focus-visible, .dot_48ee318a7b.focus-visible_5db8d7a1e4 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.dot_48ee318a7b:focus:not(.focus-visible_5db8d7a1e4) {\n  outline: none;\n}\n.dot_48ee318a7b:hover {\n  transform: scale(1.3);\n}\n.isActive_2daf1339bc {\n  background: var(--primary-color);\n  transform: scale(1.3);\n}\n.colorOnPrimaryColor_6c645965b7.dot_48ee318a7b {\n  background: var(--primary-hover-color);\n}\n.colorOnPrimaryColor_6c645965b7.dot_48ee318a7b:focus-visible, .colorOnPrimaryColor_6c645965b7.dot_48ee318a7b.focus-visible_5db8d7a1e4 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.colorOnPrimaryColor_6c645965b7.dot_48ee318a7b:focus:not(.focus-visible_5db8d7a1e4) {\n  outline: none;\n}\n.colorOnPrimaryColor_6c645965b7.dot_48ee318a7b.isActive_2daf1339bc {\n  background: var(--text-color-on-primary);\n}\n.colorOnInvertedBackground_c0a8ef495d.dot_48ee318a7b {\n  background: var(--placeholder-color);\n}\n.colorOnInvertedBackground_c0a8ef495d.dot_48ee318a7b.isActive_2daf1339bc {\n  background: var(--text-color-on-inverted);\n}");export{n as default};
+var n={dot:"dot_7b015b00d4","focus-visible":"focus-visible_b9390e7de1",isActive:"isActive_b18d5382d7",colorOnPrimaryColor:"colorOnPrimaryColor_da9d82df65",colorOnInvertedBackground:"colorOnInvertedBackground_f307ec747f"};!function(n){const o="s_id-1f61a81d1377_4_0_0-alpha_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.dot_7b015b00d4 {\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  width: 6px;\n  height: 6px;\n  cursor: pointer;\n  border-radius: 50%;\n  background: var(--ui-border-color);\n  transform-origin: center;\n  transform: scale(1);\n  transition: transform var(--motion-productive-long) var(--motion-timing-transition), background var(--motion-productive-long) var(--motion-timing-transition);\n}\n.dot_7b015b00d4:focus-visible, .dot_7b015b00d4.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.dot_7b015b00d4:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.dot_7b015b00d4:focus-visible, .dot_7b015b00d4.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.dot_7b015b00d4:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.dot_7b015b00d4:hover {\n  transform: scale(1.3);\n}\n.isActive_b18d5382d7 {\n  background: var(--primary-color);\n  transform: scale(1.3);\n}\n.colorOnPrimaryColor_da9d82df65.dot_7b015b00d4 {\n  background: var(--primary-hover-color);\n}\n.colorOnPrimaryColor_da9d82df65.dot_7b015b00d4:focus-visible, .colorOnPrimaryColor_da9d82df65.dot_7b015b00d4.focus-visible_b9390e7de1 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.colorOnPrimaryColor_da9d82df65.dot_7b015b00d4:focus:not(.focus-visible_b9390e7de1) {\n  outline: none;\n}\n.colorOnPrimaryColor_da9d82df65.dot_7b015b00d4.isActive_b18d5382d7 {\n  background: var(--text-color-on-primary);\n}\n.colorOnInvertedBackground_f307ec747f.dot_7b015b00d4 {\n  background: var(--placeholder-color);\n}\n.colorOnInvertedBackground_f307ec747f.dot_7b015b00d4.isActive_b18d5382d7 {\n  background: var(--text-color-on-inverted);\n}");export{n as default};
 //# sourceMappingURL=StepsDot.module.scss.js.map

package/dist/src/components/Steps/StepsGalleryHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useMemo as t,useCallback as r}from"react";import{range as n}from"es-toolkit";import o from"classnames";import{StepsDot as a}from"./StepsDot.js";import c from"./StepsGalleryHeader.module.scss.js";var s=function(s){var i=s.activeStepIndex,l=s.stepsCount,u=s.onChangeActiveStep,m=s.stepDescriptionFunc,p=s.color,f=s.className,d=t((function(){return n(l)}),[l]),v=r((function(e){return"Step number ".concat(e)}),[]),y=m||v,S=t((function(){return d.map((function(e){return function(t){return u(t,e)}}))}),[u,d]),g=t((function(){return d.map((function(t){return e.createElement(a,{isActive:i===t,key:"monday-style-step-dot-".concat(t+1),ariaLabel:y(t),onClick:S[t],color:p,className:c.galleryHeaderDot})}),[])}),[i,p,S,y,d]);return e.createElement("div",{role:"group",className:o(c.galleryHeader,f)},g||null)};export{s as StepsGalleryHeader};
+import e,{useMemo as t,useCallback as r}from"react";import{range as n}from"es-toolkit";import o from"classnames";import{StepsDot as a}from"./StepsDot.js";import c from"./StepsGalleryHeader.module.scss.js";var s=function(s){var i=s.activeStepIndex,l=s.stepsCount,u=s.onChangeActiveStep,m=s.stepDescriptionFunc,p=s.color,f=s.className,d=t((function(){return n(l)}),[l]),v=r((function(e){return"Step number ".concat(e)}),[]),y=m||v,S=t((function(){return d.map((function(e){return function(t){return u(t,e)}}))}),[u,d]),g=t((function(){return d.map((function(t){return e.createElement(a,{isActive:i===t,key:"monday-style-step-dot-".concat(t+1),"aria-label":y(t),onClick:S[t],color:p,className:c.galleryHeaderDot})}),[])}),[i,p,S,y,d]);return e.createElement("div",{role:"group",className:o(c.galleryHeader,f)},g||null)};export{s as StepsGalleryHeader};
 //# sourceMappingURL=StepsGalleryHeader.js.map

package/dist/src/components/Steps/StepsGalleryHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsGalleryHeader.js","sources":["../../../../src/components/Steps/StepsGalleryHeader.tsx"],"sourcesContent":["import React, { type FC, useCallback, useMemo } from \"react\";\nimport { range } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { StepsDot } from \"./StepsDot\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./StepsGalleryHeader.module.scss\";\nimport { type StepsColor } from \"./Steps.types\";\n\nexport interface StepsGalleryHeaderProps extends VibeComponentProps {\n /*\n The index of the currently active step.\n /\n activeStepIndex: number;\n /\n The total number of steps.\n /\n stepsCount: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n /\n A function to generate step descriptions for accessibility.\n /\n stepDescriptionFunc?: (stepIndex: number) => string;\n /\n The color theme of the gallery header.\n */\n color?: StepsColor;\n}\n\nexport const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({\n activeStepIndex,\n stepsCount,\n onChangeActiveStep,\n stepDescriptionFunc,\n color,\n className\n}) => {\n const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);\n const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);\n const overrideStepDescriptionFunc = stepDescriptionFunc \|\| defaultStepDescriptionFunc;\n const onClickFunctions = useMemo(\n () => stepsPlaceholders.map(stepIndex => (e: React.MouseEvent) => onChangeActiveStep(e, stepIndex)),\n [onChangeActiveStep, stepsPlaceholders]\n );\n\n const galleryDots = useMemo(\n () =>\n stepsPlaceholders.map(\n stepIndex => (\n <StepsDot\n isActive={activeStepIndex === stepIndex}\n key={`monday-style-step-dot-${stepIndex + 1}`}\n ~~ariaLabel~~={overrideStepDescriptionFunc(stepIndex)}\n onClick={onClickFunctions[stepIndex]}\n color={color}\n className={styles.galleryHeaderDot}\n />\n ),\n []\n ),\n [activeStepIndex, color, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]\n );\n\n return (\n <div role=\"group\" className={cx(styles.galleryHeader, className)}>\n {galleryDots \|\| null}\n </div>\n );\n};\n"],"names":["StepsGalleryHeader","_ref","activeStepIndex","stepsCount","onChangeActiveStep","stepDescriptionFunc","color","className","stepsPlaceholders","useMemo","range","defaultStepDescriptionFunc","useCallback","stepIndex","concat","overrideStepDescriptionFunc","onClickFunctions","map","e","galleryDots","React","createElement","StepsDot","isActive","key","~~ariaLabel","~~onClick","styles","galleryHeaderDot","role","cx","galleryHeader"],"mappings":"iNA+BaA,EAAkD,SAAhCC,GAO1B,IANHC,EAAeD,EAAfC,gBACAC,EAAUF,EAAVE,WACAC,EAAkBH,EAAlBG,mBACAC,EAAmBJ,EAAnBI,oBACAC,EAAKL,EAALK,MACAC,EAASN,EAATM,UAEMC,EAAoBC,GAAQ,WAAA,OAAMC,EAAMP,KAAa,CAACA,IACtDQ,EAA6BC,GAAY,SAACC,GAAiB,MAAAC,eAAAA,OAAoBD,EAAW,GAAE,IAC5FE,EAA8BV,GAAuBM,EACrDK,EAAmBP,GACvB,WAAA,OAAMD,EAAkBS,KAAI,SAAAJ,GAAS,OAAI,SAACK,GAAmB,OAAKd,EAAmBc,EAAGL,EAAU,IAAC,GACnG,CAACT,EAAoBI,IAGjBW,EAAcV,GAClB,WAAA,OACED,EAAkBS,KAChB,SAAAJ,GAAS,OACPO,EAAAC,cAACC,EAAQ,CACPC,SAAUrB,IAAoBW,EAC9BW,6BAAGV,OAA2BD,EAAY,~~GAC1CY~~,~~UAAWV~~,EAA4BF,~~GACvCa~~,~~QAASV~~,EAAiBH,GAC1BP,MAAOA,EACPC,~~UAAWoB~~,EAAOC,kBAErB,GACD,MAEJ,~~CAAC1B~~,EAAiBI,EAAOU,EAAkBD,EAA6BP,IAG1E,OACEY,~~uBAAKS~~,KAAK,~~QAAQtB~~,~~UAAWuB~~,EAAGH,EAAOI,~~cAAexB~~,IACnDY,GAAe,KAGtB"}
1	+ {"version":3,"file":"StepsGalleryHeader.js","sources":["../../../../src/components/Steps/StepsGalleryHeader.tsx"],"sourcesContent":["import React, { type FC, useCallback, useMemo } from \"react\";\nimport { range } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { StepsDot } from \"./StepsDot\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./StepsGalleryHeader.module.scss\";\nimport { type StepsColor } from \"./Steps.types\";\n\nexport interface StepsGalleryHeaderProps extends VibeComponentProps {\n /*\n The index of the currently active step.\n /\n activeStepIndex: number;\n /\n The total number of steps.\n /\n stepsCount: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n /\n A function to generate step descriptions for accessibility.\n /\n stepDescriptionFunc?: (stepIndex: number) => string;\n /\n The color theme of the gallery header.\n */\n color?: StepsColor;\n}\n\nexport const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({\n activeStepIndex,\n stepsCount,\n onChangeActiveStep,\n stepDescriptionFunc,\n color,\n className\n}) => {\n const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);\n const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);\n const overrideStepDescriptionFunc = stepDescriptionFunc \|\| defaultStepDescriptionFunc;\n const onClickFunctions = useMemo(\n () => stepsPlaceholders.map(stepIndex => (e: React.MouseEvent) => onChangeActiveStep(e, stepIndex)),\n [onChangeActiveStep, stepsPlaceholders]\n );\n\n const galleryDots = useMemo(\n () =>\n stepsPlaceholders.map(\n stepIndex => (\n <StepsDot\n isActive={activeStepIndex === stepIndex}\n key={`monday-style-step-dot-${stepIndex + 1}`}\n aria-label={overrideStepDescriptionFunc(stepIndex)}\n onClick={onClickFunctions[stepIndex]}\n color={color}\n className={styles.galleryHeaderDot}\n />\n ),\n []\n ),\n [activeStepIndex, color, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]\n );\n\n return (\n <div role=\"group\" className={cx(styles.galleryHeader, className)}>\n {galleryDots \|\| null}\n </div>\n );\n};\n"],"names":["StepsGalleryHeader","_ref","activeStepIndex","stepsCount","onChangeActiveStep","stepDescriptionFunc","color","className","stepsPlaceholders","useMemo","range","defaultStepDescriptionFunc","useCallback","stepIndex","concat","overrideStepDescriptionFunc","onClickFunctions","map","e","galleryDots","React","createElement","StepsDot","isActive","key","onClick","styles","galleryHeaderDot","role","cx","galleryHeader"],"mappings":"iNA+BaA,EAAkD,SAAhCC,GAO1B,IANHC,EAAeD,EAAfC,gBACAC,EAAUF,EAAVE,WACAC,EAAkBH,EAAlBG,mBACAC,EAAmBJ,EAAnBI,oBACAC,EAAKL,EAALK,MACAC,EAASN,EAATM,UAEMC,EAAoBC,GAAQ,WAAA,OAAMC,EAAMP,KAAa,CAACA,IACtDQ,EAA6BC,GAAY,SAACC,GAAiB,MAAAC,eAAAA,OAAoBD,EAAW,GAAE,IAC5FE,EAA8BV,GAAuBM,EACrDK,EAAmBP,GACvB,WAAA,OAAMD,EAAkBS,KAAI,SAAAJ,GAAS,OAAI,SAACK,GAAmB,OAAKd,EAAmBc,EAAGL,EAAU,IAAC,GACnG,CAACT,EAAoBI,IAGjBW,EAAcV,GAClB,WAAA,OACED,EAAkBS,KAChB,SAAAJ,GAAS,OACPO,EAAAC,cAACC,EAAQ,CACPC,SAAUrB,IAAoBW,EAC9BW,6BAAGV,OAA2BD,EAAY,GAAG,aACjCE,EAA4BF,GACxCY,QAAST,EAAiBH,GAC1BP,MAAOA,EACPC,UAAWmB,EAAOC,kBAErB,GACD,MAEJ,CAACzB,EAAiBI,EAAOU,EAAkBD,EAA6BP,IAG1E,OACEY,uBAAKQ,KAAK,QAAQrB,UAAWsB,EAAGH,EAAOI,cAAevB,IACnDY,GAAe,KAGtB"}

package/dist/src/components/Steps/StepsGalleryHeader.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={galleryHeader:"galleryHeader_fca7ab6765",galleryHeaderDot:"galleryHeaderDot_27531df33a"};!function(e){const a="s_id-62748f4c4e74_3_86_0";if("undefined"!=typeof document){const l=document.head||document.getElementsByTagName("head")[0];if(l.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".galleryHeader_fca7ab6765 {\n  margin: 0 var(--spacing-small);\n  display: flex;\n  align-items: center;\n}\n.galleryHeader_fca7ab6765 .galleryHeaderDot_27531df33a {\n  margin-right: var(--spacing-small);\n}\n.galleryHeader_fca7ab6765 .galleryHeaderDot_27531df33a:last-child {\n  margin-right: 0;\n}");export{e as default};
+var e={galleryHeader:"galleryHeader_574d9e007a",galleryHeaderDot:"galleryHeaderDot_4006417eb3"};!function(e){const a="s_id-9ed2aeb182a7_4_0_0-alpha_0";if("undefined"!=typeof document){const l=document.head||document.getElementsByTagName("head")[0];if(l.querySelector("#"+a))return;const n=document.createElement("style");n.id=a,l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".galleryHeader_574d9e007a {\n  margin: 0 var(--space-8);\n  display: flex;\n  align-items: center;\n}\n.galleryHeader_574d9e007a .galleryHeaderDot_4006417eb3 {\n  margin-inline-end: var(--space-8);\n}\n.galleryHeader_574d9e007a .galleryHeaderDot_4006417eb3:last-child {\n  margin-inline-end: 0;\n}");export{e as default};
 //# sourceMappingURL=StepsGalleryHeader.module.scss.js.map

package/dist/src/components/Steps/StepsHeader.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useMemo as t}from"react";import o from"classnames";import{StepsCommand as n}from"./StepsCommand.js";import{StepsGalleryHeader as r}from"./StepsGalleryHeader.js";import{StepsNumbersHeader as s}from"./StepsNumbersHeader.js";import{FINISH_TEXT as i}from"./StepsConstants.js";import a from"./StepsHeader.module.scss.js";import c from"../../../components/button/dist/Button/Button.js";var p=function(p){var m=p.activeStepIndex,l=p.onChangeActiveStep,u=p.stepsCount,d=p.areNavigationButtonsHidden,v=p.backButtonProps,S=p.nextButtonProps,f=p.finishButtonProps,C=p.areButtonsIconsHidden,g=p.color,h=void 0===g?"primary":g,x=p.onFinish,j=p.className,B="gallery"===p.type?r:s,H=t((function(){if(x)return m===u-1}),[m,x,u]);return e.createElement("div",{className:o(a.header,j)},d?null:e.createElement(n,{isNext:!1,isIconHidden:C,onChangeActiveStep:l,activeStepIndex:m,stepsCount:u,buttonProps:v,color:h}),e.createElement(B,{activeStepIndex:m,stepsCount:u,onChangeActiveStep:l,color:h}),d?null:e.createElement(e.Fragment,null,H?e.createElement(c,Object.assign({onClick:x,color:h},f),(null==f?void 0:f.children)||i):e.createElement(n,{isNext:!0,isIconHidden:C,activeStepIndex:m,onChangeActiveStep:l,stepsCount:u,buttonProps:S,color:h})))};export{p as StepsHeader};
+import e,{useMemo as t}from"react";import o from"classnames";import{StepsCommand as n}from"./StepsCommand.js";import{StepsGalleryHeader as r}from"./StepsGalleryHeader.js";import{StepsNumbersHeader as s}from"./StepsNumbersHeader.js";import{FINISH_TEXT as i}from"./StepsConstants.js";import a from"./StepsHeader.module.scss.js";import c from"../../../components/button/dist/Button/Button.js";var p=function(p){var m=p.activeStepIndex,l=p.onChangeActiveStep,u=p.stepsCount,d=p.areNavigationButtonsHidden,v=p.backButtonProps,S=p.nextButtonProps,f=p.finishButtonProps,C=p.areButtonsIconsHidden,g=p.color,h=void 0===g?"primary":g,x=p.onFinish,j=p.className,B="gallery"===p.type?r:s,H=t((function(){return m===u-1}),[m,u]);return e.createElement("div",{className:o(a.header,j)},d?null:e.createElement(n,{isNext:!1,isIconHidden:C,onChangeActiveStep:l,activeStepIndex:m,stepsCount:u,buttonProps:v,color:h}),e.createElement(B,{activeStepIndex:m,stepsCount:u,onChangeActiveStep:l,color:h}),d?null:e.createElement(e.Fragment,null,H?e.createElement(c,Object.assign({onClick:x,color:h},f),(null==f?void 0:f.children)||i):e.createElement(n,{isNext:!0,isIconHidden:C,activeStepIndex:m,onChangeActiveStep:l,stepsCount:u,buttonProps:S,color:h})))};export{p as StepsHeader};
 //# sourceMappingURL=StepsHeader.js.map

package/dist/src/components/Steps/StepsHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsHeader.js","sources":["../../../../src/components/Steps/StepsHeader.tsx"],"sourcesContent":["import React, { type FC, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { StepsCommand } from \"./StepsCommand\";\nimport { StepsGalleryHeader, type StepsGalleryHeaderProps } from \"./StepsGalleryHeader\";\nimport { StepsNumbersHeader, type StepsNumbersHeaderProps } from \"./StepsNumbersHeader\";\nimport { FINISH_TEXT } from \"./StepsConstants\";\nimport { type StepsType, type StepsColor } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport styles from \"./StepsHeader.module.scss\";\n\nexport interface StepsHeaderProps extends VibeComponentProps {\n /*\n The type of steps header.\n /\n type: StepsType;\n /\n The index of the currently active step.\n /\n activeStepIndex: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n /\n The total number of steps.\n /\n stepsCount: number;\n /\n If true, hides the navigation buttons.\n /\n areNavigationButtonsHidden: boolean;\n /\n Props applied to the back button.\n /\n backButtonProps: Partial<ButtonProps>;\n /\n Props applied to the next button.\n /\n nextButtonProps: Partial<ButtonProps>;\n /\n Props applied to the finish button.\n /\n finishButtonProps: Partial<ButtonProps>;\n /\n If true, hides the icons in the navigation buttons.\n /\n areButtonsIconsHidden: boolean;\n /\n The color theme of the steps header.\n /\n color?: StepsColor;\n /\n Callback fired when the finish button is clicked.\n */\n onFinish?: (e: React.MouseEvent) => void;\n}\n\nexport const StepsHeader: FC<StepsHeaderProps> = ({\n type,\n activeStepIndex,\n onChangeActiveStep,\n stepsCount,\n areNavigationButtonsHidden,\n backButtonProps,\n nextButtonProps,\n finishButtonProps,\n areButtonsIconsHidden,\n color = \"primary\",\n onFinish,\n className\n}: StepsHeaderProps) => {\n const SubHeaderComponent: FC<StepsGalleryHeaderProps \| StepsNumbersHeaderProps> =\n type === \"gallery\" ? StepsGalleryHeader : StepsNumbersHeader;\n\n ~~// TODO: [breaking] make finish button as default in next major\n~~ const showFinishButton = useMemo(() => {\n ~~if (!onFinish) {\n~~ return~~;\n }\n return~~ activeStepIndex === stepsCount - 1;\n }, [activeStepIndex, ~~onFinish,~~ stepsCount]);\n\n return (\n <div className={cx(styles.header, className)}>\n {areNavigationButtonsHidden ? null : (\n <StepsCommand\n isNext={false}\n isIconHidden={areButtonsIconsHidden}\n onChangeActiveStep={onChangeActiveStep}\n activeStepIndex={activeStepIndex}\n stepsCount={stepsCount}\n buttonProps={backButtonProps}\n color={color}\n />\n )}\n <SubHeaderComponent\n activeStepIndex={activeStepIndex}\n stepsCount={stepsCount}\n onChangeActiveStep={onChangeActiveStep}\n color={color}\n />\n {areNavigationButtonsHidden ? null : (\n <>\n {showFinishButton ? (\n <Button onClick={onFinish} color={color} {...finishButtonProps}>\n {finishButtonProps?.children \|\| FINISH_TEXT}\n </Button>\n ) : (\n <StepsCommand\n isNext\n isIconHidden={areButtonsIconsHidden}\n activeStepIndex={activeStepIndex}\n onChangeActiveStep={onChangeActiveStep}\n stepsCount={stepsCount}\n buttonProps={nextButtonProps}\n color={color}\n />\n )}\n </>\n )}\n </div>\n );\n};\n"],"names":["StepsHeader","_ref","activeStepIndex","onChangeActiveStep","stepsCount","areNavigationButtonsHidden","backButtonProps","nextButtonProps","finishButtonProps","areButtonsIconsHidden","_ref$color","color","onFinish","className","SubHeaderComponent","type","StepsGalleryHeader","StepsNumbersHeader","showFinishButton","useMemo","React","createElement","cx","styles","header","StepsCommand","isNext","isIconHidden","buttonProps","Fragment","Button","Object","assign","onClick","children","FINISH_TEXT"],"mappings":"0YA0DaA,EAAoC,SAAzBC,GAaD,IAXrBC,EAAeD,EAAfC,gBACAC,EAAkBF,EAAlBE,mBACAC,EAAUH,EAAVG,WACAC,EAA0BJ,EAA1BI,2BACAC,EAAeL,EAAfK,gBACAC,EAAeN,EAAfM,gBACAC,EAAiBP,EAAjBO,kBACAC,EAAqBR,EAArBQ,sBAAqBC,EAAAT,EACrBU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EACjBE,EAAQX,EAARW,SACAC,EAASZ,EAATY,UAEMC,EACK,YAdPb,EAAJc,KAcuBC,EAAqBC,~~EAGtCC~~,EAAmBC,GAAQ,WAC/B,~~GAAKP~~,~~EAGL,OAAOV,~~IAAoBE,EAAa,~~CACzC~~,~~GAAE~~,CAACF,~~EAAiBU~~,~~EAAUR~~,~~IAE/B,~~OACEgB,EAAKC,cAAA,MAAA,CAAAR,UAAWS,EAAGC,EAAOC,OAAQX,IAC/BR,EAA6B,KAC5Be,EAACC,cAAAI,GACCC,QAAQ,EACRC,aAAclB,EACdN,mBAAoBA,EACpBD,gBAAiBA,EACjBE,WAAYA,EACZwB,YAAatB,EACbK,MAAOA,IAGXS,EAAAC,cAACP,EACC,CAAAZ,gBAAiBA,EACjBE,WAAYA,EACZD,mBAAoBA,EACpBQ,MAAOA,IAERN,EAA6B,KAC5Be,EACGC,cAAAD,EAAAS,SAAA,KAAAX,EACCE,EAAAC,cAACS,EAAOC,OAAAC,OAAA,CAAAC,QAASrB,EAAUD,MAAOA,GAAWH,IAC1CA,aAAA,EAAAA,EAAmB0B,WAAYC,GAGlCf,EAACC,cAAAI,GACCC,QAAM,EACNC,aAAclB,EACdP,gBAAiBA,EACjBC,mBAAoBA,EACpBC,WAAYA,EACZwB,YAAarB,EACbI,MAAOA,KAOrB"}
1	+ {"version":3,"file":"StepsHeader.js","sources":["../../../../src/components/Steps/StepsHeader.tsx"],"sourcesContent":["import React, { type FC, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { StepsCommand } from \"./StepsCommand\";\nimport { StepsGalleryHeader, type StepsGalleryHeaderProps } from \"./StepsGalleryHeader\";\nimport { StepsNumbersHeader, type StepsNumbersHeaderProps } from \"./StepsNumbersHeader\";\nimport { FINISH_TEXT } from \"./StepsConstants\";\nimport { type StepsType, type StepsColor } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport styles from \"./StepsHeader.module.scss\";\n\nexport interface StepsHeaderProps extends VibeComponentProps {\n /*\n The type of steps header.\n /\n type: StepsType;\n /\n The index of the currently active step.\n /\n activeStepIndex: number;\n /\n Callback fired when the active step changes.\n /\n onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n /\n The total number of steps.\n /\n stepsCount: number;\n /\n If true, hides the navigation buttons.\n /\n areNavigationButtonsHidden: boolean;\n /\n Props applied to the back button.\n /\n backButtonProps: Partial<ButtonProps>;\n /\n Props applied to the next button.\n /\n nextButtonProps: Partial<ButtonProps>;\n /\n Props applied to the finish button.\n /\n finishButtonProps: Partial<ButtonProps>;\n /\n If true, hides the icons in the navigation buttons.\n /\n areButtonsIconsHidden: boolean;\n /\n The color theme of the steps header.\n /\n color?: StepsColor;\n /\n Callback fired when the finish button is clicked.\n */\n onFinish?: (e: React.MouseEvent) => void;\n}\n\nexport const StepsHeader: FC<StepsHeaderProps> = ({\n type,\n activeStepIndex,\n onChangeActiveStep,\n stepsCount,\n areNavigationButtonsHidden,\n backButtonProps,\n nextButtonProps,\n finishButtonProps,\n areButtonsIconsHidden,\n color = \"primary\",\n onFinish,\n className\n}: StepsHeaderProps) => {\n const SubHeaderComponent: FC<StepsGalleryHeaderProps \| StepsNumbersHeaderProps> =\n type === \"gallery\" ? StepsGalleryHeader : StepsNumbersHeader;\n\n const showFinishButton = useMemo(() => {\n return activeStepIndex === stepsCount - 1;\n }, [activeStepIndex, stepsCount]);\n\n return (\n <div className={cx(styles.header, className)}>\n {areNavigationButtonsHidden ? null : (\n <StepsCommand\n isNext={false}\n isIconHidden={areButtonsIconsHidden}\n onChangeActiveStep={onChangeActiveStep}\n activeStepIndex={activeStepIndex}\n stepsCount={stepsCount}\n buttonProps={backButtonProps}\n color={color}\n />\n )}\n <SubHeaderComponent\n activeStepIndex={activeStepIndex}\n stepsCount={stepsCount}\n onChangeActiveStep={onChangeActiveStep}\n color={color}\n />\n {areNavigationButtonsHidden ? null : (\n <>\n {showFinishButton ? (\n <Button onClick={onFinish} color={color} {...finishButtonProps}>\n {finishButtonProps?.children \|\| FINISH_TEXT}\n </Button>\n ) : (\n <StepsCommand\n isNext\n isIconHidden={areButtonsIconsHidden}\n activeStepIndex={activeStepIndex}\n onChangeActiveStep={onChangeActiveStep}\n stepsCount={stepsCount}\n buttonProps={nextButtonProps}\n color={color}\n />\n )}\n </>\n )}\n </div>\n );\n};\n"],"names":["StepsHeader","_ref","activeStepIndex","onChangeActiveStep","stepsCount","areNavigationButtonsHidden","backButtonProps","nextButtonProps","finishButtonProps","areButtonsIconsHidden","_ref$color","color","onFinish","className","SubHeaderComponent","type","StepsGalleryHeader","StepsNumbersHeader","showFinishButton","useMemo","React","createElement","cx","styles","header","StepsCommand","isNext","isIconHidden","buttonProps","Fragment","Button","Object","assign","onClick","children","FINISH_TEXT"],"mappings":"0YA0DaA,EAAoC,SAAzBC,GAaD,IAXrBC,EAAeD,EAAfC,gBACAC,EAAkBF,EAAlBE,mBACAC,EAAUH,EAAVG,WACAC,EAA0BJ,EAA1BI,2BACAC,EAAeL,EAAfK,gBACAC,EAAeN,EAAfM,gBACAC,EAAiBP,EAAjBO,kBACAC,EAAqBR,EAArBQ,sBAAqBC,EAAAT,EACrBU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EACjBE,EAAQX,EAARW,SACAC,EAASZ,EAATY,UAEMC,EACK,YAdPb,EAAJc,KAcuBC,EAAqBC,EAEtCC,EAAmBC,GAAQ,WAC/B,OAAOjB,IAAoBE,EAAa,CAC1C,GAAG,CAACF,EAAiBE,IAErB,OACEgB,EAAKC,cAAA,MAAA,CAAAR,UAAWS,EAAGC,EAAOC,OAAQX,IAC/BR,EAA6B,KAC5Be,EAACC,cAAAI,GACCC,QAAQ,EACRC,aAAclB,EACdN,mBAAoBA,EACpBD,gBAAiBA,EACjBE,WAAYA,EACZwB,YAAatB,EACbK,MAAOA,IAGXS,EAAAC,cAACP,EACC,CAAAZ,gBAAiBA,EACjBE,WAAYA,EACZD,mBAAoBA,EACpBQ,MAAOA,IAERN,EAA6B,KAC5Be,EACGC,cAAAD,EAAAS,SAAA,KAAAX,EACCE,EAAAC,cAACS,EAAOC,OAAAC,OAAA,CAAAC,QAASrB,EAAUD,MAAOA,GAAWH,IAC1CA,aAAA,EAAAA,EAAmB0B,WAAYC,GAGlCf,EAACC,cAAAI,GACCC,QAAM,EACNC,aAAclB,EACdP,gBAAiBA,EACjBC,mBAAoBA,EACpBC,WAAYA,EACZwB,YAAarB,EACbI,MAAOA,KAOrB"}

package/dist/src/components/Steps/StepsHeader.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={header:"header_7980c3e7d1"};!function(e){const t="s_id-918f12c2f9aa_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".header_7980c3e7d1 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-small);\n}");export{e as default};
+var e={header:"header_215b62da67"};!function(e){const t="s_id-f29720816734_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".header_215b62da67 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=StepsHeader.module.scss.js.map