@foxford/ui 2.8.0-beta-1ccf13e-20230822 → 2.8.0-beta-b32a5c6-20230828

package/components/ArrowBadge/ArrowBadge.js

@@ -0,0 +1,2 @@
+import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{useClassname as r}from'../../hooks/useClassname.js';import{Root as a,Inner as i,Text as o}from'./style.js';import{SideShape as t}from'./SideShape.js';import{jsx as l,jsxs as m}from'react/jsx-runtime';var n=["children","content","className","display"];function p(d){var{children:c,content:h,className:j,display:u="inline-block"}=d,b=s(d,n);var f=r(p.displayName,j);return l(a,e(e({className:f,display:u},b),{},{children:m(i,e(e({},b),{},{children:[l(t,e({},b)),l(o,e(e({},b),{},{children:c||h})),l(t,e(e({},b),{},{isRightSide:!0}))]}))}))}p.displayName='ArrowBadge';export{p as ArrowBadge};
+//# sourceMappingURL=ArrowBadge.js.map

package/components/ArrowBadge/ArrowBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowBadge.js","sources":["../../../../src/components/ArrowBadge/ArrowBadge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport * as Styled from './style'\nimport { ArrowBadgeProps } from './types'\nimport { SideShape } from './SideShape'\n\nArrowBadge.displayName = 'ArrowBadge'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function ArrowBadge({ children, content, className, display = 'inline-block', ...restProps }: ArrowBadgeProps) {\n  const _className = useClassname(ArrowBadge.displayName, className)\n\n  return (\n    <Styled.Root className={_className} display={display} {...restProps}>\n      <Styled.Inner {...restProps}>\n        <SideShape {...restProps} />\n        <Styled.Text {...restProps}>{children || content}</Styled.Text>\n        <SideShape {...restProps} isRightSide />\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["ArrowBadge","_ref","children","content","className","display","restProps","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread","_jsxs","Styled.Inner","SideShape","Styled.Text","isRightSide"],"mappings":"oXAaO,SAASA,EAAsGC,GAAA,IAA3FC,SAAEA,EAAFC,QAAYA,EAAZC,UAAqBA,EAArBC,QAAgCA,EAAU,gBAAiDJ,EAA9BK,EAA8BC,EAAAN,EAAAO,GACpH,IAAMC,EAAaC,EAAaV,EAAWW,YAAaP,GAExD,OACEQ,EAACC,EAADC,EAAAA,EAAA,CAAaV,UAAWK,EAAYJ,QAASA,GAAaC,GAA1D,GAAA,CAAAJ,SACEa,EAACC,SAAiBV,GAAlB,GAAA,CAAAJ,SACE,CAAAU,EAACK,EAADH,EAAA,GAAeR,IACfM,EAACM,EAADJ,EAAAA,EAAA,GAAiBR,GAAjB,GAAA,CAAAJ,SAA6BA,GAAYC,KACzCS,EAACK,EAADH,EAAAA,EAAA,GAAeR,GAAf,GAAA,CAA0Ba,aAAW,YAhB7CnB,EAAWW,YAAc"}

package/components/ArrowBadge/SideShape.js

@@ -0,0 +1,2 @@
+import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{SquareShape as a,RightTailShape as t,RightArrowShape as i,LeftTailShape as s,LeftArrowShape as h}from'./style.js';import{jsx as p}from'react/jsx-runtime';var o=["isRightSide","leftShape","rightShape"];function u(u){var{isRightSide:S=!1,leftShape:l="square",rightShape:f="square"}=u,m=r(u,o);if(S)switch(f){case'arrow':return p(i,e({},m));case'tail':return p(t,e({},m));default:return p(a,e({},m))}switch(l){case'arrow':return p(h,e({},m));case'tail':return p(s,e({},m));default:return p(a,e({},m))}}export{u as SideShape};
+//# sourceMappingURL=SideShape.js.map

package/components/ArrowBadge/SideShape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideShape.js","sources":["../../../../src/components/ArrowBadge/SideShape.tsx"],"sourcesContent":["import * as Styled from './style'\nimport { SideShapeProps } from './types'\n\nexport function SideShape({\n  isRightSide = false,\n  leftShape = 'square',\n  rightShape = 'square',\n  ...restProps\n}: SideShapeProps) {\n  if (isRightSide) {\n    switch (rightShape) {\n      case 'arrow':\n        return <Styled.RightArrowShape {...restProps} />\n      case 'tail':\n        return <Styled.RightTailShape {...restProps} />\n\n      default:\n        return <Styled.SquareShape {...restProps} />\n    }\n  }\n\n  switch (leftShape) {\n    case 'arrow':\n      return <Styled.LeftArrowShape {...restProps} />\n    case 'tail':\n      return <Styled.LeftTailShape {...restProps} />\n\n    default:\n      return <Styled.SquareShape {...restProps} />\n  }\n}\n"],"names":["SideShape","_ref","isRightSide","leftShape","rightShape","restProps","_objectWithoutProperties","_excluded","_jsx","Styled.RightArrowShape","_objectSpread","Styled.RightTailShape","Styled.SquareShape","Styled.LeftArrowShape","Styled.LeftTailShape"],"mappings":"kUAGO,SAASA,EAKGC,GAAA,IALOC,YACxBA,KADwBC,UAExBA,EAAY,SAFYC,WAGxBA,EAAa,UAEIH,EADdI,EACcC,EAAAL,EAAAM,GACjB,GAAIL,EACF,OAAQE,GACN,IAAK,QACH,OAAOI,EAACC,EAADC,EAAA,GAA4BL,IACrC,IAAK,OACH,OAAOG,EAACG,EAADD,EAAA,GAA2BL,IAEpC,QACE,OAAOG,EAACI,EAADF,EAAA,GAAwBL,IAIrC,OAAQF,GACN,IAAK,QACH,OAAOK,EAACK,EAADH,EAAA,GAA2BL,IACpC,IAAK,OACH,OAAOG,EAACM,EAADJ,EAAA,GAA0BL,IAEnC,QACE,OAAOG,EAACI,EAADF,EAAA,GAAwBL"}

package/components/ArrowBadge/images/arrow.module.svg.js

@@ -0,0 +1,2 @@
+import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)({}).hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 29 48",fill:"none"},a),t||(t=r.createElement("path",{fill:"currentColor",d:"M20 0h9v48h-9ZM0 24l20 24V0Z"})));export{a as default};
+//# sourceMappingURL=arrow.module.svg.js.map

package/components/ArrowBadge/images/arrow.module.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.module.svg.js","sources":["../../../../../src/components/ArrowBadge/images/arrow.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 29 48\" fill=\"none\"><path fill=\"currentColor\" d=\"M20 0h9v48h-9ZM0 24l20 24V0Z\"/></svg>\n"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgArrowmodule","props","React","createElement","xmlns","viewBox","fill","d"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAAA,IAA+BE,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAyCC,GACvBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,QAAS,YACTC,KAAM,QACLL,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEG,KAAM,eACNC,EAAG"}

package/components/ArrowBadge/images/tail.module.svg.js

@@ -0,0 +1,2 @@
+import*as r from'react';var t;function e(){return e=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)({}).hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 48",fill:"none"},a),t||(t=r.createElement("path",{fill:"currentColor",d:"M0 48h32V0H0l16 24L0 48Z"})));export{a as default};
+//# sourceMappingURL=tail.module.svg.js.map

package/components/ArrowBadge/images/tail.module.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tail.module.svg.js","sources":["../../../../../src/components/ArrowBadge/images/tail.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 32 48\" fill=\"none\"><path fill=\"currentColor\" d=\"M0 48h32V0H0l16 24L0 48Z\"/></svg>\n"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgTailmodule","props","React","createElement","xmlns","viewBox","fill","d"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAAA,IAA+BE,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAuCC,GACrBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,QAAS,YACTC,KAAM,QACLL,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEG,KAAM,eACNC,EAAG"}

package/components/ArrowBadge/style.js

@@ -0,0 +1,2 @@
+import r,{css as o}from'styled-components';import{display as a}from'../../mixins/display.js';import n from'./images/arrow.module.svg.js';import t from'./images/tail.module.svg.js';var s='xl';var i={s:24,m:20,l:40,xl:48};var e={s:10,m:14,l:22,xl:28};var c={s:6,m:8,l:13,xl:16};var l=o(["",""],(r=>{var{theme:o,secondary:a,third:n,fourth:t,small:s=!1}=r;return s?o.colors['content-onmain-primary']:a?o.colors['mother'===o.name?'content-brand-secondary':'content-onmain-primary']:n||t?o.colors['content-onmain-primary']:o.colors['content-brand-primary']}));var d=o(["",""],(r=>{var{theme:o,secondary:a,third:n,fourth:t}=r;return a?o.colors['bg-brand-secondary-100']:n?o.colors['bg-brand-tertiary-200']:t?o.colors['bg-brand-quaternary-200']:o.colors['bg-brand-primary-200']}));var m=r.div.withConfig({shouldForwardProp:r=>['children','className','style'].includes(r)}).withConfig({componentId:"fox-ui__sc-gzccd8-0"})(["",";"],(r=>r.display?a(r.display):null));var p=r.div.withConfig({componentId:"fox-ui__sc-gzccd8-1"})(["",""],(r=>{var{size:a=s,small:n=!1}=r;return o(["display:flex;height:","px;"],n?32:i[a])}));var f=r.div.withConfig({componentId:"fox-ui__sc-gzccd8-2"})(["",""],(r=>{var{size:a=s}=r;return o(["width:","px;background-color:",";"],c[a],d)}));var g=r(n).withConfig({componentId:"fox-ui__sc-gzccd8-3"})(["color:",";transform:translateX(0.5px);"],d);var h=r(g).withConfig({componentId:"fox-ui__sc-gzccd8-4"})(["transform:scaleX(-1) translateX(0.5px);"]);var u=r(t).withConfig({componentId:"fox-ui__sc-gzccd8-5"})(["color:",";transform:translateX(0.5px);"],d);var x=r(u).withConfig({componentId:"fox-ui__sc-gzccd8-6"})(["transform:scaleX(-1) translateX(0.5px);"]);var v=r.div.withConfig({componentId:"fox-ui__sc-gzccd8-7"})(["",""],(r=>{var{size:a=s,small:n=!1}=r;return o(["color:",";background-color:",";font-size:","px;line-height:","px;",";"],l,d,n?14:e[a],n?32:i[a],n?null:"\n        font-family: 'TT Foxford';\n        text-transform: uppercase;\n        font-weight: 800;\n      ")}));export{p as Inner,g as LeftArrowShape,u as LeftTailShape,h as RightArrowShape,x as RightTailShape,m as Root,f as SquareShape,v as Text};
+//# sourceMappingURL=style.js.map

package/components/ArrowBadge/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/components/ArrowBadge/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { ArrowBadgeProps, ArrowBadgeSize, SideShapeProps } from './types'\nimport Arrow from './images/arrow.module.svg'\nimport Tail from './images/tail.module.svg'\n\nconst DEFAULT_SIZE: ArrowBadgeSize = 'xl'\n\nconst HEIGHT: Record<ArrowBadgeSize, number> = {\n  s: 24,\n  m: 20,\n  l: 40,\n  xl: 48,\n}\n\nconst SMALL_HEIGHT = 32\n\nconst TEXT_SIZES: Record<ArrowBadgeSize, number> = {\n  s: 10,\n  m: 14,\n  l: 22,\n  xl: 28,\n}\n\nconst SMALL_TEXT_SIZE = 14\n\nconst SQUARE_SHAPE_SIZES: Record<ArrowBadgeSize, number> = {\n  s: 6,\n  m: 8,\n  l: 13,\n  xl: 16,\n}\n\nconst textColor = css<ArrowBadgeProps>`\n  ${({ theme, secondary, third, fourth, small = false }) => {\n    const isMotherTheme = theme.name === 'mother'\n\n    if (small) return theme.colors['content-onmain-primary']\n    if (secondary) return theme.colors[isMotherTheme ? 'content-brand-secondary' : 'content-onmain-primary']\n    if (third) return theme.colors['content-onmain-primary']\n    if (fourth) return theme.colors['content-onmain-primary']\n\n    return theme.colors['content-brand-primary']\n  }}\n`\n\nconst backgroundColor = css<ArrowBadgeProps>`\n  ${({ theme, secondary, third, fourth }) => {\n    if (secondary) return theme.colors['bg-brand-secondary-100']\n    if (third) return theme.colors['bg-brand-tertiary-200']\n    if (fourth) return theme.colors['bg-brand-quaternary-200']\n\n    return theme.colors['bg-brand-primary-200']\n  }}\n`\n\nexport const Root = styled.div.withConfig<ArrowBadgeProps>({\n  shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n  ${(props) => (props.display ? display(props.display) : null)};\n`\n\nexport const Inner = styled.div<ArrowBadgeProps>`\n  ${({ size = DEFAULT_SIZE, small = false }) => {\n    const height = small ? SMALL_HEIGHT : HEIGHT[size]\n\n    return css`\n      display: flex;\n      height: ${height}px;\n    `\n  }}\n`\n\nexport const SquareShape = styled.div<SideShapeProps>`\n  ${({ size = DEFAULT_SIZE }) => {\n    const currentSize = SQUARE_SHAPE_SIZES[size]\n\n    return css`\n      width: ${currentSize}px;\n      background-color: ${backgroundColor};\n    `\n  }}\n`\n\nexport const LeftArrowShape = styled(Arrow)<SideShapeProps>`\n  color: ${backgroundColor};\n  transform: translateX(0.5px);\n`\n\nexport const RightArrowShape = styled(LeftArrowShape)<SideShapeProps>`\n  transform: scaleX(-1) translateX(0.5px);\n`\n\nexport const LeftTailShape = styled(Tail)<SideShapeProps>`\n  color: ${backgroundColor};\n  transform: translateX(0.5px);\n`\n\nexport const RightTailShape = styled(LeftTailShape)<SideShapeProps>`\n  transform: scaleX(-1) translateX(0.5px);\n`\n\nexport const Text = styled.div<ArrowBadgeProps>`\n  ${({ size = DEFAULT_SIZE, small = false }) => {\n    const fontSize: number = small ? SMALL_TEXT_SIZE : TEXT_SIZES[size]\n    const lineHeight: number = small ? SMALL_HEIGHT : HEIGHT[size]\n\n    return css`\n      color: ${textColor};\n      background-color: ${backgroundColor};\n      font-size: ${fontSize}px;\n      line-height: ${lineHeight}px;\n\n      ${!small\n        ? `\n        font-family: 'TT Foxford';\n        text-transform: uppercase;\n        font-weight: 800;\n      `\n        : null};\n    `\n  }}\n`\n"],"names":["DEFAULT_SIZE","HEIGHT","s","m","l","xl","TEXT_SIZES","SQUARE_SHAPE_SIZES","textColor","css","_ref","theme","secondary","third","fourth","small","colors","name","backgroundColor","_ref2","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","Inner","_ref3","size","SquareShape","_ref4","LeftArrowShape","Arrow","RightArrowShape","LeftTailShape","Tail","RightTailShape","Text","_ref5"],"mappings":"oLAMA,IAAMA,EAA+B,KAErC,IAAMC,EAAyC,CAC7CC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,IAKN,IAAMC,EAA6C,CACjDJ,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,IAKN,IAAME,EAAqD,CACzDL,EAAG,EACHC,EAAG,EACHC,EAAG,GACHC,GAAI,IAGN,IAAMG,EAAYC,EAAH,CAAA,GAAA,KACXC,IAAwD,IAAvDC,MAAEA,EAAFC,UAASA,EAATC,MAAoBA,EAApBC,OAA2BA,EAA3BC,MAAmCA,MAAoBL,EAGxD,OAAIK,EAAcJ,EAAMK,OAAO,0BAC3BJ,EAAkBD,EAAMK,OAHS,WAAfL,EAAMM,KAGuB,0BAA4B,0BAC3EJ,GACAC,EADcH,EAAMK,OAAO,0BAGxBL,EAAMK,OAAO,4BAIxB,IAAME,EAAkBT,EAAH,CAAA,GAAA,KACjBU,IAAyC,IAAxCR,MAAEA,EAAFC,UAASA,EAATC,MAAoBA,EAApBC,OAA2BA,GAAaK,EACzC,OAAIP,EAAkBD,EAAMK,OAAO,0BAC/BH,EAAcF,EAAMK,OAAO,yBAC3BF,EAAeH,EAAMK,OAAO,2BAEzBL,EAAMK,OAAO,2BAIjB,IAAMI,EAAOC,EAAOC,IAAIC,WAA4B,CACzDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAD1DF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,GAAA,MAGZO,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OAG5CC,IAAAA,EAAQT,EAAOC,IAAVC,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,GAAA,KACdU,IAA4C,IAA3CC,KAAEA,EAAOhC,EAATe,MAAuBA,GAAAA,GAAoBgB,EAG5C,OAAOtB,iCAFQM,EAjDE,GAiDqBd,EAAO+B,OASpCC,IAAAA,EAAcZ,EAAOC,IAAVC,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,GAAA,KACpBa,IAA6B,IAA5BF,KAAEA,EAAOhC,GAAmBkC,EAG7B,OAAOzB,EAAP,CAAA,SAAA,uBAAA,KAFoBF,EAAmByB,GAIjBd,UAKbiB,EAAiBd,EAAOe,GAAVb,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,SAAA,iCAChBH,OAIEmB,EAAkBhB,EAAOc,GAAVZ,WAAA,CAAAI,YAAA,uBAAGN,CAAxB,CAAA,gDAIMiB,EAAgBjB,EAAOkB,GAAVhB,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,SAAA,iCACfH,OAIEsB,EAAiBnB,EAAOiB,GAAVf,WAAA,CAAAI,YAAA,uBAAGN,CAAvB,CAAA,4CAIMoB,IAAAA,EAAOpB,EAAOC,IAAVC,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,GAAA,KACbqB,IAA4C,IAA3CV,KAAEA,EAAOhC,EAATe,MAAuBA,MAAoB2B,EAI5C,OAAOjC,EAAP,CAAA,SAAA,qBAAA,cAAA,kBAAA,MAAA,KACWD,EACWU,EALGH,EAhFL,GAgF+BT,EAAW0B,GACnCjB,EA1FV,GA0FiCd,EAAO+B,GAQpDjB,EAMC"}

package/components/Switcher/Switcher.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as a}from'react';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{BRAND_PROPS as s,DEFAULT_PROPS as i}from'./constants.js';import{Root as n,Input as c,Switcher as d,Label as l}from'./style.js';import{jsxs as m,jsx as h}from'react/jsx-runtime';var p=["value","disabled","color","tabIndex","id","name","children","onChange"];var b='Switcher';var f=a(((a,b)=>{var f;var u=t();var v=o(null===(f=u.components)||void 0===f?void 0:f.Switcher,a),{value:j=!1,disabled:y=!1,color:S="atlantis",tabIndex:k,id:x,name:P,children:g,onChange:w}=v,C=r(v,p);var N=!y&&'function'==typeof w;var R='brand'===u.preset;'string'==typeof C.preset&&(R='brand'===C.preset);var D=R?s:i;return m(n,e(e(e({},C),D),{},{ref:b,checked:j,color:S,disabled:y,brandPresetUsed:R,children:[h(c,{id:x,name:P,checked:j,type:"checkbox",tabIndex:k,onChange:e=>{N&&w(e.target.checked,e)},onKeyDown:e=>{['Enter','Spacebar',' '].includes(e.key)&&N&&(e.preventDefault(),w(!j,e))},disabled:y}),h(d,e({htmlFor:x},D)),g?h(l,{htmlFor:x,children:g}):null]}))}));f.displayName="Switcher";export{b as COMPONENT_NAME,f as Switcher};
+import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{createRef as a}from'react';import{Root as t,Input as o,Switcher as n,Label as i}from'./style.js';import{jsxs as l,jsx as s}from'react/jsx-runtime';var c=["id","value","name","children","tabIndex","onChange"];function d(d){var m=a();var{id:h,value:p,name:u,children:b,tabIndex:f,onChange:x}=d,v=r(d,c);return l(t,e(e({value:p},v),{},{children:[s(o,{id:h,name:u,checked:p,type:"checkbox",tabIndex:f,ref:m,onChange:e=>{d.disabled||'function'!=typeof x||x(e.target.checked,e)}}),s(n,{htmlFor:h}),b?s(i,{htmlFor:h,children:b}):null]}))}d.defaultProps={value:!1,disabled:!1,color:'atlantis'},d.displayName='Switcher';export{d as Switcher};
 //# sourceMappingURL=Switcher.js.map

package/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switcher.js","sources":["../../../../src/components/Switcher/Switcher.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport type { SwitcherProps } from './types'\nimport { DEFAULT_PROPS, BRAND_PROPS } from './constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Switcher'\n\nconst Switcher = forwardRef<HTMLDivElement, SwitcherProps>((props, ref) => {\n  const theme = useFallbackTheme()\n\n  const {\n    value = false,\n    disabled = false,\n    color = 'atlantis',\n    tabIndex,\n    id,\n    name,\n    children,\n    onChange,\n    ...config\n  } = useConfigPriority<SwitcherProps>(theme.components?.Switcher, props)\n  const isChangeable = !disabled && typeof onChange === 'function'\n\n  let brandPresetUsed = theme.preset === 'brand'\n  if (typeof config.preset === 'string') brandPresetUsed = config.preset === 'brand'\n\n  const propsByPreset = brandPresetUsed ? BRAND_PROPS : DEFAULT_PROPS\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (isChangeable) onChange(event.target.checked, event)\n  }\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (['Enter', 'Spacebar', ' '].includes(event.key) && isChangeable) {\n      event.preventDefault()\n      onChange(!value, event)\n    }\n  }\n\n  return (\n    <Styled.Root\n      {...config}\n      {...propsByPreset}\n      ref={ref}\n      checked={value}\n      color={color}\n      disabled={disabled}\n      brandPresetUsed={brandPresetUsed}\n    >\n      <Styled.Input\n        id={id}\n        name={name}\n        checked={value}\n        type='checkbox'\n        tabIndex={tabIndex}\n        onChange={handleChange}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n      />\n      <Styled.Switcher htmlFor={id} {...propsByPreset} />\n      {children ? <Styled.Label htmlFor={id}>{children}</Styled.Label> : null}\n    </Styled.Root>\n  )\n})\n\nSwitcher.displayName = COMPONENT_NAME\n\nexport { Switcher, COMPONENT_NAME }\n\nexport type { SwitcherProps }\n"],"names":["COMPONENT_NAME","Switcher","forwardRef","props","ref","_theme$components","theme","useFallbackTheme","useConfigPriority","components","value","disabled","color","tabIndex","id","name","children","onChange","_useConfigPriority","config","_objectWithoutProperties","_excluded","isChangeable","brandPresetUsed","preset","propsByPreset","BRAND_PROPS","DEFAULT_PROPS","_jsxs","Styled.Root","checked","_jsx","Styled.Input","type","event","target","onKeyDown","includes","key","preventDefault","Styled.Switcher","_objectSpread","htmlFor","Styled.Label","displayName"],"mappings":"giBAOMA,IAAAA,EAAiB,WAEjBC,IAAAA,EAAWC,IAA2CC,EAAOC,KAAQ,IAAAC,EACzE,IAAMC,EAAQC,IAEd,IAUIC,EAAAA,UAAiCF,EAAAA,EAAMG,+BAANJ,EAAkBJ,SAAUE,IAV3DO,MACJA,KADIC,SAEJA,KAFIC,MAGJA,EAAQ,WAHJC,SAIJA,EAJIC,GAKJA,EALIC,KAMJA,EANIC,SAOJA,EAPIC,SAQJA,GARFC,EASKC,EATLC,EAAAF,EAAAG,GAWA,IAAMC,GAAgBX,GAAgC,mBAAbM,EAEzC,IAAIM,EAAmC,UAAjBjB,EAAMkB,OACC,iBAAlBL,EAAOK,SAAqBD,EAAoC,UAAlBJ,EAAOK,QAEhE,IAAMC,EAAgBF,EAAkBG,EAAcC,EAatD,OACEC,EAACC,EACKV,EAAAA,EAAAA,EAAAA,GAAAA,GACAM,GAFN,GAAA,CAGErB,IAAKA,EACL0B,QAASpB,EACTE,MAAOA,EACPD,SAAUA,EACVY,gBAAiBA,EAPnBP,SASE,CAAAe,EAACC,EAAD,CACElB,GAAIA,EACJC,KAAMA,EACNe,QAASpB,EACTuB,KAAK,WACLpB,SAAUA,EACVI,SA3B4DiB,IAC5DZ,GAAcL,EAASiB,EAAMC,OAAOL,QAASI,IA2B7CE,UAxB2DF,IAC3D,CAAC,QAAS,WAAY,KAAKG,SAASH,EAAMI,MAAQhB,IACpDY,EAAMK,iBACNtB,GAAUP,EAAOwB,KAsBfvB,SAAUA,IAEZoB,EAACS,EAADC,EAAA,CAAiBC,QAAS5B,GAAQW,IACjCT,EAAWe,EAACY,EAAD,CAAcD,QAAS5B,EAAvBE,SAA4BA,IAA2B,YAKzEf,EAAS2C,YA5Dc"}
+{"version":3,"file":"Switcher.js","sources":["../../../../src/components/Switcher/Switcher.tsx"],"sourcesContent":["import { createRef } from 'react'\nimport { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SwitcherProps extends BaseProps, Color<'color'>, Color<'inactiveColor'> {\n  /**\n   * Id for swithcer\n   */\n  id?: string\n  /**\n   * Name of input\n   */\n  name?: string\n  /**\n   * Value of input\n   */\n  value?: boolean\n  /**\n   * Switcher is disabled\n   */\n  disabled?: boolean\n  /**\n   * Tabindex\n   */\n  tabIndex?: number\n  /**\n   * Label of switcher\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   * onChange function\n   */\n  onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement>): void\n}\n\nSwitcher.defaultProps = {\n  value: false,\n  disabled: false,\n  color: 'atlantis',\n}\n\nSwitcher.displayName = 'Switcher'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'inactiveColor'>`](#/Миксины)\n */\nexport function Switcher(props: typeof Switcher.defaultProps & SwitcherProps) {\n  const inputRef = createRef<HTMLInputElement>()\n  const { id, value, name, children, tabIndex, onChange, ...restProps } = props\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!props.disabled && typeof onChange === 'function') {\n      onChange(event.target.checked, event)\n    }\n  }\n\n  return (\n    <Styled.Root value={value} {...restProps}>\n      <Styled.Input\n        id={id}\n        name={name}\n        checked={value}\n        type='checkbox'\n        tabIndex={tabIndex}\n        ref={inputRef}\n        onChange={handleChange}\n      />\n      <Styled.Switcher htmlFor={id} />\n      {children ? <Styled.Label htmlFor={id}>{children}</Styled.Label> : null}\n    </Styled.Root>\n  )\n}\n"],"names":["Switcher","props","inputRef","createRef","id","value","name","children","tabIndex","onChange","restProps","_excluded","_jsxs","Styled.Root","_objectSpread","_jsx","Styled.Input","checked","type","ref","event","disabled","target","Styled.Switcher","htmlFor","Styled.Label","defaultProps","color","displayName"],"mappings":"yUAqDO,SAASA,EAASC,GACvB,IAAMC,EAAWC,IACjB,IAAMC,GAAEA,EAAFC,MAAMA,EAANC,KAAaA,EAAbC,SAAmBA,EAAnBC,SAA6BA,EAA7BC,SAAuCA,GAA2BR,EAAdS,IAAcT,EAAxEU,GAQA,OACEC,EAACC,EAADC,EAAAA,EAAA,CAAaT,MAAOA,GAAWK,GAA/B,GAAA,CAAAH,SACE,CAAAQ,EAACC,EAAD,CACEZ,GAAIA,EACJE,KAAMA,EACNW,QAASZ,EACTa,KAAK,WACLV,SAAUA,EACVW,IAAKjB,EACLO,SAf4DW,IAC3DnB,EAAMoB,UAAgC,mBAAbZ,GAC5BA,EAASW,EAAME,OAAOL,QAASG,MAe/BL,EAACQ,EAAD,CAAiBC,QAASpB,IACzBG,EAAWQ,EAACU,EAAD,CAAcD,QAASpB,EAAvBG,SAA4BA,IAA2B,SApCzEP,EAAS0B,aAAe,CACtBrB,OAAO,EACPgB,UAAU,EACVM,MAAO,YAGT3B,EAAS4B,YAAc"}

package/components/Switcher/style.js

@@ -1,2 +1,2 @@
-import n,{css as o}from'styled-components';import e from'tinycolor2';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{getColor as i}from'../../mixins/color.js';var r=n.input.withConfig({componentId:"fox-ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);var a=n.label.withConfig({componentId:"fox-ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);var c=n.label.withConfig({componentId:"fox-ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;flex:0 0 auto;&::before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:50%;}"],(n=>n.switcherWidth),(n=>n.switcherHeight),(n=>n.borderRadius),(n=>{var{switcherHeight:o,dotSize:e}=n;return(o-e)/2}),(n=>{var{switcherHeight:o,dotSize:e}=n;return(o-e)/2}),(n=>n.dotSize),(n=>n.dotSize));var s="\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ".concat(c," {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ").concat(a," {\n    cursor: not-allowed;\n  }\n");var l=o(["& ","{&::before{left:","px;}}"],c,(n=>{var{switcherWidth:o,switcherHeight:e,dotSize:t}=n;return o-t-(e-t)/2}));var d=o([""," ",""],(n=>"\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ".concat(n.switcherHeight,"px;\n    line-height: ").concat(n.switcherHeight,"px;\n    font-size: ").concat(n.fontSize,"px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n    ").concat(n.disabled?s:'',"\n  ")),(n=>n.checked?l:''));var h=o(["",""],(n=>"\n    & ".concat(c," {\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n      background-color: #eaecf3;\n\n      &::before {\n        background-color: ").concat(n.theme.colors.white,";\n        box-shadow: ").concat(n.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)',";\n      }\n\n      ").concat(n.checked&&n.color?"\n              background-image: linear-gradient(\n                to right,\n                ".concat(e(i(n.color,n)).lighten(10).toString(),",\n                ").concat(i(n.color,n),"\n              );\n            "):n.inactiveColor?"\n              background-image: linear-gradient(\n                to right,\n                ".concat(e(i(n.inactiveColor,n)).lighten(10).toString(),",\n                ").concat(i(n.inactiveColor,n),"\n              );\n            "):'',"\n    }\n\n    & ").concat(r,":focus-visible + ").concat(c," {\n      outline: 1px solid ").concat(n.theme.colors.alto,";\n      outline-offset: 2px;\n    }\n  ")));var p=o(["",""],(n=>"\n    & ".concat(c," {\n      background-color: ").concat(n.disabled?n.theme.colors[n.checked?'bg-disabled-active':'bg-disabled-small']:n.theme.colors[n.checked?'bg-brand-primary-basic':'bg-onmain-tertiary'],";\n\n      &::before {\n        background-color: ").concat(n.theme.colors['bg-oncolor-primary'],";\n        box-shadow: ").concat(n.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)',";\n      }\n    }\n\n    & ").concat(r,":focus-visible + ").concat(c," {\n      outline: 1px solid ").concat(n.theme.colors['bg-brand-primary-basic'],";\n      outline-offset: 2px;\n    }\n  ")));var b=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-w14piw-3"})([""," ",""],d,(n=>{var{brandPresetUsed:o}=n;return o?p:h}));export{r as Input,a as Label,b as Root,c as Switcher};
+import o,{css as e}from'styled-components';import i from'tinycolor2';import{getColor as r}from'../../mixins/color.js';var t=o.input.withConfig({componentId:"fox-ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);var n=o.label.withConfig({componentId:"fox-ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);var a=o.label.withConfig({componentId:"fox-ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;box-shadow:inset 0 2px 2px 0 rgba(0,0,0,0.08);background-color:",";flex:0 0 auto;&:before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:100%;background-color:",";box-shadow:0 0 6px 0 rgba(0,0,0,0.16);}&:active{&::before{box-shadow:0 0 1px 1px rgba(0,0,0,0.2);}}"],60,32,40,"#eaecf3",4,4,24,24,(o=>o.theme.colors.white));var l=e(["cursor:not-allowed;opacity:0.7;& ","{cursor:not-allowed;background-color:",";box-shadow:none;&:before{background-color:",";box-shadow:none;}}& ","{cursor:not-allowed;}"],a,"#eaecf3",(o=>o.theme.colors.white),n);var s=e(["& ","{&:before{left:","px;}}"],a,32);var c=o.div.withConfig({shouldForwardProp:o=>['className','style','children'].includes(o)}).withConfig({componentId:"fox-ui__sc-w14piw-3"})(["line-height:","px;position:relative;display:inline-flex;flex-direction:row;box-sizing:border-box;height:","px;vertical-align:middle;justify-content:flex-start;align-content:center;align-items:center;max-width:100%;color:inherit;"," "," ",""],32,32,(o=>o.disabled?l:null),(o=>o.value?s:null),(o=>o.value&&o.color?e(["& ","{background-image:linear-gradient( to right,",","," );}"],a,i(r(o.color,o)).lighten(10).toString(),r(o.color,o)):o.inactiveColor?e(["& ","{background-image:linear-gradient( to right,",","," );}"],a,i(r(o.inactiveColor,o)).lighten(10).toString(),r(o.inactiveColor,o)):null));export{t as Input,n as Label,c as Root,a as Switcher};
 //# sourceMappingURL=style.js.map

package/components/Switcher/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { getColor } from 'mixins/color'\nimport type { SwitcherRootProps, SwitcherPropsByPreset } from './types'\n\nexport const Input = styled.input`\n  position: absolute;\n  overflow: visible;\n  z-index: -1;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n`\n\nexport const Label = styled.label`\n  display: inline;\n  padding-left: 14px;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label<SwitcherPropsByPreset>`\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: ${(props) => props.switcherWidth}px;\n  height: ${(props) => props.switcherHeight}px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.3s ease, background-image 0.3s ease;\n  border-radius: ${(props) => props.borderRadius}px;\n  flex: 0 0 auto;\n\n  &::before {\n    position: absolute;\n    top: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    left: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    display: block;\n    width: ${(props) => props.dotSize}px;\n    height: ${(props) => props.dotSize}px;\n    content: '';\n    transition: background 0.3s ease, left 0.3s ease;\n    transform: translateZ(0);\n    border-radius: 50%;\n  }\n`\n\nconst disabledStyles = `\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`\n\nconst checkedStyles = css<SwitcherRootProps>`\n  & ${Switcher} {\n    &::before {\n      left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n        switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nconst baseStyles = css<SwitcherRootProps>`\n  ${(props) => `\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ${props.switcherHeight}px;\n    line-height: ${props.switcherHeight}px;\n    font-size: ${props.fontSize}px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n    ${props.disabled ? disabledStyles : ''}\n  `}\n  ${(props) => (props.checked ? checkedStyles : '')}\n`\n\nconst PRESET_DEFAULT = css<SwitcherRootProps>`\n  ${(props) => `\n    & ${Switcher} {\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n      background-color: #eaecf3;\n\n      &::before {\n        background-color: ${props.theme.colors.white};\n        box-shadow: ${props.disabled ? 'none' : '0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n      }\n\n      ${\n        props.checked && props.color\n          ? `\n              background-image: linear-gradient(\n                to right,\n                ${tinycolor(getColor(props.color, props)).lighten(10).toString()},\n                ${getColor(props.color, props)}\n              );\n            `\n          : props.inactiveColor\n          ? `\n              background-image: linear-gradient(\n                to right,\n                ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n                ${getColor(props.inactiveColor, props)}\n              );\n            `\n          : ''\n      }\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      outline: 1px solid ${props.theme.colors.alto};\n      outline-offset: 2px;\n    }\n  `}\n`\n\nconst PRESET_BRAND = css<SwitcherRootProps>`\n  ${(props) => `\n    & ${Switcher} {\n      background-color: ${\n        props.disabled\n          ? props.theme.colors[props.checked ? 'bg-disabled-active' : 'bg-disabled-small']\n          : props.theme.colors[props.checked ? 'bg-brand-primary-basic' : 'bg-onmain-tertiary']\n      };\n\n      &::before {\n        background-color: ${props.theme.colors['bg-oncolor-primary']};\n        box-shadow: ${props.disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.08)'};\n      }\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      outline: 1px solid ${props.theme.colors['bg-brand-primary-basic']};\n      outline-offset: 2px;\n    }\n  `}\n`\n\nexport const Root = styled.div\n  .withConfig({\n    shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n  })\n  .attrs(injectDefaultTheme)<SwitcherRootProps>`\n  ${baseStyles}\n  ${({ brandPresetUsed }) => (brandPresetUsed ? PRESET_BRAND : PRESET_DEFAULT)}\n`\n"],"names":["Input","styled","input","withConfig","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","_ref","dotSize","_ref2","disabledStyles","concat","checkedStyles","css","_ref3","baseStyles","fontSize","disabled","checked","PRESET_DEFAULT","theme","colors","white","color","tinycolor","getColor","lighten","toString","inactiveColor","alto","PRESET_BRAND","Root","div","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","_ref4","brandPresetUsed"],"mappings":"8LAMaA,IAAAA,EAAQC,EAAOC,MAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,uFAUMI,IAAAA,EAAQJ,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,gIAUMM,IAAAA,EAAWN,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,6GAITO,GAAUA,EAAMC,gBACfD,GAAUA,EAAME,iBAITF,GAAUA,EAAMG,eAKzBC,IAAA,IAACF,eAAEA,EAAFG,QAAkBA,GAAnBD,EAAA,OAAkCF,EAAiBG,GAAW,KAC7DC,IAAA,IAACJ,eAAEA,EAAFG,QAAkBA,GAAnBC,EAAA,OAAkCJ,EAAiBG,GAAW,KAE5DL,GAAUA,EAAMK,UACfL,GAAUA,EAAMK,UAQ/B,IAAME,EAAc,oDAAAC,OAIdT,EAJc,uHAAAS,OAadX,EAbN,uCAkBA,IAAMY,EAAgBC,EAAH,CAAA,KAAA,mBAAA,SACbX,GAEQY,IAAA,IAACV,cAAEA,EAAFC,eAAiBA,EAAjBG,QAAiCA,GAAlCM,EAAA,OACNV,EAAgBI,GAAWH,EAAiBG,GAAW,KAK/D,IAAMO,EAAaF,EACdV,CAAAA,GAAAA,IAAAA,KAAAA,sIAKSA,EAAME,eALhB,0BAAAM,OAMeR,EAAME,eACRF,wBAAAA,OAAAA,EAAMa,SAPnB,6KAAAL,OAcER,EAAMc,SAAWP,EAAiB,aAEnCP,GAAWA,EAAMe,QAAUN,EAAgB,KAGhD,IAAMO,EAAiBN,EAAH,CAAA,GAAA,KACfV,GACGD,WAAAA,OAAAA,EAKoBC,mJAAAA,OAAAA,EAAMiB,MAAMC,OAAOC,MAN3C,2BAAAX,OAOkBR,EAAMc,SAAW,OAAS,gCAIxCd,wBAAAA,OAAAA,EAAMe,SAAWf,EAAMoB,MAAvB,kGAAAZ,OAIUa,EAAUC,EAAStB,EAAMoB,MAAOpB,IAAQuB,QAAQ,IAAIC,WAJ9D,uBAAAhB,OAKUc,EAAStB,EAAMoB,MAAOpB,uCAG5BA,EAAMyB,cAAN,kGAAAjB,OAIMa,EAAUC,EAAStB,EAAMyB,cAAezB,IAAQuB,QAAQ,IAAIC,WAJlE,uBAAAhB,OAKMc,EAAStB,EAAMyB,cAAezB,GALpC,oCAQA,GA3BR,qBAAAQ,OA+BIhB,EAAyBO,qBAAAA,OAAAA,EACNC,iCAAAA,OAAAA,EAAMiB,MAAMC,OAAOQ,KAhC1C,8CAsCJ,IAAMC,EAAejB,EAAH,CAAA,GAAA,KACbV,GACGD,WAAAA,OAAAA,EAEAC,gCAAAA,OAAAA,EAAMc,SACFd,EAAMiB,MAAMC,OAAOlB,EAAMe,QAAU,qBAAuB,qBAC1Df,EAAMiB,MAAMC,OAAOlB,EAAMe,QAAU,yBAA2B,sBALtE,sDAAAP,OASwBR,EAAMiB,MAAMC,OAAO,sBACzBlB,2BAAAA,OAAAA,EAAMc,SAAW,OAAS,kCAV5C,+BAAAN,OAcIhB,EAdJ,qBAAAgB,OAc6BT,EACNC,iCAAAA,OAAAA,EAAMiB,MAAMC,OAAO,wEAMvC,IAAMU,EAAOnC,EAAOoC,IACxBlC,WAAW,CACVmC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAE1EE,MAAMC,GAJQvC,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,GAAA,IAAA,IAKbmB,GACAuB,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBT,EAAeX"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { SwitcherProps } from './Switcher'\n\nconst switcherWidth = 60\nconst switcherHeight = 32\nconst borderRadius = 40\nconst dotSize = 24\nconst defaultBackground = '#eaecf3'\n\nexport const Input = styled.input`\n  position: absolute;\n  overflow: visible;\n  z-index: -1;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n`\n\nexport const Label = styled.label`\n  display: inline;\n  padding-left: 14px;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label`\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: ${switcherWidth}px;\n  height: ${switcherHeight}px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.3s ease, background-image 0.3s ease;\n  border-radius: ${borderRadius}px;\n  box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n  background-color: ${defaultBackground};\n  flex: 0 0 auto;\n  &:before {\n    position: absolute;\n    top: ${(switcherHeight - dotSize) / 2}px;\n    left: ${(switcherHeight - dotSize) / 2}px;\n    display: block;\n    width: ${dotSize}px;\n    height: ${dotSize}px;\n    content: '';\n    transition: background 0.3s ease, left 0.3s ease;\n    transform: translateZ(0);\n    border-radius: 100%;\n    background-color: ${(props) => props.theme.colors.white};\n    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);\n  }\n\n  &:active {\n    &::before {\n      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);\n    }\n  }\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    background-color: ${defaultBackground};\n    box-shadow: none;\n    &:before {\n      background-color: ${(props) => props.theme.colors.white};\n      box-shadow: none;\n    }\n  }\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`\n\nconst checked = css`\n  & ${Switcher} {\n    &:before {\n      left: ${switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nexport const Root = styled.div.withConfig<Omit<SwitcherProps, 'onChange'>>({\n  shouldForwardProp: (prop) => ['className', 'style', 'children'].includes(prop),\n})`\n  line-height: ${switcherHeight}px;\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  height: ${switcherHeight}px;\n  vertical-align: middle;\n  justify-content: flex-start;\n  align-content: center;\n  align-items: center;\n  max-width: 100%;\n  color: inherit;\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (props.value ? checked : null)}\n  ${(props) =>\n    props.value && props.color\n      ? css`\n          & ${Switcher} {\n            background-image: linear-gradient(\n              to right,\n              ${tinycolor(getColor(props.color, props)).lighten(10).toString()},\n              ${getColor(props.color, props)}\n            );\n          }\n        `\n      : props.inactiveColor\n      ? css`\n          & ${Switcher} {\n            background-image: linear-gradient(\n              to right,\n              ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n              ${getColor(props.inactiveColor, props)}\n            );\n          }\n        `\n      : null}\n`\n"],"names":["Input","styled","input","withConfig","componentId","Label","label","Switcher","props","theme","colors","white","disabled","css","checked","switcherWidth","Root","div","shouldForwardProp","prop","includes","switcherHeight","value","color","tinycolor","getColor","lighten","toString","inactiveColor"],"mappings":"sHAWaA,IAAAA,EAAQC,EAAOC,MAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,uFAUMI,IAAAA,EAAQJ,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,gIAUMM,IAAAA,EAAWN,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,+DAAA,aAAA,+GAAA,qEAAA,iDAAA,WAAA,0BAAA,aAAA,4HAAA,wGA1BC,GACC,GACF,GAEK,UAqCf,EACC,EAvCI,GAAA,IA+CSO,GAAUA,EAAMC,MAAMC,OAAOC,QAWtD,IAAMC,EAAWC,8KAIXN,EA7DoB,WAkECC,GAAUA,EAAMC,MAAMC,OAAOC,OAIlDN,GAKN,IAAMS,EAAUD,EACVN,CAAAA,KAAAA,kBAAAA,SAAAA,EAEQQ,IAKP,IAAMC,EAAOf,EAAOgB,IAAId,WAA4C,CACzEe,kBAAoBC,GAAS,CAAC,YAAa,QAAS,YAAYC,SAASD,KAD1DhB,WAAA,CAAAC,YAAA,uBAAGH,CAGHoB,CAAAA,eAAAA,4FAAAA,4HAAAA,IAAAA,IAAAA,IAzFM,GAAA,IAqGlBb,GAAWA,EAAMI,SAAWA,EAAW,OACvCJ,GAAWA,EAAMc,MAAQR,EAAU,OACnCN,GACDA,EAAMc,OAASd,EAAMe,MACjBV,EACMN,CAAAA,KAAAA,+CAAAA,IAAAA,QAAAA,EAGEiB,EAAUC,EAASjB,EAAMe,MAAOf,IAAQkB,QAAQ,IAAIC,WACpDF,EAASjB,EAAMe,MAAOf,IAI9BA,EAAMoB,cACNf,mEACMN,EAGEiB,EAAUC,EAASjB,EAAMoB,cAAepB,IAAQkB,QAAQ,IAAIC,WAC5DF,EAASjB,EAAMoB,cAAepB,IAItC"}

package/dts/index.d.ts

@@ -1037,6 +1037,39 @@ interface ArrowProps extends BaseProps$1 {
  */
 declare const Arrow: react.ForwardRefExoticComponent<ArrowProps & react.RefAttributes<HTMLButtonElement>>;
 
+declare type ArrowBadgeSideShape = 'square' | 'tail' | 'arrow';
+declare type ArrowBadgeSize = 'xl' | 'l' | 'm' | 's';
+interface ArrowBadgeProps extends BaseProps, Color, Display {
+    /** Children react node */
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    /** Secondary appearance */
+    secondary?: boolean;
+    /** Third appearance */
+    third?: boolean;
+    /** Fourth appearance */
+    fourth?: boolean;
+    /** Small view */
+    small?: boolean;
+    /** Size */
+    size?: ArrowBadgeSize;
+    /** Left side shape */
+    leftShape?: ArrowBadgeSideShape;
+    /** Right side shape */
+    rightShape?: ArrowBadgeSideShape;
+}
+
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`Display`](#/Миксины)
+ */
+declare function ArrowBadge({ children, content, className, display, ...restProps }: ArrowBadgeProps): JSX.Element;
+declare namespace ArrowBadge {
+    var displayName: string;
+}
+
 interface AvatarProps extends BaseProps, Color {
     /**
      * Children react node
@@ -1732,24 +1765,54 @@ declare namespace Spinner {
     var displayName: string;
 }
 
-interface SwitcherProps extends BaseProps$1, Color$1<'color'>, Color$1<'inactiveColor'> {
-    /** Input id */
+interface SwitcherProps extends BaseProps, Color<'color'>, Color<'inactiveColor'> {
+    /**
+     * Id for swithcer
+     */
     id?: string;
-    /** Input name */
+    /**
+     * Name of input
+     */
     name?: string;
-    /**  Input value */
+    /**
+     * Value of input
+     */
     value?: boolean;
-    /** Switcher is disabled */
+    /**
+     * Switcher is disabled
+     */
     disabled?: boolean;
-    /** Tab index */
+    /**
+     * Tabindex
+     */
     tabIndex?: number;
-    /** Switcher label */
+    /**
+     * Label of switcher
+     */
+    /**
+     * Children react node
+     */
     children?: React.ReactNode;
-    /** onChange function */
-    onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * onChange function
+     */
+    onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement>): void;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`Color<'inactiveColor'>`](#/Миксины)
+ */
+declare function Switcher(props: typeof Switcher.defaultProps & SwitcherProps): JSX.Element;
+declare namespace Switcher {
+    var defaultProps: {
+        value: boolean;
+        disabled: boolean;
+        color: string;
+    };
+    var displayName: string;
 }
-
-declare const Switcher: react.ForwardRefExoticComponent<SwitcherProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TabProps extends Color, Color<'borderColor'> {
     /**
@@ -2413,4 +2476,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };