npm - @vibe/core - Versions diffs - 3.70.2-alpha-23478.0 → 3.70.3 - Mend

@vibe/core 3.70.2-alpha-23478.0 → 3.70.3

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

Files changed (1085) hide show

package/dist/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js CHANGED Viewed

@@ -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/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map CHANGED Viewed

	@@ -1 +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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"}
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 \"@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/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={indicator:"indicator_5cc154d0f6",textContainer:"textContainer_1d71e39bf3",sizeCompactTextContainer:"sizeCompactTextContainer_8a913fd73c",textContainerTitle:"textContainerTitle_529252afa1",visuallyHidden:"visuallyHidden_6375ee2e3c",textContainerTitleText:"textContainerTitleText_5f60e7c8c0",textContainerSubtitleText:"textContainerSubtitleText_9a416c18fc",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle_0a71c3c520",textPlacementVertical:"textPlacementVertical_eb481c9442",numberDividerContainer:"numberDividerContainer_c3f231d678",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText_3fd7427c4d",divider:"divider_df334324ff",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer_bca61c7225",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer_54b7f266c5",clickable:"clickable_0cd50608c4",withAnimation:"withAnimation_344e7ff184",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic_b9377f07c9",swapEnter:"swapEnter_5c236f6dd9",swapEnterActive:"swapEnterActive_117c214f95",swapExit:"swapExit_971bd1b6c2",swapExitActive:"swapExitActive_34943ecf57",numberContainer:"numberContainer_24495f4e8e",numberContainerText:"numberContainerText_0b4347c93c",numberContainerTextCheckIcon:"numberContainerTextCheckIcon_183d72e2bf",typePrimaryNumberContainer:"typePrimaryNumberContainer_1bfe326b45",typeDangerNumberContainer:"typeDangerNumberContainer_2274e49d03",typeSuccessNumberContainer:"typeSuccessNumberContainer_211b04c645",typeDarkNumberContainer:"typeDarkNumberContainer_186aac52b5",statusActiveNumberContainer:"statusActiveNumberContainer_3c46125a3c",sizeCompactNumberContainer:"sizeCompactNumberContainer_cb7505a54c",statusPendingNumberContainer:"statusPendingNumberContainer_0bbb48ccb5","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic_8af282678c"};!function(n){const e="s_id-f9249b867669_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".indicator_5cc154d0f6 {\n  font: var(--font-text2-normal);\n  color: var(--text-color-on-primary);\n  display: flex;\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n}\n\n.textContainer_1d71e39bf3 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer_8a913fd73c {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle_529252afa1 {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle_529252afa1 .visuallyHidden_6375ee2e3c {\n  display: none;\n}\n\n.textContainerTitleText_5f60e7c8c0 {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText_9a416c18fc {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle_0a71c3c520 {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical_eb481c9442 {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical_eb481c9442 .textContainer_1d71e39bf3 {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical_eb481c9442 .numberDividerContainer_c3f231d678 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText_3fd7427c4d {\n  display: block;\n  font: var(--font-text2-normal);\n  max-width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n}\n\n.textPlacementVertical_eb481c9442 .numberDividerContainer_c3f231d678 .divider_df334324ff {\n  background-color: var(--ui-border-color);\n  margin: 16px 0 16px 16px;\n  height: 1px;\n  flex: 1 1 0;\n}\n\n.sizeCompactNumberDividerContainer_bca61c7225 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer_bca61c7225.statusActiveNumberDividerContainer_54b7f266c5 {\n  width: 40px;\n}\n\n.indicator_5cc154d0f6.clickable_0cd50608c4 {\n  cursor: pointer;\n}\n\n.withAnimation_344e7ff184 {\n  animation: stepIndicatiorCirclePopElastic_b9377f07c9 var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter_5c236f6dd9 {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive_117c214f95 {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old state leaves */\n\n.swapExit_971bd1b6c2 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive_34943ecf57 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n}\n\n.numberContainer_24495f4e8e {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText_0b4347c93c {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon_183d72e2bf {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer_1bfe326b45 {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer_1bfe326b45:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer_2274e49d03 {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer_2274e49d03:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer_211b04c645 {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer_211b04c645:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer_186aac52b5 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer_186aac52b5:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer_3c46125a3c {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer_3c46125a3c.typeDangerNumberContainer_2274e49d03 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer_3c46125a3c.typeSuccessNumberContainer_211b04c645 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer_3c46125a3c.typeDarkNumberContainer_186aac52b5 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer_cb7505a54c {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer_0bbb48ccb5 {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n  border-color: var(--ui-border-color) !important;\n  border: 1px solid;\n}\n\n.statusPendingNumberContainer_0bbb48ccb5:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer_0bbb48ccb5.typeDangerNumberContainer_2274e49d03:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer_0bbb48ccb5.typeSuccessNumberContainer_211b04c645:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer_0bbb48ccb5.typeDarkNumberContainer_186aac52b5:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic_8af282678c {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{n as default};
+var n={indicator:"indicator_e94749762d",textContainer:"textContainer_060009e2ea",sizeCompactTextContainer:"sizeCompactTextContainer_508b637ea7",textContainerTitle:"textContainerTitle_3d3f6d2100",visuallyHidden:"visuallyHidden_0cab0fd09a",textContainerTitleText:"textContainerTitleText_70047fff8f",textContainerSubtitleText:"textContainerSubtitleText_3b0c916d7b",sizeCompactTextContainerTitle:"sizeCompactTextContainerTitle_96133b2194",textPlacementVertical:"textPlacementVertical_4929652120",numberDividerContainer:"numberDividerContainer_1336c72421",sizeCompactTextContainerTitleText:"sizeCompactTextContainerTitleText_32af3ad370",divider:"divider_472d7ea54a",sizeCompactNumberDividerContainer:"sizeCompactNumberDividerContainer_115baec9e3",statusActiveNumberDividerContainer:"statusActiveNumberDividerContainer_e5f33463e8",clickable:"clickable_534a61b13f",withAnimation:"withAnimation_714202c243",stepIndicatiorCirclePopElastic:"stepIndicatiorCirclePopElastic_405821333c",swapEnter:"swapEnter_dbd915521a",swapEnterActive:"swapEnterActive_20ce849b6d",swapExit:"swapExit_1ac2cc1703",swapExitActive:"swapExitActive_218ace7359",numberContainer:"numberContainer_5448c24e27",numberContainerText:"numberContainerText_1ffca71add",numberContainerTextCheckIcon:"numberContainerTextCheckIcon_125ade3b82",typePrimaryNumberContainer:"typePrimaryNumberContainer_038091ff17",typeDangerNumberContainer:"typeDangerNumberContainer_90a126d999",typeSuccessNumberContainer:"typeSuccessNumberContainer_dfd8746f4a",typeDarkNumberContainer:"typeDarkNumberContainer_9a529450f2",statusActiveNumberContainer:"statusActiveNumberContainer_c0716ce1fb",sizeCompactNumberContainer:"sizeCompactNumberContainer_fa3fa405f7",statusPendingNumberContainer:"statusPendingNumberContainer_1c36969991","step-indicatior-circle-pop-elastic":"step-indicatior-circle-pop-elastic_9cbfe4ebf8"};!function(n){const e="s_id-f9249b867669_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".indicator_e94749762d {\n  font: var(--font-text2-normal);\n  color: var(--text-color-on-primary);\n  display: flex;\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n}\n\n.textContainer_060009e2ea {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-left: 16px;\n}\n\n.sizeCompactTextContainer_508b637ea7 {\n  margin-left: var(--spacing-small);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle_3d3f6d2100 {\n  width: 100%;\n  margin-bottom: var(--spacing-xs);\n}\n\n.textContainerTitle_3d3f6d2100 .visuallyHidden_0cab0fd09a {\n  display: none;\n}\n\n.textContainerTitleText_70047fff8f {\n  font: var(--font-text2-medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText_3b0c916d7b {\n  width: 100%;\n  font: var(--font-text2-normal);\n  color: var(--primary-text-color);\n}\n\n.sizeCompactTextContainerTitle_96133b2194 {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical_4929652120 {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical_4929652120 .textContainer_060009e2ea {\n  margin-left: 0;\n  margin-top: var(--spacing-medium);\n}\n\n.textPlacementVertical_4929652120 .numberDividerContainer_1336c72421 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText_32af3ad370 {\n  display: block;\n  font: var(--font-text2-normal);\n  max-width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n}\n\n.textPlacementVertical_4929652120 .numberDividerContainer_1336c72421 .divider_472d7ea54a {\n  background-color: var(--ui-border-color);\n  margin: 16px 0 16px 16px;\n  height: 1px;\n  flex: 1 1 0;\n}\n\n.sizeCompactNumberDividerContainer_115baec9e3 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sizeCompactNumberDividerContainer_115baec9e3.statusActiveNumberDividerContainer_e5f33463e8 {\n  width: 40px;\n}\n\n.indicator_e94749762d.clickable_534a61b13f {\n  cursor: pointer;\n}\n\n.withAnimation_714202c243 {\n  animation: stepIndicatiorCirclePopElastic_405821333c var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter_dbd915521a {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive_20ce849b6d {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old state leaves */\n\n.swapExit_1ac2cc1703 {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive_218ace7359 {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n}\n\n.numberContainer_5448c24e27 {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText_1ffca71add {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon_125ade3b82 {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer_038091ff17 {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer_038091ff17:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer_90a126d999 {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer_90a126d999:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer_dfd8746f4a {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer_dfd8746f4a:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer_9a529450f2 {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer_9a529450f2:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer_c0716ce1fb {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer_c0716ce1fb.typeDangerNumberContainer_90a126d999 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer_c0716ce1fb.typeSuccessNumberContainer_dfd8746f4a {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer_c0716ce1fb.typeDarkNumberContainer_9a529450f2 {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer_fa3fa405f7 {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer_1c36969991 {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n  border-color: var(--ui-border-color) !important;\n  border: 1px solid;\n}\n\n.statusPendingNumberContainer_1c36969991:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer_1c36969991.typeDangerNumberContainer_90a126d999:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer_1c36969991.typeSuccessNumberContainer_dfd8746f4a:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer_1c36969991.typeDarkNumberContainer_9a529450f2:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@keyframes step-indicatior-circle-pop-elastic_9cbfe4ebf8 {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}");export{n as default};
 //# sourceMappingURL=StepIndicator.module.scss.js.map

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

@@ -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/src/components/NumberField/NumberField.js.map CHANGED Viewed

	@@ -1 +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":"~~ioBAeMA~~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"}
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 \"@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/src/components/NumberField/NumberField.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={numberField:"numberField_3a846b1d33",label:"label_3a3160512d",leftIcon:"leftIcon_fc60274b18"};!function(e){const n="s_id-043e6276934a_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,d.firstChild?d.insertBefore(t,d.firstChild):d.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".numberField_3a846b1d33 {\n  width: 100%;\n}\n.numberField_3a846b1d33 .label_3a3160512d {\n  padding-bottom: 0;\n}\n.numberField_3a846b1d33 .leftIcon_fc60274b18 {\n  color: var(--icon-color);\n}");export{e as default};
+var e={numberField:"numberField_b408029710",label:"label_3dde366346",leftIcon:"leftIcon_332a209426"};!function(e){const n="s_id-043e6276934a_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".numberField_b408029710 {\n  width: 100%;\n}\n.numberField_b408029710 .label_3dde366346 {\n  padding-bottom: 0;\n}\n.numberField_b408029710 .leftIcon_332a209426 {\n  color: var(--icon-color);\n}");export{e as default};
 //# sourceMappingURL=NumberField.module.scss.js.map

package/dist/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js CHANGED Viewed

@@ -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/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map CHANGED Viewed

	@@ -1 +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"}
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":"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/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={spinButton:"spinButton_19d74832fc",large:"large_fc01c0f4e8",icon:"icon_ae89586183",medium:"medium_900aab618f",small:"small_85a5687567"};!function(e){const n="s_id-eb36452422c9_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".spinButton_19d74832fc.large_fc01c0f4e8 {\n  width: 28px;\n  height: 20px;\n}\n.spinButton_19d74832fc.large_fc01c0f4e8 .icon_ae89586183 {\n  width: 16px;\n  height: 16px;\n}\n.spinButton_19d74832fc.medium_900aab618f {\n  width: 24px;\n  height: 16px;\n}\n.spinButton_19d74832fc.medium_900aab618f .icon_ae89586183 {\n  width: 16px;\n  height: 16px;\n}\n.spinButton_19d74832fc.small_85a5687567 {\n  width: 22px;\n  height: 14px;\n}\n.spinButton_19d74832fc.small_85a5687567 .icon_ae89586183 {\n  width: 14px;\n  height: 14px;\n}");export{e as default};
+var e={spinButton:"spinButton_b2ed343b08",large:"large_d7e1ca4441",icon:"icon_36b1782d1b",medium:"medium_0432099aac",small:"small_a467e80b34"};!function(e){const n="s_id-eb36452422c9_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".spinButton_b2ed343b08.large_d7e1ca4441 {\n  width: 28px;\n  height: 20px;\n}\n.spinButton_b2ed343b08.large_d7e1ca4441 .icon_36b1782d1b {\n  width: 16px;\n  height: 16px;\n}\n.spinButton_b2ed343b08.medium_0432099aac {\n  width: 24px;\n  height: 16px;\n}\n.spinButton_b2ed343b08.medium_0432099aac .icon_36b1782d1b {\n  width: 16px;\n  height: 16px;\n}\n.spinButton_b2ed343b08.small_a467e80b34 {\n  width: 22px;\n  height: 14px;\n}\n.spinButton_b2ed343b08.small_a467e80b34 .icon_36b1782d1b {\n  width: 14px;\n  height: 14px;\n}");export{e as default};
 //# sourceMappingURL=NumberFieldSpinButton.module.scss.js.map

package/dist/src/components/ProgressBars/LinearProgressBar/Bar/Bar.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={bar:"bar_e024b5c9aa",typePrimaryPrimary:"typePrimaryPrimary_1bfe326b45",typePrimarySecondary:"typePrimarySecondary_c37b869252",typePrimaryPositive:"typePrimaryPositive_211b04c645",typePrimaryNegative:"typePrimaryNegative_2274e49d03",typePrimaryWarning:"typePrimaryWarning_7c3ef08d92",typeSecondaryPrimary:"typeSecondaryPrimary_0e94cd5041",typeSecondarySecondary:"typeSecondarySecondary_518ae88d26",typeSecondaryPositive:"typeSecondaryPositive_73bff39b6f",typeSecondaryNegative:"typeSecondaryNegative_8ccdcbe8b4",typeSecondaryWarning:"typeSecondaryWarning_9c870a9d22",animate:"animate_94d59dee33"};!function(e){const r="s_id-47cfcfa6b681_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}(".bar_e024b5c9aa {\n  left: 0;\n  height: 100%;\n  position: absolute;\n  border-radius: var(--border-radius-small);\n}\n\n.typePrimaryPrimary_1bfe326b45 {\n  background-color: var(--primary-color);\n}\n\n.typePrimarySecondary_c37b869252 {\n  background-color: var(--inverted-color-background);\n}\n\n.typePrimaryPositive_211b04c645 {\n  background-color: var(--positive-color);\n}\n\n.typePrimaryNegative_2274e49d03 {\n  background-color: var(--negative-color);\n}\n\n.typePrimaryWarning_7c3ef08d92 {\n  background-color: var(--warning-color);\n}\n\n.typeSecondaryPrimary_0e94cd5041 {\n  background-color: var(--primary-selected-color);\n}\n\n.typeSecondarySecondary_518ae88d26 {\n  background-color: var(--ui-border-color);\n}\n\n.typeSecondaryPositive_73bff39b6f {\n  background-color: var(--positive-color-selected);\n}\n\n.typeSecondaryNegative_8ccdcbe8b4 {\n  background-color: var(--negative-color-selected);\n}\n\n.typeSecondaryWarning_9c870a9d22 {\n  background-color: var(--warning-color-selected);\n}\n\n.animate_94d59dee33 {\n  transition: width 300ms var(--motion-timing-transition);\n}");export{e as default};
+var e={bar:"bar_a463b6d651",typePrimaryPrimary:"typePrimaryPrimary_038091ff17",typePrimarySecondary:"typePrimarySecondary_700bdb9fbf",typePrimaryPositive:"typePrimaryPositive_dfd8746f4a",typePrimaryNegative:"typePrimaryNegative_90a126d999",typePrimaryWarning:"typePrimaryWarning_db8fbb4f7a",typeSecondaryPrimary:"typeSecondaryPrimary_b3cbc29e63",typeSecondarySecondary:"typeSecondarySecondary_4cac57a60e",typeSecondaryPositive:"typeSecondaryPositive_d7130047ce",typeSecondaryNegative:"typeSecondaryNegative_c0f4321df2",typeSecondaryWarning:"typeSecondaryWarning_bc5b0a2f40",animate:"animate_19e30c6441"};!function(e){const r="s_id-47cfcfa6b681_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}(".bar_a463b6d651 {\n  left: 0;\n  height: 100%;\n  position: absolute;\n  border-radius: var(--border-radius-small);\n}\n\n.typePrimaryPrimary_038091ff17 {\n  background-color: var(--primary-color);\n}\n\n.typePrimarySecondary_700bdb9fbf {\n  background-color: var(--inverted-color-background);\n}\n\n.typePrimaryPositive_dfd8746f4a {\n  background-color: var(--positive-color);\n}\n\n.typePrimaryNegative_90a126d999 {\n  background-color: var(--negative-color);\n}\n\n.typePrimaryWarning_db8fbb4f7a {\n  background-color: var(--warning-color);\n}\n\n.typeSecondaryPrimary_b3cbc29e63 {\n  background-color: var(--primary-selected-color);\n}\n\n.typeSecondarySecondary_4cac57a60e {\n  background-color: var(--ui-border-color);\n}\n\n.typeSecondaryPositive_d7130047ce {\n  background-color: var(--positive-color-selected);\n}\n\n.typeSecondaryNegative_c0f4321df2 {\n  background-color: var(--negative-color-selected);\n}\n\n.typeSecondaryWarning_bc5b0a2f40 {\n  background-color: var(--warning-color-selected);\n}\n\n.animate_19e30c6441 {\n  transition: width 300ms var(--motion-timing-transition);\n}");export{e as default};
 //# sourceMappingURL=Bar.module.scss.js.map

package/dist/src/components/ProgressBars/LinearProgressBar/LinearProgressBar.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_7cf03be008",fullWidth:"fullWidth_3a846b1d33",container:"container_828d05b254",progressBar:"progressBar_137a1c828c",completed:"completed_828d05b254",label:"label_57d24c8159",large:"large_4e4cd1207d",medium:"medium_d77509d606",small:"small_dc5cdb38d3"};!function(e){const n="s_id-5855608df299_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper_7cf03be008 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n  font: var(--font-text2-normal);\n  line-height: 8px !important;\n}\n.wrapper_7cf03be008.fullWidth_3a846b1d33 {\n  width: 100%;\n}\n.wrapper_7cf03be008.fullWidth_3a846b1d33 .container_828d05b254 {\n  border-radius: 0;\n}\n.wrapper_7cf03be008.fullWidth_3a846b1d33 .container_828d05b254 .progressBar_137a1c828c {\n  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;\n}\n.wrapper_7cf03be008.fullWidth_3a846b1d33 .container_828d05b254 .progressBar_137a1c828c.completed_828d05b254 {\n  border-radius: 0;\n}\n.label_57d24c8159 {\n  padding-left: var(--spacing-xs);\n}\n.large_4e4cd1207d {\n  height: 8px;\n  line-height: 8px;\n}\n.medium_d77509d606 {\n  height: 6px;\n  line-height: 6px;\n}\n.small_dc5cdb38d3 {\n  height: 4px;\n  line-height: 4px;\n}\n.container_828d05b254 {\n  position: relative;\n  width: 100%;\n  background-color: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n}");export{e as default};
+var e={wrapper:"wrapper_e07c442b1a",fullWidth:"fullWidth_b408029710",container:"container_9f973611ae",progressBar:"progressBar_33f34da3a7",completed:"completed_9f973611ae",label:"label_4d9f227cdd",large:"large_66db268c02",medium:"medium_dc8bf99ae2",small:"small_20268823b5"};!function(e){const n="s_id-5855608df299_3_70_2";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".wrapper_e07c442b1a {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n  font: var(--font-text2-normal);\n  line-height: 8px !important;\n}\n.wrapper_e07c442b1a.fullWidth_b408029710 {\n  width: 100%;\n}\n.wrapper_e07c442b1a.fullWidth_b408029710 .container_9f973611ae {\n  border-radius: 0;\n}\n.wrapper_e07c442b1a.fullWidth_b408029710 .container_9f973611ae .progressBar_33f34da3a7 {\n  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;\n}\n.wrapper_e07c442b1a.fullWidth_b408029710 .container_9f973611ae .progressBar_33f34da3a7.completed_9f973611ae {\n  border-radius: 0;\n}\n.label_4d9f227cdd {\n  padding-left: var(--spacing-xs);\n}\n.large_66db268c02 {\n  height: 8px;\n  line-height: 8px;\n}\n.medium_dc8bf99ae2 {\n  height: 6px;\n  line-height: 6px;\n}\n.small_20268823b5 {\n  height: 4px;\n  line-height: 4px;\n}\n.container_9f973611ae {\n  position: relative;\n  width: 100%;\n  background-color: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n}");export{e as default};
 //# sourceMappingURL=LinearProgressBar.module.scss.js.map

package/dist/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={label:"label_57d24c8159"};!function(e){const t="s_id-de8a28d20526_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".label_57d24c8159 {\n  padding-left: var(--spacing-xs);\n}");export{e as default};
+var e={label:"label_4d9f227cdd"};!function(e){const d="s_id-de8a28d20526_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".label_4d9f227cdd {\n  padding-left: var(--spacing-xs);\n}");export{e as default};
 //# sourceMappingURL=PercentageLabel.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var n={radioButton:"radioButton_01d6140ac2",inputContainer:"inputContainer_bca61c7225",input:"input_31d3d9e8ff",control:"control_62cfdfa3fc",labelAnimation:"labelAnimation_42d26e5d06",radioCheckedAnimation:"radioCheckedAnimation_03f5a7d031",disabled:"disabled_39f28fa2a0",label:"label_c3cf443816"};!function(n){const o="s_id-f0fb17b54d8d_3_70_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+o))return;const i=document.createElement("style");i.id=o,e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable unit-disallowed-list */\n.radioButton_01d6140ac2 {\n  display: grid;\n  grid-template-columns: 1.5em auto;\n  grid-gap: 0.5em;\n  cursor: pointer;\n}\n.inputContainer_bca61c7225 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.input_31d3d9e8ff {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n}\n.control_62cfdfa3fc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  height: 1em;\n  border: 0.1em solid;\n  box-sizing: border-box;\n  border-color: var(--ui-border-color);\n  border-radius: 50%;\n  transition: border-width var(--motion-productive-medium) var(--motion-timing-enter);\n  background-color: var(--secondary-background-color);\n}\ninput:checked + .control_62cfdfa3fc {\n  border-color: var(--primary-color);\n  border-width: 0.3em;\n}\ninput:checked + .labelAnimation_42d26e5d06 {\n  animation-name: radioCheckedAnimation_03f5a7d031;\n  animation-duration: var(--motion-productive-medium);\n  animation-timing-function: var(--motion-timing-enter);\n  animation-fill-mode: forwards;\n}\ninput:disabled + .control_62cfdfa3fc {\n  border: 0.5em solid;\n  border-color: var(--disabled-background-color);\n  border-radius: 50%;\n}\ninput:checked:disabled + .control_62cfdfa3fc {\n  border: 0.3em solid;\n  border-color: var(--disabled-background-color);\n  background-color: var(--secondary-text-color);\n}\n.radioButton_01d6140ac2.disabled_39f28fa2a0 {\n  cursor: not-allowed;\n}\n.radioButton_01d6140ac2.disabled_39f28fa2a0 .label_c3cf443816 {\n  color: var(--disabled-text-color);\n}\n.inputContainer_bca61c7225 input:focus-visible + .control_62cfdfa3fc {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 50%;\n}\n.radioButton_01d6140ac2:hover .inputContainer_bca61c7225 input:enabled:checked + .control_62cfdfa3fc {\n  border-color: var(--primary-hover-color);\n}\n.radioButton_01d6140ac2:hover .inputContainer_bca61c7225 input:enabled:not(:checked) + .control_62cfdfa3fc,\n.radioButton_01d6140ac2:focus-within .inputContainer_bca61c7225 input:enabled:not(:checked) + .control_62cfdfa3fc {\n  border-color: var(--primary-text-color);\n}\n@keyframes radioCheckedAnimation_03f5a7d031 {\n  0% {\n    height: 1em;\n    width: 1em;\n  }\n  50% {\n    height: 0.8em;\n    width: 0.8em;\n  }\n  100% {\n    height: 1em;\n    width: 1em;\n  }\n}");export{n as default};
+var n={radioButton:"radioButton_fd1d7cc498",inputContainer:"inputContainer_115baec9e3",input:"input_8ff6be6195",control:"control_2dc4fc0791",labelAnimation:"labelAnimation_deb631a3c2",radioCheckedAnimation:"radioCheckedAnimation_155cf1c1d0",disabled:"disabled_06b994ee86",label:"label_3d62785dc1"};!function(n){const e="s_id-f0fb17b54d8d_3_70_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable unit-disallowed-list */\n.radioButton_fd1d7cc498 {\n  display: grid;\n  grid-template-columns: 1.5em auto;\n  grid-gap: 0.5em;\n  cursor: pointer;\n}\n.inputContainer_115baec9e3 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.input_8ff6be6195 {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n}\n.control_2dc4fc0791 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  height: 1em;\n  border: 0.1em solid;\n  box-sizing: border-box;\n  border-color: var(--ui-border-color);\n  border-radius: 50%;\n  transition: border-width var(--motion-productive-medium) var(--motion-timing-enter);\n  background-color: var(--secondary-background-color);\n}\ninput:checked + .control_2dc4fc0791 {\n  border-color: var(--primary-color);\n  border-width: 0.3em;\n}\ninput:checked + .labelAnimation_deb631a3c2 {\n  animation-name: radioCheckedAnimation_155cf1c1d0;\n  animation-duration: var(--motion-productive-medium);\n  animation-timing-function: var(--motion-timing-enter);\n  animation-fill-mode: forwards;\n}\ninput:disabled + .control_2dc4fc0791 {\n  border: 0.5em solid;\n  border-color: var(--disabled-background-color);\n  border-radius: 50%;\n}\ninput:checked:disabled + .control_2dc4fc0791 {\n  border: 0.3em solid;\n  border-color: var(--disabled-background-color);\n  background-color: var(--secondary-text-color);\n}\n.radioButton_fd1d7cc498.disabled_06b994ee86 {\n  cursor: not-allowed;\n}\n.radioButton_fd1d7cc498.disabled_06b994ee86 .label_3d62785dc1 {\n  color: var(--disabled-text-color);\n}\n.inputContainer_115baec9e3 input:focus-visible + .control_2dc4fc0791 {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 50%;\n}\n.radioButton_fd1d7cc498:hover .inputContainer_115baec9e3 input:enabled:checked + .control_2dc4fc0791 {\n  border-color: var(--primary-hover-color);\n}\n.radioButton_fd1d7cc498:hover .inputContainer_115baec9e3 input:enabled:not(:checked) + .control_2dc4fc0791,\n.radioButton_fd1d7cc498:focus-within .inputContainer_115baec9e3 input:enabled:not(:checked) + .control_2dc4fc0791 {\n  border-color: var(--primary-text-color);\n}\n@keyframes radioCheckedAnimation_155cf1c1d0 {\n  0% {\n    height: 1em;\n    width: 1em;\n  }\n  50% {\n    height: 0.8em;\n    width: 0.8em;\n  }\n  100% {\n    height: 1em;\n    width: 1em;\n  }\n}");export{n as default};
 //# sourceMappingURL=RadioButton.module.scss.js.map

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

@@ -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/src/components/Search/Search.js.map CHANGED Viewed

	@@ -1 +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":"~~6rBAcA~~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"}
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 \"@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/src/components/Search/Search.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={searchWrapper:"searchWrapper_ed184336b7",search:"search_d542487ee6",loader:"loader_085a3d9c38",icon:"icon_ece24d50d9",empty:"empty_06447d7e03"};!function(e){const r="s_id-4e5e4eb516f6_3_70_1";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const n=document.createElement("style");n.id=r,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}(".searchWrapper_ed184336b7 .search_d542487ee6 {\n  appearance: textfield;\n}\n.searchWrapper_ed184336b7 .search_d542487ee6::-webkit-search-cancel-button, .searchWrapper_ed184336b7 .search_d542487ee6::-webkit-search-results-button {\n  appearance: none;\n}\n.searchWrapper_ed184336b7 .loader_085a3d9c38 {\n  margin-right: var(--spacing-xs);\n}\n.searchWrapper_ed184336b7 .icon_ece24d50d9 {\n  opacity: 1;\n  color: var(--icon-color);\n  transition: opacity var(--motion-productive-short);\n}\n.searchWrapper_ed184336b7 .icon_ece24d50d9.empty_06447d7e03 {\n  opacity: 0;\n}");export{e as default};
+var e={searchWrapper:"searchWrapper_5b66a88325",search:"search_0a1864cb14",loader:"loader_90a876219e",icon:"icon_d40882071c",empty:"empty_0c59bd2c3d"};!function(e){const a="s_id-4e5e4eb516f6_3_70_2";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+a))return;const c=document.createElement("style");c.id=a,r.firstChild?r.insertBefore(c,r.firstChild):r.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".searchWrapper_5b66a88325 .search_0a1864cb14 {\n  appearance: textfield;\n}\n.searchWrapper_5b66a88325 .search_0a1864cb14::-webkit-search-cancel-button, .searchWrapper_5b66a88325 .search_0a1864cb14::-webkit-search-results-button {\n  appearance: none;\n}\n.searchWrapper_5b66a88325 .loader_90a876219e {\n  margin-right: var(--spacing-xs);\n}\n.searchWrapper_5b66a88325 .icon_d40882071c {\n  opacity: 1;\n  color: var(--icon-color);\n  transition: opacity var(--motion-productive-short);\n}\n.searchWrapper_5b66a88325 .icon_d40882071c.empty_0c59bd2c3d {\n  opacity: 0;\n}");export{e as default};
 //# sourceMappingURL=Search.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var n={skeleton:"skeleton_487a166b09",rectangle:"rectangle_921986b34e",shine:"shine_96301ca693",circle:"circle_0f1c0038ab",text:"text_b49546d971",textH1:"textH1_37670b4e17",textH2:"textH2_3ce0aab394",textH3:"textH3_3ce0aab394",textH4:"textH4_2b569d5303",textH5:"textH5_d046d3982e",textH6:"textH6_76b1e46898",textSmall:"textSmall_828dd8a6c6",textCustom:"textCustom_76b1e46898",fullWidth:"fullWidth_3a846b1d33"};!function(n){const t="s_id-41cda04b2bc0_3_70_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".skeleton_487a166b09 {\n  display: flex;\n}\n\n.rectangle_921986b34e {\n  height: 160px;\n  background: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_96301ca693;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_96301ca693 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.circle_0f1c0038ab {\n  height: 40px;\n  background: var(--ui-background-color);\n  border-radius: 50%;\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_96301ca693;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_96301ca693 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.text_b49546d971 {\n  background: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_96301ca693;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_96301ca693 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.textH1_37670b4e17 {\n  height: 32px;\n}\n\n.textH2_3ce0aab394 {\n  height: 24px;\n}\n\n.textH3_3ce0aab394 {\n  height: 24px;\n}\n\n.textH4_2b569d5303 {\n  height: 21px;\n}\n\n.textH5_d046d3982e {\n  height: 16px;\n}\n\n.textH6_76b1e46898 {\n  height: 12px;\n}\n\n.textSmall_828dd8a6c6,\n.textCustom_76b1e46898 {\n  height: 12px;\n}\n\n.fullWidth_3a846b1d33 {\n  width: 100%;\n}\n\n.skeleton_487a166b09:not(.fullWidth_3a846b1d33) .text_b49546d971 {\n  width: 162px;\n}\n\n.skeleton_487a166b09:not(.fullWidth_3a846b1d33) .circle_0f1c0038ab {\n  width: 40px;\n}\n\n.skeleton_487a166b09:not(.fullWidth_3a846b1d33) .rectangle_921986b34e {\n  width: 160px;\n}");export{n as default};
+var n={skeleton:"skeleton_776853515c",rectangle:"rectangle_35aaa6b1de",shine:"shine_00b9479ad7",circle:"circle_59bcb34cc0",text:"text_af11e281e1",textH1:"textH1_5eb33ba93b",textH2:"textH2_9820477b1e",textH3:"textH3_9820477b1e",textH4:"textH4_de6a496944",textH5:"textH5_dcbd34844c",textH6:"textH6_647ff38cf2",textSmall:"textSmall_8648eed815",textCustom:"textCustom_647ff38cf2",fullWidth:"fullWidth_b408029710"};!function(n){const e="s_id-41cda04b2bc0_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".skeleton_776853515c {\n  display: flex;\n}\n\n.rectangle_35aaa6b1de {\n  height: 160px;\n  background: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_00b9479ad7;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_00b9479ad7 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.circle_59bcb34cc0 {\n  height: 40px;\n  background: var(--ui-background-color);\n  border-radius: 50%;\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_00b9479ad7;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_00b9479ad7 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.text_af11e281e1 {\n  background: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine_00b9479ad7;\n  animation-timing-function: steps(10, end);\n}\n\n@keyframes shine_00b9479ad7 {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.textH1_5eb33ba93b {\n  height: 32px;\n}\n\n.textH2_9820477b1e {\n  height: 24px;\n}\n\n.textH3_9820477b1e {\n  height: 24px;\n}\n\n.textH4_de6a496944 {\n  height: 21px;\n}\n\n.textH5_dcbd34844c {\n  height: 16px;\n}\n\n.textH6_647ff38cf2 {\n  height: 12px;\n}\n\n.textSmall_8648eed815,\n.textCustom_647ff38cf2 {\n  height: 12px;\n}\n\n.fullWidth_b408029710 {\n  width: 100%;\n}\n\n.skeleton_776853515c:not(.fullWidth_b408029710) .text_af11e281e1 {\n  width: 162px;\n}\n\n.skeleton_776853515c:not(.fullWidth_b408029710) .circle_59bcb34cc0 {\n  width: 40px;\n}\n\n.skeleton_776853515c:not(.fullWidth_b408029710) .rectangle_35aaa6b1de {\n  width: 160px;\n}");export{n as default};
 //# sourceMappingURL=Skeleton.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={slide:"slide_2ce32d96d9"};!function(e){const t="s_id-096ffa3ec029_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".slide_2ce32d96d9 {\n  height: 100%;\n  width: 100%;\n}");export{e as default};
+var e={slide:"slide_dea5f2b02b"};!function(e){const t="s_id-096ffa3ec029_3_70_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".slide_dea5f2b02b {\n  height: 100%;\n  width: 100%;\n}");export{e as default};
 //# sourceMappingURL=SlideTransition.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={selectionIndicator:"selectionIndicator_76328e477f"};!function(e){const t="s_id-a25847c4cc71_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".selectionIndicator_76328e477f.selectionIndicator_76328e477f.selectionIndicator_76328e477f {\n  text-align: center;\n  padding: var(--spacing-small);\n}");export{e as default};
+var e={selectionIndicator:"selectionIndicator_7d37561f02"};!function(e){const t="s_id-a25847c4cc71_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".selectionIndicator_7d37561f02.selectionIndicator_7d37561f02.selectionIndicator_7d37561f02 {\n  text-align: center;\n  padding: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=SelectionIndicator.module.scss.js.map

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

	@@ -1 +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"}
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 \"@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/src/components/Slider/Slider.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={slider:"slider_8b686cbbd7",valueShown:"valueShown_dacda1ff0b",positionTop:"positionTop_eb759c7822",positionBottom:"positionBottom_330cc90e1f"};!function(e){const n="s_id-4e41ea5b2e41_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".slider_8b686cbbd7 {\n  align-items: center;\n  display: flex;\n  max-width: 500px;\n  min-width: 200px;\n  width: 100%;\n}\n\n.valueShown_dacda1ff0b.positionTop_eb759c7822 {\n  margin-top: 10px;\n}\n\n.valueShown_dacda1ff0b.positionBottom_330cc90e1f {\n  margin-bottom: 10px;\n}");export{e as default};
+var e={slider:"slider_02455d76b5",valueShown:"valueShown_d6e318df2c",positionTop:"positionTop_dbadd16a12",positionBottom:"positionBottom_e84ea224ce"};!function(e){const n="s_id-4e41ea5b2e41_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".slider_02455d76b5 {\n  align-items: center;\n  display: flex;\n  max-width: 500px;\n  min-width: 200px;\n  width: 100%;\n}\n\n.valueShown_d6e318df2c.positionTop_dbadd16a12 {\n  margin-top: 10px;\n}\n\n.valueShown_d6e318df2c.positionBottom_e84ea224ce {\n  margin-bottom: 10px;\n}");export{e as default};
 //# sourceMappingURL=Slider.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={base:"base_9cad7de177",disabled:"disabled_15adc98db7",small:"small_202ae60079",medium:"medium_c2bd0d9375",large:"large_c2bd0d9375"};!function(e){const n="s_id-0abb9e445f96_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,d.firstChild?d.insertBefore(a,d.firstChild):d.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".base_9cad7de177 {\n  display: flex;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.disabled_15adc98db7 {\n  cursor: not-allowed !important;\n  opacity: var(--disabled-component-opacity);\n}\n\n.disabled_15adc98db7 * {\n  pointer-events: none;\n}\n\n.small_202ae60079 {\n  padding: 0 var(--spacing-small);\n}\n\n.medium_c2bd0d9375 {\n  padding: 0 12px;\n}\n\n.large_c2bd0d9375 {\n  padding: 0 12px;\n}");export{e as default};
+var e={base:"base_a670d99e4e",disabled:"disabled_810b7bd18d",small:"small_7911ad75a6",medium:"medium_db234f86d0",large:"large_db234f86d0"};!function(e){const n="s_id-0abb9e445f96_3_70_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,d.firstChild?d.insertBefore(a,d.firstChild):d.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".base_a670d99e4e {\n  display: flex;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.disabled_810b7bd18d {\n  cursor: not-allowed !important;\n  opacity: var(--disabled-component-opacity);\n}\n\n.disabled_810b7bd18d * {\n  pointer-events: none;\n}\n\n.small_7911ad75a6 {\n  padding: 0 var(--spacing-small);\n}\n\n.medium_db234f86d0 {\n  padding: 0 12px;\n}\n\n.large_db234f86d0 {\n  padding: 0 12px;\n}");export{e as default};
 //# sourceMappingURL=SliderBase.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={filledTrack:"filledTrack_a7b351abc0",positive:"positive_211b04c645",negative:"negative_2274e49d03"};!function(e){const n="s_id-bb386829c5aa_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".filledTrack_a7b351abc0 {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive_211b04c645 {\n  background-color: var(--positive-color);\n}\n\n.negative_2274e49d03 {\n  background-color: var(--negative-color);\n}");export{e as default};
+var e={filledTrack:"filledTrack_ce6c72d67d",positive:"positive_dfd8746f4a",negative:"negative_90a126d999"};!function(e){const n="s_id-bb386829c5aa_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".filledTrack_ce6c72d67d {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive_dfd8746f4a {\n  background-color: var(--positive-color);\n}\n\n.negative_90a126d999 {\n  background-color: var(--negative-color);\n}");export{e as default};
 //# sourceMappingURL=SliderFilledTrack.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={rail:"rail_682e51d622",small:"small_549ea3f667",medium:"medium_1d603137c0",large:"large_a4045bc1d7"};!function(e){const n="s_id-c66a4285003d_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,d.firstChild?d.insertBefore(i,d.firstChild):d.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".rail_682e51d622 {\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.small_549ea3f667 {\n  border-radius: 2px;\n  height: 2px;\n  padding: 8px 0;\n}\n\n.medium_1d603137c0 {\n  border-radius: 2px;\n  height: 4px;\n  padding: 12px 0;\n}\n\n.large_a4045bc1d7 {\n  border-radius: 8px;\n  height: 8px;\n  padding: 10px 0;\n}");export{e as default};
+var e={rail:"rail_60f6a25896",small:"small_a0c678ad65",medium:"medium_ef59062162",large:"large_26e184d719"};!function(e){const n="s_id-c66a4285003d_3_70_2";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,i.firstChild?i.insertBefore(d,i.firstChild):i.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".rail_60f6a25896 {\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.small_a0c678ad65 {\n  border-radius: 2px;\n  height: 2px;\n  padding: 8px 0;\n}\n\n.medium_ef59062162 {\n  border-radius: 2px;\n  height: 4px;\n  padding: 12px 0;\n}\n\n.large_26e184d719 {\n  border-radius: 8px;\n  height: 8px;\n  padding: 10px 0;\n}");export{e as default};
 //# sourceMappingURL=SliderRail.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var o={thumb:"thumb_e09cdc111a",dragging:"dragging_64109ae161",focused:"focused_66ee5360fc",notDisabledThumb:"notDisabledThumb_cdf32d4a90","focus-visible":"focus-visible_77df5a864c",positive:"positive_d54ebea32b",negative:"negative_1b56bb3754",small:"small_3777c1b926",medium:"medium_ac24f13ecb",large:"large_8b40de8cc8",label:"label_15a4f7b10a",positionTop:"positionTop_f24f8a6166",positionBottom:"positionBottom_d282471013",colorPrimary:"colorPrimary_5bd78f4f4d",colorSecondary:"colorSecondary_2b440d6e36"};!function(o){const n="s_id-9ef20defa923_3_70_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".thumb_e09cdc111a {\n  position: absolute;\n  border: 3px solid;\n  border-radius: 50%;\n  border-color: var(--primary-color);\n  background-color: var(--primary-background-color);\n  font-size: 14px;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  font-family: var(--font-family);\n}\n\n.dragging_64109ae161 {\n  cursor: grabbing !important;\n  transform: translate(-50%, -50%) scale(1.15, 1.15);\n  transform-origin: center center;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  box-shadow: var(--box-shadow-small);\n}\n\n.focused_66ee5360fc {\n  border-color: var(--primary-hover-color);\n  cursor: grab;\n  box-shadow: var(--box-shadow-small);\n}\n\n.notDisabledThumb_cdf32d4a90:focus-visible, .notDisabledThumb_cdf32d4a90.focus-visible_77df5a864c {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.notDisabledThumb_cdf32d4a90:focus:not(.focus-visible_77df5a864c) {\n  outline: none;\n}\n\n.notDisabledThumb_cdf32d4a90:hover {\n  border-color: var(--primary-hover-color);\n  cursor: grab;\n  box-shadow: var(--box-shadow-small);\n}\n\n.positive_d54ebea32b {\n  border-color: var(--positive-color);\n}\n\n.positive_d54ebea32b.notDisabledThumb_cdf32d4a90:hover {\n  border-color: var(--positive-color-hover);\n}\n\n.negative_1b56bb3754 {\n  border-color: var(--negative-color);\n}\n\n.negative_1b56bb3754.notDisabledThumb_cdf32d4a90:hover {\n  border-color: var(--negative-color-hover);\n}\n\n.small_3777c1b926 {\n  height: 16px;\n  width: 16px;\n}\n\n.medium_ac24f13ecb {\n  height: 20px;\n  width: 20px;\n}\n\n.large_8b40de8cc8 {\n  height: 24px;\n  width: 24px;\n}\n\n.label_15a4f7b10a {\n  left: 50%;\n  max-width: 64px;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translate(-50%, 0);\n  white-space: nowrap;\n}\n\n.label_15a4f7b10a.positionTop_f24f8a6166 {\n  bottom: calc(100% + 8px);\n}\n\n.label_15a4f7b10a.positionBottom_d282471013 {\n  top: calc(100% + 8px);\n}\n\n.label_15a4f7b10a.colorPrimary_5bd78f4f4d {\n  color: var(--primary-text-color);\n}\n\n.label_15a4f7b10a.colorSecondary_2b440d6e36 {\n  color: var(--secondary-text-color);\n}");export{o as default};
+var o={thumb:"thumb_4bdcb13e8d",dragging:"dragging_3ee14f5fd1",focused:"focused_eef293f270",notDisabledThumb:"notDisabledThumb_6c3c07aa84","focus-visible":"focus-visible_08eca23944",positive:"positive_16a59201b8",negative:"negative_b35016963e",small:"small_0fd65786bf",medium:"medium_6d1154644b",large:"large_32b990212d",label:"label_a219c5cc1c",positionTop:"positionTop_a78b398956",positionBottom:"positionBottom_b4f65770b4",colorPrimary:"colorPrimary_36d61a6cf0",colorSecondary:"colorSecondary_fce7354ce2"};!function(o){const n="s_id-9ef20defa923_3_70_2";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".thumb_4bdcb13e8d {\n  position: absolute;\n  border: 3px solid;\n  border-radius: 50%;\n  border-color: var(--primary-color);\n  background-color: var(--primary-background-color);\n  font-size: 14px;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  font-family: var(--font-family);\n}\n\n.dragging_3ee14f5fd1 {\n  cursor: grabbing !important;\n  transform: translate(-50%, -50%) scale(1.15, 1.15);\n  transform-origin: center center;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  box-shadow: var(--box-shadow-small);\n}\n\n.focused_eef293f270 {\n  border-color: var(--primary-hover-color);\n  cursor: grab;\n  box-shadow: var(--box-shadow-small);\n}\n\n.notDisabledThumb_6c3c07aa84:focus-visible, .notDisabledThumb_6c3c07aa84.focus-visible_08eca23944 {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.notDisabledThumb_6c3c07aa84:focus:not(.focus-visible_08eca23944) {\n  outline: none;\n}\n\n.notDisabledThumb_6c3c07aa84:hover {\n  border-color: var(--primary-hover-color);\n  cursor: grab;\n  box-shadow: var(--box-shadow-small);\n}\n\n.positive_16a59201b8 {\n  border-color: var(--positive-color);\n}\n\n.positive_16a59201b8.notDisabledThumb_6c3c07aa84:hover {\n  border-color: var(--positive-color-hover);\n}\n\n.negative_b35016963e {\n  border-color: var(--negative-color);\n}\n\n.negative_b35016963e.notDisabledThumb_6c3c07aa84:hover {\n  border-color: var(--negative-color-hover);\n}\n\n.small_0fd65786bf {\n  height: 16px;\n  width: 16px;\n}\n\n.medium_6d1154644b {\n  height: 20px;\n  width: 20px;\n}\n\n.large_32b990212d {\n  height: 24px;\n  width: 24px;\n}\n\n.label_a219c5cc1c {\n  left: 50%;\n  max-width: 64px;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translate(-50%, 0);\n  white-space: nowrap;\n}\n\n.label_a219c5cc1c.positionTop_a78b398956 {\n  bottom: calc(100% + 8px);\n}\n\n.label_a219c5cc1c.positionBottom_b4f65770b4 {\n  top: calc(100% + 8px);\n}\n\n.label_a219c5cc1c.colorPrimary_36d61a6cf0 {\n  color: var(--primary-text-color);\n}\n\n.label_a219c5cc1c.colorSecondary_fce7354ce2 {\n  color: var(--secondary-text-color);\n}");export{o as default};
 //# sourceMappingURL=SliderThumb.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={track:"track_b06489ee63",positive:"positive_73bff39b6f",negative:"negative_8ccdcbe8b4"};!function(e){const t="s_id-f9216dea54b1_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".track_b06489ee63 {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-selected-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive_73bff39b6f {\n  background-color: var(--positive-color-selected);\n}\n\n.negative_8ccdcbe8b4 {\n  background-color: var(--negative-color-selected);\n}");export{e as default};
+var e={track:"track_97e9c6a508",positive:"positive_d7130047ce",negative:"negative_c0f4321df2"};!function(e){const t="s_id-f9216dea54b1_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".track_97e9c6a508 {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-selected-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive_d7130047ce {\n  background-color: var(--positive-color-selected);\n}\n\n.negative_c0f4321df2 {\n  background-color: var(--negative-color-selected);\n}");export{e as default};
 //# sourceMappingURL=SliderTrack.module.scss.js.map