@itcase/ui-web 1.9.77

package/dist/components/Tab.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import i from"react";import a from"clsx";import{useAppearanceConfig as l,useDevicePropsGenerator as s,useActiveClasses as c,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{e as d,a as n,B as b,I as v,D as f}from"../primitives_es_AOPzysvv.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const p={warningPrimary:{fill:"warningPrimary",fillDisabled:"disabledPrimary",labelColor:"warningTextPrimary",labelColorActive:"warningTextPrimary",badgeAppearance:"warningPrimary",dividerFill:"accentPrimary",dividerFillDisabled:"disabledPrimary"},errorPrimary:{fill:"errorPrimary",fillDisabled:"disabledPrimary",labelColor:"errorTextPrimary",labelColorActive:"errorTextPrimary",labelColorDisabled:"errorTextDisabled",badgeAppearance:"errorPrimary",dividerFill:"accentPrimary",dividerFillDisabled:"errorDisabled"},successPrimary:{fill:"successPrimary",fillDisabled:"successDisabled",labelColor:"successTextPrimary",labelColorActive:"successTextPrimary",labelColorDisabled:"successTextDisabled",badgeAppearance:"successPrimary",dividerFill:"accentPrimary",dividerFillDisabled:"successDisabled"},surfacePrimary:{fill:"surfacePrimary",fillActive:"surfaceActivePrimary",fillActiveHover:"surfaceHoverSecondary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary solid circular",dividerFill:"surfacePrimary",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillActive:"accentActivePrimary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverQuaternary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},sizeXXL:{size:"xxl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s"},sizeXL:{size:"xl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s"},sizeL:{size:"l",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s"},sizeM:{size:"m",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s"},sizeS:{size:"s",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s"},sizeXS:{size:"xs",labelTextSize:"xs",badgeAppearanceSize:"sizeXS"},sizeXXS:{size:"xxs",labelTextSize:"xs",badgeAppearanceSize:"sizeXXS",dividerSize:"s"},solid:{borderColor:"none",borderColorActive:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorActive:"none",dividerFill:"none"}},m={appearance:p,setAppearance:e=>{m.appearance=e}};function u(p){const{appearance:u,className:y,dataTestId:A,dataTour:x,label:z,badgeValue:S,href:C,link:g,rel:P,target:T,before:_,after:h,isActive:D=!1,isDisabled:F=!1,isSkeleton:H,onClick:w,onMouseEnter:$,children:I}=p,X=l(u,m,F),k=s(p,X),{rootClasses:B}=c({propsGenerator:k,isActive:D,isDisabled:F}),{justifyContentClass:N,alignClass:j,labelTextAlign:W,labelTextColor:L,labelTextColorActive:M,labelTextColorHover:Q,labelTextSize:V,labelTextStyle:E,labelTextWeight:G,labelTextWrap:O,badgeAppearance:q,badgeAppearanceSize:J,badgeShape:K,badgeSize:R,badgeTextColor:U,badgeTextSize:Y,dividerFill:Z,dividerFillActive:ee,dividerFillActiveHover:re,dividerFillDisabled:ie,dividerFillHover:ae,dividerSize:le,icon:se,iconFill:ce,iconFillIcon:te,iconFillSize:oe,iconShape:de,iconSize:ne,iconSrc:be,linkFill:ve,shapeClass:fe,shapeStrengthClass:pe,sizeClass:me,widthClass:ue}=k,{styles:ye}=t(p);return e("div",{className:a("tab",y,B,D&&"tab_state_active",F&&"tab_state_disabled",me&&`tab_size_${me}`,fe&&`shape_${fe}`,pe&&`shape-strength_${pe}`,ue&&`width_${ue}`,N&&`tab_justify-content_${N}`,H&&"skeleton",w&&"cursor_type_pointer"),"data-testid":A&&`${A}Tab`,"data-tour":x,style:ye,onClick:w,onMouseEnter:$,children:r(d,{className:a("tab__link",!F&&"cursor_type_pointer"),fill:ve,href:g||C,rel:P,target:T,children:[_,I||r(i.Fragment,{children:[r("div",{className:a("tab__wrapper",j&&`align_${j}`),children:[z&&e(n,{className:"tab__label",size:V,textAlign:W,textColor:L,textColorActive:M,textColorHover:Q,textStyle:E,textWeight:G,textWrap:O,isActive:D,isDisabled:F,children:z}),Boolean(S)&&e(b,{appearance:o(q,J),size:R,textColor:U,textSize:Y,shape:K,value:S}),(se||be)&&e(v,{className:"tab__icon_after",fill:ce,fillSize:oe,iconFill:te,iconSize:ne,imageSrc:be,shape:de,SvgImage:se})]}),e(f,{className:"tab__divider",width:"fill",direction:"horizontal",size:le,fill:Z,fillActive:ee,fillActiveHover:re,fillDisabled:ie,fillHover:ae,zIndex:"1",isActive:D,isDisabled:F})]}),h]})})}function y(l){const{className:c,dataTestId:o,dataTour:d,horizontalScroll:n,style:b,tabAppearance:v,tabList:f,children:p}=l,m=s(l),{directionClass:y,alignClass:A,alignDirectionClass:x,fillClass:z,borderColorClass:S,borderTypeClass:C,borderWidthClass:g,widthClass:P,wrapClass:T}=m,{styles:_,wrapper:h}=t(l);return e("div",{className:a(c,"tab-group","group",P&&`width_${P}`,x&&`align_${x}`,y&&`group_direction_${y}`,A&&`align_${A}`,z&&`fill_${z}`,n&&"group_scroll_horizontal",T&&`group_wrap_${T}`,S&&`border-color_${S}`,g&&`border-width_${g}`,C&&`border_type_${C}`),"data-testid":o,"data-tour":d,style:Object.assign({},_,b),children:n?r("div",{className:"tab-group__wrapper",style:h,children:[f?.map(r=>e(u,{appearance:v,label:r.label,isActive:r.isActive},r.key)),p]}):r(i.Fragment,{children:[f?.map(r=>e(u,{appearance:v,label:r.label,badgeValue:r.badgeValue,icon:r.icon,iconSrc:r.iconSrc,isActive:r.isActive,onClick:r.onClick},r.key)),p]})})}export{u as Tab,y as TabGroup,p as tabAppearance,m as tabConfig};

package/dist/components/Text.js

@@ -0,0 +1 @@
+export{a as Text,t as textAppearance,g as textConfig}from"../primitives_es_AOPzysvv.js";import"react/jsx-runtime";import"@rc-component/tooltip";import"react";import"clsx";import"@itcase/ui-core/hooks";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";

package/dist/components/Textarea.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import e from"clsx";import{useAppearanceConfig as o,useDevicePropsGenerator as a}from"@itcase/ui-core/hooks";const l={defaultPrimary:{fill:"surfaceSecondary",fillHover:"surfaceHoverTertiary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},defaultQuaternary:{fill:"surfacePrimary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},defaultSecondary:{fill:"surfacePrimary",fillHover:"surfaceHoverTertiary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},defaultTertiary:{fill:"surfacePrimary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded",shapeStrength:"2m"},roundedL:{shape:"rounded",shapeStrength:"1_5m"},roundedM:{shape:"rounded",shapeStrength:"1m"},roundedS:{shape:"rounded",shapeStrength:"0_5m"},errorPrimary:{fill:"errorTertiary",borderColor:"errorBorderQuaternary",borderColorHover:"errorBorderHoverQuaternary",textColor:"surfaceTextPrimary",iconClearFill:"errorItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},errorSecondary:{fill:"errorSecondary",borderColor:"errorBorderTertiary",borderColorHover:"errorBorderHoverQuaternary",iconClearFill:"errorItemPrimary",placeholderTextColor:"errorTextSecondary"},successPrimary:{fill:"successTertiary",fillHover:"successHoverTertiary",borderColor:"successBorderQuaternary",borderColorHover:"successBorderHoverQuaternary",textColor:"surfaceTextPrimary",iconClearFill:"successItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},successSecondary:{fill:"surfaceSecondary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextSecondary"},requirePrimary:{fill:"warningTertiary",borderColor:"warningBorderQuaternary",borderColorHover:"warningBorderHoverQuaternary",textColor:"surfaceTextPrimary",iconClearFill:"warningItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},requireSecondary:{fill:"surfaceSecondary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextSecondary"},disabledPrimary:{fill:"surfacePrimary",borderColor:"errorBorderQuaternary",borderColorHover:"errorBorderHoverQuaternary",textColor:"surfaceTextQuaternary",iconClearFill:"errorItemPrimary",placeholderTextColor:"surfaceTextQuaternary"},disabledSecondary:{fill:"surfaceSecondary",borderColor:"surfaceBorderTertiary",borderColorHover:"surfaceBorderHoverQuaternary",iconClearFill:"surfaceItemPrimary",placeholderTextColor:"surfaceTextSecondary"},sizeXL:{size:"xl",textSize:"s"},sizeL:{size:"l",textSize:"s"},sizeM:{size:"m",textSize:"m"},sizeS:{size:"s",textSize:"s"},solid:{borderColor:"none",borderColorHover:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorHover:"none"}},t={appearance:l,setAppearance:r=>{t.appearance=r}};function s(l){const{id:s,appearance:i,className:d,dataTestId:c,dataTour:n,name:u,placeholder:y,value:f,isActive:C,isDisabled:x,isSkeleton:m,onBlur:h,onChange:T,onFocus:p,onKeyDown:v}=l,b=o(i,t,x),H=a(l,b),{fillClass:S,fillHoverClass:B,borderColorClass:Q,borderHoverClass:P,borderWidthClass:_,textColorClass:z,textSizeClass:g,textWeightClass:$,caretClass:F,placeholderTextColorClass:I,shapeClass:w,shapeStrengthClass:L,sizeClass:k,widthClass:D}=H;return r("div",{className:e("textarea",d,k&&`textarea_size_${k}`,m&&"skeleton",C&&"textarea_active"),"data-tour":n,children:r("textarea",{id:s,className:e("textarea__input",(g||z||$)&&"text",F&&`caret-color_${F}`,S&&`fill_${S}`,B&&`fill_hover_${B}`,Q&&`border-color_${Q}`,_&&`border-width_${_}`,P&&`border-color_hover_${P}`,w&&`shape_${w}`,L&&`shape-strength_${L}`,I&&`placeholder-text-color_${I}`,g&&`text_size_${g}`,z&&`text-color_${z}`,$&&`text-weight_${$}`,D&&`width_${D}`),"data-testid":c||(u?`${u}-textarea`:"textarea"),disabled:x,placeholder:y,value:f,onBlur:h,onChange:T,onFocus:p,onKeyDown:v})})}export{s as Textarea,l as textareaAppearance,t as textareaConfig};

package/dist/components/Tile.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import i from"clsx";import{useAppearanceConfig as a,useDevicePropsGenerator as t,useStyles as o}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as c}from"@itcase/ui-core/utils";import{T as s,a as l,B as n,I as d}from"../primitives_es_AOPzysvv.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";const p={circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded",shapeStrength:"2m"},roundedL:{shape:"rounded",shapeStrength:"1_5m"},roundedM:{shape:"rounded",shapeStrength:"1m"},roundedS:{shape:"rounded",shapeStrength:"0_5m"},sizeXL:{size:"xl",titleTextSize:"h4",descTextSize:"l",badgeAppearanceSize:"sizeM",iconFillSize:"32",iconSize:"24"},sizeL:{size:"l",titleTextSize:"h4",descTextSize:"l",badgeAppearanceSize:"sizeM",iconFillSize:"24",iconSize:"24"},sizeM:{size:"m",titleTextSize:"h4",descTextSize:"m",badgeAppearanceSize:"sizeM",iconFillSize:"24",iconSize:"24"},sizeS:{size:"s",titleTextSize:"h4",descTextSize:"s",badgeAppearanceSize:"sizeM",iconFillSize:"24",iconSize:"24"},sizeXS:{size:"xs",titleTextSize:"h6",descTextSize:"xs",badgeAppearanceSize:"sizeXXS",iconFillSize:"12",iconSize:"12"},sizeXXS:{size:"xxs",titleTextSize:"h6",descTextSize:"xs",badgeAppearanceSize:"sizeXXS",iconFillSize:"12",iconSize:"12"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderTertiary",badgeAppearance:"accentPrimary",iconAppearance:"accentPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderTertiary",badgeAppearance:"accentPrimary",iconAppearance:"accentPrimary"},surfaceSecondary:{fill:"surfaceSecondary",titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderTertiary",badgeAppearance:"accentPrimary",iconAppearance:"accentPrimary"},surfaceTertiary:{fill:"surfaceTertiary",titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderTertiary",badgeAppearance:"accentPrimary",iconAppearance:"accentPrimary"}},z={appearance:p,setAppearance:e=>{z.appearance=e}};function S(p){const{appearance:S,className:x,dataTestId:m,dataTour:h,type:T,title:u,desc:f,badgeValue:C,iconClick:_,before:g,after:b,isSkeleton:y,onClick:A,children:P}=p,$=a(S,z),v=t(p,$),{directionClass:F,alignClass:N,alignDirectionClass:X,fillClass:k,titleTextAlign:W,titleTextColor:M,titleTextSize:B,titleTextWeight:w,titleTextWrap:I,descTextColor:L,descTextSize:j,descTextWrap:Q,borderColorClass:D,borderColorHoverClass:H,borderTypeClass:V,borderWidthClass:q,badgeAppearance:E,badgeAppearanceSize:G,badgeShape:J,badgeSize:K,badgeTextColor:O,badgeTextSize:R,icon:U,iconAppearance:Y,iconFill:Z,iconFillIcon:ee,iconFillSize:re,iconShape:ie,iconSize:ae,iconSrc:te,shapeClass:oe,shapeStrengthClass:ce,sizeClass:se,widthClass:le}=v,{styles:ne}=o(p);return e("div",{className:i("tile",x,k&&`fill_${k}`,oe&&`shape_${oe}`,ce&&`shape-strength_${ce}`,N&&`align_${N}`,F&&`direction_${F}`,D&&`border-color_${D}`,H&&`border-color_hover_${H}`,q&&`border-width_${q}`,V&&`border_type_${V}`,se&&`tile_size_${se}`,T&&`tile_type_${T}`,C&&"tile_state_badge",le&&`width_${le}`,y&&"skeleton"),"data-testid":m,"data-tour":h,style:ne,onClick:A,children:r("div",{className:i("tile__wrapper",N,X),children:[g,r("div",{className:"tile__header",children:[r("div",{className:"tile__header-inner",children:[u&&e(s,{className:"tile__title",size:B,textAlign:W,textColor:M,textWeight:w,textWrap:I,children:u}),f&&e(l,{className:"tile__text",size:j,textColor:L,textWrap:Q,children:f})]}),r("div",{className:"tile__header-actions",children:[C&&e(n,{appearance:c(E,G),className:"tile__badge",size:K,textColor:O,textSize:R,shape:J,value:C}),(U||te)&&e(d,{appearance:Y,className:"tile__icon",fill:Z,fillSize:re,iconFill:ee,iconSize:ae,imageSrc:te,shape:ie,SvgImage:U,onClick:_})]})]}),P,b]})})}export{S as Tile,p as tileAppearance,z as tileConfig};

package/dist/components/Title.js

@@ -0,0 +1 @@
+export{T as Title,k as titleAppearance,m as titleConfig}from"../primitives_es_AOPzysvv.js";import"react/jsx-runtime";import"@rc-component/tooltip";import"react";import"clsx";import"@itcase/ui-core/hooks";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";

package/dist/components/Tooltip.js

@@ -0,0 +1 @@
+export{f as Tooltip,d as TooltipWrapper,n as tooltipAppearance,o as tooltipConfig}from"../primitives_es_AOPzysvv.js";import"react/jsx-runtime";import"@rc-component/tooltip";import"react";import"clsx";import"@itcase/ui-core/hooks";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";

package/dist/components/Video.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import s from"clsx";import{useStyles as t}from"@itcase/ui-core/hooks";function r(r){const{id:i,className:c,dataTestId:d,dataTour:a,position:p,mp4:m,ogv:l,poster:n,webm:v,isSkeleton:u,children:y}=r,{styles:h}=t(r);return e("div",{id:i,className:s("video",c,n&&"video_poster",u&&"skeleton",p&&`video_position_${p}`),"data-testid":d,"data-tour":a,style:h,children:[e("video",{className:"video__wrapper",autoPlay:!0,loop:!0,muted:!0,playsInline:!1,poster:n,children:[v&&o("source",{type:'video/webm; codecs="vp8, vorbis"',src:v}),l&&o("source",{type:'video/ogg; codecs="theora, vorbi"',src:l}),m&&o("source",{type:'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',src:m})]}),y]})}export{r as Video};

package/dist/components/Warning.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useState as o,Fragment as i}from"react";import n from"clsx";import{useAppearanceConfig as t,useDevicePropsGenerator as a,useStyles as l}from"@itcase/ui-core/hooks";import{I as c,a as s}from"../primitives_es_AOPzysvv.js";import{b as d}from"../default_es_l85QutMi.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const f={accentMutedPrimary:{fill:"accentTertiary",labelTextColor:"accentTextQuaternary",descriptionTextColor:"accentTextQuaternary",borderColor:"accentBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"accentItemQuaternary",iconBefore:d.Alert.Warning,iconBeforeFillIcon:"accentItemQuaternary"},accentPrimary:{fill:"accentPrimary",labelTextColor:"accentTextPrimary",descriptionTextColor:"accentTextPrimary",borderColor:"accentBorderQuaternary",iconAfter:d.Action.Close,iconAfterFillIcon:"accentItemPrimary",iconBefore:d.Alert.Warning,iconBeforeFillIcon:"accentItemPrimary"}},m={errorMutedPrimary:{fill:"errorTertiary",labelTextColor:"errorTextQuaternary",descriptionTextColor:"errorTextQuaternary",borderColor:"errorBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"errorItemQuaternary",iconBefore:d.Action.Block,iconBeforeFillIcon:"errorItemQuaternary"},errorPrimary:{fill:"errorPrimary",labelTextColor:"errorTextPrimary",descriptionTextColor:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconAfter:d.Action.Close,iconAfterFillIcon:"errorItemPrimary",iconBefore:d.Action.Block,iconBeforeFillIcon:"errorItemPrimary"}},y={infoMutedPrimary:{fill:"infoTertiary",labelTextColor:"infoTextSecondary",descriptionTextColor:"infoTextSecondary",borderColor:"infoBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"infoItemQuaternary",iconBefore:d.Alert.Warning,iconBeforeFillIcon:"infoItemQuaternary"},infoPrimary:{fill:"infoPrimary",labelTextColor:"infoTextPrimary",descriptionTextColor:"infoTextPrimary",borderColor:"infoBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"infoItemPrimary",iconBefore:d.Alert.Warning,iconBeforeFillIcon:"infoItemPrimary"}},p={...f,...{warningMutedPrimary:{fill:"warningTertiary",labelTextColor:"warningTextSecondary",descriptionTextColor:"warningTextSecondary",borderColor:"warningBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"warningItemSecondary",iconBefore:d.Alert.WarningTriangle,iconBeforeFillIcon:"warningItemSecondary"},warningPrimary:{fill:"warningPrimary",labelTextColor:"warningTextPrimary",descriptionTextColor:"warningTextPrimary",borderColor:"warningBorderSecondary",iconAfter:d.Action.Close,iconAfterFillIcon:"warningItemPrimary",iconBefore:d.Alert.WarningTriangle,iconBeforeFillIcon:"warningItemPrimary"}},...m,...y,solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},sizeL:{size:"l",labelTextSize:"s",labelTextWeight:"600",descriptionTextSize:"s",iconAfterSize:"16",iconBeforeSize:"16"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded",shapeStrength:"2m"},roundedL:{shape:"rounded",shapeStrength:"1_5m"},roundedM:{shape:"rounded",shapeStrength:"1m"},roundedS:{shape:"rounded",shapeStrength:"0_5m"}},T={appearance:p,setAppearance:r=>{T.appearance=r}};function x(d){const{appearance:f,className:m,dataTestId:y,dataTour:p,label:x,description:C,isSkeleton:g,children:u}=d,A=t(f,T),I=a(d,A),{fillClass:S,labelTextColor:h,labelTextSize:B,labelTextWeight:P,descriptionTextColor:b,descriptionTextSize:F,borderColorClass:w,iconAfter:z,iconAfterFill:_,iconAfterFillIcon:Q,iconAfterSize:W,iconAfterSrc:k,iconBefore:v,iconBeforeFill:M,iconBeforeFillIcon:$,iconBeforeSize:j,iconBeforeSrc:L,shapeClass:N,shapeStrengthClass:X,sizeClass:q}=I,{styles:D}=l(d),[E,G]=o(!0);return r(i,{children:E&&e("div",{className:n(m,"warning",S&&`fill_${S}`,q&&`warning_size_${q}`,w&&`border-color_${w}`,N&&`shape_${N}`,X&&`shape-strength_${X}`,g&&"skeleton"),"data-testid":y,"data-tour":p,style:D,children:[(v||L)&&r(c,{fill:M,iconFill:$,iconSize:j,imageSrc:L,SvgImage:v}),e("div",{className:"warning__content",children:[x&&r(s,{size:B,textColor:h,textWeight:P,children:x}),C&&r(s,{size:F,textColor:b,children:C}),u]}),(z||k)&&r(c,{fill:_,iconFill:Q,iconSize:W,imageSrc:k,SvgImage:z,onClick:()=>G(!1)})]})})}export{x as Warning,p as warningAppearance,T as warningConfig};

package/dist/css/mediaqueries/mediaqueries.css

@@ -0,0 +1,78 @@
+:root {
+  --mobile-tiny: 15em; /* 240px */
+  --mobile-small: 20em; /* 320px */
+  --mobile-medium: 23.435em; /* 375px */
+  --mobile-large: 25.875em; /* 414px */
+  --mobile-extra-large: 30em; /* 480px */
+  --mobile-super-extra-large: 40em; /* 640px */
+  --tablet: 48em; /* 768px */
+  --desktop-small: 60em; /* 960px */
+  --desktop-medium: 64em; /* 1024px */
+  --desktop-normal: 72.5em; /* 1160px */
+  --desktop-large: 80em; /* 1280px */
+  --desktop-extra-large: 90em; /* 1441px */
+  --desktop-super-extra-large: 120em; /* 1920px */
+  --desktop-huge: 160em; /* 2560px */
+}
+
+@custom-media --warning (width <= 15em);
+
+@custom-media --mobile (width >= 15em) and (width < 48em);
+
+@custom-media --mobile-tiny (width >= 15em) and (width < 20em);
+
+@custom-media --mobile-small (width >= 20em) and (width < 23.435em);
+
+@custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
+
+@custom-media --mobile-standart (width >= 25.875em) and (width < 30em);
+
+@custom-media --mobile-large (width >= 30em) and (width < 40em);
+
+@custom-media --mobile-huge (width >= 40em) and (width < 48em);
+
+@custom-media --tablet (width >= 48em) and (width < 60em);
+
+@custom-media --tablet-small (width >= 40em) and (width < 48em);
+
+@custom-media --tablet-large (width >= 48em) and (width < 60em);
+
+@custom-media --desktop (width >= 60em);
+
+@custom-media --desktop-small (width >= 60em) and (width < 64em);
+
+@custom-media --desktop-medium (width >= 64em) and (width < 72.5em);
+
+@custom-media --desktop-normal (width >= 72.5em) and (width < 80em);
+
+@custom-media --desktop-standart (width >= 80em) and (width < 90em);
+
+@custom-media --desktop-large (width >= 90em) and (width < 120em);
+
+@custom-media --desktop-huge (width >= 120em) and (width < 160em);
+
+@custom-media --desktop-super-huge (width >= 160em);
+
+@custom-media --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
+
+@custom-media --portrait (orientation: portrait) and (width >= 15em) and (width < 60em);
+
+@custom-media --touch (hover: none) and (pointer: coarse);
+
+@custom-media --stylus (hover: none) and (pointer: fine);
+
+@custom-media --console (hover: hover) and (pointer: coarse);
+
+@custom-media --mouse (hover: hover) and (pointer: fine);
+
+@custom-media --tiny-viewport (width <= 1366px) and (height <= 720px);
+
+@custom-media --small-viewport (width >= 1366px) and (height < 768px);
+
+@custom-media --medium-viewport (width >= 1440px) and (height < 900px);
+
+@custom-media --large-viewport (width >= 1440px) and (height < 900px);
+
+@custom-media --huge-viewport (width >= 1600px) and (height < 900px);
+
+@custom-media --super-huge-viewport (width >= 1920px) and (height >= 1080px);

package/dist/css/mixins/mixin_animation.css

@@ -0,0 +1,8 @@
+@define-mixin disableAnimation {
+  transform: translate(0, 0);
+  opacity: 100%;
+}
+
+@define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
+  transition: $type $time $ease;
+}

package/dist/css/mixins/mixin_dark-light.css

@@ -0,0 +1,16 @@
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}

package/dist/css/mixins/mixin_elevation.css

@@ -0,0 +1,31 @@
+@define-mixin elevation-1 {
+  box-shadow: var(--elevation-1);
+}
+
+@define-mixin elevation-2 {
+  box-shadow: var(--elevation-2);
+}
+
+@define-mixin elevation-4 {
+  box-shadow: var(--elevation-4);
+}
+
+@define-mixin elevation-6 {
+  box-shadow: var(--elevation-6);
+}
+
+@define-mixin elevation-8 {
+  box-shadow: var(--elevation-8);
+}
+
+@define-mixin elevation-12 {
+  box-shadow: var(--elevation-12);
+}
+
+@define-mixin elevation-16 {
+  box-shadow: var(--elevation-16);
+}
+
+@define-mixin elevation-24 {
+  box-shadow: var(--elevation-24);
+}

package/dist/css/mixins/mixin_fill-gradient.css

@@ -0,0 +1,47 @@
+@define-mixin fill-gradient_surface-primary-left {
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-top {
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-right {
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-bottom {
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-diagonal-left {
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}
+
+@define-mixin fill-gradient_surface-primary-diagonal-right {
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
+}

package/dist/css/mixins/mixin_typography.css

@@ -0,0 +1,350 @@
+@define-mixin h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h1-min), var(--typography-h1-max),
+    $minLetterSpacing, var(--typography-h1-min-line-height),
+    var(--typography-h1-max-line-height), $maxLetterSpacing,
+    var(--typography-h1-font);
+}
+
+@define-mixin h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h2-min), var(--typography-h2-max),
+    $minLetterSpacing, var(--typography-h2-min-line-height),
+    var(--typography-h2-max-line-height), $maxLetterSpacing,
+    var(--typography-h2-font);
+}
+
+@define-mixin h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h3-min), var(--typography-h3-max),
+    $minLetterSpacing, var(--typography-h3-min-line-height),
+    var(--typography-h3-max-line-height), $maxLetterSpacing,
+    var(--typography-h3-font);
+}
+
+@define-mixin h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h4-min), var(--typography-h4-max),
+    $minLetterSpacing, var(--typography-h4-min-line-height),
+    var(--typography-h4-max-line-height), $maxLetterSpacing,
+    var(--typography-h4-font);
+}
+
+@define-mixin h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h5-min), var(--typography-h5-max),
+    $minLetterSpacing, var(--typography-h5-min-line-height),
+    var(--typography-h5-max-line-height), $maxLetterSpacing,
+    var(--typography-h5-font);
+}
+
+@define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-h6-min), var(--typography-h6-max),
+    $minLetterSpacing, var(--typography-h6-min-line-height),
+    var(--typography-h6-max-line-height), $maxLetterSpacing,
+    var(--typography-h6-font);
+}
+
+@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero1-min), var(--typography-hero1-max),
+    $minLetterSpacing, var(--typography-hero1-min-line-height),
+    var(--typography-hero1-max-line-height), $maxLetterSpacing,
+    var(--typography-hero1-font);
+}
+
+@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero2-min), var(--typography-hero2-max),
+    $minLetterSpacing, var(--typography-hero2-min-line-height),
+    var(--typography-hero2-max-line-height), $maxLetterSpacing,
+    var(--typography-hero2-font);
+}
+
+@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero3-min), var(--typography-hero3-max),
+    $minLetterSpacing, var(--typography-hero3-min-line-height),
+    var(--typography-hero3-max-line-height), $maxLetterSpacing,
+    var(--typography-hero3-font);
+}
+
+@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero4-min), var(--typography-hero4-max),
+    $minLetterSpacing, var(--typography-hero4-min-line-height),
+    var(--typography-hero4-max-line-height), $maxLetterSpacing,
+    var(--typography-hero4-font);
+}
+
+@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero5-min), var(--typography-hero5-max),
+    $minLetterSpacing, var(--typography-hero5-min-line-height),
+    var(--typography-hero5-max-line-height), $maxLetterSpacing,
+    var(--typography-hero5-font);
+}
+
+@define-mixin hero_h6 $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero6-min), var(--typography-hero6-max),
+    $minLetterSpacing, var(--typography-hero6-min-line-height),
+    var(--typography-hero6-max-line-height), $maxLetterSpacing,
+    var(--typography-hero6-font);
+}
+
+@define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-p-min), var(--typography-p-max),
+    $minLetterSpacing, var(--typography-p-min-line-height),
+    var(--typography-p-max-line-height), $maxLetterSpacing,
+    var(--typography-p-font);
+}
+
+@define-mixin text-xxl $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxl-min),
+    var(--typography-text-xxl-max), $minLetterSpacing,
+    var(--typography-text-xxl-min-line-height),
+    var(--typography-text-xxl-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xxl-font);
+}
+
+@define-mixin text-xl $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xl-min),
+    var(--typography-text-xl-max), $minLetterSpacing,
+    var(--typography-text-xl-min-line-height),
+    var(--typography-text-xl-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xl-font);
+}
+
+@define-mixin text-l $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-l-min),
+    var(--typography-text-l-max), $minLetterSpacing,
+    var(--typography-text-l-min-line-height),
+    var(--typography-text-l-max-line-height), $maxLetterSpacing,
+    var(--typography-text-l-font);
+}
+
+@define-mixin text-m $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-m-min),
+    var(--typography-text-m-max), $minLetterSpacing,
+    var(--typography-text-m-min-line-height),
+    var(--typography-text-m-max-line-height), $maxLetterSpacing,
+    var(--typography-text-m-font);
+}
+
+@define-mixin text-s $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-s-min),
+    var(--typography-text-s-max), $minLetterSpacing,
+    var(--typography-text-s-min-line-height),
+    var(--typography-text-s-max-line-height), $maxLetterSpacing,
+    var(--typography-text-s-font);
+}
+
+@define-mixin text-xs $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xs-min),
+    var(--typography-text-xs-max), $minLetterSpacing,
+    var(--typography-text-xs-min-line-height),
+    var(--typography-text-xs-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xs-font);
+}
+
+@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0,
+  $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-text-xxs-min),
+    var(--typography-text-xxs-max), $minLetterSpacing,
+    var(--typography-text-xxs-min-line-height),
+    var(--typography-text-xxs-max-line-height), $maxLetterSpacing,
+    var(--typography-text-xxs-font);
+}
+
+@define-mixin email-h1 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h1),
+    var(--typography-email-h1-line-height), var(--font-email);
+}
+
+@define-mixin email-h2 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h2),
+    var(--typography-email-h2-line-height), var(--font-email);
+}
+
+@define-mixin email-h3 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h3),
+    var(--typography-email-h3-line-height), var(--font-email);
+}
+
+@define-mixin email-h4 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h4),
+    var(--typography-email-h4-line-height), var(--font-email);
+}
+
+@define-mixin email-h5 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h5),
+    var(--typography-email-h5-line-height), var(--font-email);
+}
+
+@define-mixin email-h6 $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-h6),
+    var(--typography-email-h6-line-height), var(--font-email);
+}
+
+@define-mixin email-p $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-p),
+    var(--typography-email-p-line-height), var(--font-email);
+}
+
+@define-mixin email-text-xxl $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-xxl),
+    var(--typography-email-text-xxl-line-height), var(--font-email);
+}
+
+@define-mixin email-text-xl $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-xl),
+    var(--typography-email-text-xl-line-height), var(--font-email);
+}
+
+@define-mixin email-text-l $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-l),
+    var(--typography-email-text-l-line-height), var(--font-email);
+}
+
+@define-mixin email-text-m $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-m),
+    var(--typography-email-text-m-line-height), var(--font-email);
+}
+
+@define-mixin email-text-s $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-s),
+    var(--typography-email-text-s-line-height), var(--font-email);
+}
+
+@define-mixin email-text-xs $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-xs),
+    var(--typographyemail-text-xs-line-height), var(--font-email);
+}
+
+@define-mixin email-text-xxs $weight: normal {
+  @mixin font-fixed $weight, var(--typography-email-text-xxs),
+    var(--typography-email-text-xxs-line-height), var(--font-email);
+}
+
+@define-mixin text-gradient-primary {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    hsl(266, 100%, 64%, 1) 0%,
+    hsl(213, 79%, 68%, 1) 50%
+  );
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+@define-mixin h1-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h1-print),
+    var(--typography-h1-line-height-print), var(--typography-h1-font-print);
+}
+
+@define-mixin h2-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h2-print),
+    var(--typography-h2-line-height-print), var(--typography-h2-font-print);
+}
+
+@define-mixin h3-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h3-print),
+    var(--typography-h3-line-height-print), var(--typography-h3-font-print);
+}
+
+@define-mixin h4-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h4-print),
+    var(--typography-h4-line-height-print), var(--typography-h4-font-print);
+}
+
+@define-mixin h5-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h5-print),
+    var(--typography-h5-line-height-print), var(--typography-h5-font-print);
+}
+
+@define-mixin h6-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-h6-print),
+    var(--typography-h6-line-height-print), var(--typography-h6-font-print);
+}
+
+@define-mixin hero_h1-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero1-print),
+    var(--typography-hero1-line-height-print),
+    var(--typography-hero1-font-print);
+}
+
+@define-mixin hero_h2-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero2-print),
+    var(--typography-hero2-line-height-print),
+    var(--typography-hero2-font-print);
+}
+
+@define-mixin hero_h3-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero3-print),
+    var(--typography-hero3-line-height-print),
+    var(--typography-hero3-font-print);
+}
+
+@define-mixin hero_h4-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero4-print),
+    var(--typography-hero4-line-height-print),
+    var(--typography-hero4-font-print);
+}
+
+@define-mixin hero_h5-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero5-print),
+    var(--typography-hero5-line-height-print),
+    var(--typography-hero5-font-print);
+}
+
+@define-mixin hero_h6-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-hero6-print),
+    var(--typography-hero6-line-height-print),
+    var(--typography-hero6-font-print);
+}
+
+@define-mixin p-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-p-print),
+    var(--typography-p-line-height-print), var(--typography-p-font-print);
+}
+
+@define-mixin text-xxl-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xxl-print),
+    var(--typography-text-xxl-line-height-print),
+    var(--typography-text-xxl-font-print);
+}
+
+@define-mixin text-xl-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xl-print),
+    var(--typography-text-xl-line-height-print),
+    var(--typography-text-xl-font-print);
+}
+
+@define-mixin text-l-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-l-print),
+    var(--typography-text-l-line-height-print),
+    var(--typography-text-l-font-print);
+}
+
+@define-mixin text-m-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-m-print),
+    var(--typography-text-m-line-height-print),
+    var(--typography-text-m-font-print);
+}
+
+@define-mixin text-s-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-s-print),
+    var(--typography-text-s-line-height-print),
+    var(--typography-text-s-font-print);
+}
+
+@define-mixin text-xs-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xs-print),
+    var(--typography-text-xs-line-height-print),
+    var(--typography-text-xs-font-print);
+}
+
+@define-mixin text-xxs-print $weight: normal {
+  @mixin font-fixed $weight, var(--typography-text-xxs-print),
+    var(--typography-text-xxs-line-height-print),
+    var(--typography-text-xxs-font-print);
+}

package/dist/css/mixins/mixin_utils.css

@@ -0,0 +1,54 @@
+/* stylelint-disable declaration-property-value-keyword-no-deprecated */
+@define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing,
+  $minLineHeight, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+  font-size: fluid(
+    $minFontSize,
+    $maxFontSize,
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
+  );
+  font-weight: $fontWeight;
+  line-height: fluid(
+    $minLineHeight,
+    $maxLineHeight,
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
+  );
+  letter-spacing: fluid(
+    $minLetterSpacing,
+    $maxLetterSpacing,
+    var(--typography-min-viewport),
+    var(--typography-max-viewport)
+  );
+  font-family: $fontFamily;
+}
+@define-mixin font-fixed $weight, $size, $line, $family {
+  font-size: $size;
+  font-weight: $weight;
+  font-family: $family;
+  line-height: $line;
+}
+@define-mixin word-wrap {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+}
+@define-mixin truncate-text $font-size: 16px, $line-height: 1.4,
+  $lines-to-show: 2 {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines-to-show;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  text-overflow: ellipsis;
+  visibility: visible;
+  @supports not (-webkit-line-clamp: $lines-to-show) {
+    max-height: $font-size * $line-height * $lines-to-show;
+    line-height: $line-height;
+    display: block;
+  }
+}