npm - @vibe/button - Versions diffs - 3.0.12 → 3.0.13 - Mend

@vibe/button 3.0.12 → 3.0.13

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

package/dist/Button/Button.js +1 -1
package/dist/Button/Button.js.map +1 -1
package/dist/Button/Button.module.scss.js +1 -1
package/dist/mocked_classnames/Button/Button.js +1 -1
package/dist/mocked_classnames/Button/Button.js.map +1 -1
package/dist/mocked_classnames/Button/Button.module.scss.js +1 -1
package/package.json +2 -2

package/dist/Button/Button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as a,useRef as t,useEffect as n,useCallback as r,useMemo as o}from"react";import{camelCase as i}from"es-toolkit";import s from"classnames";import{useMergeRef as l,getStyle as c,getTestId as d,ComponentDefaultTestId as m,ComponentVibeId as u,NOOP as p,withStaticProps as f,SIZES as b}from"@vibe/shared";import{Icon as y}from"@vibe/icon";import{Loader as g}from"@vibe/loader";import{ButtonColor as h,ButtonType as v,ButtonInputType as N}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as x,TRANSPARENT_COLOR as E}from"./helper/dom-helpers.js";import C from"./Button.module.scss.js";import{useButtonLoading as F}from"./helper/useButtonLoading.js";var k=f(a((({className:a,children:f,kind:b="primary",onClick:h=p,name:v,size:N="medium",color:k="primary",disabled:B=!1,rightIcon:S=null,leftIcon:T=null,success:I=!1,successText:j="",successIcon:O=null,style:z,loading:L=!1,loaderClassName:P,active:D=!1,activeButtonClassName:M,id:U,marginRight:w=!1,marginLeft:A=!1,type:R="button",onMouseDown:H=p,ariaLabel:q,rightFlat:G=!1,leftFlat:J=!1,preventClickAnimation:K=!1,noSidePadding:Q=!1,onFocus:V=p,onBlur:W=p,ariaLabeledBy:X,defaultTextColorOnPrimaryColor:Y=E,ariaHasPopup:Z,ariaExpanded:$,ariaControls:_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te,blurOnMouseUp:ne=!0,"data-testid":re,insetFocus:oe=!1,tabIndex:ie},se)=>{const le=t(null),ce=l(se,le),{loading:de}=F({isLoading:L});n((()=>{if("on-primary-color"!==k&&"fixed-light"!==k)return;if("primary"!==b)return;if(!le.current)return;const e=le.current;e.style.color=x(e,Y)}),[b,le,k,Y]);const me=r((()=>{const e=le.current;!B&&e&&ne&&e.blur()}),[B,le,ne]),ue=r((e=>{B||de||I?e.preventDefault():h&&h(e)}),[h,B,de,I]),pe=r((e=>{B||de||I?e.preventDefault():H&&H(e)}),[H,B,de,I]),fe=o((()=>{const e=I?"positive":k;return s(a,C.button,c(C,i("size-"+N)),c(C,i("kind-"+b)),c(C,i("color-"+e)),{[C.success]:I,[c(C,i("color-"+e+"-active"))]:D,[M]:D,[C.marginRight]:w,[C.marginLeft]:A,[C.rightFlat]:G,[C.leftFlat]:J,[C.preventClickAnimation]:K,[C.noSidePadding]:Q,[C.disabled]:B,[C.insetFocusStyle]:oe})}),[I,k,a,N,b,D,M,w,A,G,J,K,Q,B,oe]),be=o((()=>({ref:ce,type:R,className:fe,name:v,onMouseUp:me,style:z,onClick:ue,id:U,onFocus:V,onBlur:W,tabIndex:B||ae?-1:ie,"data-testid":re||d(m.BUTTON,U),"data-vibe":u.BUTTON,onMouseDown:pe,"aria-disabled":B,"aria-busy":de,"aria-labelledby":X,"aria-label":q,"aria-haspopup":Z,"aria-expanded":$,"aria-controls":_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te})),[ce,R,fe,v,me,z,ue,U,V,W,ie,re,pe,B,de,X,q,Z,$,_,ee,ae,te]),ye=r((e=>{if("function"==typeof e)switch(N){case"xxs":case"xs":return 16;default:return 20}}),[N]),ge=o((()=>e.Children.toArray(f).some(Boolean)),[f]),he=o((()=>e.createElement(e.Fragment,null,T?e.createElement(y,{iconType:"font",icon:T,iconSize:ye(T),className:s({[C.leftIcon]:ge}),ignoreFocusStyle:!0}):null,f,S?e.createElement(y,{iconType:"font",icon:S,iconSize:ye(S),className:s({[C.rightIcon]:ge}),ignoreFocusStyle:!0}):null)),[f,ge,ye,T,S]);return de?e.createElement("button",Object.assign({},be,{key:U+"-loading"}),e.createElement("span",{className:s(C.loader,P)},e.createElement(g,{className:C.loaderSvg}),e.createElement("span",{"aria-hidden":!0,className:C.textPlaceholder},he))):I?e.createElement("button",Object.assign({},be,{key:U+"-success"}),e.createElement("span",{className:C.successContent},O?e.createElement(y,{iconType:"font",icon:O,iconSize:ye(O),className:s({[C.leftIcon]:!!j}),ignoreFocusStyle:!0}):null,j),e.createElement("span",{"aria-hidden":"true",className:C.textPlaceholder},he)):e.createElement("button",Object.assign({},be,{key:U+"-button"}),he)})),{sizes:b,colors:h,kinds:v,types:N,inputTags:N});export{k as default};
+import e,{forwardRef as a,useRef as t,useEffect as n,useCallback as r,useMemo as o}from"react";import{camelCase as i}from"es-toolkit";import s from"classnames";import{useMergeRef as l,getStyle as c,getTestId as d,ComponentDefaultTestId as m,ComponentVibeId as u,NOOP as p,withStaticProps as f,SIZES as b}from"@vibe/shared";import{Icon as y}from"@vibe/icon";import{Loader as g}from"@vibe/loader";import{ButtonColor as h,ButtonType as v,ButtonInputType as N}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as x,TRANSPARENT_COLOR as E}from"./helper/dom-helpers.js";import C from"./Button.module.scss.js";import{useButtonLoading as F}from"./helper/useButtonLoading.js";var k=f(a((({className:a,children:f,kind:b="primary",onClick:h=p,name:v,size:N="medium",color:k="primary",disabled:B=!1,rightIcon:S=null,leftIcon:T=null,success:I=!1,successText:j="",successIcon:O=null,style:z,loading:L=!1,loaderClassName:P,active:D=!1,activeButtonClassName:M,id:U,marginRight:w=!1,marginLeft:A=!1,type:R="button",onMouseDown:H=p,ariaLabel:q,rightFlat:G=!1,leftFlat:J=!1,preventClickAnimation:K=!1,noSidePadding:Q=!1,onFocus:V=p,onBlur:W=p,ariaLabeledBy:X,defaultTextColorOnPrimaryColor:Y=E,ariaHasPopup:Z,ariaExpanded:$,ariaControls:_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te,blurOnMouseUp:ne=!0,"data-testid":re,insetFocus:oe=!1,tabIndex:ie},se)=>{const le=t(null),ce=l(se,le),{loading:de}=F({isLoading:L});n((()=>{if("on-primary-color"!==k&&"fixed-light"!==k)return;if("primary"!==b)return;if(!le.current)return;const e=le.current;e.style.color=x(e,Y)}),[b,le,k,Y]);const me=r((()=>{const e=le.current;!B&&e&&ne&&e.blur()}),[B,le,ne]),ue=r((e=>{B||de||I?e.preventDefault():h&&h(e)}),[h,B,de,I]),pe=r((e=>{B||de||I?e.preventDefault():H&&H(e)}),[H,B,de,I]),fe=o((()=>{const e=I?"positive":k;return s(a,C.button,c(C,i("size-"+N)),c(C,i("kind-"+b)),c(C,i("color-"+e)),{[C.success]:I,[c(C,i("color-"+e+"-active"))]:D,[M]:D,[C.marginRight]:w,[C.marginLeft]:A,[C.rightFlat]:G,[C.leftFlat]:J,[C.preventClickAnimation]:K,[C.noSidePadding]:Q,[C.disabled]:B,[C.insetFocusStyle]:oe})}),[I,k,a,N,b,D,M,w,A,G,J,K,Q,B,oe]),be=o((()=>({ref:ce,type:R,className:fe,name:v,onMouseUp:me,style:z,onClick:ue,id:U,onFocus:V,onBlur:W,tabIndex:null!=ie?ie:B||ae?-1:void 0,"data-testid":re||d(m.BUTTON,U),"data-vibe":u.BUTTON,onMouseDown:pe,"aria-disabled":B,"aria-busy":de,"aria-labelledby":X,"aria-label":q,"aria-haspopup":Z,"aria-expanded":$,"aria-controls":_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te})),[ce,R,fe,v,me,z,ue,U,V,W,ie,re,pe,B,de,X,q,Z,$,_,ee,ae,te]),ye=r((e=>{if("function"==typeof e)switch(N){case"xxs":case"xs":return 16;default:return 20}}),[N]),ge=o((()=>e.Children.toArray(f).some(Boolean)),[f]),he=o((()=>e.createElement(e.Fragment,null,T?e.createElement(y,{iconType:"font",icon:T,iconSize:ye(T),className:s({[C.leftIcon]:ge}),ignoreFocusStyle:!0}):null,f,S?e.createElement(y,{iconType:"font",icon:S,iconSize:ye(S),className:s({[C.rightIcon]:ge}),ignoreFocusStyle:!0}):null)),[f,ge,ye,T,S]);return de?e.createElement("button",Object.assign({},be,{key:U+"-loading"}),e.createElement("span",{className:s(C.loader,P)},e.createElement(g,{className:C.loaderSvg}),e.createElement("span",{"aria-hidden":!0,className:C.textPlaceholder},he))):I?e.createElement("button",Object.assign({},be,{key:U+"-success"}),e.createElement("span",{className:C.successContent},O?e.createElement(y,{iconType:"font",icon:O,iconSize:ye(O),className:s({[C.leftIcon]:!!j}),ignoreFocusStyle:!0}):null,j),e.createElement("span",{"aria-hidden":"true",className:C.textPlaceholder},he)):e.createElement("button",Object.assign({},be,{key:U+"-button"}),he)})),{sizes:b,colors:h,kinds:v,types:N,inputTags:N});export{k as default};
 //# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type /\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SIZES, useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport {\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum\n} from \"./ButtonConstants\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport {\n getTestId,\n type VibeComponentProps,\n withStaticProps,\n ComponentDefaultTestId,\n ComponentVibeId\n} from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /* Custom class names to pass to the component /\n className?: string;\n activeButtonClassName?: string;\n /* The button's kind /\n kind?: ButtonType;\n /* Callback function to run when the button is clicked /\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /* Blur on button click /\n blurOnMouseUp?: boolean;\n /* Name of the button - for form submit usages /\n name?: string;\n /* The button's size /\n size?: ButtonSize;\n /* The button's color /\n color?: ButtonColor;\n /* The button's type /\n type?: ButtonInputType;\n /* Whether the button should be disabled or not /\n disabled?: boolean;\n /* Icon to place on the right /\n rightIcon?: SubIcon;\n /* Icon to place on the left /\n leftIcon?: SubIcon;\n /* the success props are used when you have async action and wants to display a success message /\n success?: boolean;\n /* Success icon name /\n successIcon?: SubIcon;\n /* Success text /\n successText?: string;\n /* loading boolean which switches the text to a loader /\n loading?: boolean;\n /* className which is applied to loader container /\n loaderClassName?: string;\n style?: React.CSSProperties;\n / displays the active state /\n active?: boolean;\n /* id to pass to the button /\n id?: string;\n /* adds 8px margin to the right /\n marginRight?: boolean;\n /* adds 8px margin to the left /\n marginLeft?: boolean;\n /* element id to describe the button accordingly /\n ariaLabeledBy?: string;\n /* aria label to provide important when providing only Icon /\n ariaLabel?: string;\n /* aria for a button popup /\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /* aria to be set if the popup is open /\n ariaExpanded?: boolean;\n /* aria controls - receives id for the controlled region /\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /\n aria to be used for screen reader to know if the button is hidden\n /\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /\n Indicates the current \"pressed\" state of toggle buttons\n /\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /* On Button Focus callback /\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /* On Button Blur callback /\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /* default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) /\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /* Change the focus indicator from around the button to within it /\n insetFocus?: boolean;\n /* Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled \|\| !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: disabled \|\| ariaHidden ? -1 : tabIndex,\n \"data-testid\": dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n default:\n return 20;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type /\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SIZES, useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport {\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum\n} from \"./ButtonConstants\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport {\n getTestId,\n type VibeComponentProps,\n withStaticProps,\n ComponentDefaultTestId,\n ComponentVibeId\n} from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /* Custom class names to pass to the component /\n className?: string;\n activeButtonClassName?: string;\n /* The button's kind /\n kind?: ButtonType;\n /* Callback function to run when the button is clicked /\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /* Blur on button click /\n blurOnMouseUp?: boolean;\n /* Name of the button - for form submit usages /\n name?: string;\n /* The button's size /\n size?: ButtonSize;\n /* The button's color /\n color?: ButtonColor;\n /* The button's type /\n type?: ButtonInputType;\n /* Whether the button should be disabled or not /\n disabled?: boolean;\n /* Icon to place on the right /\n rightIcon?: SubIcon;\n /* Icon to place on the left /\n leftIcon?: SubIcon;\n /* the success props are used when you have async action and wants to display a success message /\n success?: boolean;\n /* Success icon name /\n successIcon?: SubIcon;\n /* Success text /\n successText?: string;\n /* loading boolean which switches the text to a loader /\n loading?: boolean;\n /* className which is applied to loader container /\n loaderClassName?: string;\n style?: React.CSSProperties;\n / displays the active state /\n active?: boolean;\n /* id to pass to the button /\n id?: string;\n /* adds 8px margin to the right /\n marginRight?: boolean;\n /* adds 8px margin to the left /\n marginLeft?: boolean;\n /* element id to describe the button accordingly /\n ariaLabeledBy?: string;\n /* aria label to provide important when providing only Icon /\n ariaLabel?: string;\n /* aria for a button popup /\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /* aria to be set if the popup is open /\n ariaExpanded?: boolean;\n /* aria controls - receives id for the controlled region /\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /\n aria to be used for screen reader to know if the button is hidden\n /\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /\n Indicates the current \"pressed\" state of toggle buttons\n /\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /* On Button Focus callback /\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /* On Button Blur callback /\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /* default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) /\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /* Change the focus indicator from around the button to within it /\n insetFocus?: boolean;\n /* Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled \|\| !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: tabIndex ?? (disabled \|\| ariaHidden ? -1 : undefined),\n \"data-testid\": dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n default:\n return 20;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}

package/dist/Button/Button.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var o={button:"button_408fd77d5f","focus-visible":"focus-visible_4c1f10522c",loader:"loader_1517362383",loaderSvg:"loaderSvg_49476ead71",textPlaceholder:"textPlaceholder_a10a61ac82",success:"success_7569b828fc",successContent:"successContent_5c05d66190",marginRight:"marginRight_f6a29d8a7e",marginLeft:"marginLeft_67655626fa",rightFlat:"rightFlat_10b964a994",leftFlat:"leftFlat_8d72a7efa1",preventClickAnimation:"preventClickAnimation_cb88118ec3",leftIcon:"leftIcon_f6a29d8a7e",rightIcon:"rightIcon_67655626fa",sizeXxs:"sizeXxs_caa2d7ad48",sizeXs:"sizeXs_8ee80caf76",sizeSmall:"sizeSmall_72ff2684a2",sizeMedium:"sizeMedium_eee5e6e2cf",sizeLarge:"sizeLarge_3cefa9e1c8",kindPrimary:"kindPrimary_176f3403d5",colorPrimary:"colorPrimary_f2243b999f",colorBrand:"colorBrand_e19c613f8a",colorPrimaryActive:"colorPrimaryActive_c43b748b11",colorBrandActive:"colorBrandActive_8f35bdbc6b",colorPositive:"colorPositive_57c59ac56a",colorPositiveActive:"colorPositiveActive_ac289df86f",colorNegative:"colorNegative_ea9eefafd1",colorNegativeActive:"colorNegativeActive_ac289df86f",colorInverted:"colorInverted_0059b45874",colorInvertedActive:"colorInvertedActive_ac289df86f",disabled:"disabled_2b5246ddb7",colorOnPrimaryColor:"colorOnPrimaryColor_c20695b68d",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_613372993e",colorFixedLight:"colorFixedLight_7b48c5783d",colorFixedLightActive:"colorFixedLightActive_cb88118ec3",colorFixedDark:"colorFixedDark_8e79930891",colorFixedDarkActive:"colorFixedDarkActive_955bd1500a",colorOnInvertedBackground:"colorOnInvertedBackground_58777c0101",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_7c148d0da0",kindSecondary:"kindSecondary_a100ddb63f",kindTertiary:"kindTertiary_036feb2c2d",noSidePadding:"noSidePadding_42c71c9ebc",insetFocusStyle:"insetFocusStyle_a955adf08c"};!function(o){const r="s_id-95d3f630f6d9_3_0_11";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button_408fd77d5f {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button_408fd77d5f:focus-visible, .button_408fd77d5f.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_408fd77d5f:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.button_408fd77d5f .loader_1517362383 {\n  height: 100%;\n}\n.button_408fd77d5f .loader_1517362383 .loaderSvg_49476ead71 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_408fd77d5f .textPlaceholder_a10a61ac82 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_408fd77d5f.success_7569b828fc {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_408fd77d5f.success_7569b828fc .successContent_5c05d66190 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_f6a29d8a7e {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_67655626fa {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_10b964a994 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_8d72a7efa1 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_408fd77d5f:active:not(.preventClickAnimation_cb88118ec3) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_408fd77d5f .leftIcon_f6a29d8a7e {\n  margin-right: var(--spacing-small);\n}\n.button_408fd77d5f .rightIcon_67655626fa {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_caa2d7ad48 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--spacing-xs);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs_8ee80caf76 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall_72ff2684a2 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall_72ff2684a2 .loader_1517362383 {\n  top: 7px;\n}\n.sizeMedium_eee5e6e2cf {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--spacing-small) var(--spacing-medium);\n  height: 40px;\n}\n.sizeLarge_3cefa9e1c8 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--spacing-large);\n  height: 48px;\n}\n.kindPrimary_176f3403d5 {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_176f3403d5.colorPrimary_f2243b999f {\n  background: var(--primary-color);\n}\n.kindPrimary_176f3403d5.colorBrand_e19c613f8a {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_176f3403d5.colorPrimaryActive_c43b748b11,\n.kindPrimary_176f3403d5.colorPrimary_f2243b999f:hover,\n.kindPrimary_176f3403d5.colorPrimary_f2243b999f:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_176f3403d5.colorBrandActive_8f35bdbc6b,\n.kindPrimary_176f3403d5.colorBrand_e19c613f8a:hover,\n.kindPrimary_176f3403d5.colorBrand_e19c613f8a:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_176f3403d5.colorPositive_57c59ac56a {\n  background: var(--positive-color);\n}\n.kindPrimary_176f3403d5.colorPositiveActive_ac289df86f,\n.kindPrimary_176f3403d5.colorPositive_57c59ac56a:hover,\n.kindPrimary_176f3403d5.colorPositive_57c59ac56a:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_176f3403d5.colorNegative_ea9eefafd1 {\n  background: var(--negative-color);\n}\n.kindPrimary_176f3403d5.colorNegativeActive_ac289df86f,\n.kindPrimary_176f3403d5.colorNegative_ea9eefafd1:hover,\n.kindPrimary_176f3403d5.colorNegative_ea9eefafd1:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_176f3403d5.colorInverted_0059b45874 {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_176f3403d5.colorInvertedActive_ac289df86f,\n.kindPrimary_176f3403d5.colorInverted_0059b45874:hover,\n.kindPrimary_176f3403d5.colorInverted_0059b45874:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_176f3403d5.button_408fd77d5f.colorInverted_0059b45874.disabled_2b5246ddb7 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_176f3403d5.colorOnPrimaryColorActive_613372993e,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:hover,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_176f3403d5.colorOnPrimaryColorActive_613372993e:focus-visible, .kindPrimary_176f3403d5.colorOnPrimaryColorActive_613372993e.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:hover:focus-visible,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:hover.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:focus:focus-visible,\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_176f3403d5.colorOnPrimaryColorActive_613372993e:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindPrimary_176f3403d5.colorOnPrimaryColor_c20695b68d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_176f3403d5.colorFixedLightActive_cb88118ec3,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:hover,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_176f3403d5.colorFixedLightActive_cb88118ec3:focus-visible, .kindPrimary_176f3403d5.colorFixedLightActive_cb88118ec3.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:hover:focus-visible,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:hover.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:focus:focus-visible,\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_176f3403d5.colorFixedLightActive_cb88118ec3:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindPrimary_176f3403d5.colorFixedLight_7b48c5783d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_176f3403d5.colorFixedDarkActive_955bd1500a,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:hover,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_176f3403d5.colorFixedDarkActive_955bd1500a:focus-visible, .kindPrimary_176f3403d5.colorFixedDarkActive_955bd1500a.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:hover:focus-visible,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:hover.focus-visible_4c1f10522c,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:focus:focus-visible,\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_176f3403d5.colorFixedDarkActive_955bd1500a:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:hover:focus:not(.focus-visible_4c1f10522c),\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindPrimary_176f3403d5.colorFixedDark_8e79930891.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_176f3403d5.colorOnInvertedBackground_58777c0101 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_176f3403d5.colorOnInvertedBackgroundActive_7c148d0da0,\n.kindPrimary_176f3403d5.colorOnInvertedBackground_58777c0101:hover,\n.kindPrimary_176f3403d5.colorOnInvertedBackground_58777c0101:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_176f3403d5.button_408fd77d5f.colorOnInvertedBackground_58777c0101.disabled_2b5246ddb7 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_176f3403d5.button_408fd77d5f.disabled_2b5246ddb7 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_a100ddb63f {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_a100ddb63f.sizeSmall_72ff2684a2 {\n  line-height: 22px;\n}\n.kindSecondary_a100ddb63f.sizeMedium_eee5e6e2cf {\n  line-height: 22px;\n}\n.kindSecondary_a100ddb63f.sizeLarge_3cefa9e1c8 {\n  line-height: 22px;\n}\n.kindSecondary_a100ddb63f.colorPrimaryActive_c43b748b11 {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_a100ddb63f.colorPrimaryActive_c43b748b11:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_a100ddb63f.colorBrandActive_8f35bdbc6b {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_a100ddb63f.colorBrandActive_8f35bdbc6b,\n.kindSecondary_a100ddb63f.colorBrandActive_8f35bdbc6b:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_a100ddb63f.colorPrimary_f2243b999f:hover:not(.colorPrimaryActive_c43b748b11),\n.kindSecondary_a100ddb63f.colorPrimary_f2243b999f:focus:not(.colorPrimaryActive_c43b748b11) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a100ddb63f.colorBrand_e19c613f8a:hover:not(.colorBrandActive_8f35bdbc6b),\n.kindSecondary_a100ddb63f.colorBrand_e19c613f8a:focus:not(.colorBrandActive_8f35bdbc6b) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a100ddb63f.colorPositive_57c59ac56a {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_a100ddb63f.colorPositiveActive_ac289df86f,\n.kindSecondary_a100ddb63f.colorPositive_57c59ac56a:hover,\n.kindSecondary_a100ddb63f.colorPositive_57c59ac56a:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_a100ddb63f.colorNegative_ea9eefafd1 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_a100ddb63f.colorNegativeActive_ac289df86f,\n.kindSecondary_a100ddb63f.colorNegative_ea9eefafd1:hover,\n.kindSecondary_a100ddb63f.colorNegative_ea9eefafd1:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_a100ddb63f.colorInverted_0059b45874 {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_a100ddb63f.colorInvertedActive_ac289df86f,\n.kindSecondary_a100ddb63f.colorInverted_0059b45874:hover,\n.kindSecondary_a100ddb63f.colorInverted_0059b45874:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_a100ddb63f.colorInverted_0059b45874.disabled_2b5246ddb7 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_a100ddb63f.colorOnPrimaryColorActive_613372993e,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:hover,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_a100ddb63f.colorOnPrimaryColorActive_613372993e:focus-visible, .kindSecondary_a100ddb63f.colorOnPrimaryColorActive_613372993e.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:hover:focus-visible,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:hover.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:focus:focus-visible,\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_a100ddb63f.colorOnPrimaryColorActive_613372993e:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindSecondary_a100ddb63f.colorOnPrimaryColor_c20695b68d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_a100ddb63f.colorFixedLightActive_cb88118ec3,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:hover,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_a100ddb63f.colorFixedLightActive_cb88118ec3:focus-visible, .kindSecondary_a100ddb63f.colorFixedLightActive_cb88118ec3.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:hover:focus-visible,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:hover.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:focus:focus-visible,\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_a100ddb63f.colorFixedLightActive_cb88118ec3:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_a100ddb63f.colorFixedDarkActive_955bd1500a,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:hover,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_a100ddb63f.colorFixedDarkActive_955bd1500a:focus-visible, .kindSecondary_a100ddb63f.colorFixedDarkActive_955bd1500a.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:hover:focus-visible,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:hover.focus-visible_4c1f10522c,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:focus:focus-visible,\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_a100ddb63f.colorFixedDarkActive_955bd1500a:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:hover:focus:not(.focus-visible_4c1f10522c),\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindSecondary_a100ddb63f.colorOnInvertedBackground_58777c0101 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_a100ddb63f.colorOnInvertedBackgroundActive_7c148d0da0,\n.kindSecondary_a100ddb63f.colorOnInvertedBackground_58777c0101:hover,\n.kindSecondary_a100ddb63f.colorOnInvertedBackground_58777c0101:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_a100ddb63f.colorOnInvertedBackground_58777c0101.disabled_2b5246ddb7 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_a100ddb63f.colorFixedLight_7b48c5783d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_a100ddb63f.colorFixedDark_8e79930891.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_a100ddb63f.disabled_2b5246ddb7 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_a100ddb63f.disabled_2b5246ddb7:hover {\n  background-color: transparent;\n}\n.kindTertiary_036feb2c2d {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_036feb2c2d.colorPrimaryActive_c43b748b11 {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_036feb2c2d.colorPrimaryActive_c43b748b11:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_036feb2c2d.colorBrandActive_8f35bdbc6b {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_036feb2c2d.colorBrandActive_8f35bdbc6b,\n.kindTertiary_036feb2c2d.colorBrandActive_8f35bdbc6b:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_036feb2c2d.colorPrimary_f2243b999f:hover:not(.colorPrimaryActive_c43b748b11),\n.kindTertiary_036feb2c2d.colorPrimary_f2243b999f:focus:not(.colorPrimaryActive_c43b748b11) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_036feb2c2d.colorBrand_e19c613f8a:hover:not(.colorBrandActive_8f35bdbc6b),\n.kindTertiary_036feb2c2d.colorBrand_e19c613f8a:focus:not(.colorBrandActive_8f35bdbc6b) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_036feb2c2d.colorPositive_57c59ac56a {\n  color: var(--positive-color);\n}\n.kindTertiary_036feb2c2d.colorPositiveActive_ac289df86f,\n.kindTertiary_036feb2c2d.colorPositive_57c59ac56a:hover,\n.kindTertiary_036feb2c2d.colorPositive_57c59ac56a:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_036feb2c2d.colorNegative_ea9eefafd1 {\n  color: var(--negative-color);\n}\n.kindTertiary_036feb2c2d.colorNegativeActive_ac289df86f,\n.kindTertiary_036feb2c2d.colorNegative_ea9eefafd1:hover,\n.kindTertiary_036feb2c2d.colorNegative_ea9eefafd1:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_036feb2c2d.colorInverted_0059b45874 {\n  color: var(--primary-text-color);\n}\n.kindTertiary_036feb2c2d.colorInvertedActive_ac289df86f,\n.kindTertiary_036feb2c2d.colorInverted_0059b45874:hover,\n.kindTertiary_036feb2c2d.colorInverted_0059b45874:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_036feb2c2d.colorInverted_0059b45874.disabled_2b5246ddb7 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_036feb2c2d.colorOnPrimaryColorActive_613372993e,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:hover,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_036feb2c2d.colorOnPrimaryColorActive_613372993e:focus-visible, .kindTertiary_036feb2c2d.colorOnPrimaryColorActive_613372993e.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:hover:focus-visible,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:hover.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:focus:focus-visible,\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_036feb2c2d.colorOnPrimaryColorActive_613372993e:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindTertiary_036feb2c2d.colorOnPrimaryColor_c20695b68d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_036feb2c2d.colorFixedLightActive_cb88118ec3,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:hover,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_036feb2c2d.colorFixedLightActive_cb88118ec3:focus-visible, .kindTertiary_036feb2c2d.colorFixedLightActive_cb88118ec3.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:hover:focus-visible,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:hover.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:focus:focus-visible,\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_036feb2c2d.colorFixedLightActive_cb88118ec3:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:hover:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindTertiary_036feb2c2d.colorFixedLight_7b48c5783d.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_036feb2c2d.colorFixedDarkActive_955bd1500a,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:hover,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_036feb2c2d.colorFixedDarkActive_955bd1500a:focus-visible, .kindTertiary_036feb2c2d.colorFixedDarkActive_955bd1500a.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:hover:focus-visible,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:hover.focus-visible_4c1f10522c,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:focus:focus-visible,\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:focus.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_036feb2c2d.colorFixedDarkActive_955bd1500a:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:hover:focus:not(.focus-visible_4c1f10522c),\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891:focus:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}\n.kindTertiary_036feb2c2d.colorFixedDark_8e79930891.disabled_2b5246ddb7 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_036feb2c2d.colorOnInvertedBackground_58777c0101 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_036feb2c2d.colorOnInvertedBackgroundActive_7c148d0da0,\n.kindTertiary_036feb2c2d.colorOnInvertedBackground_58777c0101:hover,\n.kindTertiary_036feb2c2d.colorOnInvertedBackground_58777c0101:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_036feb2c2d.colorOnInvertedBackground_58777c0101.disabled_2b5246ddb7 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_036feb2c2d.disabled_2b5246ddb7 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_036feb2c2d.disabled_2b5246ddb7:hover {\n  background-color: transparent;\n}\n.noSidePadding_42c71c9ebc {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_408fd77d5f.insetFocusStyle_a955adf08c:focus-visible, .button_408fd77d5f.insetFocusStyle_a955adf08c.focus-visible_4c1f10522c {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_408fd77d5f.insetFocusStyle_a955adf08c:focus:not(.focus-visible_4c1f10522c) {\n  outline: none;\n}");export{o as default};
+var o={button:"button_f410a4fdb7","focus-visible":"focus-visible_0fc2b54dbb",loader:"loader_d978ea3af1",loaderSvg:"loaderSvg_98c8552245",textPlaceholder:"textPlaceholder_9f460efa73",success:"success_30a37a7981",successContent:"successContent_27cbfca91f",marginRight:"marginRight_d29d5b602e",marginLeft:"marginLeft_13f96fe358",rightFlat:"rightFlat_8f98976339",leftFlat:"leftFlat_43362ff534",preventClickAnimation:"preventClickAnimation_b8080ef048",leftIcon:"leftIcon_d29d5b602e",rightIcon:"rightIcon_13f96fe358",sizeXxs:"sizeXxs_ce5c204073",sizeXs:"sizeXs_d995e5ef4e",sizeSmall:"sizeSmall_09d742acd9",sizeMedium:"sizeMedium_ff0c2f76ad",sizeLarge:"sizeLarge_f6f63ab3fe",kindPrimary:"kindPrimary_7823778f6a",colorPrimary:"colorPrimary_c79bf2e06d",colorBrand:"colorBrand_b25987de43",colorPrimaryActive:"colorPrimaryActive_56bd1ae0ca",colorBrandActive:"colorBrandActive_9ec4e7ffb1",colorPositive:"colorPositive_1545bee9b1",colorPositiveActive:"colorPositiveActive_aaf5217dd0",colorNegative:"colorNegative_e8ab6e1c85",colorNegativeActive:"colorNegativeActive_aaf5217dd0",colorInverted:"colorInverted_045ae19378",colorInvertedActive:"colorInvertedActive_aaf5217dd0",disabled:"disabled_b04beda9b4",colorOnPrimaryColor:"colorOnPrimaryColor_a7b2c68d24",colorOnPrimaryColorActive:"colorOnPrimaryColorActive_dba5af57d1",colorFixedLight:"colorFixedLight_cc4c81eb2e",colorFixedLightActive:"colorFixedLightActive_b8080ef048",colorFixedDark:"colorFixedDark_d06d560695",colorFixedDarkActive:"colorFixedDarkActive_d97751d71b",colorOnInvertedBackground:"colorOnInvertedBackground_1f1d8f6ca0",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive_9483d7172f",kindSecondary:"kindSecondary_b2e5bb64aa",kindTertiary:"kindTertiary_b9d11adff6",noSidePadding:"noSidePadding_d93f15ce9d",insetFocusStyle:"insetFocusStyle_a81838b308"};!function(o){const r="s_id-95d3f630f6d9_3_0_12";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const e=document.createElement("style");e.id=r,n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button_f410a4fdb7 {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button_f410a4fdb7:focus-visible, .button_f410a4fdb7.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_f410a4fdb7:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.button_f410a4fdb7 .loader_d978ea3af1 {\n  height: 100%;\n}\n.button_f410a4fdb7 .loader_d978ea3af1 .loaderSvg_98c8552245 {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button_f410a4fdb7 .textPlaceholder_9f460efa73 {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button_f410a4fdb7.success_30a37a7981 {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button_f410a4fdb7.success_30a37a7981 .successContent_27cbfca91f {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight_d29d5b602e {\n  margin-right: var(--spacing-small);\n}\n.marginLeft_13f96fe358 {\n  margin-left: var(--spacing-small);\n}\n.rightFlat_8f98976339 {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat_43362ff534 {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button_f410a4fdb7:active:not(.preventClickAnimation_b8080ef048) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button_f410a4fdb7 .leftIcon_d29d5b602e {\n  margin-right: var(--spacing-small);\n}\n.button_f410a4fdb7 .rightIcon_13f96fe358 {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs_ce5c204073 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--spacing-xs);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs_d995e5ef4e {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall_09d742acd9 {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall_09d742acd9 .loader_d978ea3af1 {\n  top: 7px;\n}\n.sizeMedium_ff0c2f76ad {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--spacing-small) var(--spacing-medium);\n  height: 40px;\n}\n.sizeLarge_f6f63ab3fe {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--spacing-large);\n  height: 48px;\n}\n.kindPrimary_7823778f6a {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_7823778f6a.colorPrimary_c79bf2e06d {\n  background: var(--primary-color);\n}\n.kindPrimary_7823778f6a.colorBrand_b25987de43 {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary_7823778f6a.colorPrimaryActive_56bd1ae0ca,\n.kindPrimary_7823778f6a.colorPrimary_c79bf2e06d:hover,\n.kindPrimary_7823778f6a.colorPrimary_c79bf2e06d:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary_7823778f6a.colorBrandActive_9ec4e7ffb1,\n.kindPrimary_7823778f6a.colorBrand_b25987de43:hover,\n.kindPrimary_7823778f6a.colorBrand_b25987de43:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary_7823778f6a.colorPositive_1545bee9b1 {\n  background: var(--positive-color);\n}\n.kindPrimary_7823778f6a.colorPositiveActive_aaf5217dd0,\n.kindPrimary_7823778f6a.colorPositive_1545bee9b1:hover,\n.kindPrimary_7823778f6a.colorPositive_1545bee9b1:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary_7823778f6a.colorNegative_e8ab6e1c85 {\n  background: var(--negative-color);\n}\n.kindPrimary_7823778f6a.colorNegativeActive_aaf5217dd0,\n.kindPrimary_7823778f6a.colorNegative_e8ab6e1c85:hover,\n.kindPrimary_7823778f6a.colorNegative_e8ab6e1c85:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary_7823778f6a.colorInverted_045ae19378 {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary_7823778f6a.colorInvertedActive_aaf5217dd0,\n.kindPrimary_7823778f6a.colorInverted_045ae19378:hover,\n.kindPrimary_7823778f6a.colorInverted_045ae19378:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary_7823778f6a.button_f410a4fdb7.colorInverted_045ae19378.disabled_b04beda9b4 {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24 {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary_7823778f6a.colorOnPrimaryColorActive_dba5af57d1,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:hover,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_7823778f6a.colorOnPrimaryColorActive_dba5af57d1:focus-visible, .kindPrimary_7823778f6a.colorOnPrimaryColorActive_dba5af57d1.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:hover:focus-visible,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:hover.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:focus:focus-visible,\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_7823778f6a.colorOnPrimaryColorActive_dba5af57d1:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindPrimary_7823778f6a.colorOnPrimaryColor_a7b2c68d24.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e {\n  background: var(--fixed-light-color);\n}\n.kindPrimary_7823778f6a.colorFixedLightActive_b8080ef048,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:hover,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary_7823778f6a.colorFixedLightActive_b8080ef048:focus-visible, .kindPrimary_7823778f6a.colorFixedLightActive_b8080ef048.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:hover:focus-visible,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:hover.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:focus:focus-visible,\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_7823778f6a.colorFixedLightActive_b8080ef048:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindPrimary_7823778f6a.colorFixedLight_cc4c81eb2e.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695 {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary_7823778f6a.colorFixedDarkActive_d97751d71b,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:hover,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:focus {\n  filter: brightness(125%);\n}\n.kindPrimary_7823778f6a.colorFixedDarkActive_d97751d71b:focus-visible, .kindPrimary_7823778f6a.colorFixedDarkActive_d97751d71b.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:hover:focus-visible,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:hover.focus-visible_0fc2b54dbb,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:focus:focus-visible,\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary_7823778f6a.colorFixedDarkActive_d97751d71b:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindPrimary_7823778f6a.colorFixedDark_d06d560695.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary_7823778f6a.colorOnInvertedBackground_1f1d8f6ca0 {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary_7823778f6a.colorOnInvertedBackgroundActive_9483d7172f,\n.kindPrimary_7823778f6a.colorOnInvertedBackground_1f1d8f6ca0:hover,\n.kindPrimary_7823778f6a.colorOnInvertedBackground_1f1d8f6ca0:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary_7823778f6a.button_f410a4fdb7.colorOnInvertedBackground_1f1d8f6ca0.disabled_b04beda9b4 {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary_7823778f6a.button_f410a4fdb7.disabled_b04beda9b4 {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_b2e5bb64aa {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary_b2e5bb64aa.sizeSmall_09d742acd9 {\n  line-height: 22px;\n}\n.kindSecondary_b2e5bb64aa.sizeMedium_ff0c2f76ad {\n  line-height: 22px;\n}\n.kindSecondary_b2e5bb64aa.sizeLarge_f6f63ab3fe {\n  line-height: 22px;\n}\n.kindSecondary_b2e5bb64aa.colorPrimaryActive_56bd1ae0ca {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_b2e5bb64aa.colorPrimaryActive_56bd1ae0ca:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary_b2e5bb64aa.colorBrandActive_9ec4e7ffb1 {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary_b2e5bb64aa.colorBrandActive_9ec4e7ffb1,\n.kindSecondary_b2e5bb64aa.colorBrandActive_9ec4e7ffb1:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary_b2e5bb64aa.colorPrimary_c79bf2e06d:hover:not(.colorPrimaryActive_56bd1ae0ca),\n.kindSecondary_b2e5bb64aa.colorPrimary_c79bf2e06d:focus:not(.colorPrimaryActive_56bd1ae0ca) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_b2e5bb64aa.colorBrand_b25987de43:hover:not(.colorBrandActive_9ec4e7ffb1),\n.kindSecondary_b2e5bb64aa.colorBrand_b25987de43:focus:not(.colorBrandActive_9ec4e7ffb1) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_b2e5bb64aa.colorPositive_1545bee9b1 {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary_b2e5bb64aa.colorPositiveActive_aaf5217dd0,\n.kindSecondary_b2e5bb64aa.colorPositive_1545bee9b1:hover,\n.kindSecondary_b2e5bb64aa.colorPositive_1545bee9b1:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary_b2e5bb64aa.colorNegative_e8ab6e1c85 {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary_b2e5bb64aa.colorNegativeActive_aaf5217dd0,\n.kindSecondary_b2e5bb64aa.colorNegative_e8ab6e1c85:hover,\n.kindSecondary_b2e5bb64aa.colorNegative_e8ab6e1c85:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary_b2e5bb64aa.colorInverted_045ae19378 {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary_b2e5bb64aa.colorInvertedActive_aaf5217dd0,\n.kindSecondary_b2e5bb64aa.colorInverted_045ae19378:hover,\n.kindSecondary_b2e5bb64aa.colorInverted_045ae19378:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary_b2e5bb64aa.colorInverted_045ae19378.disabled_b04beda9b4 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24 {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColorActive_dba5af57d1,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:hover,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColorActive_dba5af57d1:focus-visible, .kindSecondary_b2e5bb64aa.colorOnPrimaryColorActive_dba5af57d1.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:hover:focus-visible,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:hover.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:focus:focus-visible,\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColorActive_dba5af57d1:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindSecondary_b2e5bb64aa.colorOnPrimaryColor_a7b2c68d24.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary_b2e5bb64aa.colorFixedLightActive_b8080ef048,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:hover,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary_b2e5bb64aa.colorFixedLightActive_b8080ef048:focus-visible, .kindSecondary_b2e5bb64aa.colorFixedLightActive_b8080ef048.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:hover:focus-visible,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:hover.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:focus:focus-visible,\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_b2e5bb64aa.colorFixedLightActive_b8080ef048:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695 {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_b2e5bb64aa.colorFixedDarkActive_d97751d71b,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:hover,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary_b2e5bb64aa.colorFixedDarkActive_d97751d71b:focus-visible, .kindSecondary_b2e5bb64aa.colorFixedDarkActive_d97751d71b.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:hover:focus-visible,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:hover.focus-visible_0fc2b54dbb,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:focus:focus-visible,\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary_b2e5bb64aa.colorFixedDarkActive_d97751d71b:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindSecondary_b2e5bb64aa.colorOnInvertedBackground_1f1d8f6ca0 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary_b2e5bb64aa.colorOnInvertedBackgroundActive_9483d7172f,\n.kindSecondary_b2e5bb64aa.colorOnInvertedBackground_1f1d8f6ca0:hover,\n.kindSecondary_b2e5bb64aa.colorOnInvertedBackground_1f1d8f6ca0:focus {\n  background: var(--icon-color);\n}\n.kindSecondary_b2e5bb64aa.colorOnInvertedBackground_1f1d8f6ca0.disabled_b04beda9b4 {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary_b2e5bb64aa.colorFixedLight_cc4c81eb2e.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary_b2e5bb64aa.colorFixedDark_d06d560695.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary_b2e5bb64aa.disabled_b04beda9b4 {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary_b2e5bb64aa.disabled_b04beda9b4:hover {\n  background-color: transparent;\n}\n.kindTertiary_b9d11adff6 {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary_b9d11adff6.colorPrimaryActive_56bd1ae0ca {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary_b9d11adff6.colorPrimaryActive_56bd1ae0ca:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary_b9d11adff6.colorBrandActive_9ec4e7ffb1 {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary_b9d11adff6.colorBrandActive_9ec4e7ffb1,\n.kindTertiary_b9d11adff6.colorBrandActive_9ec4e7ffb1:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary_b9d11adff6.colorPrimary_c79bf2e06d:hover:not(.colorPrimaryActive_56bd1ae0ca),\n.kindTertiary_b9d11adff6.colorPrimary_c79bf2e06d:focus:not(.colorPrimaryActive_56bd1ae0ca) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b9d11adff6.colorBrand_b25987de43:hover:not(.colorBrandActive_9ec4e7ffb1),\n.kindTertiary_b9d11adff6.colorBrand_b25987de43:focus:not(.colorBrandActive_9ec4e7ffb1) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b9d11adff6.colorPositive_1545bee9b1 {\n  color: var(--positive-color);\n}\n.kindTertiary_b9d11adff6.colorPositiveActive_aaf5217dd0,\n.kindTertiary_b9d11adff6.colorPositive_1545bee9b1:hover,\n.kindTertiary_b9d11adff6.colorPositive_1545bee9b1:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary_b9d11adff6.colorNegative_e8ab6e1c85 {\n  color: var(--negative-color);\n}\n.kindTertiary_b9d11adff6.colorNegativeActive_aaf5217dd0,\n.kindTertiary_b9d11adff6.colorNegative_e8ab6e1c85:hover,\n.kindTertiary_b9d11adff6.colorNegative_e8ab6e1c85:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary_b9d11adff6.colorInverted_045ae19378 {\n  color: var(--primary-text-color);\n}\n.kindTertiary_b9d11adff6.colorInvertedActive_aaf5217dd0,\n.kindTertiary_b9d11adff6.colorInverted_045ae19378:hover,\n.kindTertiary_b9d11adff6.colorInverted_045ae19378:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary_b9d11adff6.colorInverted_045ae19378.disabled_b04beda9b4 {\n  color: var(--disabled-text-color);\n}\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24 {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_b9d11adff6.colorOnPrimaryColorActive_dba5af57d1,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:hover,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_b9d11adff6.colorOnPrimaryColorActive_dba5af57d1:focus-visible, .kindTertiary_b9d11adff6.colorOnPrimaryColorActive_dba5af57d1.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:hover:focus-visible,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:hover.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:focus:focus-visible,\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_b9d11adff6.colorOnPrimaryColorActive_dba5af57d1:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindTertiary_b9d11adff6.colorOnPrimaryColor_a7b2c68d24.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e {\n  color: var(--fixed-light-color);\n}\n.kindTertiary_b9d11adff6.colorFixedLightActive_b8080ef048,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:hover,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary_b9d11adff6.colorFixedLightActive_b8080ef048:focus-visible, .kindTertiary_b9d11adff6.colorFixedLightActive_b8080ef048.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:hover:focus-visible,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:hover.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:focus:focus-visible,\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_b9d11adff6.colorFixedLightActive_b8080ef048:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindTertiary_b9d11adff6.colorFixedLight_cc4c81eb2e.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695 {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_b9d11adff6.colorFixedDarkActive_d97751d71b,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:hover,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary_b9d11adff6.colorFixedDarkActive_d97751d71b:focus-visible, .kindTertiary_b9d11adff6.colorFixedDarkActive_d97751d71b.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:hover:focus-visible,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:hover.focus-visible_0fc2b54dbb,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:focus:focus-visible,\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:focus.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary_b9d11adff6.colorFixedDarkActive_d97751d71b:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:hover:focus:not(.focus-visible_0fc2b54dbb),\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695:focus:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}\n.kindTertiary_b9d11adff6.colorFixedDark_d06d560695.disabled_b04beda9b4 {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary_b9d11adff6.colorOnInvertedBackground_1f1d8f6ca0 {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_b9d11adff6.colorOnInvertedBackgroundActive_9483d7172f,\n.kindTertiary_b9d11adff6.colorOnInvertedBackground_1f1d8f6ca0:hover,\n.kindTertiary_b9d11adff6.colorOnInvertedBackground_1f1d8f6ca0:focus {\n  background: var(--icon-color);\n}\n.kindTertiary_b9d11adff6.colorOnInvertedBackground_1f1d8f6ca0.disabled_b04beda9b4 {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary_b9d11adff6.disabled_b04beda9b4 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary_b9d11adff6.disabled_b04beda9b4:hover {\n  background-color: transparent;\n}\n.noSidePadding_d93f15ce9d {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button_f410a4fdb7.insetFocusStyle_a81838b308:focus-visible, .button_f410a4fdb7.insetFocusStyle_a81838b308.focus-visible_0fc2b54dbb {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button_f410a4fdb7.insetFocusStyle_a81838b308:focus:not(.focus-visible_0fc2b54dbb) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

package/dist/mocked_classnames/Button/Button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as a,useRef as t,useEffect as n,useCallback as r,useMemo as o}from"react";import{camelCase as i}from"es-toolkit";import s from"classnames";import{useMergeRef as l,getStyle as c,getTestId as d,ComponentDefaultTestId as m,ComponentVibeId as u,NOOP as p,withStaticProps as f,SIZES as b}from"@vibe/shared";import{Icon as y}from"@vibe/icon";import{Loader as g}from"@vibe/loader";import{ButtonColor as h,ButtonType as v,ButtonInputType as N}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as x,TRANSPARENT_COLOR as E}from"./helper/dom-helpers.js";import C from"./Button.module.scss.js";import{useButtonLoading as F}from"./helper/useButtonLoading.js";var k=f(a((({className:a,children:f,kind:b="primary",onClick:h=p,name:v,size:N="medium",color:k="primary",disabled:B=!1,rightIcon:S=null,leftIcon:T=null,success:I=!1,successText:j="",successIcon:O=null,style:z,loading:L=!1,loaderClassName:P,active:D=!1,activeButtonClassName:M,id:U,marginRight:w=!1,marginLeft:A=!1,type:R="button",onMouseDown:H=p,ariaLabel:q,rightFlat:G=!1,leftFlat:J=!1,preventClickAnimation:K=!1,noSidePadding:Q=!1,onFocus:V=p,onBlur:W=p,ariaLabeledBy:X,defaultTextColorOnPrimaryColor:Y=E,ariaHasPopup:Z,ariaExpanded:$,ariaControls:_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te,blurOnMouseUp:ne=!0,"data-testid":re,insetFocus:oe=!1,tabIndex:ie},se)=>{const le=t(null),ce=l(se,le),{loading:de}=F({isLoading:L});n((()=>{if("on-primary-color"!==k&&"fixed-light"!==k)return;if("primary"!==b)return;if(!le.current)return;const e=le.current;e.style.color=x(e,Y)}),[b,le,k,Y]);const me=r((()=>{const e=le.current;!B&&e&&ne&&e.blur()}),[B,le,ne]),ue=r((e=>{B||de||I?e.preventDefault():h&&h(e)}),[h,B,de,I]),pe=r((e=>{B||de||I?e.preventDefault():H&&H(e)}),[H,B,de,I]),fe=o((()=>{const e=I?"positive":k;return s(a,C.button,c(C,i("size-"+N)),c(C,i("kind-"+b)),c(C,i("color-"+e)),{[C.success]:I,[c(C,i("color-"+e+"-active"))]:D,[M]:D,[C.marginRight]:w,[C.marginLeft]:A,[C.rightFlat]:G,[C.leftFlat]:J,[C.preventClickAnimation]:K,[C.noSidePadding]:Q,[C.disabled]:B,[C.insetFocusStyle]:oe})}),[I,k,a,N,b,D,M,w,A,G,J,K,Q,B,oe]),be=o((()=>({ref:ce,type:R,className:fe,name:v,onMouseUp:me,style:z,onClick:ue,id:U,onFocus:V,onBlur:W,tabIndex:B||ae?-1:ie,"data-testid":re||d(m.BUTTON,U),"data-vibe":u.BUTTON,onMouseDown:pe,"aria-disabled":B,"aria-busy":de,"aria-labelledby":X,"aria-label":q,"aria-haspopup":Z,"aria-expanded":$,"aria-controls":_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te})),[ce,R,fe,v,me,z,ue,U,V,W,ie,re,pe,B,de,X,q,Z,$,_,ee,ae,te]),ye=r((e=>{if("function"==typeof e)switch(N){case"xxs":case"xs":return 16;default:return 20}}),[N]),ge=o((()=>e.Children.toArray(f).some(Boolean)),[f]),he=o((()=>e.createElement(e.Fragment,null,T?e.createElement(y,{iconType:"font",icon:T,iconSize:ye(T),className:s({[C.leftIcon]:ge}),ignoreFocusStyle:!0}):null,f,S?e.createElement(y,{iconType:"font",icon:S,iconSize:ye(S),className:s({[C.rightIcon]:ge}),ignoreFocusStyle:!0}):null)),[f,ge,ye,T,S]);return de?e.createElement("button",Object.assign({},be,{key:U+"-loading"}),e.createElement("span",{className:s(C.loader,P)},e.createElement(g,{className:C.loaderSvg}),e.createElement("span",{"aria-hidden":!0,className:C.textPlaceholder},he))):I?e.createElement("button",Object.assign({},be,{key:U+"-success"}),e.createElement("span",{className:C.successContent},O?e.createElement(y,{iconType:"font",icon:O,iconSize:ye(O),className:s({[C.leftIcon]:!!j}),ignoreFocusStyle:!0}):null,j),e.createElement("span",{"aria-hidden":"true",className:C.textPlaceholder},he)):e.createElement("button",Object.assign({},be,{key:U+"-button"}),he)})),{sizes:b,colors:h,kinds:v,types:N,inputTags:N});export{k as default};
+import e,{forwardRef as a,useRef as t,useEffect as n,useCallback as r,useMemo as o}from"react";import{camelCase as i}from"es-toolkit";import s from"classnames";import{useMergeRef as l,getStyle as c,getTestId as d,ComponentDefaultTestId as m,ComponentVibeId as u,NOOP as p,withStaticProps as f,SIZES as b}from"@vibe/shared";import{Icon as y}from"@vibe/icon";import{Loader as g}from"@vibe/loader";import{ButtonColor as h,ButtonType as v,ButtonInputType as N}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as x,TRANSPARENT_COLOR as E}from"./helper/dom-helpers.js";import C from"./Button.module.scss.js";import{useButtonLoading as F}from"./helper/useButtonLoading.js";var k=f(a((({className:a,children:f,kind:b="primary",onClick:h=p,name:v,size:N="medium",color:k="primary",disabled:B=!1,rightIcon:S=null,leftIcon:T=null,success:I=!1,successText:j="",successIcon:O=null,style:z,loading:L=!1,loaderClassName:P,active:D=!1,activeButtonClassName:M,id:U,marginRight:w=!1,marginLeft:A=!1,type:R="button",onMouseDown:H=p,ariaLabel:q,rightFlat:G=!1,leftFlat:J=!1,preventClickAnimation:K=!1,noSidePadding:Q=!1,onFocus:V=p,onBlur:W=p,ariaLabeledBy:X,defaultTextColorOnPrimaryColor:Y=E,ariaHasPopup:Z,ariaExpanded:$,ariaControls:_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te,blurOnMouseUp:ne=!0,"data-testid":re,insetFocus:oe=!1,tabIndex:ie},se)=>{const le=t(null),ce=l(se,le),{loading:de}=F({isLoading:L});n((()=>{if("on-primary-color"!==k&&"fixed-light"!==k)return;if("primary"!==b)return;if(!le.current)return;const e=le.current;e.style.color=x(e,Y)}),[b,le,k,Y]);const me=r((()=>{const e=le.current;!B&&e&&ne&&e.blur()}),[B,le,ne]),ue=r((e=>{B||de||I?e.preventDefault():h&&h(e)}),[h,B,de,I]),pe=r((e=>{B||de||I?e.preventDefault():H&&H(e)}),[H,B,de,I]),fe=o((()=>{const e=I?"positive":k;return s(a,C.button,c(C,i("size-"+N)),c(C,i("kind-"+b)),c(C,i("color-"+e)),{[C.success]:I,[c(C,i("color-"+e+"-active"))]:D,[M]:D,[C.marginRight]:w,[C.marginLeft]:A,[C.rightFlat]:G,[C.leftFlat]:J,[C.preventClickAnimation]:K,[C.noSidePadding]:Q,[C.disabled]:B,[C.insetFocusStyle]:oe})}),[I,k,a,N,b,D,M,w,A,G,J,K,Q,B,oe]),be=o((()=>({ref:ce,type:R,className:fe,name:v,onMouseUp:me,style:z,onClick:ue,id:U,onFocus:V,onBlur:W,tabIndex:null!=ie?ie:B||ae?-1:void 0,"data-testid":re||d(m.BUTTON,U),"data-vibe":u.BUTTON,onMouseDown:pe,"aria-disabled":B,"aria-busy":de,"aria-labelledby":X,"aria-label":q,"aria-haspopup":Z,"aria-expanded":$,"aria-controls":_,"aria-describedby":ee,"aria-hidden":ae,"aria-pressed":te})),[ce,R,fe,v,me,z,ue,U,V,W,ie,re,pe,B,de,X,q,Z,$,_,ee,ae,te]),ye=r((e=>{if("function"==typeof e)switch(N){case"xxs":case"xs":return 16;default:return 20}}),[N]),ge=o((()=>e.Children.toArray(f).some(Boolean)),[f]),he=o((()=>e.createElement(e.Fragment,null,T?e.createElement(y,{iconType:"font",icon:T,iconSize:ye(T),className:s({[C.leftIcon]:ge}),ignoreFocusStyle:!0}):null,f,S?e.createElement(y,{iconType:"font",icon:S,iconSize:ye(S),className:s({[C.rightIcon]:ge}),ignoreFocusStyle:!0}):null)),[f,ge,ye,T,S]);return de?e.createElement("button",Object.assign({},be,{key:U+"-loading"}),e.createElement("span",{className:s(C.loader,P)},e.createElement(g,{className:C.loaderSvg}),e.createElement("span",{"aria-hidden":!0,className:C.textPlaceholder},he))):I?e.createElement("button",Object.assign({},be,{key:U+"-success"}),e.createElement("span",{className:C.successContent},O?e.createElement(y,{iconType:"font",icon:O,iconSize:ye(O),className:s({[C.leftIcon]:!!j}),ignoreFocusStyle:!0}):null,j),e.createElement("span",{"aria-hidden":"true",className:C.textPlaceholder},he)):e.createElement("button",Object.assign({},be,{key:U+"-button"}),he)})),{sizes:b,colors:h,kinds:v,types:N,inputTags:N});export{k as default};
 //# sourceMappingURL=Button.js.map

package/dist/mocked_classnames/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type /\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SIZES, useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport {\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum\n} from \"./ButtonConstants\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport {\n getTestId,\n type VibeComponentProps,\n withStaticProps,\n ComponentDefaultTestId,\n ComponentVibeId\n} from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /* Custom class names to pass to the component /\n className?: string;\n activeButtonClassName?: string;\n /* The button's kind /\n kind?: ButtonType;\n /* Callback function to run when the button is clicked /\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /* Blur on button click /\n blurOnMouseUp?: boolean;\n /* Name of the button - for form submit usages /\n name?: string;\n /* The button's size /\n size?: ButtonSize;\n /* The button's color /\n color?: ButtonColor;\n /* The button's type /\n type?: ButtonInputType;\n /* Whether the button should be disabled or not /\n disabled?: boolean;\n /* Icon to place on the right /\n rightIcon?: SubIcon;\n /* Icon to place on the left /\n leftIcon?: SubIcon;\n /* the success props are used when you have async action and wants to display a success message /\n success?: boolean;\n /* Success icon name /\n successIcon?: SubIcon;\n /* Success text /\n successText?: string;\n /* loading boolean which switches the text to a loader /\n loading?: boolean;\n /* className which is applied to loader container /\n loaderClassName?: string;\n style?: React.CSSProperties;\n / displays the active state /\n active?: boolean;\n /* id to pass to the button /\n id?: string;\n /* adds 8px margin to the right /\n marginRight?: boolean;\n /* adds 8px margin to the left /\n marginLeft?: boolean;\n /* element id to describe the button accordingly /\n ariaLabeledBy?: string;\n /* aria label to provide important when providing only Icon /\n ariaLabel?: string;\n /* aria for a button popup /\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /* aria to be set if the popup is open /\n ariaExpanded?: boolean;\n /* aria controls - receives id for the controlled region /\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /\n aria to be used for screen reader to know if the button is hidden\n /\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /\n Indicates the current \"pressed\" state of toggle buttons\n /\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /* On Button Focus callback /\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /* On Button Blur callback /\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /* default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) /\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /* Change the focus indicator from around the button to within it /\n insetFocus?: boolean;\n /* Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled \|\| !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: disabled \|\| ariaHidden ? -1 : tabIndex,\n \"data-testid\": dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n default:\n return 20;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type /\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SIZES, useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport {\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum\n} from \"./ButtonConstants\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport {\n getTestId,\n type VibeComponentProps,\n withStaticProps,\n ComponentDefaultTestId,\n ComponentVibeId\n} from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /* Custom class names to pass to the component /\n className?: string;\n activeButtonClassName?: string;\n /* The button's kind /\n kind?: ButtonType;\n /* Callback function to run when the button is clicked /\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /* Blur on button click /\n blurOnMouseUp?: boolean;\n /* Name of the button - for form submit usages /\n name?: string;\n /* The button's size /\n size?: ButtonSize;\n /* The button's color /\n color?: ButtonColor;\n /* The button's type /\n type?: ButtonInputType;\n /* Whether the button should be disabled or not /\n disabled?: boolean;\n /* Icon to place on the right /\n rightIcon?: SubIcon;\n /* Icon to place on the left /\n leftIcon?: SubIcon;\n /* the success props are used when you have async action and wants to display a success message /\n success?: boolean;\n /* Success icon name /\n successIcon?: SubIcon;\n /* Success text /\n successText?: string;\n /* loading boolean which switches the text to a loader /\n loading?: boolean;\n /* className which is applied to loader container /\n loaderClassName?: string;\n style?: React.CSSProperties;\n / displays the active state /\n active?: boolean;\n /* id to pass to the button /\n id?: string;\n /* adds 8px margin to the right /\n marginRight?: boolean;\n /* adds 8px margin to the left /\n marginLeft?: boolean;\n /* element id to describe the button accordingly /\n ariaLabeledBy?: string;\n /* aria label to provide important when providing only Icon /\n ariaLabel?: string;\n /* aria for a button popup /\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /* aria to be set if the popup is open /\n ariaExpanded?: boolean;\n /* aria controls - receives id for the controlled region /\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /\n aria to be used for screen reader to know if the button is hidden\n /\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /\n Indicates the current \"pressed\" state of toggle buttons\n /\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /* On Button Focus callback /\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /* On Button Blur callback /\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /* default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) /\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /* Change the focus indicator from around the button to within it /\n insetFocus?: boolean;\n /* Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled \|\| !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled \|\| loading \|\| success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: tabIndex ?? (disabled \|\| ariaHidden ? -1 : undefined),\n \"data-testid\": dataTestId \|\| getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n default:\n return 20;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","className","children","kind","onClick","NOOP","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","loading","isLoading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","ref","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","calculatedColor","cx","styles","getStyle","camelCase","insetFocusStyle","buttonProps","undefined","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}

package/dist/mocked_classnames/Button/Button.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var o={button:"button","focus-visible":"focus-visible",loader:"loader",loaderSvg:"loaderSvg",textPlaceholder:"textPlaceholder",success:"success",successContent:"successContent",marginRight:"marginRight",marginLeft:"marginLeft",rightFlat:"rightFlat",leftFlat:"leftFlat",preventClickAnimation:"preventClickAnimation",leftIcon:"leftIcon",rightIcon:"rightIcon",sizeXxs:"sizeXxs",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",kindPrimary:"kindPrimary",colorPrimary:"colorPrimary",colorBrand:"colorBrand",colorPrimaryActive:"colorPrimaryActive",colorBrandActive:"colorBrandActive",colorPositive:"colorPositive",colorPositiveActive:"colorPositiveActive",colorNegative:"colorNegative",colorNegativeActive:"colorNegativeActive",colorInverted:"colorInverted",colorInvertedActive:"colorInvertedActive",disabled:"disabled",colorOnPrimaryColor:"colorOnPrimaryColor",colorOnPrimaryColorActive:"colorOnPrimaryColorActive",colorFixedLight:"colorFixedLight",colorFixedLightActive:"colorFixedLightActive",colorFixedDark:"colorFixedDark",colorFixedDarkActive:"colorFixedDarkActive",colorOnInvertedBackground:"colorOnInvertedBackground",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive",kindSecondary:"kindSecondary",kindTertiary:"kindTertiary",noSidePadding:"noSidePadding",insetFocusStyle:"insetFocusStyle"};!function(o){const r="s_id-95d3f630f6d9_3_0_11";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button:focus-visible, .button.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button:focus:not(.focus-visible) {\n  outline: none;\n}\n.button .loader {\n  height: 100%;\n}\n.button .loader .loaderSvg {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button .textPlaceholder {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button.success {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button.success .successContent {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight {\n  margin-right: var(--spacing-small);\n}\n.marginLeft {\n  margin-left: var(--spacing-small);\n}\n.rightFlat {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button:active:not(.preventClickAnimation) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button .leftIcon {\n  margin-right: var(--spacing-small);\n}\n.button .rightIcon {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--spacing-xs);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall .loader {\n  top: 7px;\n}\n.sizeMedium {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--spacing-small) var(--spacing-medium);\n  height: 40px;\n}\n.sizeLarge {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--spacing-large);\n  height: 48px;\n}\n.kindPrimary {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorPrimary {\n  background: var(--primary-color);\n}\n.kindPrimary.colorBrand {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary.colorPositive {\n  background: var(--positive-color);\n}\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary.colorNegative {\n  background: var(--negative-color);\n}\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary.colorInverted {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary.button.colorInverted.disabled {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary.colorOnPrimaryColor {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorOnPrimaryColorActive:focus-visible, .kindPrimary.colorOnPrimaryColorActive.focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover:focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover.focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus:focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorFixedLight {\n  background: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorFixedLightActive:focus-visible, .kindPrimary.colorFixedLightActive.focus-visible,\n.kindPrimary.colorFixedLight:hover:focus-visible,\n.kindPrimary.colorFixedLight:hover.focus-visible,\n.kindPrimary.colorFixedLight:focus:focus-visible,\n.kindPrimary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedLightActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDark {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n  filter: brightness(125%);\n}\n.kindPrimary.colorFixedDarkActive:focus-visible, .kindPrimary.colorFixedDarkActive.focus-visible,\n.kindPrimary.colorFixedDark:hover:focus-visible,\n.kindPrimary.colorFixedDark:hover.focus-visible,\n.kindPrimary.colorFixedDark:focus:focus-visible,\n.kindPrimary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary.colorOnInvertedBackground {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary.button.disabled {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary.sizeSmall {\n  line-height: 22px;\n}\n.kindSecondary.sizeMedium {\n  line-height: 22px;\n}\n.kindSecondary.sizeLarge {\n  line-height: 22px;\n}\n.kindSecondary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorPositive {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary.colorNegative {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary.colorInverted {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorInverted.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorOnPrimaryColorActive:focus-visible, .kindSecondary.colorOnPrimaryColorActive.focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover:focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover.focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus:focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary.colorFixedLight {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorFixedLightActive:focus-visible, .kindSecondary.colorFixedLightActive.focus-visible,\n.kindSecondary.colorFixedLight:hover:focus-visible,\n.kindSecondary.colorFixedLight:hover.focus-visible,\n.kindSecondary.colorFixedLight:focus:focus-visible,\n.kindSecondary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedLightActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorFixedDark {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary.colorFixedDarkActive:focus-visible, .kindSecondary.colorFixedDarkActive.focus-visible,\n.kindSecondary.colorFixedDark:hover:focus-visible,\n.kindSecondary.colorFixedDark:hover.focus-visible,\n.kindSecondary.colorFixedDark:focus:focus-visible,\n.kindSecondary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnInvertedBackground {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindSecondary.colorOnInvertedBackground.disabled {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary.disabled:hover {\n  background-color: transparent;\n}\n.kindTertiary {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorPositive {\n  color: var(--positive-color);\n}\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary.colorNegative {\n  color: var(--negative-color);\n}\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary.colorInverted {\n  color: var(--primary-text-color);\n}\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorInverted.disabled {\n  color: var(--disabled-text-color);\n}\n.kindTertiary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorOnPrimaryColorActive:focus-visible, .kindTertiary.colorOnPrimaryColorActive.focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover:focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover.focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus:focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorFixedLight {\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorFixedLightActive:focus-visible, .kindTertiary.colorFixedLightActive.focus-visible,\n.kindTertiary.colorFixedLight:hover:focus-visible,\n.kindTertiary.colorFixedLight:hover.focus-visible,\n.kindTertiary.colorFixedLight:focus:focus-visible,\n.kindTertiary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedLightActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedDark {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary.colorFixedDarkActive:focus-visible, .kindTertiary.colorFixedDarkActive.focus-visible,\n.kindTertiary.colorFixedDark:hover:focus-visible,\n.kindTertiary.colorFixedDark:hover.focus-visible,\n.kindTertiary.colorFixedDark:focus:focus-visible,\n.kindTertiary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorOnInvertedBackground {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindTertiary.colorOnInvertedBackground.disabled {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.disabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary.disabled:hover {\n  background-color: transparent;\n}\n.noSidePadding {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button.insetFocusStyle:focus-visible, .button.insetFocusStyle.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button.insetFocusStyle:focus:not(.focus-visible) {\n  outline: none;\n}");export{o as default};
+var o={button:"button","focus-visible":"focus-visible",loader:"loader",loaderSvg:"loaderSvg",textPlaceholder:"textPlaceholder",success:"success",successContent:"successContent",marginRight:"marginRight",marginLeft:"marginLeft",rightFlat:"rightFlat",leftFlat:"leftFlat",preventClickAnimation:"preventClickAnimation",leftIcon:"leftIcon",rightIcon:"rightIcon",sizeXxs:"sizeXxs",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",kindPrimary:"kindPrimary",colorPrimary:"colorPrimary",colorBrand:"colorBrand",colorPrimaryActive:"colorPrimaryActive",colorBrandActive:"colorBrandActive",colorPositive:"colorPositive",colorPositiveActive:"colorPositiveActive",colorNegative:"colorNegative",colorNegativeActive:"colorNegativeActive",colorInverted:"colorInverted",colorInvertedActive:"colorInvertedActive",disabled:"disabled",colorOnPrimaryColor:"colorOnPrimaryColor",colorOnPrimaryColorActive:"colorOnPrimaryColorActive",colorFixedLight:"colorFixedLight",colorFixedLightActive:"colorFixedLightActive",colorFixedDark:"colorFixedDark",colorFixedDarkActive:"colorFixedDarkActive",colorOnInvertedBackground:"colorOnInvertedBackground",colorOnInvertedBackgroundActive:"colorOnInvertedBackgroundActive",kindSecondary:"kindSecondary",kindTertiary:"kindTertiary",noSidePadding:"noSidePadding",insetFocusStyle:"insetFocusStyle"};!function(o){const r="s_id-95d3f630f6d9_3_0_12";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const i=document.createElement("style");i.id=r,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=o)}("/* stylelint-disable */\n/* stylelint-enable */\n.button {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform, var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n  min-width: auto;\n}\n.button:focus-visible, .button.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button:focus:not(.focus-visible) {\n  outline: none;\n}\n.button .loader {\n  height: 100%;\n}\n.button .loader .loaderSvg {\n  position: static;\n  height: 100%;\n  margin: 0;\n}\n.button .textPlaceholder {\n  display: inline-block;\n  opacity: 0;\n  height: 0;\n  visibility: hidden;\n  white-space: pre;\n}\n.button.success {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.button.success .successContent {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.marginRight {\n  margin-right: var(--spacing-small);\n}\n.marginLeft {\n  margin-left: var(--spacing-small);\n}\n.rightFlat {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.leftFlat {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.button:active:not(.preventClickAnimation) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n.button .leftIcon {\n  margin-right: var(--spacing-small);\n}\n.button .rightIcon {\n  margin-left: var(--spacing-small);\n}\n.sizeXxs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: 2px var(--spacing-xs);\n  height: 16px;\n  line-height: 16px;\n}\n.sizeXs {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 24px;\n  line-height: 21px;\n}\n.sizeSmall {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n  padding: var(--spacing-xs) var(--spacing-small);\n  height: 32px;\n  line-height: 24px;\n}\n.sizeSmall .loader {\n  top: 7px;\n}\n.sizeMedium {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: var(--spacing-small) var(--spacing-medium);\n  height: 40px;\n}\n.sizeLarge {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text1-normal);\n  padding: 12px var(--spacing-large);\n  height: 48px;\n}\n.kindPrimary {\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorPrimary {\n  background: var(--primary-color);\n}\n.kindPrimary.colorBrand {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n  background: var(--primary-hover-color);\n}\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n  background: var(--brand-hover-color);\n}\n.kindPrimary.colorPositive {\n  background: var(--positive-color);\n}\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n  background: var(--positive-color-hover);\n}\n.kindPrimary.colorNegative {\n  background: var(--negative-color);\n}\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n  background: var(--negative-color-hover);\n}\n.kindPrimary.colorInverted {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n  background: var(--placeholder-color);\n}\n.kindPrimary.button.colorInverted.disabled {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n.kindPrimary.colorOnPrimaryColor {\n  background: var(--text-color-on-primary);\n}\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorOnPrimaryColorActive:focus-visible, .kindPrimary.colorOnPrimaryColorActive.focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover:focus-visible,\n.kindPrimary.colorOnPrimaryColor:hover.focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus:focus-visible,\n.kindPrimary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindPrimary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindPrimary.colorFixedLight {\n  background: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n  background-color: #e6e9ef;\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindPrimary.colorFixedLightActive:focus-visible, .kindPrimary.colorFixedLightActive.focus-visible,\n.kindPrimary.colorFixedLight:hover:focus-visible,\n.kindPrimary.colorFixedLight:hover.focus-visible,\n.kindPrimary.colorFixedLight:focus:focus-visible,\n.kindPrimary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedLightActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDark {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n  filter: brightness(125%);\n}\n.kindPrimary.colorFixedDarkActive:focus-visible, .kindPrimary.colorFixedDarkActive.focus-visible,\n.kindPrimary.colorFixedDark:hover:focus-visible,\n.kindPrimary.colorFixedDark:hover.focus-visible,\n.kindPrimary.colorFixedDark:focus:focus-visible,\n.kindPrimary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindPrimary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindPrimary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindPrimary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindPrimary.colorOnInvertedBackground {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n  background: var(--ui-background-color);\n}\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: 0.5;\n}\n.kindPrimary.button.disabled {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindSecondary.sizeSmall {\n  line-height: 22px;\n}\n.kindSecondary.sizeMedium {\n  line-height: 22px;\n}\n.kindSecondary.sizeLarge {\n  line-height: 22px;\n}\n.kindSecondary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n.kindSecondary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorPositive {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindSecondary.colorNegative {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindSecondary.colorInverted {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindSecondary.colorInverted.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n.kindSecondary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorOnPrimaryColorActive:focus-visible, .kindSecondary.colorOnPrimaryColorActive.focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover:focus-visible,\n.kindSecondary.colorOnPrimaryColor:hover.focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus:focus-visible,\n.kindSecondary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindSecondary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindSecondary.colorFixedLight {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindSecondary.colorFixedLightActive:focus-visible, .kindSecondary.colorFixedLightActive.focus-visible,\n.kindSecondary.colorFixedLight:hover:focus-visible,\n.kindSecondary.colorFixedLight:hover.focus-visible,\n.kindSecondary.colorFixedLight:focus:focus-visible,\n.kindSecondary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedLightActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorFixedDark {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindSecondary.colorFixedDarkActive:focus-visible, .kindSecondary.colorFixedDarkActive.focus-visible,\n.kindSecondary.colorFixedDark:hover:focus-visible,\n.kindSecondary.colorFixedDark:hover.focus-visible,\n.kindSecondary.colorFixedDark:focus:focus-visible,\n.kindSecondary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindSecondary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindSecondary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindSecondary.colorOnInvertedBackground {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindSecondary.colorOnInvertedBackground.disabled {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: 0.5;\n}\n.kindSecondary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindSecondary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindSecondary.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindSecondary.disabled:hover {\n  background-color: transparent;\n}\n.kindTertiary {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n.kindTertiary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n}\n.kindTertiary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n.kindTertiary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n}\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorPositive {\n  color: var(--positive-color);\n}\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n.kindTertiary.colorNegative {\n  color: var(--negative-color);\n}\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n.kindTertiary.colorInverted {\n  color: var(--primary-text-color);\n}\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n.kindTertiary.colorInverted.disabled {\n  color: var(--disabled-text-color);\n}\n.kindTertiary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorOnPrimaryColorActive:focus-visible, .kindTertiary.colorOnPrimaryColorActive.focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover:focus-visible,\n.kindTertiary.colorOnPrimaryColor:hover.focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus:focus-visible,\n.kindTertiary.colorOnPrimaryColor:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorOnPrimaryColorActive:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:hover:focus:not(.focus-visible),\n.kindTertiary.colorOnPrimaryColor:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorOnPrimaryColor.disabled {\n  opacity: 0.5;\n  color: var(--text-color-on-primary);\n}\n.kindTertiary.colorFixedLight {\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n  -webkit-backdrop-filter: brightness(85%);\n          backdrop-filter: brightness(85%);\n}\n.kindTertiary.colorFixedLightActive:focus-visible, .kindTertiary.colorFixedLightActive.focus-visible,\n.kindTertiary.colorFixedLight:hover:focus-visible,\n.kindTertiary.colorFixedLight:hover.focus-visible,\n.kindTertiary.colorFixedLight:focus:focus-visible,\n.kindTertiary.colorFixedLight:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedLightActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedLight:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedLight.disabled {\n  opacity: 0.5;\n  color: var(--fixed-light-color);\n}\n.kindTertiary.colorFixedDark {\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n}\n.kindTertiary.colorFixedDarkActive:focus-visible, .kindTertiary.colorFixedDarkActive.focus-visible,\n.kindTertiary.colorFixedDark:hover:focus-visible,\n.kindTertiary.colorFixedDark:hover.focus-visible,\n.kindTertiary.colorFixedDark:focus:focus-visible,\n.kindTertiary.colorFixedDark:focus.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n.kindTertiary.colorFixedDarkActive:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:hover:focus:not(.focus-visible),\n.kindTertiary.colorFixedDark:focus:focus:not(.focus-visible) {\n  outline: none;\n}\n.kindTertiary.colorFixedDark.disabled {\n  opacity: 0.5;\n  color: var(--fixed-dark-color);\n}\n.kindTertiary.colorOnInvertedBackground {\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n.kindTertiary.colorOnInvertedBackground.disabled {\n  background: var(--icon-color);\n  opacity: 0.5;\n  color: var(--text-color-on-inverted);\n}\n.kindTertiary.disabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.kindTertiary.disabled:hover {\n  background-color: transparent;\n}\n.noSidePadding {\n  padding-right: 0;\n  padding-left: 0;\n}\n.button.insetFocusStyle:focus-visible, .button.insetFocusStyle.focus-visible {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.button.insetFocusStyle:focus:not(.focus-visible) {\n  outline: none;\n}");export{o as default};
 //# sourceMappingURL=Button.module.scss.js.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/button",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "Vibe sub-package for button components",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
       "../../../node_modules/@vibe/config/.eslintrc.cjs"
     ]
   },
-  "gitHead": "4b96081f7fe215c37adab6f4ffcec355fb0d0467"
+  "gitHead": "96981660b69c570fda4854724bbf84fc320b6e6b"
 }