@vibe/core 3.70.2-alpha-96f20.0 → 3.70.2

package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepIndicator.js","sources":["../../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport {\n  MultiStepType as MultiStepTypeEnum,\n  Size as SizeEnum,\n  StepStatus as StepStatusEnum,\n  TextPlacement as TextPlacementEnum\n} from \"./MultiStepConstants\";\nimport { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type SubIcon, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = forwardRef(\n  (\n    {\n      className,\n      steps = [],\n      type = \"primary\",\n      stepComponentClassName,\n      dividerComponentClassName,\n      fulfilledStepIcon = Check,\n      fulfilledStepIconType = \"svg\",\n      isFulfilledStepDisplayNumber = false,\n      onClick = NOOP,\n      textPlacement = \"horizontal\",\n      id,\n      size,\n      \"data-testid\": dataTestId\n    }: MultiStepIndicatorProps,\n    ref: React.ForwardedRef<HTMLOListElement>\n  ) => {\n    const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n    const renderHorizontalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <React.Fragment key={`${step.titleText}_${index}`}>\n            <StepIndicator\n              {...step}\n              stepNumber={index + 1}\n              type={type}\n              stepComponentClassName={stepComponentClassName}\n              fulfilledStepIcon={fulfilledStepIcon}\n              fulfilledStepIconType={fulfilledStepIconType}\n              onClick={onClick}\n              isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n              size={finalSize}\n            />\n            {index !== steps.length - 1 && (\n              <Divider\n                className={cx(styles.divider, dividerComponentClassName, {\n                  [styles.compact]: finalSize === \"compact\"\n                })}\n              />\n            )}\n          </React.Fragment>\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length,\n        finalSize\n      ]\n    );\n\n    const renderVerticalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <StepIndicator\n            {...step}\n            key={`${step.titleText}_${index}`}\n            stepNumber={index + 1}\n            type={type}\n            stepComponentClassName={stepComponentClassName}\n            fulfilledStepIcon={fulfilledStepIcon}\n            fulfilledStepIconType={fulfilledStepIconType}\n            onClick={onClick}\n            isFollowedByDivider={index !== steps.length - 1}\n            stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n            isVertical\n            isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n          />\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length\n      ]\n    );\n\n    const stepRenderer = useMemo(\n      () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n      [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n    );\n\n    return (\n      <ol\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n        className={cx(styles.wrapper, className)}\n      >\n        {steps.map(stepRenderer)}\n      </ol>\n    );\n  }\n);\n\ninterface MultiStepIndicatorStaticProps {\n  types: typeof MultiStepTypeEnum;\n  stepStatuses: typeof StepStatusEnum;\n  textPlacements: typeof TextPlacementEnum;\n  sizes: typeof SizeEnum;\n}\n\nexport default withStaticProps<MultiStepIndicatorProps, MultiStepIndicatorStaticProps>(MultiStepIndicator, {\n  types: MultiStepTypeEnum,\n  stepStatuses: StepStatusEnum,\n  textPlacements: TextPlacementEnum,\n  sizes: SizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map","types","MultiStepTypeEnum","stepStatuses","StepStatusEnum","textPlacements","TextPlacementEnum","sizes","SizeEnum"],"mappings":"0uBA6DA,IAmHeA,EAAAA,EAnHYC,GACzB,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB,IAUyG,CACzGO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}
+{"version":3,"file":"MultiStepIndicator.js","sources":["../../../../../src/components/MultiStepIndicator/MultiStepIndicator.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport {\n  MultiStepType as MultiStepTypeEnum,\n  Size as SizeEnum,\n  StepStatus as StepStatusEnum,\n  TextPlacement as TextPlacementEnum\n} from \"./MultiStepConstants\";\nimport { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = forwardRef(\n  (\n    {\n      className,\n      steps = [],\n      type = \"primary\",\n      stepComponentClassName,\n      dividerComponentClassName,\n      fulfilledStepIcon = Check,\n      fulfilledStepIconType = \"svg\",\n      isFulfilledStepDisplayNumber = false,\n      onClick = NOOP,\n      textPlacement = \"horizontal\",\n      id,\n      size,\n      \"data-testid\": dataTestId\n    }: MultiStepIndicatorProps,\n    ref: React.ForwardedRef<HTMLOListElement>\n  ) => {\n    const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n    const renderHorizontalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <React.Fragment key={`${step.titleText}_${index}`}>\n            <StepIndicator\n              {...step}\n              stepNumber={index + 1}\n              type={type}\n              stepComponentClassName={stepComponentClassName}\n              fulfilledStepIcon={fulfilledStepIcon}\n              fulfilledStepIconType={fulfilledStepIconType}\n              onClick={onClick}\n              isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n              size={finalSize}\n            />\n            {index !== steps.length - 1 && (\n              <Divider\n                className={cx(styles.divider, dividerComponentClassName, {\n                  [styles.compact]: finalSize === \"compact\"\n                })}\n              />\n            )}\n          </React.Fragment>\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length,\n        finalSize\n      ]\n    );\n\n    const renderVerticalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <StepIndicator\n            {...step}\n            key={`${step.titleText}_${index}`}\n            stepNumber={index + 1}\n            type={type}\n            stepComponentClassName={stepComponentClassName}\n            fulfilledStepIcon={fulfilledStepIcon}\n            fulfilledStepIconType={fulfilledStepIconType}\n            onClick={onClick}\n            isFollowedByDivider={index !== steps.length - 1}\n            stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n            isVertical\n            isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n          />\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length\n      ]\n    );\n\n    const stepRenderer = useMemo(\n      () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n      [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n    );\n\n    return (\n      <ol\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n        className={cx(styles.wrapper, className)}\n      >\n        {steps.map(stepRenderer)}\n      </ol>\n    );\n  }\n);\n\ninterface MultiStepIndicatorStaticProps {\n  types: typeof MultiStepTypeEnum;\n  stepStatuses: typeof StepStatusEnum;\n  textPlacements: typeof TextPlacementEnum;\n  sizes: typeof SizeEnum;\n}\n\nexport default withStaticProps<MultiStepIndicatorProps, MultiStepIndicatorStaticProps>(MultiStepIndicator, {\n  types: MultiStepTypeEnum,\n  stepStatuses: StepStatusEnum,\n  textPlacements: TextPlacementEnum,\n  sizes: SizeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","_ref$steps","steps","_ref$type","type","stepComponentClassName","dividerComponentClassName","_ref$fulfilledStepIco","fulfilledStepIcon","Check","_ref$fulfilledStepIco2","fulfilledStepIconType","_ref$isFulfilledStepD","isFulfilledStepDisplayNumber","_ref$onClick","onClick","NOOP","_ref$textPlacement","textPlacement","id","dataTestId","finalSize","size","renderHorizontalStepIndicator","useCallback","step","index","React","createElement","Fragment","key","concat","titleText","StepIndicator","Object","assign","stepNumber","length","Divider","cx","styles","divider","_defineProperty","compact","renderVerticalStepIndicator","isFollowedByDivider","stepDividerClassName","isVertical","stepRenderer","useMemo","getTestId","ComponentDefaultTestId","MULTI_STEP_INDICATOR","wrapper","map","types","MultiStepTypeEnum","stepStatuses","StepStatusEnum","textPlacements","TextPlacementEnum","sizes","SizeEnum"],"mappings":"mvBA8DA,IAmHeA,EAAAA,EAnHYC,GACzB,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UAASC,EAAAH,EACTI,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACVM,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAsBP,EAAtBO,uBACAC,EAAyBR,EAAzBQ,0BAAyBC,EAAAT,EACzBU,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAKF,EAAAG,EAAAZ,EACzBa,sBAAAA,OAAwB,IAAHD,EAAG,MAAKA,EAAAE,EAAAd,EAC7Be,6BAAAA,OAA+B,IAAHD,GAAQA,EAAAE,EAAAhB,EACpCiB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAnB,EACdoB,cAAAA,OAAgB,IAAHD,EAAG,aAAYA,EAC5BE,EAAErB,EAAFqB,GAEeC,EAAUtB,EAAzB,eAIIuB,EAA8B,aAAlBH,EAA+B,UAL3CpB,EAAJwB,KAOIC,EAAgCC,GACpC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACD,EAAME,SAAS,CAAAC,IAAG,GAAAC,OAAKN,EAAKO,UAAS,KAAAD,OAAIL,IACxCC,EAAAC,cAACK,EACKC,OAAAC,OAAA,CAAA,EAAAV,EACJ,CAAAW,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACTF,6BAA8BA,EAC9BS,KAAMD,KAEPK,IAAUxB,EAAMmC,OAAS,GACxBV,EAACC,cAAAU,GACCtC,UAAWuC,EAAGC,EAAOC,QAASnC,EAAyBoC,EAAA,CAAA,EACpDF,EAAOG,QAAwB,YAAdtB,MAM7B,GACD,CACEN,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,OACNhB,IAIEuB,EAA8BpB,GAClC,SAACC,EAAYC,GACX,OACEC,EAAAC,cAACK,EAAaC,OAAAC,OAAA,CAAA,EACRV,EACJ,CAAAK,IAAG,GAAAC,OAAKN,EAAKO,UAASD,KAAAA,OAAIL,GAC1BU,WAAYV,EAAQ,EACpBtB,KAAMA,EACNC,uBAAwBA,EACxBG,kBAAmBA,EACnBG,sBAAuBA,EACvBI,QAASA,EACT8B,oBAAqBnB,IAAUxB,EAAMmC,OAAS,EAC9CS,qBAAsBP,EAAGC,EAAOC,QAASnC,GACzCyC,cACAlC,6BAA8BA,IAGnC,GACD,CACEE,EACAF,EACAT,EACAC,EACAG,EACAG,EACAL,EACAJ,EAAMmC,SAIJW,EAAeC,GACnB,WAAA,MAAyB,aAAlB/B,EAA+B0B,EAA8BrB,CAA8B,GAClG,CAACL,EAAe0B,EAA6BrB,IAG/C,OACEI,EACEC,cAAA,KAAA,CAAA7B,IAAKA,EACLoB,GAAIA,EACS,cAAAC,GAAc8B,EAAUC,EAAuBC,qBAAsBjC,GAClFnB,UAAWuC,EAAGC,EAAOa,QAASrD,IAE7BE,EAAMoD,IAAIN,GAGjB,IAUyG,CACzGO,MAAOC,EACPC,aAAcC,EACdC,eAAgBC,EAChBC,MAAOC"}

package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as r}from"../../../../tests/testIds.js";import l from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import c,{useState as m,useRef as p,useCallback as d,useEffect as u,useMemo as f}from"react";import{SwitchTransition as v,CSSTransition as y}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import E from"../../../../hooks/useKeyEvent/index.js";import x from"../../../Icon/Icon.js";import b from"../../../Divider/Divider.js";import{NOOP as N}from"../../../../utils/function-utils.js";import k from"../../../HiddenText/HiddenText.js";import C from"../../../Clickable/Clickable.js";import I from"./StepIndicator.module.scss.js";import S from"../../../../../icons/dist/react/Check.js";var T=[s.ENTER,s.SPACE],j=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?c.createElement(c.Fragment,null,e.stepNumber):c.createElement(x,{icon:t,className:l(I.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},A=function(s){var x=s.stepComponentClassName,A=s.stepNumber,g=void 0===A?1:A,D=s.status,h=void 0===D?"pending":D,w=s.titleText,F=void 0===w?"Heading text":w,H=s.subtitleText,P=void 0===H?"Subtitle text":H,L=s.type,z=void 0===L?"primary":L,B=s.fulfilledStepIcon,R=void 0===B?S:B,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?N:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=m(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=p(null),re=p(h),le=d((function(){ae(!0)}),[ae]),se=d((function(){ae(!1)}),[ae]),ce=d((function(){return re.current!==h}),[re,h]),me=d((function(){G&&G(g)}),[G,g]);_({eventName:"animationend",callback:se,ref:oe}),E({keys:T,callback:me,ref:oe}),u((function(){ce()&&le()}),[h,ce,le]),u((function(){re.current=h}),[h]);var pe=f((function(){return"Step ".concat(g,": ").concat(F," - ").concat(P,", status: ").concat(h)}),[h,F,g,P]),de=function(e){return[a(I,n(e||"indicator")),a(I,n("type-".concat(z).concat(e))),a(I,n("status-".concat(h).concat(e))),a(I,n("size-".concat($).concat(e)))]};return c.createElement(C,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(de("")).concat([x,i(i(i({},I.withAnimation,ne),I.clickable,G),I.textPlacementVertical,X)])),"aria-label":pe,onClick:me,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(de("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{classNames:{enter:I.swapEnter,enterActive:I.swapEnterActive,exit:I.swapExit,exitActive:I.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:h},c.createElement("span",{className:l.apply(void 0,t(de("__number-container__text")))},c.createElement(j,{fulfilledStepIcon:R,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:g,status:h}))))),Q&&X&&c.createElement(b,{className:l(I.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(de("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__text-container__title")))},c.createElement(k,{text:h})," ",c.createElement("span",{className:l.apply(void 0,t(de("__text-container__title__text")))},F)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(de("__text-container__subtitle__text")))},P):null))};export{A as default};
+import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as r}from"../../../../tests/testIds.js";import l from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import c,{useState as m,useRef as p,useCallback as d,useEffect as u,useMemo as f}from"react";import{SwitchTransition as v,CSSTransition as y}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import E from"../../../../hooks/useKeyEvent/index.js";import x from"../../../Divider/Divider.js";import{NOOP as b}from"../../../../utils/function-utils.js";import N from"../../../HiddenText/HiddenText.js";import k from"../../../Clickable/Clickable.js";import C from"./StepIndicator.module.scss.js";import I from"../../../../../components/icon/dist/Icon/Icon.js";import S from"../../../../../packages/icons/dist/react/Check.js";var T=[s.ENTER,s.SPACE],j=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?c.createElement(c.Fragment,null,e.stepNumber):c.createElement(I,{icon:t,className:l(C.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},g=function(s){var I=s.stepComponentClassName,g=s.stepNumber,A=void 0===g?1:g,D=s.status,h=void 0===D?"pending":D,w=s.titleText,F=void 0===w?"Heading text":w,H=s.subtitleText,P=void 0===H?"Subtitle text":H,L=s.type,z=void 0===L?"primary":L,B=s.fulfilledStepIcon,R=void 0===B?S:B,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?b:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=m(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=p(null),re=p(h),le=d((function(){ae(!0)}),[ae]),se=d((function(){ae(!1)}),[ae]),ce=d((function(){return re.current!==h}),[re,h]),me=d((function(){G&&G(A)}),[G,A]);_({eventName:"animationend",callback:se,ref:oe}),E({keys:T,callback:me,ref:oe}),u((function(){ce()&&le()}),[h,ce,le]),u((function(){re.current=h}),[h]);var pe=f((function(){return"Step ".concat(A,": ").concat(F," - ").concat(P,", status: ").concat(h)}),[h,F,A,P]),de=function(e){return[a(C,n(e||"indicator")),a(C,n("type-".concat(z).concat(e))),a(C,n("status-".concat(h).concat(e))),a(C,n("size-".concat($).concat(e)))]};return c.createElement(k,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(de("")).concat([I,i(i(i({},C.withAnimation,ne),C.clickable,G),C.textPlacementVertical,X)])),"aria-label":pe,onClick:me,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(de("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{classNames:{enter:C.swapEnter,enterActive:C.swapEnterActive,exit:C.swapExit,exitActive:C.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:h},c.createElement("span",{className:l.apply(void 0,t(de("__number-container__text")))},c.createElement(j,{fulfilledStepIcon:R,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:A,status:h}))))),Q&&X&&c.createElement(x,{className:l(C.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(de("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(de("__text-container__title")))},c.createElement(N,{text:h})," ",c.createElement("span",{className:l.apply(void 0,t(de("__text-container__title__text")))},F)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(de("__text-container__subtitle__text")))},P):null))};export{g as default};
 //# sourceMappingURL=StepIndicator.js.map

package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","sources":["../../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport Icon from \"../../../../components/Icon/Icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport Clickable from \"../../../../components/Clickable/Clickable\";\nimport { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type SubIcon, type VibeComponentProps } from \"../../../../types\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\n  stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n  status,\n  isFulfilledStepDisplayNumber,\n  fulfilledStepIcon,\n  fulfilledStepIconType,\n  stepNumber\n}) => {\n  return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n    <Icon\n      icon={fulfilledStepIcon}\n      className={classNames(styles.numberContainerTextCheckIcon)}\n      iconType={fulfilledStepIconType}\n      ignoreFocusStyle\n      ariaHidden={true}\n    />\n  ) : (\n    <>{stepNumber}</>\n  );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n  stepComponentClassName,\n  stepNumber = 1,\n  status = \"pending\",\n  titleText = \"Heading text\",\n  subtitleText = \"Subtitle text\",\n  type = \"primary\",\n  fulfilledStepIcon = Check,\n  fulfilledStepIconType = \"svg\",\n  isFulfilledStepDisplayNumber = false,\n  onClick = NOOP,\n  isFollowedByDivider = false,\n  stepDividerClassName,\n  isVertical = false,\n  id,\n  size = \"regular\",\n  \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n  // Animations state\n  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n  // Refs\n  const componentRef = useRef(null);\n  const prevStatusRef = useRef(status);\n\n  // Callbacks for modifying animation state\n  const enableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(true);\n  }, [setStatusChangeAnimationState]);\n\n  const disableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(false);\n  }, [setStatusChangeAnimationState]);\n\n  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n  const handleClick = useCallback(() => {\n    if (onClick) onClick(stepNumber);\n  }, [onClick, stepNumber]);\n\n  // Event listeners for removing animation.\n  useEventListener({\n    eventName: \"animationend\",\n    callback: disableStatusChangeAnimation,\n    ref: componentRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: handleClick,\n    ref: componentRef\n  });\n\n  // Effect - triggering animation when necessary.\n  useEffect(() => {\n    if (isStatusTransition()) {\n      enableStatusChangeAnimation();\n    }\n  }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n  // Effect - updating previous status ref value (for animation) after component update.\n  useEffect(() => {\n    prevStatusRef.current = status;\n  }, [status]);\n\n  const ariaLabel = useMemo(() => {\n    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n  }, [status, titleText, stepNumber, subtitleText]);\n\n  const getClassNamesWithSuffix = (suffix: string) => {\n    return [\n      getStyle(styles, camelCase(suffix || \"indicator\")),\n      getStyle(styles, camelCase(`type-${type}${suffix}`)),\n      getStyle(styles, camelCase(`status-${status}${suffix}`)),\n      getStyle(styles, camelCase(`size-${size}${suffix}`))\n    ];\n  };\n\n  return (\n    <Clickable\n      tabIndex=\"-1\"\n      elementType=\"li\"\n      className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n        [styles.withAnimation]: statusChangeAnimationState,\n        [styles.clickable]: onClick,\n        [styles.textPlacementVertical]: isVertical\n      })}\n      aria-label={ariaLabel}\n      onClick={handleClick}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n    >\n      <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n        <div\n          className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n          ref={componentRef}\n          tabIndex={0}\n          role=\"button\"\n        >\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition<undefined>\n              // CSSTransition needs to be specified with the generic parameter to decide type for addEndListener's callback\n              // otherwise, addEndListener cb has only `done` param (ts error)\n              classNames={{\n                enter: styles.swapEnter,\n                enterActive: styles.swapEnterActive,\n                exit: styles.swapExit,\n                exitActive: styles.swapExitActive\n              }}\n              addEndListener={(node: HTMLElement, done: () => void) => {\n                node.addEventListener(\"transitionend\", done, false);\n              }}\n              key={status}\n            >\n              <span className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n                <StepCircleDisplay\n                  fulfilledStepIcon={fulfilledStepIcon}\n                  fulfilledStepIconType={fulfilledStepIconType}\n                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n                  stepNumber={stepNumber}\n                  status={status}\n                />\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        </div>\n        {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n      </div>\n      <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n        <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n          <HiddenText text={status} /> {/* for accessibility */}\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n        </div>\n        {size !== \"compact\" ? (\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n        ) : null}\n      </div>\n    </Clickable>\n  );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","createElement","Fragment","stepNumber","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","iconType","ignoreFocusStyle","ariaHidden","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","node","done","addEventListener","key","Divider","divider","HiddenText","text"],"mappings":"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"}
+{"version":3,"file":"StepIndicator.js","sources":["../../../../../../../src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\nimport { NOOP } from \"../../../../utils/function-utils\";\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport Clickable from \"../../../../components/Clickable/Clickable\";\nimport { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\n  stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n  status,\n  isFulfilledStepDisplayNumber,\n  fulfilledStepIcon,\n  fulfilledStepIconType,\n  stepNumber\n}) => {\n  return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n    <Icon\n      icon={fulfilledStepIcon}\n      className={classNames(styles.numberContainerTextCheckIcon)}\n      iconType={fulfilledStepIconType}\n      ignoreFocusStyle\n      ariaHidden={true}\n    />\n  ) : (\n    <>{stepNumber}</>\n  );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n  stepComponentClassName,\n  stepNumber = 1,\n  status = \"pending\",\n  titleText = \"Heading text\",\n  subtitleText = \"Subtitle text\",\n  type = \"primary\",\n  fulfilledStepIcon = Check,\n  fulfilledStepIconType = \"svg\",\n  isFulfilledStepDisplayNumber = false,\n  onClick = NOOP,\n  isFollowedByDivider = false,\n  stepDividerClassName,\n  isVertical = false,\n  id,\n  size = \"regular\",\n  \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n  // Animations state\n  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n  // Refs\n  const componentRef = useRef(null);\n  const prevStatusRef = useRef(status);\n\n  // Callbacks for modifying animation state\n  const enableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(true);\n  }, [setStatusChangeAnimationState]);\n\n  const disableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(false);\n  }, [setStatusChangeAnimationState]);\n\n  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n  const handleClick = useCallback(() => {\n    if (onClick) onClick(stepNumber);\n  }, [onClick, stepNumber]);\n\n  // Event listeners for removing animation.\n  useEventListener({\n    eventName: \"animationend\",\n    callback: disableStatusChangeAnimation,\n    ref: componentRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: handleClick,\n    ref: componentRef\n  });\n\n  // Effect - triggering animation when necessary.\n  useEffect(() => {\n    if (isStatusTransition()) {\n      enableStatusChangeAnimation();\n    }\n  }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n  // Effect - updating previous status ref value (for animation) after component update.\n  useEffect(() => {\n    prevStatusRef.current = status;\n  }, [status]);\n\n  const ariaLabel = useMemo(() => {\n    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n  }, [status, titleText, stepNumber, subtitleText]);\n\n  const getClassNamesWithSuffix = (suffix: string) => {\n    return [\n      getStyle(styles, camelCase(suffix || \"indicator\")),\n      getStyle(styles, camelCase(`type-${type}${suffix}`)),\n      getStyle(styles, camelCase(`status-${status}${suffix}`)),\n      getStyle(styles, camelCase(`size-${size}${suffix}`))\n    ];\n  };\n\n  return (\n    <Clickable\n      tabIndex=\"-1\"\n      elementType=\"li\"\n      className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n        [styles.withAnimation]: statusChangeAnimationState,\n        [styles.clickable]: onClick,\n        [styles.textPlacementVertical]: isVertical\n      })}\n      aria-label={ariaLabel}\n      onClick={handleClick}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n    >\n      <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n        <div\n          className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n          ref={componentRef}\n          tabIndex={0}\n          role=\"button\"\n        >\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition<undefined>\n              // CSSTransition needs to be specified with the generic parameter to decide type for addEndListener's callback\n              // otherwise, addEndListener cb has only `done` param (ts error)\n              classNames={{\n                enter: styles.swapEnter,\n                enterActive: styles.swapEnterActive,\n                exit: styles.swapExit,\n                exitActive: styles.swapExitActive\n              }}\n              addEndListener={(node: HTMLElement, done: () => void) => {\n                node.addEventListener(\"transitionend\", done, false);\n              }}\n              key={status}\n            >\n              <span className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n                <StepCircleDisplay\n                  fulfilledStepIcon={fulfilledStepIcon}\n                  fulfilledStepIconType={fulfilledStepIconType}\n                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n                  stepNumber={stepNumber}\n                  status={status}\n                />\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        </div>\n        {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n      </div>\n      <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n        <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n          <HiddenText text={status} /> {/* for accessibility */}\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n        </div>\n        {size !== \"compact\" ? (\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n        ) : null}\n      </div>\n    </Clickable>\n  );\n};\n\nexport default StepIndicator;\n"],"names":["KEYS","keyCodes","ENTER","SPACE","StepCircleDisplay","_ref","fulfilledStepIcon","fulfilledStepIconType","status","isFulfilledStepDisplayNumber","React","createElement","Fragment","stepNumber","Icon","icon","className","classNames","styles","numberContainerTextCheckIcon","iconType","ignoreFocusStyle","ariaHidden","StepIndicator","_ref2","stepComponentClassName","_ref2$stepNumber","_ref2$status","_ref2$titleText","titleText","_ref2$subtitleText","subtitleText","_ref2$type","type","_ref2$fulfilledStepIc","Check","_ref2$fulfilledStepIc2","_ref2$isFulfilledStep","_ref2$onClick","onClick","NOOP","_ref2$isFollowedByDiv","isFollowedByDivider","stepDividerClassName","_ref2$isVertical","isVertical","id","_ref2$size","size","dataTestId","_useState","useState","_useState2","_slicedToArray","statusChangeAnimationState","setStatusChangeAnimationState","componentRef","useRef","prevStatusRef","enableStatusChangeAnimation","useCallback","disableStatusChangeAnimation","isStatusTransition","current","handleClick","useEventListener","eventName","callback","ref","useKeyEvent","keys","useEffect","ariaLabel","useMemo","concat","getClassNamesWithSuffix","suffix","getStyle","camelCase","Clickable","tabIndex","elementType","cx","apply","_toConsumableArray","_defineProperty","withAnimation","clickable","textPlacementVertical","getTestId","ComponentDefaultTestId","STEP_INDICATOR","role","SwitchTransition","mode","CSSTransition","enter","swapEnter","enterActive","swapEnterActive","exit","swapExit","exitActive","swapExitActive","addEndListener","node","done","addEventListener","key","Divider","divider","HiddenText","text"],"mappings":"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"}

package/dist/mocked_classnames/src/components/NumberField/NumberField.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as n,useRef as t,useMemo as r}from"react";import i from"classnames";import o from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import s from"../BaseInput/BaseInput.js";import d from"../FieldLabel/FieldLabel.js";import m from"../InfoText/InfoText.js";import u from"../Icon/Icon.js";import c from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import f from"./NumberField.module.scss.js";import p from"../Flex/Flex.js";import b from"../../hooks/useMergeRef.js";import{ComponentVibeId as x}from"../../tests/constants.js";var h=n((function(n,h){var v=n.className,O=n.value,g=n.onChange,y=n.label,j=n.required,I=n.placeholder,F=n.infoText,B=n.error,N=n.success,C=n.disabled,E=n.readOnly,w=n.min,M=n.max,D=n.step,R=void 0===D?1:D,T=n.size,V=void 0===T?"medium":T,q=n.leftIcon,z=n["aria-label"],A=n.id,L=n["data-testid"],S=n.allowOutOfBounds,k=n.onValidityChange,_=e(n,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=t(null),H=b(h,K),U=o({value:O,onChange:g,min:w,max:M,step:R,disabled:C,readOnly:E,allowOutOfBounds:S,onValidityChange:k}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:g,value:J,step:R,min:w,max:M,allowOutOfBounds:S,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return q?a.createElement(u,{icon:q,className:f.leftIcon}):null}),[q]),ae=r((function(){return a.createElement(c,{inputId:A,onIncrement:Z,onDecrement:$,disabled:C||E,size:V,isAtMin:W,isAtMax:X})}),[A,Z,$,C,E,V,W,X]),ne=r((function(){return F&&A?"".concat(A,"-info-text"):void 0}),[F,A]),te=r((function(){return y&&A?"".concat(A,"-label"):void 0}),[y,A]);return a.createElement(p,{direction:"column",align:"stretch",gap:"xs",className:i(f.numberField,v),"data-vibe":x.NUMBER_FIELD},a.createElement(d,{id:te,className:f.label,labelText:y,required:j,labelFor:A}),a.createElement(s,Object.assign({},_,{"data-testid":L,ref:H,id:A,value:G,onChange:P,onKeyDown:Q,placeholder:I,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":j,"aria-label":z||y,"aria-labelledby":te,"aria-describedby":ne,disabled:C,readOnly:E,size:V,error:B,success:N,renderLeft:ee,renderRight:ae})),a.createElement(m,{id:ne,text:F,error:B,success:N,disabled:C,readOnly:E}))}));export{h as default};
+import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as n,useRef as t,useMemo as r}from"react";import o from"classnames";import i from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import s from"../BaseInput/BaseInput.js";import d from"../FieldLabel/FieldLabel.js";import m from"../InfoText/InfoText.js";import u from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import c from"./NumberField.module.scss.js";import p from"../Flex/Flex.js";import f from"../../hooks/useMergeRef.js";import{ComponentVibeId as b}from"../../tests/constants.js";import x from"../../../components/icon/dist/Icon/Icon.js";var h=n((function(n,h){var v=n.className,O=n.value,g=n.onChange,y=n.label,j=n.required,I=n.placeholder,F=n.infoText,B=n.error,N=n.success,C=n.disabled,E=n.readOnly,w=n.min,M=n.max,D=n.step,R=void 0===D?1:D,T=n.size,V=void 0===T?"medium":T,q=n.leftIcon,z=n["aria-label"],A=n.id,L=n["data-testid"],S=n.allowOutOfBounds,k=n.onValidityChange,_=e(n,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=t(null),H=f(h,K),U=i({value:O,onChange:g,min:w,max:M,step:R,disabled:C,readOnly:E,allowOutOfBounds:S,onValidityChange:k}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:g,value:J,step:R,min:w,max:M,allowOutOfBounds:S,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return q?a.createElement(x,{icon:q,className:c.leftIcon}):null}),[q]),ae=r((function(){return a.createElement(u,{inputId:A,onIncrement:Z,onDecrement:$,disabled:C||E,size:V,isAtMin:W,isAtMax:X})}),[A,Z,$,C,E,V,W,X]),ne=r((function(){return F&&A?"".concat(A,"-info-text"):void 0}),[F,A]),te=r((function(){return y&&A?"".concat(A,"-label"):void 0}),[y,A]);return a.createElement(p,{direction:"column",align:"stretch",gap:"xs",className:o(c.numberField,v),"data-vibe":b.NUMBER_FIELD},a.createElement(d,{id:te,className:c.label,labelText:y,required:j,labelFor:A}),a.createElement(s,Object.assign({},_,{"data-testid":L,ref:H,id:A,value:G,onChange:P,onKeyDown:Q,placeholder:I,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":j,"aria-label":z||y,"aria-labelledby":te,"aria-describedby":ne,disabled:C,readOnly:E,size:V,error:B,success:N,renderLeft:ee,renderRight:ae})),a.createElement(m,{id:ne,text:F,error:B,success:N,disabled:C,readOnly:E}))}));export{h as default};
 //# sourceMappingURL=NumberField.js.map

package/dist/mocked_classnames/src/components/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport BaseInput from \"../BaseInput/BaseInput\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport Icon from \"../Icon/Icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport Flex from \"../Flex/Flex\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport BaseInput from \"../BaseInput/BaseInput\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport Flex from \"../Flex/Flex\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}

package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js

@@ -1,2 +1,2 @@
-import e from"react";import o from"classnames";import n from"../../../IconButton/IconButton.js";import t from"../../../Flex/Flex.js";import{getStyle as r}from"../../../../helpers/typesciptCssModulesHelper.js";import i from"./NumberFieldSpinButton.module.scss.js";import s from"../../../../../icons/dist/react/DropdownChevronUp.js";import a from"../../../../../icons/dist/react/DropdownChevronDown.js";var l=function(l){var c=l.inputId,m=l.onIncrement,p=l.onDecrement,d=l.disabled,u=l.isAtMin,f=l.isAtMax,C=o(i.spinButton,r(i,l.size)),b=i.icon;return e.createElement(t,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(n,{ariaLabel:"Increase",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:m,disabled:d||f,size:null,className:C,iconClassName:b,icon:s}),e.createElement(n,{ariaLabel:"Decrease",hideTooltip:!0,ariaControls:c,tabIndex:-1,onClick:p,disabled:d||u,size:null,className:C,iconClassName:b,icon:a}))};export{l as default};
+import e from"react";import o from"classnames";import n from"../../../IconButton/IconButton.js";import t from"../../../Flex/Flex.js";import{getStyle as r}from"../../../../helpers/typesciptCssModulesHelper.js";import s from"./NumberFieldSpinButton.module.scss.js";import i from"../../../../../packages/icons/dist/react/DropdownChevronUp.js";import a from"../../../../../packages/icons/dist/react/DropdownChevronDown.js";var c=function(c){var l=c.inputId,m=c.onIncrement,p=c.onDecrement,d=c.disabled,u=c.isAtMin,f=c.isAtMax,C=o(s.spinButton,r(s,c.size)),b=s.icon;return e.createElement(t,{direction:"column",align:"stretch",justify:"center",onMouseDown:function(e){e.preventDefault()}},e.createElement(n,{ariaLabel:"Increase",hideTooltip:!0,ariaControls:l,tabIndex:-1,onClick:m,disabled:d||f,size:null,className:C,iconClassName:b,icon:i}),e.createElement(n,{ariaLabel:"Decrease",hideTooltip:!0,ariaControls:l,tabIndex:-1,onClick:p,disabled:d||u,size:null,className:C,iconClassName:b,icon:a}))};export{c as default};
 //# sourceMappingURL=NumberFieldSpinButton.js.map

package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldSpinButton.js","sources":["../../../../../../../src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldSpinButtonProps } from \"./NumberFieldSpinButton.types\";\nimport IconButton from \"../../../IconButton/IconButton\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport Flex from \"../../../Flex/Flex\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./NumberFieldSpinButton.module.scss\";\n\nconst NumberFieldSpinButton = ({\n  inputId,\n  onIncrement,\n  onDecrement,\n  disabled,\n  size,\n  isAtMin,\n  isAtMax\n}: NumberFieldSpinButtonProps) => {\n  const iconButtonClassName = cx(styles.spinButton, getStyle(styles, size));\n  const iconClassName = styles.icon;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // to prevent `IconButton`s from stealing focus\n    event.preventDefault();\n  };\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" justify=\"center\" onMouseDown={handleMouseDown}>\n      <IconButton\n        ariaLabel=\"Increase\"\n        hideTooltip\n        ariaControls={inputId}\n        tabIndex={-1}\n        onClick={onIncrement}\n        disabled={disabled || isAtMax}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronUp}\n      />\n      <IconButton\n        ariaLabel=\"Decrease\"\n        hideTooltip\n        ariaControls={inputId}\n        tabIndex={-1}\n        onClick={onDecrement}\n        disabled={disabled || isAtMin}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronDown}\n      />\n    </Flex>\n  );\n};\n\nexport default NumberFieldSpinButton;\n"],"names":["NumberFieldSpinButton","_ref","inputId","onIncrement","onDecrement","disabled","isAtMin","isAtMax","iconButtonClassName","cx","styles","spinButton","getStyle","size","iconClassName","icon","React","createElement","Flex","direction","align","justify","onMouseDown","event","preventDefault","IconButton","ariaLabel","hideTooltip","ariaControls","tabIndex","onClick","className","DropdownChevronUp","DropdownChevronDown"],"mappings":"iZASA,IAAMA,EAAwB,SAAHC,GAQM,IAP/BC,EAAOD,EAAPC,QACAC,EAAWF,EAAXE,YACAC,EAAWH,EAAXG,YACAC,EAAQJ,EAARI,SAEAC,EAAOL,EAAPK,QACAC,EAAON,EAAPM,QAEMC,EAAsBC,EAAGC,EAAOC,WAAYC,EAASF,EAJvDT,EAAJY,OAKMC,EAAgBJ,EAAOK,KAO7B,OACEC,EAACC,cAAAC,GAAKC,UAAU,SAASC,MAAM,UAAUC,QAAQ,SAASC,YANpC,SAACC,GAEvBA,EAAMC,mBAKJR,EAAAC,cAACQ,EACC,CAAAC,UAAU,WACVC,aACA,EAAAC,aAAc1B,EACd2B,UAAW,EACXC,QAAS3B,EACTE,SAAUA,GAAYE,EACtBM,KAAM,KACNkB,UAAWvB,EACXM,cAAeA,EACfC,KAAMiB,IAERhB,EAACC,cAAAQ,GACCC,UAAU,WACVC,eACAC,aAAc1B,EACd2B,UAAW,EACXC,QAAS1B,EACTC,SAAUA,GAAYC,EACtBO,KAAM,KACNkB,UAAWvB,EACXM,cAAeA,EACfC,KAAMkB,IAId"}
+{"version":3,"file":"NumberFieldSpinButton.js","sources":["../../../../../../../src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldSpinButtonProps } from \"./NumberFieldSpinButton.types\";\nimport IconButton from \"../../../IconButton/IconButton\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport Flex from \"../../../Flex/Flex\";\nimport { getStyle } from \"../../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./NumberFieldSpinButton.module.scss\";\n\nconst NumberFieldSpinButton = ({\n  inputId,\n  onIncrement,\n  onDecrement,\n  disabled,\n  size,\n  isAtMin,\n  isAtMax\n}: NumberFieldSpinButtonProps) => {\n  const iconButtonClassName = cx(styles.spinButton, getStyle(styles, size));\n  const iconClassName = styles.icon;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // to prevent `IconButton`s from stealing focus\n    event.preventDefault();\n  };\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" justify=\"center\" onMouseDown={handleMouseDown}>\n      <IconButton\n        ariaLabel=\"Increase\"\n        hideTooltip\n        ariaControls={inputId}\n        tabIndex={-1}\n        onClick={onIncrement}\n        disabled={disabled || isAtMax}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronUp}\n      />\n      <IconButton\n        ariaLabel=\"Decrease\"\n        hideTooltip\n        ariaControls={inputId}\n        tabIndex={-1}\n        onClick={onDecrement}\n        disabled={disabled || isAtMin}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronDown}\n      />\n    </Flex>\n  );\n};\n\nexport default NumberFieldSpinButton;\n"],"names":["NumberFieldSpinButton","_ref","inputId","onIncrement","onDecrement","disabled","isAtMin","isAtMax","iconButtonClassName","cx","styles","spinButton","getStyle","size","iconClassName","icon","React","createElement","Flex","direction","align","justify","onMouseDown","event","preventDefault","IconButton","ariaLabel","hideTooltip","ariaControls","tabIndex","onClick","className","DropdownChevronUp","DropdownChevronDown"],"mappings":"maASA,IAAMA,EAAwB,SAAHC,GAQM,IAP/BC,EAAOD,EAAPC,QACAC,EAAWF,EAAXE,YACAC,EAAWH,EAAXG,YACAC,EAAQJ,EAARI,SAEAC,EAAOL,EAAPK,QACAC,EAAON,EAAPM,QAEMC,EAAsBC,EAAGC,EAAOC,WAAYC,EAASF,EAJvDT,EAAJY,OAKMC,EAAgBJ,EAAOK,KAO7B,OACEC,EAACC,cAAAC,GAAKC,UAAU,SAASC,MAAM,UAAUC,QAAQ,SAASC,YANpC,SAACC,GAEvBA,EAAMC,mBAKJR,EAAAC,cAACQ,EACC,CAAAC,UAAU,WACVC,aACA,EAAAC,aAAc1B,EACd2B,UAAW,EACXC,QAAS3B,EACTE,SAAUA,GAAYE,EACtBM,KAAM,KACNkB,UAAWvB,EACXM,cAAeA,EACfC,KAAMiB,IAERhB,EAACC,cAAAQ,GACCC,UAAU,WACVC,eACAC,aAAc1B,EACd2B,UAAW,EACXC,QAAS1B,EACTC,SAAUA,GAAYC,EACtBO,KAAM,KACNkB,UAAWvB,EACXM,cAAeA,EACfC,KAAMkB,IAId"}

package/dist/mocked_classnames/src/components/Search/Search.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as r,useRef as t,useCallback as n}from"react";import s from"../../hooks/useMergeRef.js";import{getTestId as i,ComponentDefaultTestId as l}from"../../tests/testIds.js";import c from"./Search.module.scss.js";import d from"../BaseInput/BaseInput.js";import m from"../../hooks/useDebounceEvent/index.js";import u from"../IconButton/IconButton.js";import p from"../Icon/Icon.js";import f from"../Loader/Loader.js";import{ComponentVibeId as v}from"../../tests/constants.js";import h from"../../../icons/dist/react/CloseSmall.js";import C from"../../../icons/dist/react/Search.js";var I=r((function(r,I){var b,j,E,R,N,g,x,y,A,B,S=r.searchIconName,L=void 0===S?C:S,w=r.clearIconName,z=void 0===w?h:w,F=r.clearIconLabel,H=void 0===F?"Clear":F,_=r.renderAction,k=r.hideRenderActionOnInput,D=r.value,P=r.placeholder,T=r.size,V=void 0===T?"medium":T,K=r.disabled,O=r.loading,M=r.autoFocus,U=r.autoComplete,W=void 0===U?"off":U,q=r.inputAriaLabel,G=r.debounceRate,J=void 0===G?400:G,Q=r.searchResultsContainerId,X=r.currentAriaResultId,Y=r.onChange,Z=r.onFocus,$=r.onBlur,ee=r.onClear,ae=r.onKeyDown,oe=r.className,re=r.ariaExpanded,te=r.ariaHasPopup,ne=r.showClearIcon,se=void 0===ne||ne,ie=r.id,le=r["data-testid"];return b=t(null),j=s(I,b),E=m({delay:J,onChange:Y,initialStateValue:D}),R=E.inputValue,N=E.onEventChanged,x=n((function(){var e,a;K||(null===(a=null===(e=b.current)||void 0===e?void 0:e.focus)||void 0===a||a.call(e),g(),null==ee||ee())}),[K,g=E.clearValue,ee]),y=o.createElement(p,{icon:L,className:c.icon,iconType:"font",iconSize:"small"===V?"16px":"20px"}),A=o.createElement(u,{className:a(c.icon,e({},c.empty,!R)),icon:z,ariaLabel:H,onClick:x,size:"small"===V?"xs":"small","data-testid":i(l.CLEAN_SEARCH_BUTTON,ie)}),B=o.createElement(o.Fragment,null,O&&o.createElement(f,{size:"small"===V?"xs":20,color:"secondary",wrapperClassName:a(e({},c.loader,!R&&!_))}),se&&R&&!K&&A,!(k&&R)&&_),o.createElement(d,{ref:j,id:ie,type:"search","data-testid":le||i(l.SEARCH,ie),"data-vibe":v.SEARCH,className:a(c.searchWrapper,oe),inputClassName:c.search,value:R,renderLeft:y,renderRight:B,autoFocus:M,placeholder:P,disabled:K,onChange:N,onBlur:$,onFocus:Z,onKeyDown:ae,autoComplete:W,size:V,wrapperRole:"search",inputRole:Q?"combobox":void 0,"aria-label":q,"aria-busy":O,"aria-controls":re?Q:void 0,"aria-activedescendant":X,"aria-haspopup":te,"aria-expanded":re})}));export{I as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as r,useRef as t,useCallback as n}from"react";import s from"../../hooks/useMergeRef.js";import{getTestId as i,ComponentDefaultTestId as l}from"../../tests/testIds.js";import c from"./Search.module.scss.js";import d from"../BaseInput/BaseInput.js";import m from"../../hooks/useDebounceEvent/index.js";import p from"../IconButton/IconButton.js";import{ComponentVibeId as u}from"../../tests/constants.js";import f from"../../../components/loader/dist/Loader/Loader.js";import v from"../../../packages/icons/dist/react/CloseSmall.js";import h from"../../../components/icon/dist/Icon/Icon.js";import C from"../../../packages/icons/dist/react/Search.js";var I=r((function(r,I){var b,j,E,g,R,N,x,y,A,B,S=r.searchIconName,L=void 0===S?C:S,k=r.clearIconName,w=void 0===k?v:k,z=r.clearIconLabel,F=void 0===z?"Clear":z,H=r.renderAction,_=r.hideRenderActionOnInput,D=r.value,P=r.placeholder,T=r.size,V=void 0===T?"medium":T,K=r.disabled,O=r.loading,M=r.autoFocus,U=r.autoComplete,W=void 0===U?"off":U,q=r.inputAriaLabel,G=r.debounceRate,J=void 0===G?400:G,Q=r.searchResultsContainerId,X=r.currentAriaResultId,Y=r.onChange,Z=r.onFocus,$=r.onBlur,ee=r.onClear,ae=r.onKeyDown,oe=r.className,re=r.ariaExpanded,te=r.ariaHasPopup,ne=r.showClearIcon,se=void 0===ne||ne,ie=r.id,le=r["data-testid"];return b=t(null),j=s(I,b),E=m({delay:J,onChange:Y,initialStateValue:D}),g=E.inputValue,R=E.onEventChanged,x=n((function(){var e,a;K||(null===(a=null===(e=b.current)||void 0===e?void 0:e.focus)||void 0===a||a.call(e),N(),null==ee||ee())}),[K,N=E.clearValue,ee]),y=o.createElement(h,{icon:L,className:c.icon,iconType:"font",iconSize:"small"===V?"16px":"20px"}),A=o.createElement(p,{className:a(c.icon,e({},c.empty,!g)),icon:w,ariaLabel:F,onClick:x,size:"small"===V?"xs":"small","data-testid":i(l.CLEAN_SEARCH_BUTTON,ie)}),B=o.createElement(o.Fragment,null,O&&o.createElement(f,{size:"small"===V?"xs":20,color:"secondary",wrapperClassName:a(e({},c.loader,!g&&!H))}),se&&g&&!K&&A,!(_&&g)&&H),o.createElement(d,{ref:j,id:ie,type:"search","data-testid":le||i(l.SEARCH,ie),"data-vibe":u.SEARCH,className:a(c.searchWrapper,oe),inputClassName:c.search,value:g,renderLeft:y,renderRight:B,autoFocus:M,placeholder:P,disabled:K,onChange:R,onBlur:$,onFocus:Z,onKeyDown:ae,autoComplete:W,size:V,wrapperRole:"search",inputRole:Q?"combobox":void 0,"aria-label":q,"aria-busy":O,"aria-controls":re?Q:void 0,"aria-activedescendant":X,"aria-haspopup":te,"aria-expanded":re})}));export{I as default};
 //# sourceMappingURL=Search.js.map

package/dist/mocked_classnames/src/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../../src/components/Search/Search.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall as CloseSmallIcon, Search as SearchIcon } from \"@vibe/icons\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./Search.module.scss\";\nimport BaseInput from \"../BaseInput/BaseInput\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Icon from \"../Icon/Icon\";\nimport { type SearchProps } from \"./Search.types\";\nimport Loader from \"../Loader/Loader\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst Search = forwardRef(\n  (\n    {\n      searchIconName = SearchIcon,\n      clearIconName = CloseSmallIcon,\n      clearIconLabel = \"Clear\",\n      renderAction: RenderAction,\n      hideRenderActionOnInput,\n      value,\n      placeholder,\n      size = \"medium\",\n      disabled,\n      loading,\n      autoFocus,\n      autoComplete = \"off\",\n      inputAriaLabel,\n      debounceRate = 400,\n      searchResultsContainerId,\n      currentAriaResultId,\n      onChange,\n      onFocus,\n      onBlur,\n      onClear,\n      onKeyDown,\n      className,\n      ariaExpanded,\n      ariaHasPopup,\n      showClearIcon = true,\n      id,\n      \"data-testid\": dataTestId\n    }: SearchProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const { inputValue, onEventChanged, clearValue } = useDebounceEvent({\n      delay: debounceRate,\n      onChange,\n      initialStateValue: value\n    });\n\n    const onClearButtonClick = useCallback(() => {\n      if (disabled) return;\n      inputRef.current?.focus?.();\n      clearValue();\n      onClear?.();\n    }, [disabled, clearValue, onClear]);\n\n    const SearchIcon = (\n      <Icon\n        icon={searchIconName}\n        className={styles.icon}\n        iconType=\"font\"\n        iconSize={size === \"small\" ? \"16px\" : \"20px\"}\n      />\n    );\n\n    const ClearIcon = (\n      <IconButton\n        className={cx(styles.icon, { [styles.empty]: !inputValue })}\n        icon={clearIconName}\n        ariaLabel={clearIconLabel}\n        onClick={onClearButtonClick}\n        size={size === \"small\" ? \"xs\" : \"small\"}\n        data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}\n      />\n    );\n\n    const RenderRight = (\n      <>\n        {loading && (\n          <Loader\n            size={size === \"small\" ? \"xs\" : 20}\n            color=\"secondary\"\n            wrapperClassName={cx({ [styles.loader]: !inputValue && !RenderAction })}\n          />\n        )}\n        {showClearIcon && inputValue && !disabled && ClearIcon}\n        {!(hideRenderActionOnInput && inputValue) && RenderAction}\n      </>\n    );\n\n    return (\n      <BaseInput\n        ref={mergedRef}\n        id={id}\n        type={\"search\"}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.SEARCH, id)}\n        data-vibe={ComponentVibeId.SEARCH}\n        className={cx(styles.searchWrapper, className)}\n        inputClassName={styles.search}\n        value={inputValue}\n        renderLeft={SearchIcon}\n        renderRight={RenderRight}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={onEventChanged}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        autoComplete={autoComplete}\n        size={size}\n        wrapperRole=\"search\"\n        inputRole={searchResultsContainerId ? \"combobox\" : undefined}\n        aria-label={inputAriaLabel}\n        aria-busy={loading}\n        aria-controls={ariaExpanded ? searchResultsContainerId : undefined}\n        aria-activedescendant={currentAriaResultId}\n        aria-haspopup={ariaHasPopup}\n        aria-expanded={ariaExpanded}\n      />\n    );\n  }\n);\n\nexport default Search;\n"],"names":["Search","forwardRef","_ref","ref","inputRef","mergedRef","_useDebounceEvent","inputValue","onEventChanged","clearValue","onClearButtonClick","SearchIcon","ClearIcon","RenderRight","_ref$searchIconName","searchIconName","_ref$clearIconName","clearIconName","CloseSmallIcon","_ref$clearIconLabel","clearIconLabel","RenderAction","renderAction","hideRenderActionOnInput","value","placeholder","_ref$size","size","disabled","loading","autoFocus","_ref$autoComplete","autoComplete","inputAriaLabel","_ref$debounceRate","debounceRate","searchResultsContainerId","currentAriaResultId","onChange","onFocus","onBlur","onClear","onKeyDown","className","ariaExpanded","ariaHasPopup","_ref$showClearIcon","showClearIcon","id","dataTestId","useRef","useMergeRef","useDebounceEvent","delay","initialStateValue","useCallback","_b","current","_a","focus","React","createElement","Icon","icon","styles","iconType","iconSize","IconButton","cx","_defineProperty","empty","ariaLabel","onClick","getTestId","ComponentDefaultTestId","CLEAN_SEARCH_BUTTON","Fragment","Loader","color","wrapperClassName","loader","BaseInput","type","SEARCH","ComponentVibeId","searchWrapper","inputClassName","search","renderLeft","renderRight","wrapperRole","inputRole","undefined"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../../../../src/components/Search/Search.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall as CloseSmallIcon, Search as SearchIcon } from \"@vibe/icons\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./Search.module.scss\";\nimport BaseInput from \"../BaseInput/BaseInput\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { Icon } from \"@vibe/icon\";\nimport { type SearchProps } from \"./Search.types\";\nimport { Loader } from \"@vibe/loader\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst Search = forwardRef(\n  (\n    {\n      searchIconName = SearchIcon,\n      clearIconName = CloseSmallIcon,\n      clearIconLabel = \"Clear\",\n      renderAction: RenderAction,\n      hideRenderActionOnInput,\n      value,\n      placeholder,\n      size = \"medium\",\n      disabled,\n      loading,\n      autoFocus,\n      autoComplete = \"off\",\n      inputAriaLabel,\n      debounceRate = 400,\n      searchResultsContainerId,\n      currentAriaResultId,\n      onChange,\n      onFocus,\n      onBlur,\n      onClear,\n      onKeyDown,\n      className,\n      ariaExpanded,\n      ariaHasPopup,\n      showClearIcon = true,\n      id,\n      \"data-testid\": dataTestId\n    }: SearchProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const { inputValue, onEventChanged, clearValue } = useDebounceEvent({\n      delay: debounceRate,\n      onChange,\n      initialStateValue: value\n    });\n\n    const onClearButtonClick = useCallback(() => {\n      if (disabled) return;\n      inputRef.current?.focus?.();\n      clearValue();\n      onClear?.();\n    }, [disabled, clearValue, onClear]);\n\n    const SearchIcon = (\n      <Icon\n        icon={searchIconName}\n        className={styles.icon}\n        iconType=\"font\"\n        iconSize={size === \"small\" ? \"16px\" : \"20px\"}\n      />\n    );\n\n    const ClearIcon = (\n      <IconButton\n        className={cx(styles.icon, { [styles.empty]: !inputValue })}\n        icon={clearIconName}\n        ariaLabel={clearIconLabel}\n        onClick={onClearButtonClick}\n        size={size === \"small\" ? \"xs\" : \"small\"}\n        data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}\n      />\n    );\n\n    const RenderRight = (\n      <>\n        {loading && (\n          <Loader\n            size={size === \"small\" ? \"xs\" : 20}\n            color=\"secondary\"\n            wrapperClassName={cx({ [styles.loader]: !inputValue && !RenderAction })}\n          />\n        )}\n        {showClearIcon && inputValue && !disabled && ClearIcon}\n        {!(hideRenderActionOnInput && inputValue) && RenderAction}\n      </>\n    );\n\n    return (\n      <BaseInput\n        ref={mergedRef}\n        id={id}\n        type={\"search\"}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.SEARCH, id)}\n        data-vibe={ComponentVibeId.SEARCH}\n        className={cx(styles.searchWrapper, className)}\n        inputClassName={styles.search}\n        value={inputValue}\n        renderLeft={SearchIcon}\n        renderRight={RenderRight}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={onEventChanged}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        autoComplete={autoComplete}\n        size={size}\n        wrapperRole=\"search\"\n        inputRole={searchResultsContainerId ? \"combobox\" : undefined}\n        aria-label={inputAriaLabel}\n        aria-busy={loading}\n        aria-controls={ariaExpanded ? searchResultsContainerId : undefined}\n        aria-activedescendant={currentAriaResultId}\n        aria-haspopup={ariaHasPopup}\n        aria-expanded={ariaExpanded}\n      />\n    );\n  }\n);\n\nexport default Search;\n"],"names":["Search","forwardRef","_ref","ref","inputRef","mergedRef","_useDebounceEvent","inputValue","onEventChanged","clearValue","onClearButtonClick","SearchIcon","ClearIcon","RenderRight","_ref$searchIconName","searchIconName","_ref$clearIconName","clearIconName","CloseSmallIcon","_ref$clearIconLabel","clearIconLabel","RenderAction","renderAction","hideRenderActionOnInput","value","placeholder","_ref$size","size","disabled","loading","autoFocus","_ref$autoComplete","autoComplete","inputAriaLabel","_ref$debounceRate","debounceRate","searchResultsContainerId","currentAriaResultId","onChange","onFocus","onBlur","onClear","onKeyDown","className","ariaExpanded","ariaHasPopup","_ref$showClearIcon","showClearIcon","id","dataTestId","useRef","useMergeRef","useDebounceEvent","delay","initialStateValue","useCallback","_b","current","_a","focus","React","createElement","Icon","icon","styles","iconType","iconSize","IconButton","cx","_defineProperty","empty","ariaLabel","onClick","getTestId","ComponentDefaultTestId","CLEAN_SEARCH_BUTTON","Fragment","Loader","color","wrapperClassName","loader","BaseInput","type","SEARCH","ComponentVibeId","searchWrapper","inputClassName","search","renderLeft","renderRight","wrapperRole","inputRole","undefined"],"mappings":"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"}

package/dist/mocked_classnames/src/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { BASE_SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ensureDefaultValue } from \"./SliderHelpers\";\nimport { SliderProvider } from \"./SliderContext\";\nimport SliderBase from \"./SliderBase/SliderBase\";\nimport SliderInfix from \"./SliderInfix\";\nimport { type IconType } from \"../Icon\";\nimport { SliderColor as SliderColorEnum } from \"./SliderConstants\";\nimport cx from \"classnames\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Slider.module.scss\";\nimport { type SliderColor, type SliderLabelColor, type SliderLabelPosition, type SliderSize } from \"./Slider.types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\n\nexport type SliderProps = {\n  /**\n   * Define a string that labels the current element (Slider)\n   */\n  ariaLabel?: string;\n  /**\n   * ElementId of Node that have the text needed for labeling the current element (Slider)\n   */\n  ariaLabelledby?: string;\n  /**\n   * Custom `class name` to be added to the component-root-node\n   */\n  className?: string;\n  /**\n   * Color Mode (primary/positive/negative) of the component (Slider)\n   */\n  color?: SliderColor;\n  /**\n   * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\n   */\n  \"data-testid\"?: string;\n  defaultValue?: number | number[];\n  /**\n   * Formatter function `value => formattedValue`\n   * default formatter return `${value}%`\n   */\n  /**\n   * If set to true, Component (Slider) will be disabled\n   *  - impossible to change value of component (Slider)\n   *  - visual changes (opacity)\n   */\n  disabled?: boolean;\n  /**\n   * Attribute `id` to be added to the component-root-node\n   */\n  id?: string;\n  /**\n   * Max range value of the component (Slider)\n   */\n  max?: number;\n  /**\n   * Min range value of the component (Slider)\n   */\n  min?: number;\n  /**\n   * Optional onChange callback (for outer trigger or Controlled mode)\n   * - required in Controlled Mode\n   */\n  onChange?: (value: number | number[]) => void;\n  /**\n   * If true switch slider to RRange mode (two Thumbs)\n   */\n  ranged?: boolean;\n  /**\n   * The granularity with which the slider can step through values.\n   * (A \"discrete\" slider.) The min prop serves as the origin for the valid values.\n   * We recommend (max - min) to be evenly divisible by the step.\n   */\n  step?: number;\n  /**\n   * Always show `value` instead of Tooltip\n   */\n  showValue?: boolean;\n  /**\n   * Position of the `value` when `showValue` is true\n   */\n  valueLabelPosition?: SliderLabelPosition;\n  /**\n   * Color of the `value` when `showValue` is true\n   */\n  valueLabelColor?: SliderLabelColor;\n  /**\n   * Size small/medium/large of the component (Slider)\n   */\n  size?: SliderSize;\n  /**\n   * Current/selected value of the range of the Component (Slider)\n   *   - should be used in Controlled Mode only\n   *   - in ranged mode should be an array of two numbers\n   */\n  value?: number | number[];\n  /**\n   * Function to format the value, e.g. add %. By default, returns `${value}%`\n   */\n  valueFormatter?: (value: number) => string;\n  /**\n   * Text/presentation of current/selected value\n   *  - should be used in Controlled Mode only\n   */\n  valueText?: string;\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n\nconst Slider = forwardRef(\n  (\n    {\n      ariaLabel,\n      ariaLabelledby,\n      className,\n      color,\n      \"data-testid\": dataTestId = \"monday-slider\",\n      disabled = false,\n      id,\n      max = 100,\n      min = 0,\n      onChange = NOOP,\n      ranged = false,\n      step = 1,\n      showValue = false,\n      valueLabelPosition = \"top\",\n      valueLabelColor = \"primary\",\n      size = \"small\",\n      value,\n      defaultValue = 0,\n      valueFormatter = (value: number) => `${value}%`,\n      valueText,\n      indicateSelection = false,\n      prefix,\n      postfix,\n      selectionIndicatorWidth = \"60px\"\n    }: SliderProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const infixOptions = useMemo(\n      () => ({ prefix, postfix, indicateSelection, selectionIndicatorWidth }),\n      [prefix, postfix, indicateSelection, selectionIndicatorWidth]\n    );\n    return (\n      <SliderProvider\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        color={color}\n        data-testid={dataTestId}\n        disabled={disabled}\n        infixOptions={infixOptions}\n        max={max}\n        min={min}\n        onChange={onChange}\n        ranged={ranged}\n        showValue={showValue}\n        valueLabelPosition={valueLabelPosition}\n        valueLabelColor={valueLabelColor}\n        size={size}\n        step={step}\n        value={value}\n        defaultValue={ensureDefaultValue(defaultValue, min, max, ranged)}\n        valueFormatter={valueFormatter}\n        valueText={valueText}\n      >\n        <div\n          className={cx(\n            styles.slider,\n            { [styles.valueShown]: showValue },\n            getStyle(styles, camelCase(\"position-\" + valueLabelPosition)),\n            className\n          )}\n          data-testid={dataTestId}\n          id={id}\n          ref={mergedRef}\n        >\n          <SliderInfix kind={SliderInfix.kinds.PREFIX} />\n          <SliderBase />\n          <SliderInfix kind={SliderInfix.kinds.POSTFIX} />\n        </div>\n      </SliderProvider>\n    );\n  }\n);\n\ninterface SliderStaticProps {\n  sizes: typeof BASE_SIZES;\n  colors: typeof SliderColorEnum;\n}\n\nexport default withStaticProps<SliderProps, SliderStaticProps>(Slider, {\n  sizes: BASE_SIZES,\n  colors: SliderColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","ariaLabel","ariaLabelledby","className","color","_ref$dataTestid","dataTestId","_ref$disabled","disabled","id","_ref$max","max","_ref$min","min","_ref$onChange","onChange","NOOP","_ref$ranged","ranged","_ref$step","step","_ref$showValue","showValue","_ref$valueLabelPositi","valueLabelPosition","_ref$valueLabelColor","valueLabelColor","_ref$size","size","value","_ref$defaultValue","defaultValue","_ref$valueFormatter","valueFormatter","concat","valueText","_ref$indicateSelectio","indicateSelection","prefix","postfix","_ref$selectionIndicat","selectionIndicatorWidth","componentRef","useRef","mergedRef","useMergeRef","infixOptions","useMemo","React","createElement","SliderProvider","ensureDefaultValue","cx","styles","slider","_defineProperty","valueShown","getStyle","camelCase","SliderInfix","kind","kinds","PREFIX","SliderBase","POSTFIX","sizes","BASE_SIZES","colors","SliderColorEnum"],"mappings":"myBAiIA,IAmFeA,EAAAA,EAnFAC,GACb,SAAAC,EA2BEC,GACE,IA1BAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAASJ,EAATI,UACAC,EAAKL,EAALK,MAAKC,EAAAN,EACL,eAAeO,OAAa,IAAHD,EAAG,gBAAeA,EAAAE,EAAAR,EAC3CS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAEV,EAAFU,GAAEC,EAAAX,EACFY,IAAAA,OAAM,IAAHD,EAAG,IAAGA,EAAAE,EAAAb,EACTc,IAAAA,OAAM,IAAHD,EAAG,EAACA,EAAAE,EAAAf,EACPgB,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACfmB,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAApB,EACdqB,KAAAA,OAAO,IAAHD,EAAG,EAACA,EAAAE,EAAAtB,EACRuB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAAxB,EACjByB,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAAE,EAAA1B,EAC1B2B,gBAAAA,OAAkB,IAAHD,EAAG,UAASA,EAAAE,EAAA5B,EAC3B6B,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAK9B,EAAL8B,MAAKC,EAAA/B,EACLgC,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAAjC,EAChBkC,eAAAA,OAAiB,IAAHD,EAAG,SAACH,GAAa,MAAAK,GAAAA,OAAQL,EAAK,IAAA,EAAGG,EAC/CG,EAASpC,EAAToC,UAASC,EAAArC,EACTsC,kBAAAA,OAAoB,IAAHD,GAAQA,EACzBE,EAAMvC,EAANuC,OACAC,EAAOxC,EAAPwC,QAAOC,EAAAzC,EACP0C,wBAAAA,QAA0B,IAAHD,EAAG,OAAMA,EAI5BE,GAAeC,EAAO,MACtBC,GAAYC,EAAY7C,EAAK0C,IAC7BI,GAAeC,GACnB,WAAA,MAAO,CAAET,OAAAA,EAAQC,QAAAA,EAASF,kBAAAA,EAAmBI,wBAAAA,GAA0B,GACvE,CAACH,EAAQC,EAASF,EAAmBI,KAEvC,OACEO,EAACC,cAAAC,GACCjD,UAAWA,EACXC,eAAgBA,EAChBE,MAAOA,EACM,cAAAE,EACbE,SAAUA,EACVsC,aAAcA,GACdnC,IAAKA,EACLE,IAAKA,EACLE,SAAUA,EACVG,OAAQA,EACRI,UAAWA,EACXE,mBAAoBA,EACpBE,gBAAiBA,EACjBE,KAAMA,EACNR,KAAMA,EACNS,MAAOA,EACPE,aAAcoB,EAAmBpB,EAAclB,EAAKF,EAAKO,GACzDe,eAAgBA,EAChBE,UAAWA,GAEXa,EAAAC,cAAA,MAAA,CACE9C,UAAWiD,EACTC,EAAOC,OAAMC,EACVF,CAAAA,EAAAA,EAAOG,WAAalC,GACvBmC,EAASJ,EAAQK,EAAU,YAAclC,IACzCrB,GAEW,cAAAG,EACbG,GAAIA,EACJT,IAAK4C,IAELI,EAACC,cAAAU,GAAYC,KAAMD,EAAYE,MAAMC,SACrCd,EAAAC,cAACc,EAAa,MACdf,EAAAC,cAACU,EAAW,CAACC,KAAMD,EAAYE,MAAMG,WAI7C,IAQqE,CACrEC,MAAOC,EACPC,OAAQC"}
+{"version":3,"file":"Slider.js","sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { BASE_SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ensureDefaultValue } from \"./SliderHelpers\";\nimport { SliderProvider } from \"./SliderContext\";\nimport SliderBase from \"./SliderBase/SliderBase\";\nimport SliderInfix from \"./SliderInfix\";\nimport { type IconType } from \"@vibe/icon\";\nimport { SliderColor as SliderColorEnum } from \"./SliderConstants\";\nimport cx from \"classnames\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Slider.module.scss\";\nimport { type SliderColor, type SliderLabelColor, type SliderLabelPosition, type SliderSize } from \"./Slider.types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\n\nexport type SliderProps = {\n  /**\n   * Define a string that labels the current element (Slider)\n   */\n  ariaLabel?: string;\n  /**\n   * ElementId of Node that have the text needed for labeling the current element (Slider)\n   */\n  ariaLabelledby?: string;\n  /**\n   * Custom `class name` to be added to the component-root-node\n   */\n  className?: string;\n  /**\n   * Color Mode (primary/positive/negative) of the component (Slider)\n   */\n  color?: SliderColor;\n  /**\n   * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\n   */\n  \"data-testid\"?: string;\n  defaultValue?: number | number[];\n  /**\n   * Formatter function `value => formattedValue`\n   * default formatter return `${value}%`\n   */\n  /**\n   * If set to true, Component (Slider) will be disabled\n   *  - impossible to change value of component (Slider)\n   *  - visual changes (opacity)\n   */\n  disabled?: boolean;\n  /**\n   * Attribute `id` to be added to the component-root-node\n   */\n  id?: string;\n  /**\n   * Max range value of the component (Slider)\n   */\n  max?: number;\n  /**\n   * Min range value of the component (Slider)\n   */\n  min?: number;\n  /**\n   * Optional onChange callback (for outer trigger or Controlled mode)\n   * - required in Controlled Mode\n   */\n  onChange?: (value: number | number[]) => void;\n  /**\n   * If true switch slider to RRange mode (two Thumbs)\n   */\n  ranged?: boolean;\n  /**\n   * The granularity with which the slider can step through values.\n   * (A \"discrete\" slider.) The min prop serves as the origin for the valid values.\n   * We recommend (max - min) to be evenly divisible by the step.\n   */\n  step?: number;\n  /**\n   * Always show `value` instead of Tooltip\n   */\n  showValue?: boolean;\n  /**\n   * Position of the `value` when `showValue` is true\n   */\n  valueLabelPosition?: SliderLabelPosition;\n  /**\n   * Color of the `value` when `showValue` is true\n   */\n  valueLabelColor?: SliderLabelColor;\n  /**\n   * Size small/medium/large of the component (Slider)\n   */\n  size?: SliderSize;\n  /**\n   * Current/selected value of the range of the Component (Slider)\n   *   - should be used in Controlled Mode only\n   *   - in ranged mode should be an array of two numbers\n   */\n  value?: number | number[];\n  /**\n   * Function to format the value, e.g. add %. By default, returns `${value}%`\n   */\n  valueFormatter?: (value: number) => string;\n  /**\n   * Text/presentation of current/selected value\n   *  - should be used in Controlled Mode only\n   */\n  valueText?: string;\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n\nconst Slider = forwardRef(\n  (\n    {\n      ariaLabel,\n      ariaLabelledby,\n      className,\n      color,\n      \"data-testid\": dataTestId = \"monday-slider\",\n      disabled = false,\n      id,\n      max = 100,\n      min = 0,\n      onChange = NOOP,\n      ranged = false,\n      step = 1,\n      showValue = false,\n      valueLabelPosition = \"top\",\n      valueLabelColor = \"primary\",\n      size = \"small\",\n      value,\n      defaultValue = 0,\n      valueFormatter = (value: number) => `${value}%`,\n      valueText,\n      indicateSelection = false,\n      prefix,\n      postfix,\n      selectionIndicatorWidth = \"60px\"\n    }: SliderProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const infixOptions = useMemo(\n      () => ({ prefix, postfix, indicateSelection, selectionIndicatorWidth }),\n      [prefix, postfix, indicateSelection, selectionIndicatorWidth]\n    );\n    return (\n      <SliderProvider\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        color={color}\n        data-testid={dataTestId}\n        disabled={disabled}\n        infixOptions={infixOptions}\n        max={max}\n        min={min}\n        onChange={onChange}\n        ranged={ranged}\n        showValue={showValue}\n        valueLabelPosition={valueLabelPosition}\n        valueLabelColor={valueLabelColor}\n        size={size}\n        step={step}\n        value={value}\n        defaultValue={ensureDefaultValue(defaultValue, min, max, ranged)}\n        valueFormatter={valueFormatter}\n        valueText={valueText}\n      >\n        <div\n          className={cx(\n            styles.slider,\n            { [styles.valueShown]: showValue },\n            getStyle(styles, camelCase(\"position-\" + valueLabelPosition)),\n            className\n          )}\n          data-testid={dataTestId}\n          id={id}\n          ref={mergedRef}\n        >\n          <SliderInfix kind={SliderInfix.kinds.PREFIX} />\n          <SliderBase />\n          <SliderInfix kind={SliderInfix.kinds.POSTFIX} />\n        </div>\n      </SliderProvider>\n    );\n  }\n);\n\ninterface SliderStaticProps {\n  sizes: typeof BASE_SIZES;\n  colors: typeof SliderColorEnum;\n}\n\nexport default withStaticProps<SliderProps, SliderStaticProps>(Slider, {\n  sizes: BASE_SIZES,\n  colors: SliderColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","ariaLabel","ariaLabelledby","className","color","_ref$dataTestid","dataTestId","_ref$disabled","disabled","id","_ref$max","max","_ref$min","min","_ref$onChange","onChange","NOOP","_ref$ranged","ranged","_ref$step","step","_ref$showValue","showValue","_ref$valueLabelPositi","valueLabelPosition","_ref$valueLabelColor","valueLabelColor","_ref$size","size","value","_ref$defaultValue","defaultValue","_ref$valueFormatter","valueFormatter","concat","valueText","_ref$indicateSelectio","indicateSelection","prefix","postfix","_ref$selectionIndicat","selectionIndicatorWidth","componentRef","useRef","mergedRef","useMergeRef","infixOptions","useMemo","React","createElement","SliderProvider","ensureDefaultValue","cx","styles","slider","_defineProperty","valueShown","getStyle","camelCase","SliderInfix","kind","kinds","PREFIX","SliderBase","POSTFIX","sizes","BASE_SIZES","colors","SliderColorEnum"],"mappings":"myBAiIA,IAmFeA,EAAAA,EAnFAC,GACb,SAAAC,EA2BEC,GACE,IA1BAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAASJ,EAATI,UACAC,EAAKL,EAALK,MAAKC,EAAAN,EACL,eAAeO,OAAa,IAAHD,EAAG,gBAAeA,EAAAE,EAAAR,EAC3CS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAEV,EAAFU,GAAEC,EAAAX,EACFY,IAAAA,OAAM,IAAHD,EAAG,IAAGA,EAAAE,EAAAb,EACTc,IAAAA,OAAM,IAAHD,EAAG,EAACA,EAAAE,EAAAf,EACPgB,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACfmB,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAApB,EACdqB,KAAAA,OAAO,IAAHD,EAAG,EAACA,EAAAE,EAAAtB,EACRuB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAAxB,EACjByB,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAAE,EAAA1B,EAC1B2B,gBAAAA,OAAkB,IAAHD,EAAG,UAASA,EAAAE,EAAA5B,EAC3B6B,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAK9B,EAAL8B,MAAKC,EAAA/B,EACLgC,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAAjC,EAChBkC,eAAAA,OAAiB,IAAHD,EAAG,SAACH,GAAa,MAAAK,GAAAA,OAAQL,EAAK,IAAA,EAAGG,EAC/CG,EAASpC,EAAToC,UAASC,EAAArC,EACTsC,kBAAAA,OAAoB,IAAHD,GAAQA,EACzBE,EAAMvC,EAANuC,OACAC,EAAOxC,EAAPwC,QAAOC,EAAAzC,EACP0C,wBAAAA,QAA0B,IAAHD,EAAG,OAAMA,EAI5BE,GAAeC,EAAO,MACtBC,GAAYC,EAAY7C,EAAK0C,IAC7BI,GAAeC,GACnB,WAAA,MAAO,CAAET,OAAAA,EAAQC,QAAAA,EAASF,kBAAAA,EAAmBI,wBAAAA,GAA0B,GACvE,CAACH,EAAQC,EAASF,EAAmBI,KAEvC,OACEO,EAACC,cAAAC,GACCjD,UAAWA,EACXC,eAAgBA,EAChBE,MAAOA,EACM,cAAAE,EACbE,SAAUA,EACVsC,aAAcA,GACdnC,IAAKA,EACLE,IAAKA,EACLE,SAAUA,EACVG,OAAQA,EACRI,UAAWA,EACXE,mBAAoBA,EACpBE,gBAAiBA,EACjBE,KAAMA,EACNR,KAAMA,EACNS,MAAOA,EACPE,aAAcoB,EAAmBpB,EAAclB,EAAKF,EAAKO,GACzDe,eAAgBA,EAChBE,UAAWA,GAEXa,EAAAC,cAAA,MAAA,CACE9C,UAAWiD,EACTC,EAAOC,OAAMC,EACVF,CAAAA,EAAAA,EAAOG,WAAalC,GACvBmC,EAASJ,EAAQK,EAAU,YAAclC,IACzCrB,GAEW,cAAAG,EACbG,GAAIA,EACJT,IAAK4C,IAELI,EAACC,cAAAU,GAAYC,KAAMD,EAAYE,MAAMC,SACrCd,EAAAC,cAACc,EAAa,MACdf,EAAAC,cAACU,EAAW,CAACC,KAAMD,EAAYE,MAAMG,WAI7C,IAQqE,CACrEC,MAAOC,EACPC,OAAQC"}

package/dist/mocked_classnames/src/components/Slider/SliderConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderConstants.js","sources":["../../../../../src/components/Slider/SliderConstants.ts"],"sourcesContent":["import { type IconType } from \"../Icon\";\nimport { type ReactElement } from \"react\";\nimport {\n  type SliderSize,\n  type SliderColor as SliderColorType,\n  type SliderLabelPosition,\n  type SliderLabelColor\n} from \"./Slider.types\";\n\nexport const BEM_PREFIX = \"monday\";\n\nexport const COMPONENT_ID = \"slider\";\n\nexport const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;\n\nexport const TOOLTIP_SHOW_DELAY = 300;\n\n/**\n * @deprecated\n */\nexport enum InfixKind {\n  PREFIX = \"prefix\",\n  POSTFIX = \"postfix\"\n}\n\n/**\n * @deprecated\n */\nexport enum SliderColor {\n  PRIMARY = \"primary\",\n  NEGATIVE = \"negative\",\n  POSITIVE = \"positive\"\n}\n\nexport type SliderContextSelection = {\n  max: number;\n  min: number;\n  ranged: boolean;\n  step: number;\n  value: number | number[];\n  valueText: string | string[];\n};\n\nexport type SliderContextUI = {\n  active: number;\n  ariaLabel: string;\n  ariaLabelledby: string;\n  color: SliderColorType;\n  disabled: boolean;\n  dragging: number;\n  focused: number;\n  size: SliderSize;\n  shapeTestId: (subElement: string) => string;\n  showValue: boolean;\n  valueLabelPosition: SliderLabelPosition;\n  valueLabelColor: SliderLabelColor;\n};\n\nexport type SliderContextActions = {\n  setActive: (value: number) => void;\n  setFocused: (value: number) => void;\n  setDragging: (value: number) => void;\n  changeThumbValue: (newValue: number | string, thumbIndex?: number, cancelFocus?: boolean) => void;\n  drugThumb: (newValue: number | number[]) => void;\n  decreaseValue: (consumerStep?: number) => void;\n  increaseValue: (consumerStep?: number) => void;\n};\n\nexport type SliderContextInfix = {\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n"],"names":["InfixKind","SliderColor","UPDATE_SLIDER_SIZE_DEBOUNCE","TOOLTIP_SHOW_DELAY"],"mappings":"AAaO,IAOKA,EAQAC,EAfCC,EAA8B,IAE9BC,EAAqB,KAKlC,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
+{"version":3,"file":"SliderConstants.js","sources":["../../../../../src/components/Slider/SliderConstants.ts"],"sourcesContent":["import { type IconType } from \"@vibe/icon\";\nimport { type ReactElement } from \"react\";\nimport {\n  type SliderSize,\n  type SliderColor as SliderColorType,\n  type SliderLabelPosition,\n  type SliderLabelColor\n} from \"./Slider.types\";\n\nexport const BEM_PREFIX = \"monday\";\n\nexport const COMPONENT_ID = \"slider\";\n\nexport const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;\n\nexport const TOOLTIP_SHOW_DELAY = 300;\n\n/**\n * @deprecated\n */\nexport enum InfixKind {\n  PREFIX = \"prefix\",\n  POSTFIX = \"postfix\"\n}\n\n/**\n * @deprecated\n */\nexport enum SliderColor {\n  PRIMARY = \"primary\",\n  NEGATIVE = \"negative\",\n  POSITIVE = \"positive\"\n}\n\nexport type SliderContextSelection = {\n  max: number;\n  min: number;\n  ranged: boolean;\n  step: number;\n  value: number | number[];\n  valueText: string | string[];\n};\n\nexport type SliderContextUI = {\n  active: number;\n  ariaLabel: string;\n  ariaLabelledby: string;\n  color: SliderColorType;\n  disabled: boolean;\n  dragging: number;\n  focused: number;\n  size: SliderSize;\n  shapeTestId: (subElement: string) => string;\n  showValue: boolean;\n  valueLabelPosition: SliderLabelPosition;\n  valueLabelColor: SliderLabelColor;\n};\n\nexport type SliderContextActions = {\n  setActive: (value: number) => void;\n  setFocused: (value: number) => void;\n  setDragging: (value: number) => void;\n  changeThumbValue: (newValue: number | string, thumbIndex?: number, cancelFocus?: boolean) => void;\n  drugThumb: (newValue: number | number[]) => void;\n  decreaseValue: (consumerStep?: number) => void;\n  increaseValue: (consumerStep?: number) => void;\n};\n\nexport type SliderContextInfix = {\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n"],"names":["InfixKind","SliderColor","UPDATE_SLIDER_SIZE_DEBOUNCE","TOOLTIP_SHOW_DELAY"],"mappings":"AAaO,IAOKA,EAQAC,EAfCC,EAA8B,IAE9BC,EAAqB,KAKlC,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}

package/dist/mocked_classnames/src/components/Slider/SliderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderContext.js","sources":["../../../../../src/components/Slider/SliderContext.tsx"],"sourcesContent":["import React, { createContext, type ReactElement, useContext, useMemo, useState } from \"react\";\nimport { createTestIdHelper } from \"../../helpers/testid-helper\";\nimport { useDragging, useSliderActionsContextValue, useSliderValues } from \"./SliderHooks\";\nimport { type SliderProps } from \"./Slider\";\nimport {\n  type SliderContextActions,\n  type SliderContextInfix,\n  type SliderContextSelection,\n  type SliderContextUI\n} from \"./SliderConstants\";\nimport { type IconType } from \"../Icon\";\n\nconst UiContext = createContext({});\nconst SelectionContext = createContext({});\nconst ActionsContext = createContext({});\nconst InfixContext = createContext({});\n\nexport interface SliderProviderProps extends SliderProps {\n  /**\n   * The child elements inside the slider provider.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * Configuration options for prefix, postfix, and selection indicator.\n   */\n  infixOptions?: {\n    /**\n     * If true, displays the selected value from the slider range.\n     */\n    indicateSelection?: boolean;\n    /**\n     * Configuration for the prefix (start) element, which can be:\n     * - A React component, text, number, or node.\n     * - An object with an icon.\n     * - A function that receives the value and valueText.\n     */\n    prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * Configuration for the postfix (end) element, similar to prefix.\n     */\n    postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * The width of the selection indicator.\n     */\n    selectionIndicatorWidth?: string;\n  };\n}\n\nexport function SliderProvider({\n  children,\n  ariaLabel,\n  ariaLabelledby,\n  color,\n  \"data-testid\": dataTestId,\n  defaultValue,\n  disabled,\n  max,\n  min,\n  onChange,\n  ranged,\n  showValue,\n  valueLabelPosition,\n  valueLabelColor,\n  size,\n  step,\n  value,\n  valueFormatter,\n  valueText,\n  infixOptions\n}: SliderProviderProps) {\n  const shapeTestId = createTestIdHelper(dataTestId);\n  const { actualValue, actualValueText, getSelectedValue, setSelectedValue } = useSliderValues(\n    defaultValue,\n    value,\n    valueFormatter,\n    valueText\n  );\n\n  const [active, setActive] = useState<number>(null);\n  const [focused, setFocused] = useState<number>(null);\n  const [dragging, setDragging, getDragging] = useDragging();\n\n  const uiContextValue: SliderContextUI = useMemo(\n    () => ({\n      active,\n      ariaLabel,\n      ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    }),\n    [\n      active,\n      ariaLabel,\n      ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    ]\n  );\n\n  const selectionContextValue: SliderContextSelection = useMemo(\n    () => ({\n      max,\n      min,\n      ranged,\n      step,\n      value: actualValue,\n      valueText: actualValueText\n    }),\n    [max, min, ranged, step, actualValue, actualValueText]\n  );\n\n  const actionsContextValue: SliderContextActions = useSliderActionsContextValue(\n    actualValue,\n    focused,\n    getDragging,\n    getSelectedValue,\n    max,\n    min,\n    onChange,\n    ranged,\n    setActive,\n    setFocused,\n    setDragging,\n    setSelectedValue,\n    step\n  );\n\n  return (\n    <UiContext.Provider value={uiContextValue}>\n      <SelectionContext.Provider value={selectionContextValue}>\n        <ActionsContext.Provider value={actionsContextValue}>\n          <InfixContext.Provider value={infixOptions}>{children}</InfixContext.Provider>\n        </ActionsContext.Provider>\n      </SelectionContext.Provider>\n    </UiContext.Provider>\n  );\n}\n\nexport function useSliderUi(): SliderContextUI {\n  return useContext(UiContext) as SliderContextUI;\n}\n\nexport function useSliderInfix(): SliderContextInfix {\n  return useContext(InfixContext) as SliderContextInfix;\n}\n\nexport function useSliderSelection(): SliderContextSelection {\n  return useContext(SelectionContext) as SliderContextSelection;\n}\n\nexport function useSliderActions(): SliderContextActions {\n  return useContext(ActionsContext) as SliderContextActions;\n}\n"],"names":["UiContext","createContext","SelectionContext","ActionsContext","InfixContext","SliderProvider","_ref","children","ariaLabel","ariaLabelledby","color","defaultValue","disabled","max","min","onChange","ranged","showValue","valueLabelPosition","valueLabelColor","size","step","value","valueFormatter","valueText","infixOptions","shapeTestId","createTestIdHelper","_useSliderValues","useSliderValues","actualValue","actualValueText","getSelectedValue","setSelectedValue","_useState","useState","_useState2","_slicedToArray","active","setActive","_useState3","_useState4","focused","setFocused","_useDragging","useDragging","_useDragging2","dragging","setDragging","getDragging","uiContextValue","useMemo","selectionContextValue","actionsContextValue","useSliderActionsContextValue","React","Provider","createElement","useSliderUi","useContext","useSliderInfix","useSliderSelection","useSliderActions"],"mappings":"6UAYA,IAAMA,EAAYC,EAAc,CAAA,GAC1BC,EAAmBD,EAAc,CAAA,GACjCE,EAAiBF,EAAc,CAAA,GAC/BG,EAAeH,EAAc,CAAA,GAiC7B,SAAUI,EAAcC,GAqBR,IApBpBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAAKJ,EAALI,MAEAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SACAC,EAAGP,EAAHO,IACAC,EAAGR,EAAHQ,IACAC,EAAQT,EAARS,SACAC,EAAMV,EAANU,OACAC,EAASX,EAATW,UACAC,EAAkBZ,EAAlBY,mBACAC,EAAeb,EAAfa,gBACAC,EAAId,EAAJc,KACAC,EAAIf,EAAJe,KACAC,EAAKhB,EAALgB,MACAC,EAAcjB,EAAdiB,eACAC,EAASlB,EAATkB,UACAC,EAAYnB,EAAZmB,aAEMC,EAAcC,EAjBKrB,EAAzB,gBAkBAsB,EAA6EC,EAC3ElB,EACAW,EACAC,EACAC,GAJMM,EAAWF,EAAXE,YAAaC,EAAeH,EAAfG,gBAAiBC,EAAgBJ,EAAhBI,iBAAkBC,EAAgBL,EAAhBK,iBAOxDC,EAA4BC,EAAiB,MAAKC,EAAAC,EAAAH,EAAA,GAA3CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA8BL,EAAiB,MAAKM,EAAAJ,EAAAG,EAAA,GAA7CE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAC1BG,EAA6CC,IAAaC,EAAAT,EAAAO,EAAA,GAAnDG,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GAAEG,EAAWH,EAAA,GAEnCI,EAAkCC,GACtC,WAAA,MAAO,CACLb,OAAAA,EACA9B,UAAAA,EACAC,eAAAA,EACAC,MAAAA,EACAE,SAAAA,EACAmC,SAAAA,EACAL,QAAAA,EACAtB,KAAAA,EACAM,YAAAA,EACAT,UAAAA,EACAC,mBAAAA,EACAC,gBAAAA,EACA,GACF,CACEmB,EACA9B,EACAC,EACAC,EACAE,EACAmC,EACAL,EACAtB,EACAM,EACAT,EACAC,EACAC,IAIEiC,EAAgDD,GACpD,WAAA,MAAO,CACLtC,IAAAA,EACAC,IAAAA,EACAE,OAAAA,EACAK,KAAAA,EACAC,MAAOQ,EACPN,UAAWO,EACZ,GACD,CAAClB,EAAKC,EAAKE,EAAQK,EAAMS,EAAaC,IAGlCsB,EAA4CC,EAChDxB,EACAY,EACAO,EACAjB,EACAnB,EACAC,EACAC,EACAC,EACAuB,EACAI,EACAK,EACAf,EACAZ,GAGF,OACEkC,gBAACvD,EAAUwD,SAAS,CAAAlC,MAAO4B,GACzBK,EAAAE,cAACvD,EAAiBsD,SAAS,CAAAlC,MAAO8B,GAChCG,EAAAE,cAACtD,EAAeqD,SAAS,CAAAlC,MAAO+B,GAC9BE,EAAAE,cAACrD,EAAaoD,SAAQ,CAAClC,MAAOG,GAAelB,KAKvD,UAEgBmD,IACd,OAAOC,EAAW3D,EACpB,UAEgB4D,IACd,OAAOD,EAAWvD,EACpB,UAEgByD,IACd,OAAOF,EAAWzD,EACpB,UAEgB4D,IACd,OAAOH,EAAWxD,EACpB"}
+{"version":3,"file":"SliderContext.js","sources":["../../../../../src/components/Slider/SliderContext.tsx"],"sourcesContent":["import React, { createContext, type ReactElement, useContext, useMemo, useState } from \"react\";\nimport { createTestIdHelper } from \"../../helpers/testid-helper\";\nimport { useDragging, useSliderActionsContextValue, useSliderValues } from \"./SliderHooks\";\nimport { type SliderProps } from \"./Slider\";\nimport {\n  type SliderContextActions,\n  type SliderContextInfix,\n  type SliderContextSelection,\n  type SliderContextUI\n} from \"./SliderConstants\";\nimport { type IconType } from \"@vibe/icon\";\n\nconst UiContext = createContext({});\nconst SelectionContext = createContext({});\nconst ActionsContext = createContext({});\nconst InfixContext = createContext({});\n\nexport interface SliderProviderProps extends SliderProps {\n  /**\n   * The child elements inside the slider provider.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * Configuration options for prefix, postfix, and selection indicator.\n   */\n  infixOptions?: {\n    /**\n     * If true, displays the selected value from the slider range.\n     */\n    indicateSelection?: boolean;\n    /**\n     * Configuration for the prefix (start) element, which can be:\n     * - A React component, text, number, or node.\n     * - An object with an icon.\n     * - A function that receives the value and valueText.\n     */\n    prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * Configuration for the postfix (end) element, similar to prefix.\n     */\n    postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * The width of the selection indicator.\n     */\n    selectionIndicatorWidth?: string;\n  };\n}\n\nexport function SliderProvider({\n  children,\n  ariaLabel,\n  ariaLabelledby,\n  color,\n  \"data-testid\": dataTestId,\n  defaultValue,\n  disabled,\n  max,\n  min,\n  onChange,\n  ranged,\n  showValue,\n  valueLabelPosition,\n  valueLabelColor,\n  size,\n  step,\n  value,\n  valueFormatter,\n  valueText,\n  infixOptions\n}: SliderProviderProps) {\n  const shapeTestId = createTestIdHelper(dataTestId);\n  const { actualValue, actualValueText, getSelectedValue, setSelectedValue } = useSliderValues(\n    defaultValue,\n    value,\n    valueFormatter,\n    valueText\n  );\n\n  const [active, setActive] = useState<number>(null);\n  const [focused, setFocused] = useState<number>(null);\n  const [dragging, setDragging, getDragging] = useDragging();\n\n  const uiContextValue: SliderContextUI = useMemo(\n    () => ({\n      active,\n      ariaLabel,\n      ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    }),\n    [\n      active,\n      ariaLabel,\n      ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    ]\n  );\n\n  const selectionContextValue: SliderContextSelection = useMemo(\n    () => ({\n      max,\n      min,\n      ranged,\n      step,\n      value: actualValue,\n      valueText: actualValueText\n    }),\n    [max, min, ranged, step, actualValue, actualValueText]\n  );\n\n  const actionsContextValue: SliderContextActions = useSliderActionsContextValue(\n    actualValue,\n    focused,\n    getDragging,\n    getSelectedValue,\n    max,\n    min,\n    onChange,\n    ranged,\n    setActive,\n    setFocused,\n    setDragging,\n    setSelectedValue,\n    step\n  );\n\n  return (\n    <UiContext.Provider value={uiContextValue}>\n      <SelectionContext.Provider value={selectionContextValue}>\n        <ActionsContext.Provider value={actionsContextValue}>\n          <InfixContext.Provider value={infixOptions}>{children}</InfixContext.Provider>\n        </ActionsContext.Provider>\n      </SelectionContext.Provider>\n    </UiContext.Provider>\n  );\n}\n\nexport function useSliderUi(): SliderContextUI {\n  return useContext(UiContext) as SliderContextUI;\n}\n\nexport function useSliderInfix(): SliderContextInfix {\n  return useContext(InfixContext) as SliderContextInfix;\n}\n\nexport function useSliderSelection(): SliderContextSelection {\n  return useContext(SelectionContext) as SliderContextSelection;\n}\n\nexport function useSliderActions(): SliderContextActions {\n  return useContext(ActionsContext) as SliderContextActions;\n}\n"],"names":["UiContext","createContext","SelectionContext","ActionsContext","InfixContext","SliderProvider","_ref","children","ariaLabel","ariaLabelledby","color","defaultValue","disabled","max","min","onChange","ranged","showValue","valueLabelPosition","valueLabelColor","size","step","value","valueFormatter","valueText","infixOptions","shapeTestId","createTestIdHelper","_useSliderValues","useSliderValues","actualValue","actualValueText","getSelectedValue","setSelectedValue","_useState","useState","_useState2","_slicedToArray","active","setActive","_useState3","_useState4","focused","setFocused","_useDragging","useDragging","_useDragging2","dragging","setDragging","getDragging","uiContextValue","useMemo","selectionContextValue","actionsContextValue","useSliderActionsContextValue","React","Provider","createElement","useSliderUi","useContext","useSliderInfix","useSliderSelection","useSliderActions"],"mappings":"6UAYA,IAAMA,EAAYC,EAAc,CAAA,GAC1BC,EAAmBD,EAAc,CAAA,GACjCE,EAAiBF,EAAc,CAAA,GAC/BG,EAAeH,EAAc,CAAA,GAiC7B,SAAUI,EAAcC,GAqBR,IApBpBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAAKJ,EAALI,MAEAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SACAC,EAAGP,EAAHO,IACAC,EAAGR,EAAHQ,IACAC,EAAQT,EAARS,SACAC,EAAMV,EAANU,OACAC,EAASX,EAATW,UACAC,EAAkBZ,EAAlBY,mBACAC,EAAeb,EAAfa,gBACAC,EAAId,EAAJc,KACAC,EAAIf,EAAJe,KACAC,EAAKhB,EAALgB,MACAC,EAAcjB,EAAdiB,eACAC,EAASlB,EAATkB,UACAC,EAAYnB,EAAZmB,aAEMC,EAAcC,EAjBKrB,EAAzB,gBAkBAsB,EAA6EC,EAC3ElB,EACAW,EACAC,EACAC,GAJMM,EAAWF,EAAXE,YAAaC,EAAeH,EAAfG,gBAAiBC,EAAgBJ,EAAhBI,iBAAkBC,EAAgBL,EAAhBK,iBAOxDC,EAA4BC,EAAiB,MAAKC,EAAAC,EAAAH,EAAA,GAA3CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA8BL,EAAiB,MAAKM,EAAAJ,EAAAG,EAAA,GAA7CE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAC1BG,EAA6CC,IAAaC,EAAAT,EAAAO,EAAA,GAAnDG,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GAAEG,EAAWH,EAAA,GAEnCI,EAAkCC,GACtC,WAAA,MAAO,CACLb,OAAAA,EACA9B,UAAAA,EACAC,eAAAA,EACAC,MAAAA,EACAE,SAAAA,EACAmC,SAAAA,EACAL,QAAAA,EACAtB,KAAAA,EACAM,YAAAA,EACAT,UAAAA,EACAC,mBAAAA,EACAC,gBAAAA,EACA,GACF,CACEmB,EACA9B,EACAC,EACAC,EACAE,EACAmC,EACAL,EACAtB,EACAM,EACAT,EACAC,EACAC,IAIEiC,EAAgDD,GACpD,WAAA,MAAO,CACLtC,IAAAA,EACAC,IAAAA,EACAE,OAAAA,EACAK,KAAAA,EACAC,MAAOQ,EACPN,UAAWO,EACZ,GACD,CAAClB,EAAKC,EAAKE,EAAQK,EAAMS,EAAaC,IAGlCsB,EAA4CC,EAChDxB,EACAY,EACAO,EACAjB,EACAnB,EACAC,EACAC,EACAC,EACAuB,EACAI,EACAK,EACAf,EACAZ,GAGF,OACEkC,gBAACvD,EAAUwD,SAAS,CAAAlC,MAAO4B,GACzBK,EAAAE,cAACvD,EAAiBsD,SAAS,CAAAlC,MAAO8B,GAChCG,EAAAE,cAACtD,EAAeqD,SAAS,CAAAlC,MAAO+B,GAC9BE,EAAAE,cAACrD,EAAaoD,SAAQ,CAAClC,MAAOG,GAAelB,KAKvD,UAEgBmD,IACd,OAAOC,EAAW3D,EACpB,UAEgB4D,IACd,OAAOD,EAAWvD,EACpB,UAEgByD,IACd,OAAOF,EAAWzD,EACpB,UAEgB4D,IACd,OAAOH,EAAWxD,EACpB"}

package/dist/mocked_classnames/src/components/Slider/SliderInfixHooks.js

@@ -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 n from"../Icon/Icon.js";import{useSliderInfix as r,useSliderSelection as o}from"./SliderContext.js";import c from"./SelectionIndicator.js";var l={clickable:!1,iconSize:18,ignoreFocusStyle:!0};function a(a){var s="postfix"===a,m=r(),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(c,{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(n,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,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};
 //# sourceMappingURL=SliderInfixHooks.js.map

package/dist/mocked_classnames/src/components/Slider/SliderInfixHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInfixHooks.js","sources":["../../../../../src/components/Slider/SliderInfixHooks.tsx"],"sourcesContent":["import React, { type CSSProperties, type ReactElement } from \"react\";\nimport Icon from \"../../components/Icon/Icon\";\nimport { type InfixKind } from \"./Slider.types\";\nimport { useSliderInfix, useSliderSelection } from \"./SliderContext\";\nimport SelectionIndicator from \"./SelectionIndicator\";\nimport { type IconType } from \"../Icon\";\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":"oSAOA,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"}
+{"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"}

package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js

@@ -1,2 +1,2 @@
-import{slicedToArray as o,defineProperty as e,toConsumableArray as t}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 c,{useState as d,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 D,DIALOG_MOVE_BY as y,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{HideShowEvent as T,AnimationType as b}from"../Dialog/DialogConstants.js";import{NOOP as h}from"../../utils/function-utils.js";import{isInsideClass as S}from"../../utils/dom-utils.js";import j from"../../hooks/useKeyEvent/index.js";import P from"../../hooks/useEventListener/index.js";import I from"../Button/Button.js";import B from"../Dialog/Dialog.js";import E from"../DialogContentContainer/DialogContentContainer.js";import O from"./SplitButton.module.scss.js";import{ComponentVibeId as _}from"../../tests/constants.js";import z from"../../../icons/dist/react/DropdownChevronDown.js";var L=N((function(g){var N=g.secondaryDialogContent,L=g.onSecondaryDialogDidShow,w=void 0===L?h:L,A=g.onSecondaryDialogDidHide,x=void 0===A?h:A,R=g.shouldCloseOnClickInsideDialog,H=g.zIndex,U=void 0===H?null:H,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,eo=g.leftIcon,to=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=d(!1),po=o(uo,2),go=po[0],fo=po[1],vo=d(!1),Do=o(vo,2),yo=Do[0],Co=Do[1],ko=d(!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&&!S(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),w()}),[fo,w]),zo=u((function(o,e){fo(!1),x(),"esckey"===e&&So.current.focus()}),[fo,x]);P({eventName:"mouseenter",callback:jo,ref:ho}),P({eventName:"mouseleave",callback:Po,ref:ho}),P({eventName:"mousedown",callback:Bo,ref:ho}),P({eventName:"mouseup",callback:Eo,ref:ho}),P({eventName:"transitionend",callback:Eo,ref:ho}),j({keys:f,ref:ho,callback:Oo});var Lo=p((function(){return l(O.button,a(O,n("kind-"+Q)),a(O,n("color-"+$)),e(e(e(e(e({},O.mainActive,so),O.active,To),O.splitContentOpen,go),O.hovered,yo),O.disabled,q),oo)}),[oo,Q,$,so,To,go,yo,q]),wo=p((function(){return q?[]:v}),[q]),Ao=p((function(){return R?[].concat(t(D),[T.CONTENT_CLICK]):D}),[R]),xo=u((function(){var o="function"==typeof N?N():N;return c.createElement(E,{type:E.types.POPOVER,size:X},o)}),[N,X]),Ro=p((function(){return"bottom"===W?"":"bottom-start"===W?"bottom":"top"}),[W]);return c.createElement("div",{className:Lo,ref:ho,id:lo,"data-testid":co||r(s.SPLIT_BUTTON,lo),"data-vibe":_.SPLIT_BUTTON},c.createElement(I,Object.assign({},mo,{preventClickAnimation:!0,leftIcon:eo,rightIcon:to,rightFlat:!0,color:$,kind:Q,active:so,onClick:io,className:O.mainButton,marginLeft:ao,onFocus:jo,onBlur:Po,disabled:q,loading:G,"data-testid":r(s.SPLIT_BUTTON_PRIMARY_BUTTON,lo)}),no),c.createElement("div",{className:O.secondaryButtonWrapper},c.createElement(B,{wrapperClassName:K,zIndex:U,content:xo,position:W,containerSelector:Y,startingEdge:Ro,animationType:b.EXPAND,moveBy:y,onDialogDidShow:_o,onDialogDidHide:zo,showTrigger:wo,hideTrigger:Ao},c.createElement(I,Object.assign({},mo,{ref:So,preventClickAnimation:!0,leftFlat:!0,noSidePadding:!0,color:$,kind:Q,className:O.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)}),c.createElement("div",{className:O.secondaryButtonIconWrapper},c.createElement(z,{"aria-hidden":"true"}))))))}),{secondaryPositions:g,secondaryDialogPositions:g,sizes:I.sizes,colors:I.colors,kinds:I.kinds,inputTags:I.inputTags,dialogPaddingSizes:E.sizes});export{L as default};
+import{slicedToArray as o,defineProperty as e,toConsumableArray as t}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 c,{useState as d,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 D,DIALOG_MOVE_BY as y,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{HideShowEvent as b,AnimationType as T}from"../Dialog/DialogConstants.js";import{NOOP as h}from"../../utils/function-utils.js";import{isInsideClass as S}from"../../utils/dom-utils.js";import j from"../../hooks/useKeyEvent/index.js";import P from"../../hooks/useEventListener/index.js";import I from"../Dialog/Dialog.js";import B from"../DialogContentContainer/DialogContentContainer.js";import E from"./SplitButton.module.scss.js";import{ComponentVibeId as O}from"../../tests/constants.js";import _ from"../../../components/button/dist/Button/Button.js";import z from"../../../packages/icons/dist/react/DropdownChevronDown.js";var L=N((function(g){var N=g.secondaryDialogContent,L=g.onSecondaryDialogDidShow,w=void 0===L?h:L,A=g.onSecondaryDialogDidHide,x=void 0===A?h:A,R=g.shouldCloseOnClickInsideDialog,H=g.zIndex,U=void 0===H?null:H,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,eo=g.leftIcon,to=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=d(!1),po=o(uo,2),go=po[0],fo=po[1],vo=d(!1),Do=o(vo,2),yo=Do[0],Co=Do[1],ko=d(!1),No=o(ko,2),bo=No[0],To=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&&!S(o.target,k)}),[q]),Bo=u((function(o){Io(o)&&To(!0)}),[To,Io]),Eo=u((function(){return To(!1)}),[To]),Oo=u((function(o){Io(o)&&To(!0)}),[To,Io]),_o=u((function(){fo(!0),w()}),[fo,w]),zo=u((function(o,e){fo(!1),x(),"esckey"===e&&So.current.focus()}),[fo,x]);P({eventName:"mouseenter",callback:jo,ref:ho}),P({eventName:"mouseleave",callback:Po,ref:ho}),P({eventName:"mousedown",callback:Bo,ref:ho}),P({eventName:"mouseup",callback:Eo,ref:ho}),P({eventName:"transitionend",callback:Eo,ref:ho}),j({keys:f,ref:ho,callback:Oo});var Lo=p((function(){return l(E.button,a(E,n("kind-"+Q)),a(E,n("color-"+$)),e(e(e(e(e({},E.mainActive,so),E.active,bo),E.splitContentOpen,go),E.hovered,yo),E.disabled,q),oo)}),[oo,Q,$,so,bo,go,yo,q]),wo=p((function(){return q?[]:v}),[q]),Ao=p((function(){return R?[].concat(t(D),[b.CONTENT_CLICK]):D}),[R]),xo=u((function(){var o="function"==typeof N?N():N;return c.createElement(B,{type:B.types.POPOVER,size:X},o)}),[N,X]),Ro=p((function(){return"bottom"===W?"":"bottom-start"===W?"bottom":"top"}),[W]);return c.createElement("div",{className:Lo,ref:ho,id:lo,"data-testid":co||r(s.SPLIT_BUTTON,lo),"data-vibe":O.SPLIT_BUTTON},c.createElement(_,Object.assign({},mo,{preventClickAnimation:!0,leftIcon:eo,rightIcon:to,rightFlat:!0,color:$,kind:Q,active:so,onClick:io,className:E.mainButton,marginLeft:ao,onFocus:jo,onBlur:Po,disabled:q,loading:G,"data-testid":r(s.SPLIT_BUTTON_PRIMARY_BUTTON,lo)}),no),c.createElement("div",{className:E.secondaryButtonWrapper},c.createElement(I,{wrapperClassName:K,zIndex:U,content:xo,position:W,containerSelector:Y,startingEdge:Ro,animationType:T.EXPAND,moveBy:y,onDialogDidShow:_o,onDialogDidHide:zo,showTrigger:wo,hideTrigger:Ao},c.createElement(_,Object.assign({},mo,{ref:So,preventClickAnimation:!0,leftFlat:!0,noSidePadding:!0,color:$,kind:Q,className:E.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)}),c.createElement("div",{className:E.secondaryButtonIconWrapper},c.createElement(z,{"aria-hidden":"true"}))))))}),{secondaryPositions:g,secondaryDialogPositions:g,sizes:_.sizes,colors:_.colors,kinds:_.kinds,inputTags:_.inputTags,dialogPaddingSizes:B.sizes});export{L as default};
 //# sourceMappingURL=SplitButton.js.map