@foxford/ui 2.0.0-beta-d2ba84e-20220706 → 2.0.0-beta-38ffcd6-20220707

package/index.js

@@ -1,2 +1,2 @@
-export{theme}from'./theme/index.js';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.js';export{property,responsiveProperty}from'./mixins/responsive-property.js';export{color}from'./mixins/color.js';export{vAlign}from'./mixins/vAlign.js';export{buildMediaQuery}from'./mixins/shared.js';export{ActionBtn}from'./components/ActionBtn/ActionBtn.js';export{Amount}from'./components/Amount/Amount.js';export{CURRENCY_MAP,CurrencyCodes}from'./components/Amount/data/index.js';export{Anchor}from'./components/Anchor/Anchor.js';export{Arrow}from'./components/Arrow/Arrow.js';export{Avatar}from'./components/Avatar/Avatar.js';export{Badge}from'./components/Badge/Badge.js';export{Button}from'./components/Button/Button.js';export{Container}from'./components/Container/Container.js';export{Icon}from'./components/Icon/Icon.js';export{defaultIcons}from'./components/Icon/icons.js';export{Modal}from'./components/Modal/Modal.js';export{Paper}from'./components/Paper/Paper.js';export{Progress}from'./components/Progress/Progress.js';export{Scrollable}from'./components/Scrollable/Scrollable.js';export{Section}from'./components/Section/Section.js';export{Separator}from'./components/Separator/Separator.js';export{Spacer}from'./components/Spacer/Spacer.js';export{Spinner}from'./components/Spinner/Spinner.js';export{Switcher}from'./components/Switcher/Switcher.js';export{Tabs}from'./components/Tabs/Tabs.js';export{Text}from'./components/Text/Text.js';export{Tooltip}from'./components/Tooltip/Tooltip.js';export{Tag}from'./components/Tag/Tag.js';export{ContextMenu}from'./components/ContextMenu/ContextMenu.js';export{Textarea}from'./components/Textarea/Textarea.js';export{Input}from'./components/Input/Input.js';export{baseInputStyle}from'./components/Input/style.js';export{COUNTRY_DATA,DEFAULT_MASK,INITIAL_MASK}from'./components/Input.Phone/constants.js';export{Radio}from'./components/Radio/Radio.js';export{Checkbox}from'./components/Checkbox/Checkbox.js';export{Select}from'./components/Select/Select.js';export{ThemeProvider}from'./theme/theme-provider.js';export{ColorNames}from'./theme/colors.js';
+export{theme}from'./theme/index.js';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.js';export{desktopFirst,mobileFirst,property,responsiveNamedProperty,responsiveProperty}from'./mixins/responsive-property.js';export{color}from'./mixins/color.js';export{vAlign}from'./mixins/vAlign.js';export{buildMediaQuery}from'./mixins/shared.js';export{ActionBtn}from'./components/ActionBtn/ActionBtn.js';export{Amount}from'./components/Amount/Amount.js';export{CURRENCY_MAP,CurrencyCodes}from'./components/Amount/data/index.js';export{Anchor}from'./components/Anchor/Anchor.js';export{Arrow}from'./components/Arrow/Arrow.js';export{Avatar}from'./components/Avatar/Avatar.js';export{Badge}from'./components/Badge/Badge.js';export{Button}from'./components/Button/Button.js';export{Container}from'./components/Container/Container.js';export{Icon}from'./components/Icon/Icon.js';export{defaultIcons}from'./components/Icon/icons.js';export{Modal}from'./components/Modal/Modal.js';export{Paper}from'./components/Paper/Paper.js';export{Progress}from'./components/Progress/Progress.js';export{Scrollable}from'./components/Scrollable/Scrollable.js';export{Section}from'./components/Section/Section.js';export{Separator}from'./components/Separator/Separator.js';export{Spacer}from'./components/Spacer/Spacer.js';export{Spinner}from'./components/Spinner/Spinner.js';export{Switcher}from'./components/Switcher/Switcher.js';export{Tabs}from'./components/Tabs/Tabs.js';export{Text}from'./components/Text/Text.js';export{Tooltip}from'./components/Tooltip/Tooltip.js';export{Tag}from'./components/Tag/Tag.js';export{ContextMenu}from'./components/ContextMenu/ContextMenu.js';export{Textarea}from'./components/Textarea/Textarea.js';export{Input}from'./components/Input/Input.js';export{baseInputStyle}from'./components/Input/style.js';export{COUNTRY_DATA,DEFAULT_MASK,INITIAL_MASK}from'./components/Input.Phone/constants.js';export{Radio}from'./components/Radio/Radio.js';export{Checkbox}from'./components/Checkbox/Checkbox.js';export{Select}from'./components/Select/Select.js';export{ThemeProvider}from'./theme/theme-provider.js';export{ColorNames}from'./theme/colors.js';
 //# sourceMappingURL=index.js.map

package/mixins/responsive-property.js

@@ -1,2 +1,2 @@
-import{css as e}from'styled-components';import{screenMaxXs as r,screenMaxS as s,screenMaxM as n,screenMaxL as t,screenMinXl as i}from'./screen.js';import{buildMediaQuery as a,SIZES_LATIN as o,FONT_SIZES_LATIN as d}from'./shared.js';var p=function(r,s,n){var t=arguments.length>1&&void 0!==s?s:'size';var i=arguments.length>2&&void 0!==n?n:'px';return()=>()=>{return'boolean'==typeof r?'function'==typeof t?t(1):null:(s='font-size'===t?d:o,'function'==typeof t?t('number'==typeof r?r:s[r]):'string'==typeof r&&['auto','initial','inherit'].includes(r)?e(["",":",";"],t,r):e(["",":","",";"],t,'string'==typeof r&&s[r]?s[r]:r,i));var s}};var f={XS:r,S:s,M:n,L:t,XL:i};var u=e=>e.endsWith('XS')?'XS':e.endsWith('S')?'S':e.endsWith('M')?'M':e.endsWith('XL')?'XL':e.endsWith('L')?'L':null;var S=['XL','L','M','S','XS'];var l=(e,r)=>{var s=u(e);var n=u(r);return s&&n?S.findIndex((e=>e===s))<S.findIndex((e=>e===n))?-1:1:0};var c=r=>{var{sizes:s,cssProperty:n="size",sizing:t="px",customSizeHandler:i,sort:o=l}=r;return()=>()=>Object.keys(s).sort(o).map((e=>{if(s[e]){var r='function'==typeof i?i(s[e]):s[e];return a(r,n,(e=>e.endsWith('XS')?f.XS:e.endsWith('S')?f.S:e.endsWith('M')?f.M:e.endsWith('L')?f.L:f.XL)(e),t)}return null})).filter(Boolean).map((r=>e(["",""],r)))};export{l as desktopFirst,p as property,c as responsiveProperty};
+import n from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as e}from'styled-components';import{screenMaxXxs as r,screenMaxXs as t,screenMaxS as a,screenMaxM as o,screenMaxL as s,screenMinL as i,screenMinM as c}from'./screen.js';import{buildMediaQuery as l,SIZES_LATIN as u,FONT_SIZES_LATIN as p}from'./shared.js';var f,d,v,m,y,b,x,S,h;var X=function(n,r,t){var a=arguments.length>1&&void 0!==r?r:'size';var o=arguments.length>2&&void 0!==t?t:'px';return()=>()=>{return'boolean'==typeof n?'function'==typeof a?a(1):null:(r='font-size'===a?p:u,'function'==typeof a?a('number'==typeof n?n:r[n]):'string'==typeof n&&['auto','initial','inherit'].includes(n)?e(["",":",";"],a,n):e(["",":","",";"],a,'string'==typeof n&&r[n]?r[n]:n,o));var r}};var M={XXS:r,XS:t,S:a,M:o,L:s,XL:i};var L={desktop:c,tablet:o,mobile:a};var g=n=>n.endsWith('XS')?'xs':n.endsWith('S')?'s':n.endsWith('M')?'m':n.endsWith('XL')?'xl':n.endsWith('L')?'l':null;var W=['xl','l','m','s','xs'];var I=['xs','s','m','l','xl'];var z=(n,e)=>{var r=g(n);var t=g(e);return r&&t?W.findIndex((n=>n===r))<W.findIndex((n=>n===t))?-1:1:0};var A=(n,e)=>{var r=g(n);var t=g(e);return r&&t?I.findIndex((n=>n===r))<I.findIndex((n=>n===t))?-1:1:0};var k=n=>{var{sizes:r,cssProperty:t="size",sizing:a="px",customSizeHandler:o,sort:s=z}=n;return()=>()=>Object.keys(r).sort(s).map((n=>{if(r[n]){var e='function'==typeof o?o(r[n]):r[n];return l(e,t,(n=>n.endsWith('XXS')?M.XXS:n.endsWith('XS')?M.XS:n.endsWith('S')?M.S:n.endsWith('M')?M.M:n.endsWith('L')?M.L:M.XL)(n),a)}return null})).filter(Boolean).map((n=>e(["",""],n)))};var N=function(r,t,a){var o=arguments.length>1&&void 0!==t?t:null;var s=arguments.length>2&&void 0!==a?a:'px';return()=>t=>{var a;var i=null!==(a=t[r])&&void 0!==a?a:null;var c=null!=o?o:r;if(!i)return null;if(Array.isArray(i)&&3===i.length){var[l,u,p]=i;return e([""," "," ",""],L.desktop()(f||(f=n(["\n          ",": ",";\n        "])),c,'number'==typeof l?"".concat(l).concat(s):l),L.tablet()(d||(d=n(["\n          ",": ",";\n        "])),c,'number'==typeof u?"".concat(u).concat(s):u),L.mobile()(v||(v=n(["\n          ",": ",";\n        "])),c,'number'==typeof p?"".concat(p).concat(s):p))}if(Array.isArray(i)&&6===i.length&&'string'==typeof c){var[X,g,W,I,z,A]=i;return e([""," "," "," "," "," ",""],M.XL()(m||(m=n(["\n            ",": ",";\n          "])),c,'number'==typeof X?"".concat(X).concat(s):X),M.L()(y||(y=n(["\n            ",": ",";\n          "])),c,'number'==typeof g?"".concat(g).concat(s):g),M.M()(b||(b=n(["\n            ",": ",";\n          "])),c,'number'==typeof W?"".concat(W).concat(s):W),M.S()(x||(x=n(["\n            ",": ",";\n          "])),c,'number'==typeof I?"".concat(I).concat(s):I),M.XS()(S||(S=n(["\n            ",": ",";\n          "])),c,'number'==typeof z?"".concat(z).concat(s):z),M.XXS()(h||(h=n(["\n            ",": ",";\n          "])),c,'number'==typeof A?"".concat(A).concat(s):A))}return'number'==typeof i?e(["",":","",";"],c,i,s):'string'==typeof i?e(["",":",";"],c,i):null}};export{z as desktopFirst,A as mobileFirst,X as property,k as responsiveNamedProperty,N as responsiveProperty};
 //# sourceMappingURL=responsive-property.js.map

package/mixins/responsive-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinXl } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n  | 'size'\n  | 'fontSize'\n  | 'height'\n  | 'width'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'margin'\n  | 'marginTop'\n  | 'marginRight'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n  /**\n   * Size for breakpoint\n   */\n  [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport const property =\n  (value: PossibleValues, cssProperty: CssProperty = 'size', sizing = 'px') =>\n  () =>\n  () => {\n    if (typeof value === 'boolean') {\n      return typeof cssProperty === 'function' ? cssProperty(1) : null\n    }\n\n    let sizeMap\n\n    switch (cssProperty) {\n      case 'font-size':\n        sizeMap = FONT_SIZES_LATIN\n        break\n      default:\n        sizeMap = SIZES_LATIN\n    }\n\n    if (typeof cssProperty === 'function') {\n      return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n    }\n\n    if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n      return css`\n        ${cssProperty}: ${value};\n      `\n\n    return css`\n      ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing};\n    `\n  }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n  XS: screenMaxXs,\n  S: screenMaxS,\n  M: screenMaxM,\n  L: screenMaxL,\n  XL: screenMinXl,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n  if (size.endsWith('XS')) {\n    return SCREEN_SIZE_MAP.XS\n  } else if (size.endsWith('S')) {\n    return SCREEN_SIZE_MAP.S\n  } else if (size.endsWith('M')) {\n    return SCREEN_SIZE_MAP.M\n  } else if (size.endsWith('L')) {\n    return SCREEN_SIZE_MAP.L\n  } else {\n    return SCREEN_SIZE_MAP.XL\n  }\n}\n\nconst getKey = (key: string): 'XS' | 'S' | 'M' | 'L' | 'XL' | null => {\n  if (key.endsWith('XS')) return 'XS' // first check XS\n  if (key.endsWith('S')) return 'S'\n  if (key.endsWith('M')) return 'M'\n  if (key.endsWith('XL')) return 'XL' // first check XL\n  if (key.endsWith('L')) return 'L'\n  return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['XL', 'L', 'M', 'S', 'XS']\nconst MOBILE_FIRST_KEYS = ['XS', 'S', 'M', 'L', 'XL']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n  const aKey = getKey(a)\n  const bKey = getKey(b)\n  if (!aKey || !bKey) return 0\n\n  const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n  const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n  return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n  const aKey = getKey(a)\n  const bKey = getKey(b)\n  if (!aKey || !bKey) return 0\n\n  const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n  const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n  return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsivePropertyPayload<T extends PropsProperties> {\n  sizes: ResponsiveProperty<T>\n  cssProperty: CssProperty\n  sizing?: 'px' | 'rem' | 'em' | '%'\n  customSizeHandler?: (_value: PossibleValues) => PossibleValues\n  sort?: (_a: string, _b: string) => number\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n  <T extends PropsProperties>({\n    sizes,\n    cssProperty = 'size',\n    sizing = 'px',\n    customSizeHandler,\n    sort = desktopFirst,\n  }: ResponsivePropertyPayload<T>) =>\n  () =>\n  () => {\n    const mediaCssStrArr = Object.keys(sizes)\n      .sort(sort)\n      .map((size) => {\n        if (sizes[size]) {\n          const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n          return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing)\n        }\n        return null\n      })\n      .filter(Boolean)\n      .map(\n        (item) =>\n          css`\n            ${item}\n          `\n      )\n\n    return mediaCssStrArr\n  }\n"],"names":["property","value","t","r","cssProperty","sizing","sizeMap","FONT_SIZES_LATIN","SIZES_LATIN","includes","css","SCREEN_SIZE_MAP","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinXl","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","responsiveProperty","_ref","sizes","customSizeHandler","sort","Object","keys","map","size","_size","buildMediaQuery","filter","Boolean","item"],"mappings":"4OA0CaA,EACX,SAACC,EAADC,EAAAC,GAAA,IAAwBC,+BAAxBF,EAAAA,EAAmD,OAAnD,IAA2DG,+BAA3DF,EAAAA,EAAoE,KAApE,MACA,IACA,KACE,MAAqB,kBAAVF,EACqB,mBAAhBG,EAA6BA,EAAY,GAAK,MAO1DE,EADG,cADCF,EAEMG,EAGAC,EAGa,mBAAhBJ,EACFA,EAA6B,iBAAVH,EAAqBA,EAAQK,EAAQL,IAG5C,iBAAVA,GAAsB,CAAC,OAAQ,UAAW,WAAWQ,SAASR,GAChES,EAAP,CAAA,GAAA,IAAA,KACIN,EAAgBH,GAGfS,kBACHN,EAAiC,iBAAVH,GAAsBK,EAAQL,GAASK,EAAQL,GAASA,EAAQI,IApB3F,IAAIC,IAwBR,IAAMK,EAA2E,CAC/EC,GAAIC,EACJC,EAAGC,EACHC,EAAGC,EACHC,EAAGC,EACHC,GAAIC,GAiBN,IAAMC,EAAUC,GACVA,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IACvB,KAGT,IAAMC,EAAqB,CAAC,KAAM,IAAK,IAAK,IAAK,UASpCC,EAAe,CAACC,EAAWC,KACtC,IAAMC,EAAOP,EAAOK,GACpB,IAAMG,EAAOR,EAAOM,GACpB,OAAKC,GAASC,EAECL,EAAmBM,WAAWC,GAAOA,IAAOH,IAC5CJ,EAAmBM,WAAWC,GAAOA,IAAOF,KAEjC,EAAI,EALH,GA0CtB,IAAMG,EACXC,IAAA,IAA4BC,MAC1BA,EAD0B/B,YAE1BA,EAAc,OAFYC,OAG1BA,EAAS,KAHiB+B,kBAI1BA,EAJ0BC,KAK1BA,EAAOX,GALTQ,EAAA,MAOA,IACA,IACyBI,OAAOC,KAAKJ,GAChCE,KAAKA,GACLG,KAAKC,IACJ,GAAIN,EAAMM,GAAO,CACf,IAAMC,EAAqC,mBAAtBN,EAAmCA,EAAkBD,EAAMM,IAASN,EAAMM,GAC/F,OAAOE,EAAgBD,EAAOtC,EA5FxC,CAAoCqC,GAC9BA,EAAKjB,SAAS,MACTb,EAAgBC,GACd6B,EAAKjB,SAAS,KAChBb,EAAgBG,EACd2B,EAAKjB,SAAS,KAChBb,EAAgBK,EACdyB,EAAKjB,SAAS,KAChBb,EAAgBO,EAEhBP,EAAgBS,GAV3B,CA4FgFqB,GAAOpC,GAE/E,OAAO,QAERuC,OAAOC,SACPL,KACEM,GACCpC,EACIoC,CAAAA,GAAAA,IAAAA"}
+{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs, screenMinM } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n  | 'size'\n  | 'fontSize'\n  | 'height'\n  | 'width'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'margin'\n  | 'marginTop'\n  | 'marginRight'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n  /**\n   * Size for breakpoint\n   */\n  [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport type ResponsiveProperty<V = number | string | keyof typeof SizeLatin> =\n  | V\n  | [desktop: V, tablet: V, mobile: V]\n  | [xl: V, l: V, m: V, s: V, xs: V, xxs: V]\n\nexport const property =\n  (value: PossibleValues, cssProperty: CssProperty = 'size', sizing = 'px') =>\n  () =>\n  () => {\n    if (typeof value === 'boolean') {\n      return typeof cssProperty === 'function' ? cssProperty(1) : null\n    }\n\n    let sizeMap\n\n    switch (cssProperty) {\n      case 'font-size':\n        sizeMap = FONT_SIZES_LATIN\n        break\n      default:\n        sizeMap = SIZES_LATIN\n    }\n\n    if (typeof cssProperty === 'function') {\n      return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n    }\n\n    if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n      return css`\n        ${cssProperty}: ${value};\n      `\n\n    return css`\n      ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing};\n    `\n  }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n  XXS: screenMaxXxs,\n  XS: screenMaxXs,\n  S: screenMaxS,\n  M: screenMaxM,\n  L: screenMaxL,\n  XL: screenMinL,\n}\n\nconst SCREEN_SIZE_MAP_BY_DEVICE_ALIAS: Record<'desktop' | 'tablet' | 'mobile', typeof screenMaxXs> = {\n  desktop: screenMinM,\n  tablet: screenMaxM,\n  mobile: screenMaxS,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n  if (size.endsWith('XXS')) {\n    return SCREEN_SIZE_MAP.XXS\n  } else if (size.endsWith('XS')) {\n    return SCREEN_SIZE_MAP.XS\n  } else if (size.endsWith('S')) {\n    return SCREEN_SIZE_MAP.S\n  } else if (size.endsWith('M')) {\n    return SCREEN_SIZE_MAP.M\n  } else if (size.endsWith('L')) {\n    return SCREEN_SIZE_MAP.L\n  } else {\n    return SCREEN_SIZE_MAP.XL\n  }\n}\n\nconst getKey = (key: string): 'xs' | 's' | 'm' | 'l' | 'xl' | null => {\n  if (key.endsWith('XS')) return 'xs' // first check XS\n  if (key.endsWith('S')) return 's'\n  if (key.endsWith('M')) return 'm'\n  if (key.endsWith('XL')) return 'xl' // first check XL\n  if (key.endsWith('L')) return 'l'\n  return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['xl', 'l', 'm', 's', 'xs']\nconst MOBILE_FIRST_KEYS = ['xs', 's', 'm', 'l', 'xl']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n  const aKey = getKey(a)\n  const bKey = getKey(b)\n  if (!aKey || !bKey) return 0\n\n  const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n  const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n  return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n  const aKey = getKey(a)\n  const bKey = getKey(b)\n  if (!aKey || !bKey) return 0\n\n  const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n  const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n  return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsiveNamedPropertyPayload<T extends PropsProperties> {\n  sizes: ResponsiveNamedProperty<T>\n  cssProperty: CssProperty\n  sizing?: 'px' | 'rem' | 'em' | '%'\n  customSizeHandler?: (_value: PossibleValues) => PossibleValues\n  sort?: (_a: string, _b: string) => number\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveNamedProperty =\n  <T extends PropsProperties>({\n    sizes,\n    cssProperty = 'size',\n    sizing = 'px',\n    customSizeHandler,\n    sort = desktopFirst,\n  }: ResponsiveNamedPropertyPayload<T>) =>\n  () =>\n  () => {\n    const mediaCssStrArr = Object.keys(sizes)\n      .sort(sort)\n      .map((size) => {\n        if (sizes[size]) {\n          const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n          return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing)\n        }\n        return null\n      })\n      .filter(Boolean)\n      .map(\n        (item) =>\n          css`\n            ${item}\n          `\n      )\n\n    return mediaCssStrArr\n  }\n\n/**\n * Миксин для генерации media запросов\n *\n * @param property имя пропсы\n * @param cssProperty имя css свойства\n * @param sizing значение величины, по умолчанию `px`\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n  (property: string, cssProperty: string | null = null, sizing = 'px') =>\n  () =>\n  (props: any) => {\n    const prop: ResponsiveProperty | null = props[property] ?? null\n    const _cssProperty = cssProperty ?? property\n    if (!prop) return null\n\n    if (Array.isArray(prop) && prop.length === 3) {\n      const [desktop, tablet, mobile] = prop\n      return css`\n        ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.desktop()`\n          ${_cssProperty}: ${typeof desktop === 'number' ? `${desktop}${sizing}` : desktop};\n        `}\n        ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.tablet()`\n          ${_cssProperty}: ${typeof tablet === 'number' ? `${tablet}${sizing}` : tablet};\n        `}\n        ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.mobile()`\n          ${_cssProperty}: ${typeof mobile === 'number' ? `${mobile}${sizing}` : mobile};\n        `}\n      `\n    }\n\n    if (Array.isArray(prop) && prop.length === 6 && typeof _cssProperty === 'string') {\n      const [xl, l, m, s, xs, xxs] = prop\n      return css`\n        ${SCREEN_SIZE_MAP.XL()`\n            ${_cssProperty}: ${typeof xl === 'number' ? `${xl}${sizing}` : xl};\n          `}\n        ${SCREEN_SIZE_MAP.L()`\n            ${_cssProperty}: ${typeof l === 'number' ? `${l}${sizing}` : l};\n          `}\n          ${SCREEN_SIZE_MAP.M()`\n            ${_cssProperty}: ${typeof m === 'number' ? `${m}${sizing}` : m};\n          `}\n          ${SCREEN_SIZE_MAP.S()`\n            ${_cssProperty}: ${typeof s === 'number' ? `${s}${sizing}` : s};\n          `}\n          ${SCREEN_SIZE_MAP.XS()`\n            ${_cssProperty}: ${typeof xs === 'number' ? `${xs}${sizing}` : xs};\n          `}\n          ${SCREEN_SIZE_MAP.XXS()`\n            ${_cssProperty}: ${typeof xxs === 'number' ? `${xxs}${sizing}` : xxs};\n          `}\n      `\n    }\n\n    if (typeof prop === 'number') {\n      return css`\n        ${_cssProperty}: ${prop}${sizing};\n      `\n    }\n\n    if (typeof prop === 'string') {\n      return css`\n        ${_cssProperty}: ${prop};\n      `\n    }\n\n    return null\n  }\n"],"names":["property","value","e","r","cssProperty","sizing","sizeMap","FONT_SIZES_LATIN","SIZES_LATIN","includes","css","SCREEN_SIZE_MAP","XXS","screenMaxXxs","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinL","SCREEN_SIZE_MAP_BY_DEVICE_ALIAS","desktop","screenMinM","tablet","mobile","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","MOBILE_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","mobileFirst","responsiveNamedProperty","_ref","sizes","customSizeHandler","sort","Object","keys","map","size","_size","buildMediaQuery","filter","Boolean","item","responsiveProperty","o","props","_props$property","prop","_cssProperty","Array","isArray","length","_templateObject2","_taggedTemplateLiteral","concat","xl","l","m","s","xs","xxs","_templateObject6","_templateObject7"],"mappings":"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"}

package/mixins/screen.js

@@ -1,2 +1,2 @@
-import{css as a}from'styled-components';import{theme as e}from'../theme/index.js';var n={MAX:r=(a,e)=>"(max-width: ".concat(a[e],"px)"),MIN:s=(a,e)=>"(min-width: ".concat(a[e]+1,"px)"),RANGE:(a,e,n)=>"".concat(s(a,e)," and ").concat(r(a,n))};var r,s;var i=function(n){for(var r=arguments.length,s=new Array(r>1?r-1:0),i=1;i<r;i++)s[i-1]=arguments[i];return r=>function(){for(var i=arguments.length,c=new Array(i),t=0;t<i;t++)c[t]=arguments[t];return i=>{var t,o;var v=null!==(t=null===(o=i.theme)||void 0===o?void 0:o.breakpoints)&&void 0!==t?t:e.breakpoints;return void 0!==r&&'function'==typeof r.condition&&!1===r.condition(i)?a([""]):a(["@media screen and "," ","{","}"],n(v,...s),void 0!==r&&'string'==typeof r.and?"and ".concat(r.and):"",a(...c))}}};var c=i(n.RANGE,'xxs','xs');var t=i(n.RANGE,'xs','s');var o=i(n.RANGE,'s','m');var v=i(n.RANGE,'m','l');var M=i(n.RANGE,'l','xl');var x=i(n.MAX,'xxs');var d=i(n.MAX,'xs');var l=i(n.MIN,'xs');var m=i(n.MAX,'s');var A=i(n.MIN,'s');var X=i(n.MAX,'m');var p=i(n.MIN,'m');var N=i(n.MAX,'l');var u=i(n.MIN,'l');var f=i(n.MAX,'xl');var h=i(n.MIN,'xl');var R=function(){return a(["@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){","}"],a(...arguments))};export{v as screenL,o as screenM,N as screenMaxL,X as screenMaxM,m as screenMaxS,f as screenMaxXl,d as screenMaxXs,x as screenMaxXxs,u as screenMinL,p as screenMinM,A as screenMinS,h as screenMinXl,l as screenMinXs,R as screenRetina,t as screenS,M as screenXl,c as screenXs};
+import{css as a}from'styled-components';import{theme as e}from'../theme/index.js';var n={MAX:r=(a,e)=>"(max-width: ".concat(a[e]+.02,"px)"),MIN:s=(a,e)=>"(min-width: ".concat(a[e]+1,"px)"),RANGE:(a,e,n)=>"".concat(s(a,e)," and ").concat(r(a,n))};var r,s;var i=function(n){for(var r=arguments.length,s=new Array(r>1?r-1:0),i=1;i<r;i++)s[i-1]=arguments[i];return r=>function(){for(var i=arguments.length,c=new Array(i),t=0;t<i;t++)c[t]=arguments[t];return i=>{var t,o;var v=null!==(t=null===(o=i.theme)||void 0===o?void 0:o.breakpoints)&&void 0!==t?t:e.breakpoints;return void 0!==r&&'function'==typeof r.condition&&!1===r.condition(i)?a([""]):a(["@media screen and "," ","{","}"],n(v,...s),void 0!==r&&'string'==typeof r.and?"and ".concat(r.and):"",a(...c))}}};var c=i(n.RANGE,'xxs','xs');var t=i(n.RANGE,'xs','s');var o=i(n.RANGE,'s','m');var v=i(n.RANGE,'m','l');var M=i(n.RANGE,'l','xl');var x=i(n.MAX,'xxs');var d=i(n.MAX,'xs');var l=i(n.MIN,'xs');var m=i(n.MAX,'s');var A=i(n.MIN,'s');var X=i(n.MAX,'m');var p=i(n.MIN,'m');var N=i(n.MAX,'l');var u=i(n.MIN,'l');var f=i(n.MAX,'xl');var h=i(n.MIN,'xl');var R=function(){return a(["@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){","}"],a(...arguments))};export{v as screenL,o as screenM,N as screenMaxL,X as screenMaxM,m as screenMaxS,f as screenMaxXl,d as screenMaxXs,x as screenMaxXxs,u as screenMinL,p as screenMinM,A as screenMinS,h as screenMinXl,l as screenMinXs,R as screenRetina,t as screenS,M as screenXl,c as screenXs};
 //# sourceMappingURL=screen.js.map

package/mixins/screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen.js","sources":["../../../src/mixins/screen.ts"],"sourcesContent":["import { css, CSSObject, SimpleInterpolation } from 'styled-components'\nimport { theme } from '../theme'\n\ntype StyledComponentProps = {\n  theme?: { breakpoints?: typeof theme.breakpoints }\n}\n\ntype MediaQueryParams = {\n  and?: string\n  condition?: (_props: any) => boolean\n}\n\nconst CONDITIONS = (() => {\n  const maxWidth = (breakpoints: typeof theme.breakpoints, point: string) => `(max-width: ${breakpoints[point]}px)`\n  const minWidth = (breakpoints: typeof theme.breakpoints, point: string) => `(min-width: ${breakpoints[point] + 1}px)`\n\n  return {\n    MAX: maxWidth,\n    MIN: minWidth,\n    RANGE: (breakpoints: typeof theme.breakpoints, point1: string, point2: string) =>\n      `${minWidth(breakpoints, point1)} and ${maxWidth(breakpoints, point2)}`,\n  }\n})()\n\nconst createMediaQuery =\n  (condition: (_breakpoints: typeof theme.breakpoints, ..._points: string[]) => string, ...points: string[]) =>\n  (params?: MediaQueryParams) =>\n  (...args: [CSSObject | TemplateStringsArray, ...SimpleInterpolation[]]) =>\n  (props: StyledComponentProps) => {\n    const breakpoints = props.theme?.breakpoints ?? theme.breakpoints\n\n    if (params !== undefined && typeof params.condition === 'function' && params.condition(props) === false) {\n      return css``\n    }\n\n    return css`\n      @media screen and ${condition(breakpoints, ...points)} ${params !== undefined && typeof params.and === 'string'\n          ? `and ${params.and}`\n          : ``} {\n        ${css(...args)}\n      }\n    `\n  }\n\n/**\n * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`\n */\nexport const screenXs = createMediaQuery(CONDITIONS.RANGE, 'xxs', 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`\n */\nexport const screenS = createMediaQuery(CONDITIONS.RANGE, 'xs', 's')\n\n/**\n * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`\n */\nexport const screenM = createMediaQuery(CONDITIONS.RANGE, 's', 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`\n */\nexport const screenL = createMediaQuery(CONDITIONS.RANGE, 'm', 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`\n */\nexport const screenXl = createMediaQuery(CONDITIONS.RANGE, 'l', 'xl')\n\n/**\n * @return `@media screen and (max-width: 319px) { ...args }`\n */\nexport const screenMaxXxs = createMediaQuery(CONDITIONS.MAX, 'xxs')\n\n/**\n * @return `@media screen and (max-width: 374px) { ...args }`\n */\nexport const screenMaxXs = createMediaQuery(CONDITIONS.MAX, 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) { ...args }`\n */\nexport const screenMinXs = createMediaQuery(CONDITIONS.MIN, 'xs')\n\n/**\n * @return `@media screen and (max-width: 767px) { ...args }`\n */\nexport const screenMaxS = createMediaQuery(CONDITIONS.MAX, 's')\n\n/**\n * @return `@media screen and (min-width: 768px) { ...args }`\n */\nexport const screenMinS = createMediaQuery(CONDITIONS.MIN, 's')\n\n/**\n * @return `@media screen and (max-width: 1023px) { ...args }`\n */\nexport const screenMaxM = createMediaQuery(CONDITIONS.MAX, 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) { ...args }`\n */\nexport const screenMinM = createMediaQuery(CONDITIONS.MIN, 'm')\n\n/**\n * @return `@media screen and (max-width: 1279px) { ...args }`\n */\nexport const screenMaxL = createMediaQuery(CONDITIONS.MAX, 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) { ...args }`\n */\nexport const screenMinL = createMediaQuery(CONDITIONS.MIN, 'l')\n\n/**\n * @return `@media screen and (max-width: 1439px) { ...args }`\n */\nexport const screenMaxXl = createMediaQuery(CONDITIONS.MAX, 'xl')\n\n/**\n * @return `@media screen and (min-width: 1440px) { ...args }`\n */\nexport const screenMinXl = createMediaQuery(CONDITIONS.MIN, 'xl')\n\n/**\n * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`\n */\nexport const screenRetina = (...args: [CSSObject | TemplateStringsArray, SimpleInterpolation]) => css`\n  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n    ${css(...args)}\n  }\n`\n"],"names":["CONDITIONS","MAX","maxWidth","breakpoints","point","concat","MIN","minWidth","RANGE","point1","point2","createMediaQuery","condition","_len","arguments","length","points","Array","_key","params","_len2","args","_key2","props","_props$theme$breakpoi","_props$theme","theme","css","and","screenXs","screenS","screenM","screenL","screenXl","screenMaxXxs","screenMaxXs","screenMinXs","screenMaxS","screenMinS","screenMaxM","screenMinM","screenMaxL","screenMinL","screenMaxXl","screenMinXl","screenRetina"],"mappings":"kFAYA,IAAMA,EAIG,CACLC,IAJIC,EAAW,CAACC,EAAuCC,IAAxC,eAAAC,OAAyEF,EAAYC,GAAtG,OAKEE,IAJIC,EAAW,CAACJ,EAAuCC,IAAiCD,eAAAA,OAAAA,EAAYC,GAAS,EAA/G,OAKEI,MAAO,CAACL,EAAuCM,EAAgBC,cAC1DH,EAASJ,EAAaM,GAAeP,SAAAA,OAAAA,EAASC,EAAaO,KARjD,IACXR,EACAK,EAUR,IAAMI,EACJ,SAACC,GAAD,IAAA,IAAAC,EAAAC,UAAAC,OAAyFC,EAAzF,IAAAC,MAAAJ,EAAA,EAAAA,EAAA,EAAA,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAyFF,EAAzFE,EAAA,GAAAJ,UAAAI,GAAA,OACCC,GACD,WAAA,IAAA,IAAAC,EAAAN,UAAAC,OAAIM,EAAJ,IAAAJ,MAAAG,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAID,EAAJC,GAAAR,UAAAQ,GAAA,OACCC,IAAgC,IAAAC,EAAAC,EAC/B,IAAMtB,EAAW,QAAGoB,EAAA,QAAAA,EAAAA,EAAMG,aAAN,IAAAD,OAAA,EAAAA,EAAatB,mBAAAA,IAAhBqB,EAAAA,EAA+BE,EAAMvB,YAEtD,YAAA,IAAIgB,GAAoD,mBAArBA,EAAOP,YAAAA,IAA4BO,EAAOP,UAAUW,GAC9EI,EAAP,CAAA,KAGKA,EAAP,CAAA,qBAAA,IAAA,IAAA,KACsBf,EAAUT,KAAgBa,QAAAA,IAAWG,GAA8C,iBAAfA,EAAOS,IAAtC,OAAAvB,OAC5Cc,EAAOS,KADqC,GAGrDD,KAAON,OAQJQ,IAAAA,EAAWlB,EAAiBX,EAAWQ,MAAO,MAAO,MAKrDsB,IAAAA,EAAUnB,EAAiBX,EAAWQ,MAAO,KAAM,KAKnDuB,IAAAA,EAAUpB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlDwB,IAAAA,EAAUrB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlDyB,IAAAA,EAAWtB,EAAiBX,EAAWQ,MAAO,IAAK,MAKzD,IAAM0B,EAAevB,EAAiBX,EAAWC,IAAK,OAKtD,IAAMkC,EAAcxB,EAAiBX,EAAWC,IAAK,MAKrD,IAAMmC,EAAczB,EAAiBX,EAAWM,IAAK,MAKrD,IAAM+B,EAAa1B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMqC,EAAa3B,EAAiBX,EAAWM,IAAK,KAKpD,IAAMiC,EAAa5B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMuC,EAAa7B,EAAiBX,EAAWM,IAAK,KAKpD,IAAMmC,EAAa9B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMyC,EAAa/B,EAAiBX,EAAWM,IAAK,KAKpD,IAAMqC,EAAchC,EAAiBX,EAAWC,IAAK,MAKrD,IAAM2C,EAAcjC,EAAiBX,EAAWM,IAAK,MAK/CuC,IAAAA,EAAe,WAAA,OAAsElB,EAAtE,CAAA,qEAAA,KAEtBA"}
+{"version":3,"file":"screen.js","sources":["../../../src/mixins/screen.ts"],"sourcesContent":["import { css, CSSObject, SimpleInterpolation } from 'styled-components'\nimport { theme } from '../theme'\n\ntype StyledComponentProps = {\n  theme?: { breakpoints?: typeof theme.breakpoints }\n}\n\ntype MediaQueryParams = {\n  and?: string\n  condition?: (_props: any) => boolean\n}\n\nconst CONDITIONS = (() => {\n  const maxWidth = (breakpoints: typeof theme.breakpoints, point: string) =>\n    `(max-width: ${breakpoints[point] + 0.02}px)`\n  const minWidth = (breakpoints: typeof theme.breakpoints, point: string) => `(min-width: ${breakpoints[point] + 1}px)`\n\n  return {\n    MAX: maxWidth,\n    MIN: minWidth,\n    RANGE: (breakpoints: typeof theme.breakpoints, point1: string, point2: string) =>\n      `${minWidth(breakpoints, point1)} and ${maxWidth(breakpoints, point2)}`,\n  }\n})()\n\nconst createMediaQuery =\n  (condition: (_breakpoints: typeof theme.breakpoints, ..._points: string[]) => string, ...points: string[]) =>\n  (params?: MediaQueryParams) =>\n  (...args: [CSSObject | TemplateStringsArray, ...SimpleInterpolation[]]) =>\n  (props: StyledComponentProps) => {\n    const breakpoints = props.theme?.breakpoints ?? theme.breakpoints\n\n    if (params !== undefined && typeof params.condition === 'function' && params.condition(props) === false) {\n      return css``\n    }\n\n    return css`\n      @media screen and ${condition(breakpoints, ...points)} ${params !== undefined && typeof params.and === 'string'\n          ? `and ${params.and}`\n          : ``} {\n        ${css(...args)}\n      }\n    `\n  }\n\n/**\n * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`\n */\nexport const screenXs = createMediaQuery(CONDITIONS.RANGE, 'xxs', 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`\n */\nexport const screenS = createMediaQuery(CONDITIONS.RANGE, 'xs', 's')\n\n/**\n * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`\n */\nexport const screenM = createMediaQuery(CONDITIONS.RANGE, 's', 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`\n */\nexport const screenL = createMediaQuery(CONDITIONS.RANGE, 'm', 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`\n */\nexport const screenXl = createMediaQuery(CONDITIONS.RANGE, 'l', 'xl')\n\n/**\n * @return `@media screen and (max-width: 319px) { ...args }`\n */\nexport const screenMaxXxs = createMediaQuery(CONDITIONS.MAX, 'xxs')\n\n/**\n * @return `@media screen and (max-width: 374px) { ...args }`\n */\nexport const screenMaxXs = createMediaQuery(CONDITIONS.MAX, 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) { ...args }`\n */\nexport const screenMinXs = createMediaQuery(CONDITIONS.MIN, 'xs')\n\n/**\n * @return `@media screen and (max-width: 767px) { ...args }`\n */\nexport const screenMaxS = createMediaQuery(CONDITIONS.MAX, 's')\n\n/**\n * @return `@media screen and (min-width: 768px) { ...args }`\n */\nexport const screenMinS = createMediaQuery(CONDITIONS.MIN, 's')\n\n/**\n * @return `@media screen and (max-width: 1023px) { ...args }`\n */\nexport const screenMaxM = createMediaQuery(CONDITIONS.MAX, 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) { ...args }`\n */\nexport const screenMinM = createMediaQuery(CONDITIONS.MIN, 'm')\n\n/**\n * @return `@media screen and (max-width: 1279px) { ...args }`\n */\nexport const screenMaxL = createMediaQuery(CONDITIONS.MAX, 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) { ...args }`\n */\nexport const screenMinL = createMediaQuery(CONDITIONS.MIN, 'l')\n\n/**\n * @return `@media screen and (max-width: 1439px) { ...args }`\n */\nexport const screenMaxXl = createMediaQuery(CONDITIONS.MAX, 'xl')\n\n/**\n * @return `@media screen and (min-width: 1440px) { ...args }`\n */\nexport const screenMinXl = createMediaQuery(CONDITIONS.MIN, 'xl')\n\n/**\n * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`\n */\nexport const screenRetina = (...args: [CSSObject | TemplateStringsArray, SimpleInterpolation]) => css`\n  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n    ${css(...args)}\n  }\n`\n"],"names":["CONDITIONS","MAX","maxWidth","breakpoints","point","MIN","minWidth","RANGE","point1","point2","createMediaQuery","condition","_len","arguments","length","points","Array","_key","params","_len2","args","_key2","props","_props$theme$breakpoi","_props$theme","theme","css","undefined","and","concat","screenXs","screenS","screenM","screenL","screenXl","screenMaxXxs","screenMaxXs","screenMinXs","screenMaxS","screenMinS","screenMaxM","screenMinM","screenMaxL","screenMinL","screenMaxXl","screenMinXl","screenRetina"],"mappings":"kFAYA,IAAMA,EAKG,CACLC,IALIC,EAAW,CAACC,EAAuCC,IACxCD,eAAAA,OAAAA,EAAYC,GAAS,IADtC,OAMEC,IAJIC,EAAW,CAACH,EAAuCC,IAAiCD,eAAAA,OAAAA,EAAYC,GAAS,EAA/G,OAKEG,MAAO,CAACJ,EAAuCK,EAAgBC,cAC1DH,EAASH,EAAaK,GAAeN,SAAAA,OAAAA,EAASC,EAAaM,KATjD,IACXP,EAEAI,EAUR,IAAMI,EACJ,SAACC,GAAD,IAAA,IAAAC,EAAAC,UAAAC,OAAyFC,EAAzF,IAAAC,MAAAJ,EAAA,EAAAA,EAAA,EAAA,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAyFF,EAAzFE,EAAA,GAAAJ,UAAAI,GAAA,OACCC,GACD,WAAA,IAAA,IAAAC,EAAAN,UAAAC,OAAIM,EAAJ,IAAAJ,MAAAG,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAID,EAAJC,GAAAR,UAAAQ,GAAA,OACCC,IAAgC,IAAAC,EAAAC,EAC/B,IAAMrB,EAAW,QAAGmB,EAAA,QAAAA,EAAAA,EAAMG,aAAAA,IAAND,OAAAA,EAAAA,EAAarB,mBAAhB,IAAAoB,EAAAA,EAA+BE,EAAMtB,YAEtD,gBAAIe,GAAoD,mBAArBA,EAAOP,YAAwD,IAA5BO,EAAOP,UAAUW,GAC9EI,EAAP,CAAA,KAGKA,EAAP,CAAA,qBAAA,IAAA,IAAA,KACsBf,EAAUR,KAAgBY,QAAsBY,IAAXT,GAA8C,iBAAfA,EAAOU,IAAtC,OAAAC,OAC5CX,EAAOU,KADqC,GAGrDF,KAAON,OAQJU,IAAAA,EAAWpB,EAAiBV,EAAWO,MAAO,MAAO,MAKrDwB,IAAAA,EAAUrB,EAAiBV,EAAWO,MAAO,KAAM,KAKnDyB,IAAAA,EAAUtB,EAAiBV,EAAWO,MAAO,IAAK,KAKlD0B,IAAAA,EAAUvB,EAAiBV,EAAWO,MAAO,IAAK,KAKlD2B,IAAAA,EAAWxB,EAAiBV,EAAWO,MAAO,IAAK,MAKzD,IAAM4B,EAAezB,EAAiBV,EAAWC,IAAK,OAKtD,IAAMmC,EAAc1B,EAAiBV,EAAWC,IAAK,MAKrD,IAAMoC,EAAc3B,EAAiBV,EAAWK,IAAK,MAKrD,IAAMiC,EAAa5B,EAAiBV,EAAWC,IAAK,KAKpD,IAAMsC,EAAa7B,EAAiBV,EAAWK,IAAK,KAKpD,IAAMmC,EAAa9B,EAAiBV,EAAWC,IAAK,KAKpD,IAAMwC,EAAa/B,EAAiBV,EAAWK,IAAK,KAKpD,IAAMqC,EAAahC,EAAiBV,EAAWC,IAAK,KAKpD,IAAM0C,EAAajC,EAAiBV,EAAWK,IAAK,KAKpD,IAAMuC,EAAclC,EAAiBV,EAAWC,IAAK,MAKrD,IAAM4C,EAAcnC,EAAiBV,EAAWK,IAAK,MAK/CyC,IAAAA,EAAe,WAAA,OAAsEpB,EAAtE,CAAA,qEAAA,KAEtBA"}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@foxford/ui",
-  "version": "2.0.0-beta-d2ba84e-20220706",
+  "version": "2.0.0-beta-38ffcd6-20220707",
   "description": "UI components library",
   "main": "index.cjs.js",
   "module": "index.js",
   "jsnext:main": "index.js",
   "typings": "dts/index.d.ts",
   "peerDependencies": {
+    "@types/react-input-mask": ">=2.0",
+    "@types/react-modal": ">=3.13",
     "clsx": ">=1.1",
     "ramda": ">=0.25",
     "rc-scrollbars": ">=1.1",
@@ -19,8 +21,7 @@
     "react-select": "1.3.x",
     "styled-components": ">=5.x",
     "tinycolor2": ">=1.4",
-    "@types/react-input-mask": ">=2.0",
-    "@types/react-modal": ">=3.13"
+    "type-fest": ">=2.13"
   },
   "bugs": {
     "url": "https://github.com/foxford/ui/issues"
@@ -38,6 +39,7 @@
   "scripts": {},
   "dependencies": {
     "@babel/runtime": ">=7.0",
+    "@foxford/ui": "2.0.0-beta-ad5fea2-20220706",
     "classnames": ">=2.3",
     "clsx": ">=1.1",
     "ramda": ">=0.25",
@@ -72,7 +74,8 @@
     "dts",
     "components",
     "mixins",
-    "theme"
+    "theme",
+    "hooks"
   ],
   "keywords": [
     "foxford",

package/theme/breakpoints.js

@@ -1,2 +1,2 @@
-var e=Object.freeze({xl:1440,l:1280,m:1024,s:768,xs:374,xxs:319});export{e as breakpoints};
+var e=Object.freeze({xl:1440,l:1280,m:1024,s:768,xs:374,xxs:320});export{e as breakpoints};
 //# sourceMappingURL=breakpoints.js.map

package/theme/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","sources":["../../../src/theme/breakpoints.ts"],"sourcesContent":["export const breakpoints = Object.freeze({\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 319,\n})\n"],"names":["breakpoints","Object","freeze","xl","l","m","s","xs","xxs"],"mappings":"IAAaA,EAAcC,OAAOC,OAAO,CACvCC,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK"}
+{"version":3,"file":"breakpoints.js","sources":["../../../src/theme/breakpoints.ts"],"sourcesContent":["export const breakpoints = Object.freeze({\n  xl: 1440,\n  l: 1280,\n  m: 1024,\n  s: 768,\n  xs: 374,\n  xxs: 320,\n})\n"],"names":["breakpoints","Object","freeze","xl","l","m","s","xs","xxs"],"mappings":"IAAaA,EAAcC,OAAOC,OAAO,CACvCC,GAAI,KACJC,EAAG,KACHC,EAAG,KACHC,EAAG,IACHC,GAAI,IACJC,IAAK"}

package/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/theme/index.ts"],"sourcesContent":["import { HEX, RGB, RGBA } from '../shared/interfaces'\nimport { colors, socialColors, unitColors } from './colors'\nimport { breakpoints } from './breakpoints'\n\nexport const TEXT_COLOR = 'mineShaft'\nexport const FALLBACK_COLOR = 'mineShaft'\n\nexport interface Theme {\n  breakpoints: Readonly<{\n    xl: number\n    l: number\n    m: number\n    s: number\n    xs: number\n    xxs: number\n  }>\n  colors: {\n    [key: string]: RGB | RGBA | HEX\n  }\n  borderRadius: string\n  textColor?: string\n  fallbackColor?: string\n  zIndex: {\n    modal: number\n    tooltip: number\n  }\n  classNamePrefix: string\n}\n\nconst theme: Theme = {\n  breakpoints,\n  colors: {\n    ...colors,\n    ...socialColors,\n    ...unitColors,\n  },\n  borderRadius: '5px',\n  textColor: TEXT_COLOR,\n  fallbackColor: FALLBACK_COLOR,\n  zIndex: {\n    modal: 9000,\n    tooltip: 80,\n  },\n  classNamePrefix: 'fox',\n}\n\nexport { theme }\n\nexport { ColorNames } from './colors'\n\nexport { ThemeProvider } from './theme-provider'\n"],"names":["TEXT_COLOR","FALLBACK_COLOR","theme","breakpoints","colors","socialColors","unitColors","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix"],"mappings":"6RAIO,IAAMA,EAAa,YACnB,IAAMC,EAAiB,YAwB9B,IAAMC,EAAe,CACnBC,YAAAA,EACAC,gBACKA,GACAC,GACAC,GAELC,aAAc,MACdC,UAjCwB,YAkCxBC,cAjC4B,YAkC5BC,OAAQ,CACNC,MAAO,IACPC,QAAS,IAEXC,gBAAiB"}
+{"version":3,"file":"index.js","sources":["../../../src/theme/index.ts"],"sourcesContent":["import { Theme } from '../shared/interfaces'\nimport { colors, socialColors, unitColors } from './colors'\nimport { breakpoints } from './breakpoints'\n\nexport const TEXT_COLOR = 'mineShaft'\nexport const FALLBACK_COLOR = 'mineShaft'\n\nconst theme: Theme = {\n  breakpoints,\n  colors: {\n    ...colors,\n    ...socialColors,\n    ...unitColors,\n  },\n  borderRadius: '5px',\n  textColor: TEXT_COLOR,\n  fallbackColor: FALLBACK_COLOR,\n  zIndex: {\n    modal: 9000,\n    tooltip: 80,\n  },\n  classNamePrefix: 'fox',\n}\n\nexport { theme }\n\nexport { ColorNames } from './colors'\n\nexport { ThemeProvider } from './theme-provider'\n"],"names":["TEXT_COLOR","FALLBACK_COLOR","theme","breakpoints","colors","socialColors","unitColors","borderRadius","textColor","fallbackColor","zIndex","modal","tooltip","classNamePrefix"],"mappings":"6RAIO,IAAMA,EAAa,YACnB,IAAMC,EAAiB,YAE9B,IAAMC,EAAe,CACnBC,YAAAA,EACAC,gBACKA,GACAC,GACAC,GAELC,aAAc,MACdC,UAXwB,YAYxBC,cAX4B,YAY5BC,OAAQ,CACNC,MAAO,IACPC,QAAS,IAEXC,gBAAiB"}

package/components/Tabs/Tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.js","sources":["../../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import { NavLink } from 'react-router-dom'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\n\nexport interface TabProps extends Color, Color<'borderColor'> {\n  /**\n   * An element type to render as (string or function).\n   */\n  as?: 'div' | 'a' | 'button' | 'span' | typeof NavLink\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   * Active tab.\n   */\n  active?: boolean\n  /**\n   * Active tab.\n   */\n  activeClassName?: string\n  /**\n   * Active tab.\n   */\n  theme?: 'compact' | 'crispy' | 'crispyCompact'\n  className?: string\n}\n\nTab.defaultProps = {\n  as: 'div',\n  activeClassName: 'active',\n  borderColor: 'alto',\n  color: 'mineShaft',\n}\n\nexport function Tab(props: TabProps) {\n  const { as, className, children, theme, ...rest } = props\n\n  const linkProps = typeof as !== 'string' ? { activeClassName: 'active' } : {}\n\n  return (\n    <Styled.Tab as={as} className={className} themeKey={theme} {...linkProps} {...rest}>\n      {children}\n    </Styled.Tab>\n  )\n}\n"],"names":["Tab","props","as","className","children","theme","rest","_excluded","_jsx","Styled.Tab","_objectSpread","themeKey","activeClassName","defaultProps","borderColor","color"],"mappings":"uOAsCO,SAASA,EAAIC,GAClB,IAAMC,GAAEA,EAAFC,UAAMA,EAANC,SAAiBA,EAAjBC,MAA2BA,GAAmBJ,EAATK,IAASL,EAApDM,GAIA,OACEC,EAACC,EAADC,EAAAA,EAAAA,EAAA,CAAYR,GAAIA,EAAIC,UAAWA,EAAWQ,SAAUN,GAHtB,iBAAPH,EAAkB,CAAEU,gBAAiB,UAAa,IAGKN,GAA9E,GAAA,CAAAF,SACGA,KAdPJ,EAAIa,aAAe,CACjBX,GAAI,MACJU,gBAAiB,SACjBE,YAAa,OACbC,MAAO"}