@consta/uikit 4.9.0 → 4.10.0

package/__internal__/src/components/Avatar/Avatar.css

@@ -1 +1 @@
-.Avatar{--avatar-color:transparent;--avatar-color-0:#f9a825;--avatar-color-1:#f56b00;--avatar-color-2:#c62828;--avatar-color-3:#c2185b;--avatar-color-4:#e92064;--avatar-color-5:#911fa2;--avatar-color-6:#9010d1;--avatar-color-7:#7448dd;--avatar-color-8:#3e3acb;--avatar-color-9:#2044d5;--avatar-color-10:#016bdc;--avatar-color-11:#2196f3;--avatar-color-12:#00bcd4;--avatar-color-13:#0088a3;--avatar-color-14:#008f7c;--avatar-color-15:#00a352;--avatar-color-16:#1abc1a;--avatar-color-17:#6fb80a;background:linear-gradient(hsla(0,0%,100%,.24),hsla(0,0%,100%,0)),linear-gradient(var(--avatar-color),var(--avatar-color));color:#fff;font-size:var(--avatar-font-size);font-weight:var(--font-weight-text-semibold);height:var(--avatar-size);letter-spacing:.1em;line-height:var(--avatar-size);overflow:hidden;text-align:center;width:var(--avatar-size)}.Avatar_size_xs{--avatar-size:20px;--avatar-font-size:6px}.Avatar_size_s{--avatar-size:24px;--avatar-font-size:8px}.Avatar_size_m{--avatar-size:32px;--avatar-font-size:10px}.Avatar_size_l{--avatar-size:40px;--avatar-font-size:14px}.Avatar_form_round{border-radius:50%}.Avatar_form_brick{border-radius:0}.Avatar_form_default{border-radius:var(--control-radius)}.Avatar-Image{height:100%;width:100%}
+.Avatar{--avatar-color:transparent;--avatar-color-0:#f9a825;--avatar-color-1:#f56b00;--avatar-color-2:#c62828;--avatar-color-3:#c2185b;--avatar-color-4:#e92064;--avatar-color-5:#911fa2;--avatar-color-6:#9010d1;--avatar-color-7:#7448dd;--avatar-color-8:#3e3acb;--avatar-color-9:#2044d5;--avatar-color-10:#016bdc;--avatar-color-11:#2196f3;--avatar-color-12:#00bcd4;--avatar-color-13:#0088a3;--avatar-color-14:#008f7c;--avatar-color-15:#00a352;--avatar-color-16:#1abc1a;--avatar-color-17:#6fb80a;--avatar-color-18:#70788b;background:linear-gradient(hsla(0,0%,100%,.24),hsla(0,0%,100%,0)),linear-gradient(var(--avatar-color),var(--avatar-color));color:#fff;filter:grayscale(0);font-size:var(--avatar-font-size);font-weight:var(--font-weight-text-semibold);height:var(--avatar-size);letter-spacing:.1em;line-height:var(--avatar-size);overflow:hidden;text-align:center;width:var(--avatar-size)}.Avatar_size_xs{--avatar-size:20px;--avatar-font-size:6px}.Avatar_size_s{--avatar-size:24px;--avatar-font-size:8px}.Avatar_size_m{--avatar-size:32px;--avatar-font-size:10px}.Avatar_size_l{--avatar-size:40px;--avatar-font-size:14px}.Avatar_form_round{border-radius:50%}.Avatar_form_brick{border-radius:0}.Avatar_form_default{border-radius:var(--control-radius)}.Avatar_monochrome{filter:grayscale(100%)}.Avatar-Image{height:100%;width:100%}

package/__internal__/src/components/Avatar/Avatar.d.ts

@@ -11,9 +11,10 @@ declare type Props = {
     size?: AvatarPropSize;
     form?: AvatarPropForm;
     children?: never;
+    monochrome?: boolean;
 };
 export declare const cnAvatar: import("@bem-react/classname").ClassNameFormatter;
-export declare const getColorIndexForName: (name: string | undefined, maxIndex?: number | undefined) => number;
+export declare const getColorIndexForName: (name: string | undefined, maxIndex?: number, monochrome?: boolean) => number;
 export declare const getInitialsForName: (name: string | undefined) => string;
 export declare const Avatar: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<Props, "div">;
 export {};

package/__internal__/src/components/Avatar/Avatar.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","className","size","form","url","name"];import"./Avatar.css";import React,{useMemo}from"react";import{cn}from"../../utils/bem";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";export var avatarPropSize=["m","s","xs","l"];export var avatarPropSizeDefault=avatarPropSize[0];export var avatarPropForm=["round","brick","default"];export var avatarPropFormDefault=avatarPropForm[0];export var cnAvatar=cn("Avatar");var MAX_COLOR_INDEX=17;function getRandomInt(a){return Math.floor(Math.random()*Math.floor(a))}export var getColorIndexForName=function(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:MAX_COLOR_INDEX,c=0;return c=a?a.split("").map(function(a){return a.charCodeAt(0)}).reduce(function(a,b){return a+b},0)%b:getRandomInt(b),c};export var getInitialsForName=function(a){if(!a)return"";var b=a.split(" "),c=b[0]?b[0][0]:"",d=b[1]?b[1][0]:"";return"".concat(c.toUpperCase()).concat(d.toUpperCase())};export var Avatar=forwardRefWithAs(function(a,b){var c=a.as,d=void 0===c?"div":c,e=a.className,f=a.size,g=void 0===f?avatarPropSizeDefault:f,h=a.form,i=void 0===h?avatarPropFormDefault:h,j=a.url,k=a.name,l=_objectWithoutProperties(a,_excluded),m=!!j,n=useMemo(function(){return getInitialsForName(k)},[k]),o=useMemo(function(){return getColorIndexForName(k)},[k]);return React.createElement(d,Object.assign({},l,{style:m?{}:{"--avatar-color":"var(--avatar-color-".concat(o,")")},className:cnAvatar({size:g,form:i},[e]),ref:b}),m&&React.createElement("img",{className:cnAvatar("Image"),src:j,alt:k}),!m&&n)});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","className","size","form","url","name","monochrome","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Avatar.css";import React,{useMemo}from"react";import{cn}from"../../utils/bem";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";export var avatarPropSize=["m","s","xs","l"];export var avatarPropSizeDefault=avatarPropSize[0];export var avatarPropForm=["round","brick","default"];export var avatarPropFormDefault=avatarPropForm[0];export var cnAvatar=cn("Avatar");var MAX_COLOR_INDEX=17,getRandomInt=function(a){return Math.floor(Math.random()*Math.floor(a))};export var getColorIndexForName=function(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:MAX_COLOR_INDEX,c=2<arguments.length?arguments[2]:void 0;if(c)return 18;var d=0;return d=a?a.split("").map(function(a){return a.charCodeAt(0)}).reduce(function(a,b){return a+b},0)%b:getRandomInt(b),d};export var getInitialsForName=function(a){if(!a)return"";var b=a.split(" "),c=b[0]?b[0][0]:"",d=b[1]?b[1][0]:"";return"".concat(c.toUpperCase()).concat(d.toUpperCase())};export var Avatar=forwardRefWithAs(function(a,b){var c=a.as,d=void 0===c?"div":c,e=a.className,f=a.size,g=void 0===f?avatarPropSizeDefault:f,h=a.form,i=void 0===h?avatarPropFormDefault:h,j=a.url,k=a.name,l=a.monochrome,m=a.style,n=_objectWithoutProperties(a,_excluded),o=useMemo(function(){return getInitialsForName(k)},[k]),p=useMemo(function(){return getColorIndexForName(k,MAX_COLOR_INDEX,l)},[k,l]);return React.createElement(d,Object.assign({},n,{style:j?m:_objectSpread(_objectSpread({},m),{},{"--avatar-color":"var(--avatar-color-".concat(p,")")}),className:cnAvatar({size:g,form:i,monochrome:j?l:void 0},[e]),ref:b}),j&&React.createElement("img",{className:cnAvatar("Image"),src:j,alt:k}),!j&&o)});
 //# sourceMappingURL=Avatar.js.map

package/__internal__/src/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["React","useMemo","cn","forwardRefWithAs","avatarPropSize","avatarPropSizeDefault","avatarPropForm","avatarPropFormDefault","cnAvatar","MAX_COLOR_INDEX","getRandomInt","max","Math","floor","random","getColorIndexForName","name","maxIndex","index","split","map","c","charCodeAt","reduce","acc","code","getInitialsForName","words","firstLetter","secondLatter","toUpperCase","Avatar","props","ref","as","className","size","form","url","otherProps","showImage","initials","colorIndex"],"sources":["../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import './Avatar.css';\n\nimport React, { useMemo } from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';\n\nexport const avatarPropSize = ['m', 's', 'xs', 'l'] as const;\nexport type AvatarPropSize = typeof avatarPropSize[number];\nexport const avatarPropSizeDefault: AvatarPropSize = avatarPropSize[0];\n\nexport const avatarPropForm = ['round', 'brick', 'default'] as const;\nexport type AvatarPropForm = typeof avatarPropForm[number];\nexport const avatarPropFormDefault: AvatarPropForm = avatarPropForm[0];\n\ntype Props = {\n  url?: string;\n  name?: string;\n  size?: AvatarPropSize;\n  form?: AvatarPropForm;\n  children?: never;\n};\n\nexport const cnAvatar = cn('Avatar');\n\nconst MAX_COLOR_INDEX = 17;\n\nfunction getRandomInt(max: number) {\n  return Math.floor(Math.random() * Math.floor(max));\n}\n\nexport const getColorIndexForName = (\n  name: string | undefined,\n  maxIndex: number | undefined = MAX_COLOR_INDEX,\n) => {\n  let index = 0;\n\n  if (name) {\n    index =\n      name\n        .split('')\n        .map((c) => c.charCodeAt(0))\n        .reduce((acc, code) => acc + code, 0) % maxIndex;\n  } else {\n    index = getRandomInt(maxIndex);\n  }\n\n  return index;\n};\n\nexport const getInitialsForName = (name: string | undefined) => {\n  if (!name) {\n    return '';\n  }\n\n  const words = name.split(' ');\n  const firstLetter = words[0] ? words[0][0] : '';\n  const secondLatter = words[1] ? words[1][0] : '';\n\n  return `${firstLetter.toUpperCase()}${secondLatter.toUpperCase()}`;\n};\n\nexport const Avatar = forwardRefWithAs<Props>((props, ref) => {\n  const {\n    as = 'div',\n    className,\n    size = avatarPropSizeDefault,\n    form = avatarPropFormDefault,\n    url,\n    name,\n    ...otherProps\n  } = props;\n  const Tag = as as string;\n  const showImage = Boolean(url);\n  const initials = useMemo(() => getInitialsForName(name), [name]);\n  const colorIndex = useMemo(() => getColorIndexForName(name), [name]);\n\n  return (\n    <Tag\n      {...otherProps}\n      style={\n        !showImage\n          ? { '--avatar-color': `var(--avatar-color-${colorIndex})` }\n          : {}\n      }\n      className={cnAvatar({ size, form }, [className])}\n      ref={ref}\n    >\n      {showImage && <img className={cnAvatar('Image')} src={url} alt={name} />}\n      {!showImage && initials}\n    </Tag>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","names":["React","useMemo","cn","forwardRefWithAs","avatarPropSize","avatarPropSizeDefault","avatarPropForm","avatarPropFormDefault","cnAvatar","MAX_COLOR_INDEX","getRandomInt","max","Math","floor","random","getColorIndexForName","name","maxIndex","monochrome","index","split","map","c","charCodeAt","reduce","acc","code","getInitialsForName","words","firstLetter","secondLatter","toUpperCase","Avatar","props","ref","as","className","size","form","url","style","otherProps","initials","colorIndex"],"sources":["../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import './Avatar.css';\n\nimport React, { useMemo } from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';\n\nexport const avatarPropSize = ['m', 's', 'xs', 'l'] as const;\nexport type AvatarPropSize = typeof avatarPropSize[number];\nexport const avatarPropSizeDefault: AvatarPropSize = avatarPropSize[0];\n\nexport const avatarPropForm = ['round', 'brick', 'default'] as const;\nexport type AvatarPropForm = typeof avatarPropForm[number];\nexport const avatarPropFormDefault: AvatarPropForm = avatarPropForm[0];\n\ntype Props = {\n  url?: string;\n  name?: string;\n  size?: AvatarPropSize;\n  form?: AvatarPropForm;\n  children?: never;\n  monochrome?: boolean;\n};\n\nexport const cnAvatar = cn('Avatar');\n\nconst MAX_COLOR_INDEX = 17;\n\nconst getRandomInt = (max: number) => {\n  return Math.floor(Math.random() * Math.floor(max));\n};\n\nexport const getColorIndexForName = (\n  name: string | undefined,\n  maxIndex: number = MAX_COLOR_INDEX,\n  monochrome?: boolean,\n) => {\n  if (monochrome) {\n    return MAX_COLOR_INDEX + 1;\n  }\n\n  let index = 0;\n\n  if (name) {\n    index =\n      name\n        .split('')\n        .map((c) => c.charCodeAt(0))\n        .reduce((acc, code) => acc + code, 0) % maxIndex;\n  } else {\n    index = getRandomInt(maxIndex);\n  }\n\n  return index;\n};\n\nexport const getInitialsForName = (name: string | undefined) => {\n  if (!name) {\n    return '';\n  }\n\n  const words = name.split(' ');\n  const firstLetter = words[0] ? words[0][0] : '';\n  const secondLatter = words[1] ? words[1][0] : '';\n\n  return `${firstLetter.toUpperCase()}${secondLatter.toUpperCase()}`;\n};\n\nexport const Avatar = forwardRefWithAs<Props>((props, ref) => {\n  const {\n    as = 'div',\n    className,\n    size = avatarPropSizeDefault,\n    form = avatarPropFormDefault,\n    url,\n    name,\n    monochrome,\n    style,\n    ...otherProps\n  } = props;\n  const Tag = as as string;\n  const initials = useMemo(() => getInitialsForName(name), [name]);\n  const colorIndex = useMemo(\n    () => getColorIndexForName(name, MAX_COLOR_INDEX, monochrome),\n    [name, monochrome],\n  );\n\n  return (\n    <Tag\n      {...otherProps}\n      style={\n        !url\n          ? { ...style, '--avatar-color': `var(--avatar-color-${colorIndex})` }\n          : style\n      }\n      className={cnAvatar(\n        { size, form, monochrome: url ? monochrome : undefined },\n        [className],\n      )}\n      ref={ref}\n    >\n      {url && <img className={cnAvatar('Image')} src={url} alt={name} />}\n      {!url && initials}\n    </Tag>\n  );\n});\n"],"mappings":"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"}

package/__internal__/src/components/AvatarGroup/AvatarGroup.css

@@ -1 +1 @@
-.AvatarGroup{display:flex;width:100%}.AvatarGroup_size_xs{--avatar-group-margin:var(--space-3xs)}.AvatarGroup_size_s{--avatar-group-margin:var(--space-2xs)}.AvatarGroup_size_m{--avatar-group-margin:calc(var(--space-3xs) + var(--space-2xs))}.AvatarGroup_size_l{--avatar-group-margin:var(--space-xs)}.AvatarGroup>.Avatar{box-shadow:0 0 0 var(--space-3xs) var(--color-bg-default);flex:none}.AvatarGroup>.Avatar:not(:first-child){margin-left:calc(var(--avatar-group-margin)*-1)}.AvatarGroup-Avatar_hidden.Avatar,.AvatarGroup-More_hidden.Avatar{left:-300vw;position:absolute;visibility:hidden}.AvatarGroup-More.Avatar{--avatar-color:var(--color-bg-system);border:none;color:var(--color-typo-primary)}
+.AvatarGroup{display:flex;flex-direction:row-reverse;justify-content:flex-end;width:100%}.AvatarGroup_size_xs{--avatar-group-margin:var(--space-3xs)}.AvatarGroup_size_s{--avatar-group-margin:var(--space-2xs)}.AvatarGroup_size_m{--avatar-group-margin:calc(var(--space-3xs) + var(--space-2xs))}.AvatarGroup_size_l{--avatar-group-margin:var(--space-xs)}.AvatarGroup>.Avatar{box-shadow:0 0 0 var(--space-3xs) var(--color-bg-default);flex:none}.AvatarGroup>.Avatar:not(:last-child){margin-left:calc(var(--avatar-group-margin)*-1)}.AvatarGroup-Avatar_hidden.Avatar,.AvatarGroup-More_hidden.Avatar{left:-300vw;pointer-events:none;position:absolute;visibility:hidden}.AvatarGroup-More.Avatar{--avatar-color:var(--color-bg-system);border:none;color:var(--color-typo-primary)}

package/__internal__/src/components/AvatarGroup/AvatarGroup.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","form","size","visibleCount","getItemName","getItemUrl"];import"./AvatarGroup.css";import React,{forwardRef}from"react";import{useForkRef}from"../../hooks/useForkRef";import{getHiddenCount,useHideElementsInLine}from"../../hooks/useHideElementsInLineCanary";import{cn}from"../../utils/bem";import{Avatar,avatarPropFormDefault,cnAvatar}from"../Avatar/Avatar";import{withDefaultGetters}from"./helpers";import{avatarGroupPropSizeDefault}from"./types";var cnAvatarGroup=cn("AvatarGroup"),AvatarGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=void 0===d?[]:d,f=c.form,g=void 0===f?avatarPropFormDefault:f,h=c.size,i=void 0===h?avatarGroupPropSizeDefault:h,j=c.visibleCount,k=void 0===j?4:j,l=c.getItemName,m=c.getItemUrl,n=_objectWithoutProperties(c,_excluded),o=e.length+1,p=useHideElementsInLine(o,o-1,0,[k]),q=p.elementsRefs,r=p.parentRef,s=p.visibleMap,t="auto"===k,u=t?e:e.slice(0,k);return React.createElement("div",Object.assign({className:cnAvatarGroup({size:i}),ref:useForkRef([r,b])},n),u.map(function(a,b){return React.createElement(Avatar,{key:cnAvatarGroup({index:b}),url:m(a),name:l(a),className:cnAvatarGroup("Avatar",{hidden:!s[b]&&t}),size:i,form:g,ref:q[b]})}),(t||e.length>k)&&React.createElement("div",{className:cnAvatar({size:i,form:g},[cnAvatarGroup("More",{hidden:!s[o-1]&&t})]),ref:q[o-1]},"+".concat(t?getHiddenCount(s):e.length-k)))};export var AvatarGroup=forwardRef(AvatarGroupRender);export*from"./types";
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","form","size","visibleCount","getItemName","getItemUrl","monochrome"];import"./AvatarGroup.css";import React,{forwardRef}from"react";import{useForkRef}from"../../hooks/useForkRef";import{getHiddenCount,useHideElementsInLine}from"../../hooks/useHideElementsInLineCanary";import{cn}from"../../utils/bem";import{Avatar,avatarPropFormDefault,cnAvatar}from"../Avatar/Avatar";import{withDefaultGetters}from"./helpers";import{avatarGroupPropSizeDefault}from"./types";var cnAvatarGroup=cn("AvatarGroup"),AvatarGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=void 0===d?[]:d,f=c.form,g=void 0===f?avatarPropFormDefault:f,h=c.size,i=void 0===h?avatarGroupPropSizeDefault:h,j=c.visibleCount,k=void 0===j?4:j,l=c.getItemName,m=c.getItemUrl,n=c.monochrome,o=_objectWithoutProperties(c,_excluded),p=e.length,q=useHideElementsInLine(p+1,0,0,[k]),r=q.elementsRefs,s=q.parentRef,t=q.visibleMap,u="auto"===k,v=u?_toConsumableArray(e).reverse():_toConsumableArray(e).slice(0,k).reverse();return React.createElement("div",Object.assign({className:cnAvatarGroup({size:i}),ref:useForkRef([s,b])},o),(u||p>k)&&React.createElement("div",{className:cnAvatar({size:i,form:g},[cnAvatarGroup("More",{hidden:!t[0]&&u})]),ref:r[0]},"+".concat(u?getHiddenCount(t):p-k)),v.map(function(a,b){return React.createElement(Avatar,{key:cnAvatarGroup({index:b}),url:m(a),name:l(a),className:cnAvatarGroup("Avatar",{hidden:!t[b+1]&&u}),size:i,form:g,ref:r[b+1],monochrome:n})}))};export var AvatarGroup=forwardRef(AvatarGroupRender);export*from"./types";
 //# sourceMappingURL=AvatarGroup.js.map

package/__internal__/src/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","forwardRef","useForkRef","getHiddenCount","useHideElementsInLine","cn","Avatar","avatarPropFormDefault","cnAvatar","withDefaultGetters","avatarGroupPropSizeDefault","cnAvatarGroup","AvatarGroupRender","props","ref","items","form","size","visibleCount","getItemName","getItemUrl","otherProps","elementsLength","length","elementsRefs","parentRef","visibleMap","autoMode","itemsForRender","slice","map","item","index","hidden","AvatarGroup"],"sources":["../../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import './AvatarGroup.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport {\n  getHiddenCount,\n  useHideElementsInLine,\n} from '##/hooks/useHideElementsInLineCanary';\n\nimport { cn } from '../../utils/bem';\nimport { Avatar, avatarPropFormDefault, cnAvatar } from '../Avatar/Avatar';\nimport { withDefaultGetters } from './helpers';\nimport {\n  AvatarGroupComponent,\n  AvatarGroupProps,\n  avatarGroupPropSizeDefault,\n} from './types';\n\nconst cnAvatarGroup = cn('AvatarGroup');\n\nconst AvatarGroupRender = (\n  props: AvatarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    items = [],\n    form = avatarPropFormDefault,\n    size = avatarGroupPropSizeDefault,\n    visibleCount = 4,\n    getItemName,\n    getItemUrl,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const elementsLength = items.length + 1;\n\n  const { elementsRefs, parentRef, visibleMap } = useHideElementsInLine(\n    elementsLength,\n    elementsLength - 1,\n    0,\n    [visibleCount],\n  );\n\n  const autoMode = visibleCount === 'auto';\n\n  const itemsForRender = autoMode ? items : items.slice(0, visibleCount);\n\n  return (\n    <div\n      className={cnAvatarGroup({ size })}\n      ref={useForkRef([parentRef, ref])}\n      {...otherProps}\n    >\n      {itemsForRender.map((item, index) => {\n        return (\n          <Avatar\n            key={cnAvatarGroup({ index })}\n            url={getItemUrl(item)}\n            name={getItemName(item)}\n            className={cnAvatarGroup('Avatar', {\n              hidden: !visibleMap[index] && autoMode,\n            })}\n            size={size}\n            form={form}\n            ref={elementsRefs[index]}\n          />\n        );\n      })}\n      {(autoMode || items.length > visibleCount) && (\n        <div\n          className={cnAvatar({ size, form }, [\n            cnAvatarGroup('More', {\n              hidden: !visibleMap[elementsLength - 1] && autoMode,\n            }),\n          ])}\n          ref={elementsRefs[elementsLength - 1]}\n        >\n          {`+${\n            autoMode ? getHiddenCount(visibleMap) : items.length - visibleCount\n          }`}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const AvatarGroup = forwardRef(\n  AvatarGroupRender,\n) as AvatarGroupComponent;\n\nexport * from './types';\n"],"mappings":"qKAAA,0BAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,UAAT,8BACA,OACEC,cADF,CAEEC,qBAFF,+CAKA,OAASC,EAAT,uBACA,OAASC,MAAT,CAAiBC,qBAAjB,CAAwCC,QAAxC,wBACA,OAASC,kBAAT,iBACA,OAGEC,0BAHF,e,GAMMC,cAAa,CAAGN,EAAE,CAAC,aAAD,C,CAElBO,iBAAiB,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGrB,OASCL,kBAAkB,CAACI,CAAD,CATnB,KAEDE,KAFC,CAEDA,CAFC,YAEO,EAFP,OAGDC,IAHC,CAGDA,CAHC,YAGMT,qBAHN,OAIDU,IAJC,CAIDA,CAJC,YAIMP,0BAJN,OAKDQ,YALC,CAKDA,CALC,YAKc,CALd,GAMDC,CANC,GAMDA,WANC,CAODC,CAPC,GAODA,UAPC,CAQEC,CARF,uCAWGC,CAAc,CAAGP,CAAK,CAACQ,MAAN,CAAe,CAXnC,GAa6CnB,qBAAqB,CACnEkB,CADmE,CAEnEA,CAAc,CAAG,CAFkD,CAGnE,CAHmE,CAInE,CAACJ,CAAD,CAJmE,CAblE,CAaKM,CAbL,GAaKA,YAbL,CAamBC,CAbnB,GAamBA,SAbnB,CAa8BC,CAb9B,GAa8BA,UAb9B,CAoBGC,CAAQ,CAAoB,MAAjB,GAAAT,CApBd,CAsBGU,CAAc,CAAGD,CAAQ,CAAGZ,CAAH,CAAWA,CAAK,CAACc,KAAN,CAAY,CAAZ,CAAeX,CAAf,CAtBvC,CAwBH,MACE,0CACE,SAAS,CAAEP,aAAa,CAAC,CAAEM,IAAI,CAAJA,CAAF,CAAD,CAD1B,CAEE,GAAG,CAAEf,UAAU,CAAC,CAACuB,CAAD,CAAYX,CAAZ,CAAD,CAFjB,EAGMO,CAHN,EAKGO,CAAc,CAACE,GAAf,CAAmB,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACnC,MACE,qBAAC,MAAD,EACE,GAAG,CAAErB,aAAa,CAAC,CAAEqB,KAAK,CAALA,CAAF,CAAD,CADpB,CAEE,GAAG,CAAEZ,CAAU,CAACW,CAAD,CAFjB,CAGE,IAAI,CAAEZ,CAAW,CAACY,CAAD,CAHnB,CAIE,SAAS,CAAEpB,aAAa,CAAC,QAAD,CAAW,CACjCsB,MAAM,CAAE,CAACP,CAAU,CAACM,CAAD,CAAX,EAAsBL,CADG,CAAX,CAJ1B,CAOE,IAAI,CAAEV,CAPR,CAQE,IAAI,CAAED,CARR,CASE,GAAG,CAAEQ,CAAY,CAACQ,CAAD,CATnB,EAYH,CAdA,CALH,CAoBG,CAACL,CAAQ,EAAIZ,CAAK,CAACQ,MAAN,CAAeL,CAA5B,GACC,2BACE,SAAS,CAAEV,QAAQ,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQD,IAAI,CAAJA,CAAR,CAAD,CAAiB,CAClCL,aAAa,CAAC,MAAD,CAAS,CACpBsB,MAAM,CAAE,CAACP,CAAU,CAACJ,CAAc,CAAG,CAAlB,CAAX,EAAmCK,CADvB,CAAT,CADqB,CAAjB,CADrB,CAME,GAAG,CAAEH,CAAY,CAACF,CAAc,CAAG,CAAlB,CANnB,aASIK,CAAQ,CAAGxB,cAAc,CAACuB,CAAD,CAAjB,CAAgCX,CAAK,CAACQ,MAAN,CAAeL,CAT3D,EArBJ,CAoCH,C,CAED,MAAO,IAAMgB,YAAW,CAAGjC,UAAU,CACnCW,iBADmC,CAA9B,CAIP"}
+{"version":3,"file":"AvatarGroup.js","names":["React","forwardRef","useForkRef","getHiddenCount","useHideElementsInLine","cn","Avatar","avatarPropFormDefault","cnAvatar","withDefaultGetters","avatarGroupPropSizeDefault","cnAvatarGroup","AvatarGroupRender","props","ref","items","form","size","visibleCount","getItemName","getItemUrl","monochrome","otherProps","itemLenght","length","elementsRefs","parentRef","visibleMap","autoMode","itemsForRender","reverse","slice","hidden","map","item","index","AvatarGroup"],"sources":["../../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import './AvatarGroup.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport {\n  getHiddenCount,\n  useHideElementsInLine,\n} from '##/hooks/useHideElementsInLineCanary';\n\nimport { cn } from '../../utils/bem';\nimport { Avatar, avatarPropFormDefault, cnAvatar } from '../Avatar/Avatar';\nimport { withDefaultGetters } from './helpers';\nimport {\n  AvatarGroupComponent,\n  AvatarGroupProps,\n  avatarGroupPropSizeDefault,\n} from './types';\n\nconst cnAvatarGroup = cn('AvatarGroup');\n\nconst AvatarGroupRender = (\n  props: AvatarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    items = [],\n    form = avatarPropFormDefault,\n    size = avatarGroupPropSizeDefault,\n    visibleCount = 4,\n    getItemName,\n    getItemUrl,\n    monochrome,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const itemLenght = items.length;\n  const elementsLength = itemLenght + 1;\n\n  const { elementsRefs, parentRef, visibleMap } = useHideElementsInLine(\n    elementsLength,\n    0,\n    0,\n    [visibleCount],\n  );\n\n  const autoMode = visibleCount === 'auto';\n\n  const itemsForRender = autoMode\n    ? [...items].reverse()\n    : [...items].slice(0, visibleCount).reverse();\n\n  return (\n    <div\n      className={cnAvatarGroup({ size })}\n      ref={useForkRef([parentRef, ref])}\n      {...otherProps}\n    >\n      {(autoMode || itemLenght > visibleCount) && (\n        <div\n          className={cnAvatar({ size, form }, [\n            cnAvatarGroup('More', {\n              hidden: !visibleMap[0] && autoMode,\n            }),\n          ])}\n          ref={elementsRefs[0]}\n        >\n          {`+${\n            autoMode ? getHiddenCount(visibleMap) : itemLenght - visibleCount\n          }`}\n        </div>\n      )}\n      {itemsForRender.map((item, index) => {\n        return (\n          <Avatar\n            key={cnAvatarGroup({ index })}\n            url={getItemUrl(item)}\n            name={getItemName(item)}\n            className={cnAvatarGroup('Avatar', {\n              hidden: !visibleMap[index + 1] && autoMode,\n            })}\n            size={size}\n            form={form}\n            ref={elementsRefs[index + 1]}\n            monochrome={monochrome}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport const AvatarGroup = forwardRef(\n  AvatarGroupRender,\n) as AvatarGroupComponent;\n\nexport * from './types';\n"],"mappings":"2PAAA,0BAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,UAAT,8BACA,OACEC,cADF,CAEEC,qBAFF,+CAKA,OAASC,EAAT,uBACA,OAASC,MAAT,CAAiBC,qBAAjB,CAAwCC,QAAxC,wBACA,OAASC,kBAAT,iBACA,OAGEC,0BAHF,e,GAMMC,cAAa,CAAGN,EAAE,CAAC,aAAD,C,CAElBO,iBAAiB,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGrB,OAUCL,kBAAkB,CAACI,CAAD,CAVnB,KAEDE,KAFC,CAEDA,CAFC,YAEO,EAFP,OAGDC,IAHC,CAGDA,CAHC,YAGMT,qBAHN,OAIDU,IAJC,CAIDA,CAJC,YAIMP,0BAJN,OAKDQ,YALC,CAKDA,CALC,YAKc,CALd,GAMDC,CANC,GAMDA,WANC,CAODC,CAPC,GAODA,UAPC,CAQDC,CARC,GAQDA,UARC,CASEC,CATF,uCAYGC,CAAU,CAAGR,CAAK,CAACS,MAZtB,GAe6CpB,qBAAqB,CAF9CmB,CAAU,CAAG,CAEiC,CAEnE,CAFmE,CAGnE,CAHmE,CAInE,CAACL,CAAD,CAJmE,CAflE,CAeKO,CAfL,GAeKA,YAfL,CAemBC,CAfnB,GAemBA,SAfnB,CAe8BC,CAf9B,GAe8BA,UAf9B,CAsBGC,CAAQ,CAAoB,MAAjB,GAAAV,CAtBd,CAwBGW,CAAc,CAAGD,CAAQ,CAC3B,mBAAIb,CAAJ,EAAWe,OAAX,EAD2B,CAE3B,mBAAIf,CAAJ,EAAWgB,KAAX,CAAiB,CAAjB,CAAoBb,CAApB,EAAkCY,OAAlC,EA1BD,CA4BH,MACE,0CACE,SAAS,CAAEnB,aAAa,CAAC,CAAEM,IAAI,CAAJA,CAAF,CAAD,CAD1B,CAEE,GAAG,CAAEf,UAAU,CAAC,CAACwB,CAAD,CAAYZ,CAAZ,CAAD,CAFjB,EAGMQ,CAHN,EAKG,CAACM,CAAQ,EAAIL,CAAU,CAAGL,CAA1B,GACC,2BACE,SAAS,CAAEV,QAAQ,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQD,IAAI,CAAJA,CAAR,CAAD,CAAiB,CAClCL,aAAa,CAAC,MAAD,CAAS,CACpBqB,MAAM,CAAE,CAACL,CAAU,CAAC,CAAD,CAAX,EAAkBC,CADN,CAAT,CADqB,CAAjB,CADrB,CAME,GAAG,CAAEH,CAAY,CAAC,CAAD,CANnB,aASIG,CAAQ,CAAGzB,cAAc,CAACwB,CAAD,CAAjB,CAAgCJ,CAAU,CAAGL,CATzD,EANJ,CAmBGW,CAAc,CAACI,GAAf,CAAmB,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACnC,MACE,qBAAC,MAAD,EACE,GAAG,CAAExB,aAAa,CAAC,CAAEwB,KAAK,CAALA,CAAF,CAAD,CADpB,CAEE,GAAG,CAAEf,CAAU,CAACc,CAAD,CAFjB,CAGE,IAAI,CAAEf,CAAW,CAACe,CAAD,CAHnB,CAIE,SAAS,CAAEvB,aAAa,CAAC,QAAD,CAAW,CACjCqB,MAAM,CAAE,CAACL,CAAU,CAACQ,CAAK,CAAG,CAAT,CAAX,EAA0BP,CADD,CAAX,CAJ1B,CAOE,IAAI,CAAEX,CAPR,CAQE,IAAI,CAAED,CARR,CASE,GAAG,CAAES,CAAY,CAACU,CAAK,CAAG,CAAT,CATnB,CAUE,UAAU,CAAEd,CAVd,EAaH,CAfA,CAnBH,CAqCH,C,CAED,MAAO,IAAMe,YAAW,CAAGnC,UAAU,CACnCW,iBADmC,CAA9B,CAIP"}

package/__internal__/src/components/AvatarGroup/helpers.d.ts

@@ -8,6 +8,7 @@ export declare function withDefaultGetters<ITEM>(props: AvatarGroupProps<ITEM>):
     visibleCount?: number | "auto" | undefined;
     size?: "m" | "s" | "xs" | "l" | undefined;
     form?: "default" | "round" | "brick" | undefined;
+    monochrome?: boolean | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;

package/__internal__/src/components/AvatarGroup/types.d.ts

@@ -20,5 +20,6 @@ export declare type AvatarGroupProps<ITEM = AvatarGroupDefaultItem> = PropsWithH
     getItemName?: AvatarGroupPropGetItemName<ITEM>;
     size?: AvatarGroupPropSize;
     form?: AvatarGroupPropForm;
+    monochrome?: boolean;
 }, HTMLDivElement>;
 export declare type AvatarGroupComponent = <ITEM = AvatarGroupDefaultItem>(props: AvatarGroupProps<ITEM>) => React.ReactElement | null;

package/__internal__/src/components/AvatarGroup/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["avatarGroupPropSize","avatarGroupPropSizeDefault","avatarGroupPropForm","avatarGroupPropFormDefault"],"sources":["../../../../../src/components/AvatarGroup/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const avatarGroupPropSize = ['m', 's', 'xs', 'l'] as const;\nexport type AvatarGroupPropSize = typeof avatarGroupPropSize[number];\nexport const avatarGroupPropSizeDefault: AvatarGroupPropSize =\n  avatarGroupPropSize[0];\n\nexport const avatarGroupPropForm = ['round', 'brick', 'default'] as const;\nexport type AvatarGroupPropForm = typeof avatarGroupPropForm[number];\nexport const avatarGroupPropFormDefault: AvatarGroupPropForm =\n  avatarGroupPropForm[0];\n\nexport type AvatarGroupDefaultItem = {\n  url?: string;\n  name?: string;\n};\n\nexport type AvatarGroupPropGetItemUrl<ITEM> = (\n  item: ITEM,\n) => string | undefined;\nexport type AvatarGroupPropGetItemName<ITEM> = (\n  item: ITEM,\n) => string | undefined;\n\nexport type AvatarGroupProps<ITEM = AvatarGroupDefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      children?: never;\n      items?: ITEM[];\n      visibleCount?: number | 'auto';\n      getItemUrl?: AvatarGroupPropGetItemUrl<ITEM>;\n      getItemName?: AvatarGroupPropGetItemName<ITEM>;\n      size?: AvatarGroupPropSize;\n      form?: AvatarGroupPropForm;\n    },\n    HTMLDivElement\n  >;\n\nexport type AvatarGroupComponent = <ITEM = AvatarGroupDefaultItem>(\n  props: AvatarGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAIA,MAAO,IAAMA,oBAAmB,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAiB,GAAjB,CAA5B,CAEP,MAAO,IAAMC,2BAA+C,CAC1DD,mBAAmB,CAAC,CAAD,CADd,CAGP,MAAO,IAAME,oBAAmB,CAAG,CAAC,OAAD,CAAU,OAAV,CAAmB,SAAnB,CAA5B,CAEP,MAAO,IAAMC,2BAA+C,CAC1DD,mBAAmB,CAAC,CAAD,CADd"}
+{"version":3,"file":"types.js","names":["avatarGroupPropSize","avatarGroupPropSizeDefault","avatarGroupPropForm","avatarGroupPropFormDefault"],"sources":["../../../../../src/components/AvatarGroup/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const avatarGroupPropSize = ['m', 's', 'xs', 'l'] as const;\nexport type AvatarGroupPropSize = typeof avatarGroupPropSize[number];\nexport const avatarGroupPropSizeDefault: AvatarGroupPropSize =\n  avatarGroupPropSize[0];\n\nexport const avatarGroupPropForm = ['round', 'brick', 'default'] as const;\nexport type AvatarGroupPropForm = typeof avatarGroupPropForm[number];\nexport const avatarGroupPropFormDefault: AvatarGroupPropForm =\n  avatarGroupPropForm[0];\n\nexport type AvatarGroupDefaultItem = {\n  url?: string;\n  name?: string;\n};\n\nexport type AvatarGroupPropGetItemUrl<ITEM> = (\n  item: ITEM,\n) => string | undefined;\nexport type AvatarGroupPropGetItemName<ITEM> = (\n  item: ITEM,\n) => string | undefined;\n\nexport type AvatarGroupProps<ITEM = AvatarGroupDefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      children?: never;\n      items?: ITEM[];\n      visibleCount?: number | 'auto';\n      getItemUrl?: AvatarGroupPropGetItemUrl<ITEM>;\n      getItemName?: AvatarGroupPropGetItemName<ITEM>;\n      size?: AvatarGroupPropSize;\n      form?: AvatarGroupPropForm;\n      monochrome?: boolean;\n    },\n    HTMLDivElement\n  >;\n\nexport type AvatarGroupComponent = <ITEM = AvatarGroupDefaultItem>(\n  props: AvatarGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAIA,MAAO,IAAMA,oBAAmB,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAiB,GAAjB,CAA5B,CAEP,MAAO,IAAMC,2BAA+C,CAC1DD,mBAAmB,CAAC,CAAD,CADd,CAGP,MAAO,IAAME,oBAAmB,CAAG,CAAC,OAAD,CAAU,OAAV,CAAmB,SAAnB,CAA5B,CAEP,MAAO,IAAMC,2BAA+C,CAC1DD,mBAAmB,CAAC,CAAD,CADd"}

package/__internal__/src/components/Switch/Switch.css

@@ -1 +1 @@
-.Switch{cursor:pointer;display:inline-flex;font-family:var(--font-primary);position:relative}.Switch_size_s{--box-width:28px;--box-height:16px;--switch-font-size:var(--control-text-size-s);--offset:var(--space-xs)}.Switch_size_s .Switch-Input:before{transform:translateX(-12px)}.Switch_size_m{--box-width:36px;--box-height:20px;--switch-font-size:var(--control-text-size-m);--offset:var(--space-xs)}.Switch_size_m .Switch-Input:before{transform:translateX(-16px)}.Switch_size_l{--box-width:44px;--box-height:24px;--switch-font-size:var(--control-text-size-l);--offset:var(--space-s)}.Switch_size_l .Switch-Input:before{transform:translateX(-20px)}.Switch_view_primary:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_primary .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_primary:hover .Switch-Input:checked{--border-color:var(--color-control-bg-primary-hover);--background-color:var(--color-control-bg-primary-hover);--content-color:var(--color-control-typo-primary-hover)}.Switch_view_primary .Switch-Input:checked{--border-color:var(--color-control-bg-primary);--background-color:var(--color-control-bg-primary);--content-color:var(--color-control-typo-primary)}.Switch_view_ghost:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_ghost .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_ghost:hover .Switch-Input:checked{--border-color:var(--color-control-bg-border-default-hover);--background-color:var(--color-control-bg-ghost-hover);--content-color:var(--color-control-typo-ghost-hover)}.Switch_view_ghost .Switch-Input:checked{--border-color:var(--color-control-bg-border-default);--background-color:var(--color-control-bg-ghost);--content-color:var(--color-control-typo-ghost)}.Switch-Input{-webkit-appearance:none;background-color:var(--background-color);border:var(--control-border-width) solid var(--border-color);border-radius:99rem;box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:var(--box-height);margin:0;position:relative;transition:background-color .15s,border-color .15s;width:var(--box-width)}.Switch-Input:before{background-color:var(--content-color);border-radius:999rem;box-sizing:border-box;content:"";height:calc(var(--box-height) - var(--control-border-width)*4);position:absolute;right:1px;top:1px;transition:transform .15s,background-color .15s;width:calc(var(--box-height) - var(--control-border-width)*4)}.Switch-Input:checked{background-color:var(--background-color)}.Switch-Input:checked:before{transform:translateX(0)}.Switch-Label{color:var(--color-control-typo-default);font-size:var(--switch-font-size);margin-left:var(--offset)}.Switch_disabled{pointer-events:none}.Switch_disabled .Switch-Input:disabled{--border-color:transparent;--background-color:var(--color-control-bg-disable);--content-color:var(--color-control-typo-disable)}.Switch_disabled .Switch-Input:disabled~.Switch-Label{color:var(--color-control-typo-disable)}.Switch_align_center{align-items:center}.Switch_align_top{align-items:top}.Switch_align_top .Switch-Input{margin-top:1px}
+.Switch{cursor:pointer;display:inline-flex;font-family:var(--font-primary);position:relative}.Switch_size_xs{--box-width:20px;--box-height:12px;--switch-font-size:var(--control-text-size-xs);--offset:var(--space-2xs)}.Switch_size_xs .Switch-Input:before{transform:translateX(-8px)}.Switch_size_s{--box-width:28px;--box-height:16px;--switch-font-size:var(--control-text-size-s);--offset:var(--space-xs)}.Switch_size_s .Switch-Input:before{transform:translateX(-12px)}.Switch_size_m{--box-width:36px;--box-height:20px;--switch-font-size:var(--control-text-size-m);--offset:var(--space-xs)}.Switch_size_m .Switch-Input:before{transform:translateX(-16px)}.Switch_size_l{--box-width:44px;--box-height:24px;--switch-font-size:var(--control-text-size-l);--offset:var(--space-s)}.Switch_size_l .Switch-Input:before{transform:translateX(-20px)}.Switch_view_primary:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_primary .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_primary:hover .Switch-Input:checked{--border-color:var(--color-control-bg-primary-hover);--background-color:var(--color-control-bg-primary-hover);--content-color:var(--color-control-typo-primary-hover)}.Switch_view_primary .Switch-Input:checked{--border-color:var(--color-control-bg-primary);--background-color:var(--color-control-bg-primary);--content-color:var(--color-control-typo-primary)}.Switch_view_ghost:hover .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default-hover);--background-color:transparent;--content-color:var(--color-control-bg-border-default-hover)}.Switch_view_ghost .Switch-Input:not(:checked){--border-color:var(--color-control-bg-border-default);--background-color:transparent;--content-color:var(--color-control-bg-border-default)}.Switch_view_ghost:hover .Switch-Input:checked{--border-color:var(--color-control-bg-border-default-hover);--background-color:var(--color-control-bg-ghost-hover);--content-color:var(--color-control-typo-ghost-hover)}.Switch_view_ghost .Switch-Input:checked{--border-color:var(--color-control-bg-border-default);--background-color:var(--color-control-bg-ghost);--content-color:var(--color-control-typo-ghost)}.Switch-Input{-webkit-appearance:none;background-color:var(--background-color);border:var(--control-border-width) solid var(--border-color);border-radius:99rem;box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:var(--box-height);margin:0;position:relative;transition:background-color .15s,border-color .15s;width:var(--box-width)}.Switch-Input:before{background-color:var(--content-color);border-radius:999rem;box-sizing:border-box;content:"";height:calc(var(--box-height) - var(--control-border-width)*4);position:absolute;right:1px;top:1px;transition:transform .15s,background-color .15s;width:calc(var(--box-height) - var(--control-border-width)*4)}.Switch-Input:checked{background-color:var(--background-color)}.Switch-Input:checked:before{transform:translateX(0)}.Switch-Label{color:var(--color-control-typo-default);font-size:var(--switch-font-size);margin-left:var(--offset)}.Switch_disabled{pointer-events:none}.Switch_disabled .Switch-Input:disabled{--border-color:transparent;--background-color:var(--color-control-bg-disable);--content-color:var(--color-control-typo-disable)}.Switch_disabled .Switch-Input:disabled~.Switch-Label{color:var(--color-control-typo-disable)}.Switch_align_center{align-items:center}.Switch_align_top{align-items:top}.Switch_align_top .Switch-Input{margin-top:1px}

package/__internal__/src/components/Switch/Switch.d.ts

@@ -1,41 +1,24 @@
 import './Switch.css';
 import React from 'react';
-import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
-export declare const switchPropSize: readonly ["m", "s", "l"];
-export declare type SwitchPropSize = typeof switchPropSize[number];
-export declare const switchPropSizeDefault: SwitchPropSize;
-export declare const switchPropView: readonly ["primary", "ghost"];
-export declare type SwitchPropView = typeof switchPropView[number];
-export declare const switchPropViewDefault: SwitchPropView;
-export declare const switchPropAlign: readonly ["center", "top"];
-export declare type SwitchPropAlign = typeof switchPropAlign[number];
-export declare const switchPropAlignDefault: SwitchPropAlign;
-export declare type SwitchPropOnChange = (object: {
-    e: React.ChangeEvent<HTMLInputElement>;
-    checked: boolean;
-}) => void;
-declare type Props = {
-    checked: boolean | undefined;
-    size?: SwitchPropSize;
-    view?: SwitchPropView;
-    align?: SwitchPropAlign;
-    disabled?: boolean;
-    className?: string;
-    label?: string;
-    onChange?: SwitchPropOnChange;
-    name?: string;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    autoFocus?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    step?: number | string;
-    tabIndex?: number;
-    inputRef?: React.Ref<HTMLInputElement>;
-    children?: never;
-};
-export declare type SwitchProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;
 export declare const cnSwitch: import("@bem-react/classname").ClassNameFormatter;
 export declare const COMPONENT_NAME: "Switch";
-export declare const Switch: React.ForwardRefExoticComponent<Props & Omit<React.HTMLAttributes<HTMLLabelElement>, "css" | keyof Props> & React.RefAttributes<HTMLLabelElement>>;
-export {};
+export declare const Switch: React.ForwardRefExoticComponent<{
+    checked: boolean | undefined;
+    size?: "m" | "s" | "xs" | "l" | undefined;
+    view?: "primary" | "ghost" | undefined;
+    align?: "center" | "top" | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    label?: string | undefined;
+    onChange?: import("./types").SwitchPropOnChange | undefined;
+    name?: string | undefined;
+    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+    autoFocus?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    step?: string | number | undefined;
+    tabIndex?: number | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    children?: undefined;
+} & Omit<React.HTMLAttributes<HTMLLabelElement>, "css" | "className" | "tabIndex" | "children" | "onFocus" | "onBlur" | "onChange" | "size" | "label" | "view" | "step" | "name" | "autoFocus" | "disabled" | "checked" | "readOnly" | "required" | "align" | "inputRef"> & React.RefAttributes<HTMLLabelElement>>;

package/__internal__/src/components/Switch/Switch.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","name","size","view","align","disabled","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputRef"];import"./Switch.css";import React,{useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";export var switchPropSize=["m","s","l"];export var switchPropSizeDefault=switchPropSize[0];export var switchPropView=["primary","ghost"];export var switchPropViewDefault=switchPropView[0];export var switchPropAlign=["center","top"];export var switchPropAlignDefault=switchPropAlign[0];export var cnSwitch=cn("Switch");export var COMPONENT_NAME="Switch";export var Switch=React.forwardRef(function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.checked,f=void 0!==e&&e,g=d.name,h=d.size,i=void 0===h?switchPropSizeDefault:h,j=d.view,k=void 0===j?switchPropViewDefault:j,l=d.align,m=void 0===l?switchPropAlignDefault:l,n=d.disabled,o=d.className,p=d.label,q=d.onChange,r=d.onFocus,s=d.onBlur,t=d.readOnly,u=d.required,v=d.step,w=d.tabIndex,x=d.inputRef,y=_objectWithoutProperties(d,_excluded);return React.createElement("label",Object.assign({},y,{className:cnSwitch({size:i,view:k,disabled:n,align:m},[o]),ref:useForkRef([c,b])}),React.createElement("input",{type:"checkbox",name:g,className:cnSwitch("Input",[cnMixFocus()]),checked:f,disabled:n,onChange:function handleChange(a){q&&q({e:a,checked:!f})},onFocus:r,onBlur:s,readOnly:t,required:u,step:v,tabIndex:w,ref:x}),p&&React.createElement("span",{className:cnSwitch("Label")},p))});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","name","size","view","align","disabled","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputRef"];import"./Switch.css";import React,{useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{switchPropAlignDefault,switchPropSizeDefault,switchPropViewDefault}from"./types";export var cnSwitch=cn("Switch");export var COMPONENT_NAME="Switch";export var Switch=React.forwardRef(function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.checked,f=void 0!==e&&e,g=d.name,h=d.size,i=void 0===h?switchPropSizeDefault:h,j=d.view,k=void 0===j?switchPropViewDefault:j,l=d.align,m=void 0===l?switchPropAlignDefault:l,n=d.disabled,o=d.className,p=d.label,q=d.onChange,r=d.onFocus,s=d.onBlur,t=d.readOnly,u=d.required,v=d.step,w=d.tabIndex,x=d.inputRef,y=_objectWithoutProperties(d,_excluded);return React.createElement("label",Object.assign({},y,{className:cnSwitch({size:i,view:k,disabled:n,align:m},[o]),ref:useForkRef([c,b])}),React.createElement("input",{type:"checkbox",name:g,className:cnSwitch("Input",[cnMixFocus()]),checked:f,disabled:n,onChange:function handleChange(a){q&&q({e:a,checked:!f})},onFocus:r,onBlur:s,readOnly:t,required:u,step:v,tabIndex:w,ref:x}),p&&React.createElement("span",{className:cnSwitch("Label")},p))});
 //# sourceMappingURL=Switch.js.map

package/__internal__/src/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","useRef","useForkRef","cnMixFocus","cn","usePropsHandler","switchPropSize","switchPropSizeDefault","switchPropView","switchPropViewDefault","switchPropAlign","switchPropAlignDefault","cnSwitch","COMPONENT_NAME","Switch","forwardRef","props","ref","switchRef","checked","name","size","view","align","disabled","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputRef","otherProps","handleChange","e"],"sources":["../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import './Switch.css';\n\nimport React, { ChangeEventHandler, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\n\nexport const switchPropSize = ['m', 's', 'l'] as const;\nexport type SwitchPropSize = typeof switchPropSize[number];\nexport const switchPropSizeDefault: SwitchPropSize = switchPropSize[0];\n\nexport const switchPropView = ['primary', 'ghost'] as const;\nexport type SwitchPropView = typeof switchPropView[number];\nexport const switchPropViewDefault: SwitchPropView = switchPropView[0];\n\nexport const switchPropAlign = ['center', 'top'] as const;\nexport type SwitchPropAlign = typeof switchPropAlign[number];\nexport const switchPropAlignDefault: SwitchPropAlign = switchPropAlign[0];\n\nexport type SwitchPropOnChange = (object: {\n  e: React.ChangeEvent<HTMLInputElement>;\n  checked: boolean;\n}) => void;\n\ntype Props = {\n  checked: boolean | undefined;\n  size?: SwitchPropSize;\n  view?: SwitchPropView;\n  align?: SwitchPropAlign;\n  disabled?: boolean;\n  className?: string;\n  label?: string;\n  onChange?: SwitchPropOnChange;\n  name?: string;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  autoFocus?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  step?: number | string;\n  tabIndex?: number;\n  inputRef?: React.Ref<HTMLInputElement>;\n  children?: never;\n};\n\nexport type SwitchProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;\n\nexport const cnSwitch = cn('Switch');\n\nexport const COMPONENT_NAME = 'Switch' as const;\n\nexport const Switch = React.forwardRef<HTMLLabelElement, SwitchProps>(\n  (props, ref) => {\n    const switchRef = useRef<HTMLLabelElement>(null);\n    const {\n      checked = false,\n      name,\n      size = switchPropSizeDefault,\n      view = switchPropViewDefault,\n      align = switchPropAlignDefault,\n      disabled,\n      className,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      readOnly,\n      required,\n      step,\n      tabIndex,\n      inputRef,\n      ...otherProps\n    } = usePropsHandler(COMPONENT_NAME, props, switchRef);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      if (onChange) {\n        onChange({ e, checked: !checked });\n      }\n    };\n\n    return (\n      <label\n        {...otherProps}\n        className={cnSwitch({ size, view, disabled, align }, [className])}\n        ref={useForkRef([switchRef, ref])}\n      >\n        <input\n          type=\"checkbox\"\n          name={name}\n          className={cnSwitch('Input', [cnMixFocus()])}\n          checked={checked}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          readOnly={readOnly}\n          required={required}\n          step={step}\n          tabIndex={tabIndex}\n          ref={inputRef}\n        />\n        {label && <span className={cnSwitch('Label')}>{label}</span>}\n      </label>\n    );\n  },\n);\n"],"mappings":"4PAAA,qBAEA,MAAOA,MAAP,EAAoCC,MAApC,KAAkD,OAAlD,CAEA,OAASC,UAAT,yCACA,OAASC,UAAT,oCACA,OAASC,EAAT,uBAEA,OAASC,eAAT,2CAEA,MAAO,IAAMC,eAAc,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,GAAX,CAAvB,CAEP,MAAO,IAAMC,sBAAqC,CAAGD,cAAc,CAAC,CAAD,CAA5D,CAEP,MAAO,IAAME,eAAc,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAvB,CAEP,MAAO,IAAMC,sBAAqC,CAAGD,cAAc,CAAC,CAAD,CAA5D,CAEP,MAAO,IAAME,gBAAe,CAAG,CAAC,QAAD,CAAW,KAAX,CAAxB,CAEP,MAAO,IAAMC,uBAAuC,CAAGD,eAAe,CAAC,CAAD,CAA/D,CA8BP,MAAO,IAAME,SAAQ,CAAGR,EAAE,CAAC,QAAD,CAAnB,CAEP,MAAO,IAAMS,eAAc,CAAG,QAAvB,CAEP,MAAO,IAAMC,OAAM,CAAGd,KAAK,CAACe,UAAN,CACpB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IACRC,EAAS,CAAGjB,MAAM,CAAmB,IAAnB,CADV,GAoBVI,eAAe,CAACQ,cAAD,CAAiBG,CAAjB,CAAwBE,CAAxB,CApBL,KAGZC,OAHY,CAGZA,CAHY,eAIZC,CAJY,GAIZA,IAJY,KAKZC,IALY,CAKZA,CALY,YAKLd,qBALK,OAMZe,IANY,CAMZA,CANY,YAMLb,qBANK,OAOZc,KAPY,CAOZA,CAPY,YAOJZ,sBAPI,GAQZa,CARY,GAQZA,QARY,CASZC,CATY,GASZA,SATY,CAUZC,CAVY,GAUZA,KAVY,CAWZC,CAXY,GAWZA,QAXY,CAYZC,CAZY,GAYZA,OAZY,CAaZC,CAbY,GAaZA,MAbY,CAcZC,CAdY,GAcZA,QAdY,CAeZC,CAfY,GAeZA,QAfY,CAgBZC,CAhBY,GAgBZA,IAhBY,CAiBZC,CAjBY,GAiBZA,QAjBY,CAkBZC,CAlBY,GAkBZA,QAlBY,CAmBTC,CAnBS,uCA4Bd,MACE,8CACMA,CADN,EAEE,SAAS,CAAEvB,QAAQ,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQC,IAAI,CAAJA,CAAR,CAAcE,QAAQ,CAARA,CAAd,CAAwBD,KAAK,CAALA,CAAxB,CAAD,CAAkC,CAACE,CAAD,CAAlC,CAFrB,CAGE,GAAG,CAAEvB,UAAU,CAAC,CAACgB,CAAD,CAAYD,CAAZ,CAAD,CAHjB,GAKE,6BACE,IAAI,CAAC,UADP,CAEE,IAAI,CAAEG,CAFR,CAGE,SAAS,CAAER,QAAQ,CAAC,OAAD,CAAU,CAACT,UAAU,EAAX,CAAV,CAHrB,CAIE,OAAO,CAAEgB,CAJX,CAKE,QAAQ,CAAEK,CALZ,CAME,QAAQ,CAlB6C,QAArDY,aAAqD,CAACC,CAAD,CAAO,CAC5DV,CAD4D,EAE9DA,CAAQ,CAAC,CAAEU,CAAC,CAADA,CAAF,CAAKlB,OAAO,CAAE,CAACA,CAAf,CAAD,CAEX,CAQG,CAOE,OAAO,CAAES,CAPX,CAQE,MAAM,CAAEC,CARV,CASE,QAAQ,CAAEC,CATZ,CAUE,QAAQ,CAAEC,CAVZ,CAWE,IAAI,CAAEC,CAXR,CAYE,QAAQ,CAAEC,CAZZ,CAaE,GAAG,CAAEC,CAbP,EALF,CAoBGR,CAAK,EAAI,4BAAM,SAAS,CAAEd,QAAQ,CAAC,OAAD,CAAzB,EAAqCc,CAArC,CApBZ,CAuBH,CArDmB,CAAf"}
+{"version":3,"file":"Switch.js","names":["React","useRef","useForkRef","cnMixFocus","cn","usePropsHandler","switchPropAlignDefault","switchPropSizeDefault","switchPropViewDefault","cnSwitch","COMPONENT_NAME","Switch","forwardRef","props","ref","switchRef","checked","name","size","view","align","disabled","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputRef","otherProps","handleChange","e"],"sources":["../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import './Switch.css';\n\nimport React, { ChangeEventHandler, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../utils/bem';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport {\n  switchPropAlignDefault,\n  SwitchProps,\n  switchPropSizeDefault,\n  switchPropViewDefault,\n} from './types';\n\nexport const cnSwitch = cn('Switch');\n\nexport const COMPONENT_NAME = 'Switch' as const;\n\nexport const Switch = React.forwardRef<HTMLLabelElement, SwitchProps>(\n  (props, ref) => {\n    const switchRef = useRef<HTMLLabelElement>(null);\n    const {\n      checked = false,\n      name,\n      size = switchPropSizeDefault,\n      view = switchPropViewDefault,\n      align = switchPropAlignDefault,\n      disabled,\n      className,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      readOnly,\n      required,\n      step,\n      tabIndex,\n      inputRef,\n      ...otherProps\n    } = usePropsHandler(COMPONENT_NAME, props, switchRef);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n      if (onChange) {\n        onChange({ e, checked: !checked });\n      }\n    };\n\n    return (\n      <label\n        {...otherProps}\n        className={cnSwitch({ size, view, disabled, align }, [className])}\n        ref={useForkRef([switchRef, ref])}\n      >\n        <input\n          type=\"checkbox\"\n          name={name}\n          className={cnSwitch('Input', [cnMixFocus()])}\n          checked={checked}\n          disabled={disabled}\n          onChange={handleChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          readOnly={readOnly}\n          required={required}\n          step={step}\n          tabIndex={tabIndex}\n          ref={inputRef}\n        />\n        {label && <span className={cnSwitch('Label')}>{label}</span>}\n      </label>\n    );\n  },\n);\n"],"mappings":"4PAAA,qBAEA,MAAOA,MAAP,EAAoCC,MAApC,KAAkD,OAAlD,CAEA,OAASC,UAAT,yCACA,OAASC,UAAT,oCACA,OAASC,EAAT,uBACA,OAASC,eAAT,2CACA,OACEC,sBADF,CAGEC,qBAHF,CAIEC,qBAJF,eAOA,MAAO,IAAMC,SAAQ,CAAGL,EAAE,CAAC,QAAD,CAAnB,CAEP,MAAO,IAAMM,eAAc,CAAG,QAAvB,CAEP,MAAO,IAAMC,OAAM,CAAGX,KAAK,CAACY,UAAN,CACpB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IACRC,EAAS,CAAGd,MAAM,CAAmB,IAAnB,CADV,GAoBVI,eAAe,CAACK,cAAD,CAAiBG,CAAjB,CAAwBE,CAAxB,CApBL,KAGZC,OAHY,CAGZA,CAHY,eAIZC,CAJY,GAIZA,IAJY,KAKZC,IALY,CAKZA,CALY,YAKLX,qBALK,OAMZY,IANY,CAMZA,CANY,YAMLX,qBANK,OAOZY,KAPY,CAOZA,CAPY,YAOJd,sBAPI,GAQZe,CARY,GAQZA,QARY,CASZC,CATY,GASZA,SATY,CAUZC,CAVY,GAUZA,KAVY,CAWZC,CAXY,GAWZA,QAXY,CAYZC,CAZY,GAYZA,OAZY,CAaZC,CAbY,GAaZA,MAbY,CAcZC,CAdY,GAcZA,QAdY,CAeZC,CAfY,GAeZA,QAfY,CAgBZC,CAhBY,GAgBZA,IAhBY,CAiBZC,CAjBY,GAiBZA,QAjBY,CAkBZC,CAlBY,GAkBZA,QAlBY,CAmBTC,CAnBS,uCA4Bd,MACE,8CACMA,CADN,EAEE,SAAS,CAAEvB,QAAQ,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQC,IAAI,CAAJA,CAAR,CAAcE,QAAQ,CAARA,CAAd,CAAwBD,KAAK,CAALA,CAAxB,CAAD,CAAkC,CAACE,CAAD,CAAlC,CAFrB,CAGE,GAAG,CAAEpB,UAAU,CAAC,CAACa,CAAD,CAAYD,CAAZ,CAAD,CAHjB,GAKE,6BACE,IAAI,CAAC,UADP,CAEE,IAAI,CAAEG,CAFR,CAGE,SAAS,CAAER,QAAQ,CAAC,OAAD,CAAU,CAACN,UAAU,EAAX,CAAV,CAHrB,CAIE,OAAO,CAAEa,CAJX,CAKE,QAAQ,CAAEK,CALZ,CAME,QAAQ,CAlB6C,QAArDY,aAAqD,CAACC,CAAD,CAAO,CAC5DV,CAD4D,EAE9DA,CAAQ,CAAC,CAAEU,CAAC,CAADA,CAAF,CAAKlB,OAAO,CAAE,CAACA,CAAf,CAAD,CAEX,CAQG,CAOE,OAAO,CAAES,CAPX,CAQE,MAAM,CAAEC,CARV,CASE,QAAQ,CAAEC,CATZ,CAUE,QAAQ,CAAEC,CAVZ,CAWE,IAAI,CAAEC,CAXR,CAYE,QAAQ,CAAEC,CAZZ,CAaE,GAAG,CAAEC,CAbP,EALF,CAoBGR,CAAK,EAAI,4BAAM,SAAS,CAAEd,QAAQ,CAAC,OAAD,CAAzB,EAAqCc,CAArC,CApBZ,CAuBH,CArDmB,CAAf"}

package/__internal__/src/components/Switch/index.d.ts

@@ -1 +1,2 @@
 export * from './Switch';
+export * from './types';

package/__internal__/src/components/Switch/index.js

@@ -1,2 +1,2 @@
-export*from"./Switch";
+export*from"./Switch";export*from"./types";
 //# sourceMappingURL=index.js.map

package/__internal__/src/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Switch/index.ts"],"sourcesContent":["export * from './Switch';\n"],"mappings":"AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Switch/index.ts"],"sourcesContent":["export * from './Switch';\nexport * from './types';\n"],"mappings":"AAAA,sBACA"}

package/__internal__/src/components/Switch/types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { PropsWithHTMLAttributes } from "../../utils/types/PropsWithHTMLAttributes";
+export declare const switchPropSize: readonly ["m", "xs", "s", "l"];
+export declare type SwitchPropSize = typeof switchPropSize[number];
+export declare const switchPropSizeDefault: SwitchPropSize;
+export declare const switchPropView: readonly ["primary", "ghost"];
+export declare type SwitchPropView = typeof switchPropView[number];
+export declare const switchPropViewDefault: SwitchPropView;
+export declare const switchPropAlign: readonly ["center", "top"];
+export declare type SwitchPropAlign = typeof switchPropAlign[number];
+export declare const switchPropAlignDefault: SwitchPropAlign;
+export declare type SwitchPropOnChange = (object: {
+    e: React.ChangeEvent<HTMLInputElement>;
+    checked: boolean;
+}) => void;
+export declare type SwitchProps = PropsWithHTMLAttributes<{
+    checked: boolean | undefined;
+    size?: SwitchPropSize;
+    view?: SwitchPropView;
+    align?: SwitchPropAlign;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    onChange?: SwitchPropOnChange;
+    name?: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    step?: number | string;
+    tabIndex?: number;
+    inputRef?: React.Ref<HTMLInputElement>;
+    children?: never;
+}, HTMLLabelElement>;

package/__internal__/src/components/Switch/types.js

@@ -0,0 +1,2 @@
+export var switchPropSize=["m","xs","s","l"];export var switchPropSizeDefault=switchPropSize[0];export var switchPropView=["primary","ghost"];export var switchPropViewDefault=switchPropView[0];export var switchPropAlign=["center","top"];export var switchPropAlignDefault=switchPropAlign[0];
+//# sourceMappingURL=types.js.map

package/__internal__/src/components/Switch/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["switchPropSize","switchPropSizeDefault","switchPropView","switchPropViewDefault","switchPropAlign","switchPropAlignDefault"],"sources":["../../../../../src/components/Switch/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const switchPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type SwitchPropSize = typeof switchPropSize[number];\nexport const switchPropSizeDefault: SwitchPropSize = switchPropSize[0];\n\nexport const switchPropView = ['primary', 'ghost'] as const;\nexport type SwitchPropView = typeof switchPropView[number];\nexport const switchPropViewDefault: SwitchPropView = switchPropView[0];\n\nexport const switchPropAlign = ['center', 'top'] as const;\nexport type SwitchPropAlign = typeof switchPropAlign[number];\nexport const switchPropAlignDefault: SwitchPropAlign = switchPropAlign[0];\n\nexport type SwitchPropOnChange = (object: {\n  e: React.ChangeEvent<HTMLInputElement>;\n  checked: boolean;\n}) => void;\n\nexport type SwitchProps = PropsWithHTMLAttributes<\n  {\n    checked: boolean | undefined;\n    size?: SwitchPropSize;\n    view?: SwitchPropView;\n    align?: SwitchPropAlign;\n    disabled?: boolean;\n    className?: string;\n    label?: string;\n    onChange?: SwitchPropOnChange;\n    name?: string;\n    onFocus?: React.FocusEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n    autoFocus?: boolean;\n    readOnly?: boolean;\n    required?: boolean;\n    step?: number | string;\n    tabIndex?: number;\n    inputRef?: React.Ref<HTMLInputElement>;\n    children?: never;\n  },\n  HTMLLabelElement\n>;\n"],"mappings":"AAEA,MAAO,IAAMA,eAAc,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAvB,CAEP,MAAO,IAAMC,sBAAqC,CAAGD,cAAc,CAAC,CAAD,CAA5D,CAEP,MAAO,IAAME,eAAc,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAvB,CAEP,MAAO,IAAMC,sBAAqC,CAAGD,cAAc,CAAC,CAAD,CAA5D,CAEP,MAAO,IAAME,gBAAe,CAAG,CAAC,QAAD,CAAW,KAAX,CAAxB,CAEP,MAAO,IAAMC,uBAAuC,CAAGD,eAAe,CAAC,CAAD,CAA/D"}

package/__internal__/src/components/SwitchGroup/SwitchGroup.css

@@ -1 +1 @@
-.SwitchGroup{display:flex}.SwitchGroup_direction_column{flex-direction:column}.SwitchGroup_direction_column .SwitchGroup-Item:not(:last-child){margin-bottom:var(--offset)}.SwitchGroup_direction_row{flex-direction:row}.SwitchGroup_direction_row .SwitchGroup-Item:not(:last-child){margin-right:var(--offset)}.SwitchGroup_size_m{--offset:var(--space-xs)}.SwitchGroup_size_l{--offset:var(--space-s)}
+.SwitchGroup{display:flex;gap:var(--offset)}.SwitchGroup_direction_column{flex-direction:column}.SwitchGroup_direction_row{flex-direction:row}.SwitchGroup_size_s,.SwitchGroup_size_xs{--offset:var(--space-2xs)}.SwitchGroup_size_m{--offset:var(--space-xs)}.SwitchGroup_size_l{--offset:var(--space-s)}

package/__internal__/src/components/SwitchGroup/SwitchGroup.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","items","getItemLabel","getItemDisabled","onChange","name","direction","size","view","disabled","className"];import"./SwitchGroup.css";import React,{forwardRef}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{cn}from"../../utils/bem";import{Switch}from"../Switch/Switch";import{withDefaultGetters}from"./helpers";import{switchGroupDefaultDirection,switchGroupDefaultSize,switchGroupDefaultView}from"./types";export var cnSwitchGroup=cn("SwitchGroup");var SwitchGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.value,e=void 0===d?null:d,f=c.items,g=c.getItemLabel,h=c.getItemDisabled,i=c.onChange,j=c.name,k=c.direction,l=void 0===k?switchGroupDefaultDirection:k,m=c.size,n=void 0===m?switchGroupDefaultSize:m,o=c.view,p=void 0===o?switchGroupDefaultView:o,q=c.disabled,r=c.className,s=_objectWithoutProperties(c,_excluded),t=useChoiceGroup({value:e,getKey:g,callBack:i,multiple:!0}),u=t.getOnChange,v=t.getChecked;return React.createElement("div",Object.assign({},s,{ref:b,className:cnSwitchGroup({direction:l,size:n,view:p},[r])}),f.map(function(a){return React.createElement(Switch,{key:g(a),label:g(a),size:n,view:p,name:j,disabled:void 0!==q&&q||(null===h||void 0===h?void 0:h(a)),checked:v(a),onChange:function(b){var c=b.e;return u(a)(c)},className:cnSwitchGroup("Item")})}))};export var SwitchGroup=forwardRef(SwitchGroupRender);export*from"./types";
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","items","getItemLabel","getItemDisabled","onChange","name","direction","size","view","disabled","className"];import"./SwitchGroup.css";import React,{forwardRef}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{cn}from"../../utils/bem";import{Switch,switchPropSizeDefault,switchPropViewDefault}from"../Switch";import{withDefaultGetters}from"./helpers";import{switchGroupDefaultDirection}from"./types";export var cnSwitchGroup=cn("SwitchGroup");var SwitchGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.value,e=void 0===d?null:d,f=c.items,g=c.getItemLabel,h=c.getItemDisabled,i=c.onChange,j=c.name,k=c.direction,l=void 0===k?switchGroupDefaultDirection:k,m=c.size,n=void 0===m?switchPropSizeDefault:m,o=c.view,p=void 0===o?switchPropViewDefault:o,q=c.disabled,r=c.className,s=_objectWithoutProperties(c,_excluded),t=useChoiceGroup({value:e,getKey:g,callBack:i,multiple:!0}),u=t.getOnChange,v=t.getChecked;return React.createElement("div",Object.assign({},s,{ref:b,className:cnSwitchGroup({direction:l,size:n,view:p},[r])}),f.map(function(a){return React.createElement(Switch,{key:g(a),label:g(a),size:n,view:p,name:j,disabled:void 0!==q&&q||(null===h||void 0===h?void 0:h(a)),checked:v(a),onChange:function(b){var c=b.e;return u(a)(c)},className:cnSwitchGroup("Item")})}))};export var SwitchGroup=forwardRef(SwitchGroupRender);export*from"./types";
 //# sourceMappingURL=SwitchGroup.js.map

package/__internal__/src/components/SwitchGroup/SwitchGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchGroup.js","names":["React","forwardRef","useChoiceGroup","cn","Switch","withDefaultGetters","switchGroupDefaultDirection","switchGroupDefaultSize","switchGroupDefaultView","cnSwitchGroup","SwitchGroupRender","props","ref","value","items","getItemLabel","getItemDisabled","onChange","name","direction","size","view","disabled","className","otherProps","getKey","callBack","multiple","getOnChange","getChecked","map","item","e","SwitchGroup"],"sources":["../../../../../src/components/SwitchGroup/SwitchGroup.tsx"],"sourcesContent":["import './SwitchGroup.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { cn } from '../../utils/bem';\nimport { Switch } from '../Switch/Switch';\nimport { withDefaultGetters } from './helpers';\nimport {\n  SwitchGroupComponent,\n  switchGroupDefaultDirection,\n  switchGroupDefaultSize,\n  switchGroupDefaultView,\n  SwitchGroupProps,\n} from './types';\n\nexport const cnSwitchGroup = cn('SwitchGroup');\n\nconst SwitchGroupRender = (\n  props: SwitchGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    value = null,\n    items,\n    getItemLabel,\n    getItemDisabled,\n    onChange,\n    name,\n    direction = switchGroupDefaultDirection,\n    size = switchGroupDefaultSize,\n    view = switchGroupDefaultView,\n    disabled = false,\n    className,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: true,\n  });\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      className={cnSwitchGroup({ direction, size, view }, [className])}\n    >\n      {items.map((item) => (\n        <Switch\n          key={getItemLabel(item)}\n          label={getItemLabel(item)}\n          size={size}\n          view={view}\n          name={name}\n          disabled={disabled || getItemDisabled?.(item)}\n          checked={getChecked(item)}\n          onChange={({ e }) => getOnChange(item)(e)}\n          className={cnSwitchGroup('Item')}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const SwitchGroup = forwardRef(\n  SwitchGroupRender,\n) as SwitchGroupComponent;\n\nexport * from './types';\n"],"mappings":"yNAAA,0BAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,cAAT,iDACA,OAASC,EAAT,uBACA,OAASC,MAAT,wBACA,OAASC,kBAAT,iBACA,OAEEC,2BAFF,CAGEC,sBAHF,CAIEC,sBAJF,eAQA,MAAO,IAAMC,cAAa,CAAGN,EAAE,CAAC,aAAD,CAAxB,CAEP,GAAMO,kBAAiB,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGrB,OAcCP,kBAAkB,CAACM,CAAD,CAdnB,KAEDE,KAFC,CAEDA,CAFC,YAEO,IAFP,GAGDC,CAHC,GAGDA,KAHC,CAIDC,CAJC,GAIDA,YAJC,CAKDC,CALC,GAKDA,eALC,CAMDC,CANC,GAMDA,QANC,CAODC,CAPC,GAODA,IAPC,KAQDC,SARC,CAQDA,CARC,YAQWb,2BARX,OASDc,IATC,CASDA,CATC,YASMb,sBATN,OAUDc,IAVC,CAUDA,CAVC,YAUMb,sBAVN,OAWDc,QAXC,CAYDC,CAZC,GAYDA,SAZC,CAaEC,CAbF,yCAgBiCtB,cAAc,CAAC,CACjDW,KAAK,CAALA,CADiD,CAEjDY,MAAM,CAAEV,CAFyC,CAGjDW,QAAQ,CAAET,CAHuC,CAIjDU,QAAQ,GAJyC,CAAD,CAhB/C,CAgBKC,CAhBL,GAgBKA,WAhBL,CAgBkBC,CAhBlB,GAgBkBA,UAhBlB,CAuBH,MACE,4CACML,CADN,EAEE,GAAG,CAAEZ,CAFP,CAGE,SAAS,CAAEH,aAAa,CAAC,CAAEU,SAAS,CAATA,CAAF,CAAaC,IAAI,CAAJA,CAAb,CAAmBC,IAAI,CAAJA,CAAnB,CAAD,CAA4B,CAACE,CAAD,CAA5B,CAH1B,GAKGT,CAAK,CAACgB,GAAN,CAAU,SAACC,CAAD,QACT,qBAAC,MAAD,EACE,GAAG,CAAEhB,CAAY,CAACgB,CAAD,CADnB,CAEE,KAAK,CAAEhB,CAAY,CAACgB,CAAD,CAFrB,CAGE,IAAI,CAAEX,CAHR,CAIE,IAAI,CAAEC,CAJR,CAKE,IAAI,CAAEH,CALR,CAME,QAAQ,CAAE,uBAAYF,CAAZ,WAAYA,CAAZ,QAAYA,CAAe,CAAGe,CAAH,CAA3B,CANZ,CAOE,OAAO,CAAEF,CAAU,CAACE,CAAD,CAPrB,CAQE,QAAQ,CAAE,eAAGC,EAAH,GAAGA,CAAH,OAAWJ,EAAW,CAACG,CAAD,CAAX,CAAkBC,CAAlB,CAAX,CARZ,CASE,SAAS,CAAEvB,aAAa,CAAC,MAAD,CAT1B,EADS,CAAV,CALH,CAoBH,CA/CD,CAiDA,MAAO,IAAMwB,YAAW,CAAGhC,UAAU,CACnCS,iBADmC,CAA9B,CAIP"}
+{"version":3,"file":"SwitchGroup.js","names":["React","forwardRef","useChoiceGroup","cn","Switch","switchPropSizeDefault","switchPropViewDefault","withDefaultGetters","switchGroupDefaultDirection","cnSwitchGroup","SwitchGroupRender","props","ref","value","items","getItemLabel","getItemDisabled","onChange","name","direction","size","view","disabled","className","otherProps","getKey","callBack","multiple","getOnChange","getChecked","map","item","e","SwitchGroup"],"sources":["../../../../../src/components/SwitchGroup/SwitchGroup.tsx"],"sourcesContent":["import './SwitchGroup.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { cn } from '../../utils/bem';\nimport {\n  Switch,\n  switchPropSizeDefault,\n  switchPropViewDefault,\n} from '../Switch';\nimport { withDefaultGetters } from './helpers';\nimport {\n  SwitchGroupComponent,\n  switchGroupDefaultDirection,\n  SwitchGroupProps,\n} from './types';\n\nexport const cnSwitchGroup = cn('SwitchGroup');\n\nconst SwitchGroupRender = (\n  props: SwitchGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    value = null,\n    items,\n    getItemLabel,\n    getItemDisabled,\n    onChange,\n    name,\n    direction = switchGroupDefaultDirection,\n    size = switchPropSizeDefault,\n    view = switchPropViewDefault,\n    disabled = false,\n    className,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: true,\n  });\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      className={cnSwitchGroup({ direction, size, view }, [className])}\n    >\n      {items.map((item) => (\n        <Switch\n          key={getItemLabel(item)}\n          label={getItemLabel(item)}\n          size={size}\n          view={view}\n          name={name}\n          disabled={disabled || getItemDisabled?.(item)}\n          checked={getChecked(item)}\n          onChange={({ e }) => getOnChange(item)(e)}\n          className={cnSwitchGroup('Item')}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const SwitchGroup = forwardRef(\n  SwitchGroupRender,\n) as SwitchGroupComponent;\n\nexport * from './types';\n"],"mappings":"yNAAA,0BAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,cAAT,iDACA,OAASC,EAAT,uBACA,OACEC,MADF,CAEEC,qBAFF,CAGEC,qBAHF,iBAKA,OAASC,kBAAT,iBACA,OAEEC,2BAFF,eAMA,MAAO,IAAMC,cAAa,CAAGN,EAAE,CAAC,aAAD,CAAxB,CAEP,GAAMO,kBAAiB,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGrB,OAcCL,kBAAkB,CAACI,CAAD,CAdnB,KAEDE,KAFC,CAEDA,CAFC,YAEO,IAFP,GAGDC,CAHC,GAGDA,KAHC,CAIDC,CAJC,GAIDA,YAJC,CAKDC,CALC,GAKDA,eALC,CAMDC,CANC,GAMDA,QANC,CAODC,CAPC,GAODA,IAPC,KAQDC,SARC,CAQDA,CARC,YAQWX,2BARX,OASDY,IATC,CASDA,CATC,YASMf,qBATN,OAUDgB,IAVC,CAUDA,CAVC,YAUMf,qBAVN,OAWDgB,QAXC,CAYDC,CAZC,GAYDA,SAZC,CAaEC,CAbF,yCAgBiCtB,cAAc,CAAC,CACjDW,KAAK,CAALA,CADiD,CAEjDY,MAAM,CAAEV,CAFyC,CAGjDW,QAAQ,CAAET,CAHuC,CAIjDU,QAAQ,GAJyC,CAAD,CAhB/C,CAgBKC,CAhBL,GAgBKA,WAhBL,CAgBkBC,CAhBlB,GAgBkBA,UAhBlB,CAuBH,MACE,4CACML,CADN,EAEE,GAAG,CAAEZ,CAFP,CAGE,SAAS,CAAEH,aAAa,CAAC,CAAEU,SAAS,CAATA,CAAF,CAAaC,IAAI,CAAJA,CAAb,CAAmBC,IAAI,CAAJA,CAAnB,CAAD,CAA4B,CAACE,CAAD,CAA5B,CAH1B,GAKGT,CAAK,CAACgB,GAAN,CAAU,SAACC,CAAD,QACT,qBAAC,MAAD,EACE,GAAG,CAAEhB,CAAY,CAACgB,CAAD,CADnB,CAEE,KAAK,CAAEhB,CAAY,CAACgB,CAAD,CAFrB,CAGE,IAAI,CAAEX,CAHR,CAIE,IAAI,CAAEC,CAJR,CAKE,IAAI,CAAEH,CALR,CAME,QAAQ,CAAE,uBAAYF,CAAZ,WAAYA,CAAZ,QAAYA,CAAe,CAAGe,CAAH,CAA3B,CANZ,CAOE,OAAO,CAAEF,CAAU,CAACE,CAAD,CAPrB,CAQE,QAAQ,CAAE,eAAGC,EAAH,GAAGA,CAAH,OAAWJ,EAAW,CAACG,CAAD,CAAX,CAAkBC,CAAlB,CAAX,CARZ,CASE,SAAS,CAAEvB,aAAa,CAAC,MAAD,CAT1B,EADS,CAAV,CALH,CAoBH,CA/CD,CAiDA,MAAO,IAAMwB,YAAW,CAAGhC,UAAU,CACnCS,iBADmC,CAA9B,CAIP"}

package/__internal__/src/components/SwitchGroup/helpers.d.ts

@@ -11,7 +11,7 @@ export declare const withDefaultGetters: (props: SwitchGroupProps) => {
     }) => void;
     name: string;
     direction?: "row" | "column" | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "m" | "s" | "xs" | "l" | undefined;
     view?: "primary" | "ghost" | undefined;
     disabled?: boolean | undefined;
     className?: string | undefined;

package/__internal__/src/components/SwitchGroup/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { SwitchPropSize, SwitchPropView } from '../Switch/types';
 export declare type SwitchGroupDefaultItem = {
     label: string;
     disabled?: boolean;
@@ -7,12 +8,6 @@ export declare type SwitchGroupDefaultItem = {
 export declare const switchGroupDirections: readonly ["column", "row"];
 export declare type SwitchGroupDirection = typeof switchGroupDirections[number];
 export declare const switchGroupDefaultDirection: SwitchGroupDirection;
-export declare const switchGroupSizes: readonly ["m", "l"];
-export declare type SwitchGroupPropSize = typeof switchGroupSizes[number];
-export declare const switchGroupDefaultSize: SwitchGroupPropSize;
-export declare const switchGroupViews: readonly ["primary", "ghost"];
-export declare type SwitchGroupPropView = typeof switchGroupViews[number];
-export declare const switchGroupDefaultView: SwitchGroupPropView;
 export declare type SwitchGroupPropGetItemLabel<ITEM> = (item: ITEM) => string;
 export declare type SwitchGroupPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type SwitchGroupProps<ITEM = SwitchGroupDefaultItem> = PropsWithHTMLAttributesAndRef<{
@@ -26,8 +21,8 @@ export declare type SwitchGroupProps<ITEM = SwitchGroupDefaultItem> = PropsWithH
     }) => void;
     name: string;
     direction?: SwitchGroupDirection;
-    size?: SwitchGroupPropSize;
-    view?: SwitchGroupPropView;
+    size?: SwitchPropSize;
+    view?: SwitchPropView;
     disabled?: boolean;
     className?: string;
 }, HTMLDivElement> & (ITEM extends {

package/__internal__/src/components/SwitchGroup/types.js

@@ -1,2 +1,2 @@
-export var switchGroupDirections=["column","row"];export var switchGroupDefaultDirection=switchGroupDirections[0];export var switchGroupSizes=["m","l"];export var switchGroupDefaultSize=switchGroupSizes[0];export var switchGroupViews=["primary","ghost"];export var switchGroupDefaultView=switchGroupViews[0];
+export var switchGroupDirections=["column","row"];export var switchGroupDefaultDirection=switchGroupDirections[0];
 //# sourceMappingURL=types.js.map

package/__internal__/src/components/SwitchGroup/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["switchGroupDirections","switchGroupDefaultDirection","switchGroupSizes","switchGroupDefaultSize","switchGroupViews","switchGroupDefaultView"],"sources":["../../../../../src/components/SwitchGroup/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type SwitchGroupDefaultItem = {\n  label: string;\n  disabled?: boolean;\n};\n\nexport const switchGroupDirections = ['column', 'row'] as const;\nexport type SwitchGroupDirection = typeof switchGroupDirections[number];\nexport const switchGroupDefaultDirection: SwitchGroupDirection =\n  switchGroupDirections[0];\n\nexport const switchGroupSizes = ['m', 'l'] as const;\nexport type SwitchGroupPropSize = typeof switchGroupSizes[number];\nexport const switchGroupDefaultSize: SwitchGroupPropSize = switchGroupSizes[0];\n\nexport const switchGroupViews = ['primary', 'ghost'] as const;\nexport type SwitchGroupPropView = typeof switchGroupViews[number];\nexport const switchGroupDefaultView: SwitchGroupPropView = switchGroupViews[0];\n\nexport type SwitchGroupPropGetItemLabel<ITEM> = (item: ITEM) => string;\nexport type SwitchGroupPropGetItemDisabled<ITEM> = (\n  item: ITEM,\n) => boolean | undefined;\n\nexport type SwitchGroupProps<ITEM = SwitchGroupDefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      value?: ITEM[] | null;\n      items: ITEM[];\n      getItemLabel?: SwitchGroupPropGetItemLabel<ITEM>;\n      getItemDisabled?: SwitchGroupPropGetItemDisabled<ITEM>;\n      onChange: (props: {\n        e: React.ChangeEvent<HTMLInputElement>;\n        value: ITEM[] | null;\n      }) => void;\n      name: string;\n      direction?: SwitchGroupDirection;\n      size?: SwitchGroupPropSize;\n      view?: SwitchGroupPropView;\n      disabled?: boolean;\n      className?: string;\n    },\n    HTMLDivElement\n  > &\n    (ITEM extends { label: SwitchGroupDefaultItem['label'] }\n      ? {}\n      : {\n          getItemLabel: SwitchGroupPropGetItemLabel<ITEM>;\n        });\n\nexport type SwitchGroupComponent = <ITEM>(\n  props: SwitchGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAOA,MAAO,IAAMA,sBAAqB,CAAG,CAAC,QAAD,CAAW,KAAX,CAA9B,CAEP,MAAO,IAAMC,4BAAiD,CAC5DD,qBAAqB,CAAC,CAAD,CADhB,CAGP,MAAO,IAAME,iBAAgB,CAAG,CAAC,GAAD,CAAM,GAAN,CAAzB,CAEP,MAAO,IAAMC,uBAA2C,CAAGD,gBAAgB,CAAC,CAAD,CAApE,CAEP,MAAO,IAAME,iBAAgB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAzB,CAEP,MAAO,IAAMC,uBAA2C,CAAGD,gBAAgB,CAAC,CAAD,CAApE"}
+{"version":3,"file":"types.js","names":["switchGroupDirections","switchGroupDefaultDirection"],"sources":["../../../../../src/components/SwitchGroup/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\nimport { SwitchPropSize, SwitchPropView } from '../Switch/types';\n\nexport type SwitchGroupDefaultItem = {\n  label: string;\n  disabled?: boolean;\n};\n\nexport const switchGroupDirections = ['column', 'row'] as const;\nexport type SwitchGroupDirection = typeof switchGroupDirections[number];\nexport const switchGroupDefaultDirection: SwitchGroupDirection =\n  switchGroupDirections[0];\n\nexport type SwitchGroupPropGetItemLabel<ITEM> = (item: ITEM) => string;\nexport type SwitchGroupPropGetItemDisabled<ITEM> = (\n  item: ITEM,\n) => boolean | undefined;\n\nexport type SwitchGroupProps<ITEM = SwitchGroupDefaultItem> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      value?: ITEM[] | null;\n      items: ITEM[];\n      getItemLabel?: SwitchGroupPropGetItemLabel<ITEM>;\n      getItemDisabled?: SwitchGroupPropGetItemDisabled<ITEM>;\n      onChange: (props: {\n        e: React.ChangeEvent<HTMLInputElement>;\n        value: ITEM[] | null;\n      }) => void;\n      name: string;\n      direction?: SwitchGroupDirection;\n      size?: SwitchPropSize;\n      view?: SwitchPropView;\n      disabled?: boolean;\n      className?: string;\n    },\n    HTMLDivElement\n  > &\n    (ITEM extends { label: SwitchGroupDefaultItem['label'] }\n      ? {}\n      : {\n          getItemLabel: SwitchGroupPropGetItemLabel<ITEM>;\n        });\n\nexport type SwitchGroupComponent = <ITEM>(\n  props: SwitchGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAQA,MAAO,IAAMA,sBAAqB,CAAG,CAAC,QAAD,CAAW,KAAX,CAA9B,CAEP,MAAO,IAAMC,4BAAiD,CAC5DD,qBAAqB,CAAC,CAAD,CADhB"}

package/__internal__/src/mixs/MixFocus/MixFocus.css

@@ -1 +1 @@
-.MixFocus:not(.MixFocus_before):focus,.MixFocus:not(.MixFocus_before):focus:hover,.MixFocus:not(.MixFocus_before)[class*=_focus],.MixFocus:not(.MixFocus_before)[class*=_focus]:hover,.MixFocus_before:focus:before,.MixFocus_before:focus:hover:before,.MixFocus_before[class*=_focus]:before,.MixFocus_before[class*=_focus]:hover:before{-webkit-animation:Animation--MixFocus .5s ease-in;animation:Animation--MixFocus .5s ease-in;box-shadow:0 0 0 3px var(--color-control-bg-focus);outline:none}.MixFocus:not(.MixFocus_before):focus:active,.MixFocus:not(.MixFocus_before):focus:active:hover,.MixFocus:not(.MixFocus_before)[class*=_focus]:active,.MixFocus:not(.MixFocus_before)[class*=_focus]:active:hover,.MixFocus_before:focus:active:before,.MixFocus_before:focus:active:hover:before,.MixFocus_before[class*=_focus]:active:before,.MixFocus_before[class*=_focus]:active:hover:before{-webkit-animation-name:none!important;animation-name:none!important}@-webkit-keyframes Animation--MixFocus{0%{box-shadow:0 0 0 0 var(--color-control-bg-focus),0 0 0 0 var(--color-control-bg-active)}to{box-shadow:0 0 0 3px var(--color-control-bg-focus),0 0 0 6px transparent}}@keyframes Animation--MixFocus{0%{box-shadow:0 0 0 0 var(--color-control-bg-focus),0 0 0 0 var(--color-control-bg-active)}to{box-shadow:0 0 0 3px var(--color-control-bg-focus),0 0 0 6px transparent}}
+.MixFocus{--mix-focus-color-one:var(--color-control-bg-focus);--mix-focus-color-two:var(--color-control-bg-active);--mix-focus-animation:Animation--MixFocus 0.5s ease-in}.MixFocus:not(.MixFocus_before):focus,.MixFocus:not(.MixFocus_before):focus:hover,.MixFocus:not(.MixFocus_before)[class*=_focus],.MixFocus:not(.MixFocus_before)[class*=_focus]:hover,.MixFocus_before:focus:before,.MixFocus_before:focus:hover:before,.MixFocus_before[class*=_focus]:before,.MixFocus_before[class*=_focus]:hover:before{-webkit-animation:var(--mix-focus-animation);animation:var(--mix-focus-animation);box-shadow:0 0 0 3px var(--mix-focus-color-one);outline:none}.MixFocus:not(.MixFocus_before):focus:active,.MixFocus:not(.MixFocus_before):focus:active:hover,.MixFocus:not(.MixFocus_before)[class*=_focus]:active,.MixFocus:not(.MixFocus_before)[class*=_focus]:active:hover,.MixFocus_before:focus:active:before,.MixFocus_before:focus:active:hover:before,.MixFocus_before[class*=_focus]:active:before,.MixFocus_before[class*=_focus]:active:hover:before{-webkit-animation:none;animation:none}@-webkit-keyframes Animation--MixFocus{0%{box-shadow:0 0 0 0 var(--mix-focus-color-one),0 0 0 0 var(--mix-focus-color-two)}to{box-shadow:0 0 0 3px var(--mix-focus-color-one),0 0 0 6px transparent}}@keyframes Animation--MixFocus{0%{box-shadow:0 0 0 0 var(--mix-focus-color-one),0 0 0 0 var(--mix-focus-color-two)}to{box-shadow:0 0 0 3px var(--mix-focus-color-one),0 0 0 6px transparent}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "keywords": [
     "ui-kit",
     "design-system",