@foxford/ui 2.5.2-beta-1daba91-20230706 → 2.6.0-beta-a4621ec-20230707

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n Display,\n Color,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\n// Prevent brakechanges\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)\n */\nexport function Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n"],"names":["TagInput","props","_jsx","Tag","_objectSpread","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_excluded","buttonProps","type","inputProps","_jsxs","Styled.Root","tabIndex","_onChange","_x","apply","this","arguments","toString","e","persist","_onClick","_x2","defaultChecked","hidden","Styled.Text","size","forwardedAs","color","defaultProps","display","height","Input","displayName"],"mappings":"4VAqFA,SAASA,EAASC,GAChB,OAAOC,EAACC,EAADC,EAAA,CAAKC,GAAG,SAAYJ,IAWtB,SAASE,EAAIF,GAClB,IAAMI,GACJA,EADIC,UAEJA,EAFIC,QAGJA,EAHIC,SAIJA,EAJIC,QAKJA,EALIC,GAMJA,EANIC,KAOJA,EAPIC,UAQJA,EARIC,MASJA,EATIC,SAUJA,EAVIC,SAWJA,EAXIC,QAYJA,EAZIC,QAaJA,EAbIC,QAcJA,GAEEjB,EADCkB,IACDlB,EAhBJmB,GAkBA,IAAMC,EAAqB,WAAPhB,EAAkB,CAAEiB,KAAM,UAAa,GAE3D,IAAMC,EAAoB,UAAPlB,EAAiB,CAAEI,QAASC,GAAMC,GAAS,GAE9D,OACEa,EAACC,EAADrB,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEC,GAAW,UAAPA,EAAiB,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAAgB,UAAPX,EAAiBW,OAAAA,GATJ,UAAPX,EAAiB,CAAEI,QAAAA,GAAY,IAW1CY,GACAE,GACAJ,GATN,GAAA,CAAAX,SAWGH,CAAO,UAAPA,EACCH,EAAA,QAAA,CACEQ,GAAIA,GAAMC,EACVA,KAAMA,EACNW,KAAMV,GAAa,WACnBc,SAAU,EACVX,SAAQ,SAAAY,GAAA,SAAAZ,EAAAa,GAAA,OAAAD,EAAAE,MAAAC,KAAAC,WAAA,OAAAhB,EAAAiB,SAAA,IAAAL,EAAAK,WAAAjB,EAAA,EAAGkB,IACTA,EAAEC,UAEKnB,GAAYA,EAASkB,MAE9BjB,QAAO,SAAAmB,GAAA,SAAAnB,EAAAoB,GAAA,OAAAD,EAAAN,MAAAC,KAAAC,WAAA,OAAAf,EAAAgB,SAAA,IAAAG,EAAAH,WAAAhB,EAAA,EAAGiB,IACRA,EAAEC,UAEKlB,GAAWA,EAAQiB,MAE5BI,eAAgBpC,EAAMoC,eACtBnB,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVwB,QAAM,IAEN,KACH9B,EACDN,EAACqC,EAADnC,EAAAA,EAAA,CAAaoC,KAAM,GAAIC,YAAY,OAAOC,MAAOxB,IAAYD,EAAU,QAAU,aAAiBX,GAAlG,GAAA,CAAAE,SACGD,SAxFTJ,EAAIwC,aAAe,CACjBC,QAAS,eACTvC,GAAI,SACJwC,OAAQ,IAGV7C,EAAS2C,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAIV1C,EAAI2C,MAAQ9C,EAEZG,EAAI4C,YAAc"}
1
+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text/Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n Display,\n Color,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\n// Prevent brakechanges\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)\n */\nexport function Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n"],"names":["TagInput","props","_jsx","Tag","_objectSpread","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_excluded","buttonProps","type","inputProps","_jsxs","Styled.Root","tabIndex","_onChange","_x","apply","this","arguments","toString","e","persist","_onClick","_x2","defaultChecked","hidden","Styled.Text","size","forwardedAs","color","defaultProps","display","height","Input","displayName"],"mappings":"4VAqFA,SAASA,EAASC,GAChB,OAAOC,EAACC,EAADC,EAAA,CAAKC,GAAG,SAAYJ,IAWtB,SAASE,EAAIF,GAClB,IAAMI,GACJA,EADIC,UAEJA,EAFIC,QAGJA,EAHIC,SAIJA,EAJIC,QAKJA,EALIC,GAMJA,EANIC,KAOJA,EAPIC,UAQJA,EARIC,MASJA,EATIC,SAUJA,EAVIC,SAWJA,EAXIC,QAYJA,EAZIC,QAaJA,EAbIC,QAcJA,GAEEjB,EADCkB,IACDlB,EAhBJmB,GAkBA,IAAMC,EAAqB,WAAPhB,EAAkB,CAAEiB,KAAM,UAAa,GAE3D,IAAMC,EAAoB,UAAPlB,EAAiB,CAAEI,QAASC,GAAMC,GAAS,GAE9D,OACEa,EAACC,EAADrB,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEC,GAAW,UAAPA,EAAiB,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAAgB,UAAPX,EAAiBW,OAAAA,GATJ,UAAPX,EAAiB,CAAEI,QAAAA,GAAY,IAW1CY,GACAE,GACAJ,GATN,GAAA,CAAAX,SAWGH,CAAO,UAAPA,EACCH,EAAA,QAAA,CACEQ,GAAIA,GAAMC,EACVA,KAAMA,EACNW,KAAMV,GAAa,WACnBc,SAAU,EACVX,SAAQ,SAAAY,GAAA,SAAAZ,EAAAa,GAAA,OAAAD,EAAAE,MAAAC,KAAAC,WAAA,OAAAhB,EAAAiB,SAAA,IAAAL,EAAAK,WAAAjB,EAAA,EAAGkB,IACTA,EAAEC,UAEKnB,GAAYA,EAASkB,MAE9BjB,QAAO,SAAAmB,GAAA,SAAAnB,EAAAoB,GAAA,OAAAD,EAAAN,MAAAC,KAAAC,WAAA,OAAAf,EAAAgB,SAAA,IAAAG,EAAAH,WAAAhB,EAAA,EAAGiB,IACRA,EAAEC,UAEKlB,GAAWA,EAAQiB,MAE5BI,eAAgBpC,EAAMoC,eACtBnB,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVwB,QAAM,IAEN,KACH9B,EACDN,EAACqC,EAADnC,EAAAA,EAAA,CAAaoC,KAAM,GAAIC,YAAY,OAAOC,MAAOxB,IAAYD,EAAU,QAAU,aAAiBX,GAAlG,GAAA,CAAAE,SACGD,SAxFTJ,EAAIwC,aAAe,CACjBC,QAAS,eACTvC,GAAI,SACJwC,OAAQ,IAGV7C,EAAS2C,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAIV1C,EAAI2C,MAAQ9C,EAEZG,EAAI4C,YAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text'\nimport { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n l: 220,\n m: 182,\n s: 100,\n xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n if (props.width === 'auto') return 'auto'\n if (typeof props.width === 'number') return props.width\n\n if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n return 'auto'\n}\n\nconst active = css`\n border-color: transparent;\n background-color: currentColor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n vertical-align: middle;\n transition: color 0.25s ease;\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: rgba(0, 0, 0, 0.04);\n ${Text} {\n color: rgba(0, 0, 0, 0.16);\n }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n padding: 0px 16px;\n margin-bottom: 10px;\n border-radius: 3px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.whiteGray};\n box-sizing: border-box;\n vertical-align: middle;\n transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n text-align: center;\n touch-action: manipulation;\n min-width: 60px;\n\n ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(props.width, 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n\n ${(props) =>\n !props.disabled\n ? css`\n &:hover:not(:disabled) {\n border-color: currentColor;\n }\n &:active:not(:disabled) {\n ${active}\n ${Text} {\n color: ${(props) => props.theme.colors.white};\n }\n }\n `\n : null}\n\n ${(props) => (props.inverse || props.checked ? active : null)}\n\n &:disabled {\n ${disabled}\n }\n ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","UiText","withConfig","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","height","_ref","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","_ref2","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"8QAOA,IAAMA,EAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,IAAMC,EAASC,EAAf,CAAA,gEAKaC,EAAOC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAb,CAAA,2KAWP,IAAMI,EAAWN,EAAH,CAAA,wDAAA,6BAGVC,GAKG,IAAMM,EAAOL,EAAOM,OAAOJ,WAAqB,CACrDK,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KADhFN,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,0EAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAMMU,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAS/CJ,GAAWA,EAAMK,KAAOC,EAjDHN,CAAAA,GACJ,SAAhBA,EAAMO,MAAyB,OACR,iBAAhBP,EAAMO,MAA2BP,EAAMO,MAE9CP,EAAMK,MAAQvB,EAAOkB,EAAMK,MAAcvB,EAAOkB,EAAMK,MAEnD,OANiBL,CAiD6BA,GAAQ,SAAW,OACrEA,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,eAAiB,OAClER,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYG,YAAa,cAEhGjB,GAAWA,EAAMO,MAAQD,EAASN,EAAMO,MAAO,SAAW,OACzDW,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACFH,EAAwB,CAAEC,MAAO,CAAEG,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWN,YAAa,aAE3FjB,GAAWA,EAAMwB,QAAUA,EAAQxB,EAAMwB,SAAW,OACpDxB,GAAWA,EAAMyB,MAAQA,EAAMzB,EAAMyB,OAAS,OAM9CzB,GACAA,EAAMN,SAYH,KAXAN,EADJ,CAAA,6EAAA,IAAA,UAAA,OAMUD,EACAE,GACUW,GAAUA,EAAMC,MAAMC,OAAOC,UAMhDH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAUxC,EAAS,MAGpDO,GAEDM,GAAWA,EAAMN,SAAWA,EAAW"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text/Text'\nimport { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n l: 220,\n m: 182,\n s: 100,\n xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n if (props.width === 'auto') return 'auto'\n if (typeof props.width === 'number') return props.width\n\n if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n return 'auto'\n}\n\nconst active = css`\n border-color: transparent;\n background-color: currentColor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n vertical-align: middle;\n transition: color 0.25s ease;\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: rgba(0, 0, 0, 0.04);\n ${Text} {\n color: rgba(0, 0, 0, 0.16);\n }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n padding: 0px 16px;\n margin-bottom: 10px;\n border-radius: 3px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.whiteGray};\n box-sizing: border-box;\n vertical-align: middle;\n transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n text-align: center;\n touch-action: manipulation;\n min-width: 60px;\n\n ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(props.width, 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n\n ${(props) =>\n !props.disabled\n ? css`\n &:hover:not(:disabled) {\n border-color: currentColor;\n }\n &:active:not(:disabled) {\n ${active}\n ${Text} {\n color: ${(props) => props.theme.colors.white};\n }\n }\n `\n : null}\n\n ${(props) => (props.inverse || props.checked ? active : null)}\n\n &:disabled {\n ${disabled}\n }\n ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","UiText","withConfig","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","height","_ref","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","_ref2","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"8QAOA,IAAMA,EAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,IAAMC,EAASC,EAAf,CAAA,gEAKaC,EAAOC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAb,CAAA,2KAWP,IAAMI,EAAWN,EAAH,CAAA,wDAAA,6BAGVC,GAKG,IAAMM,EAAOL,EAAOM,OAAOJ,WAAqB,CACrDK,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KADhFN,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,0EAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAMMU,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAS/CJ,GAAWA,EAAMK,KAAOC,EAjDHN,CAAAA,GACJ,SAAhBA,EAAMO,MAAyB,OACR,iBAAhBP,EAAMO,MAA2BP,EAAMO,MAE9CP,EAAMK,MAAQvB,EAAOkB,EAAMK,MAAcvB,EAAOkB,EAAMK,MAEnD,OANiBL,CAiD6BA,GAAQ,SAAW,OACrEA,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,eAAiB,OAClER,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYG,YAAa,cAEhGjB,GAAWA,EAAMO,MAAQD,EAASN,EAAMO,MAAO,SAAW,OACzDW,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACFH,EAAwB,CAAEC,MAAO,CAAEG,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWN,YAAa,aAE3FjB,GAAWA,EAAMwB,QAAUA,EAAQxB,EAAMwB,SAAW,OACpDxB,GAAWA,EAAMyB,MAAQA,EAAMzB,EAAMyB,OAAS,OAM9CzB,GACAA,EAAMN,SAYH,KAXAN,EADJ,CAAA,6EAAA,IAAA,UAAA,OAMUD,EACAE,GACUW,GAAUA,EAAMC,MAAMC,OAAOC,UAMhDH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAUxC,EAAS,MAGpDO,GAEDM,GAAWA,EAAMN,SAAWA,EAAW"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useClassname as s}from'../../hooks/useClassname.js';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as l}from'../../hooks/use-config-priority.js';import{TextHeading as o}from'../Text.Heading/Text.Heading.js';import{TextEllipse as a}from'../Text.Ellipse/Text.Ellipse.js';import{Root as r}from'./style.js';import{jsx as n}from'react/jsx-runtime';var m=["as","children","weight","content","textAlign","underlineLinks","className","style","lineHeight","fontStyle","fontFamily","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display"];var p='Text';var z=o=>{var a;var p=t();var d=l(null===(a=p.components)||void 0===a?void 0:a.Text,o),{as:y="div",children:h,weight:c="normal",content:f,textAlign:g,underlineLinks:u,className:x,style:S,lineHeight:L="m",fontStyle:T="normal",fontFamily:j,title:v,color:H,size:N="m",sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A}=d,F=i(d,m);var w=s(z.displayName,x);return n(r,e(e({},F),{},h?{as:y,color:H,className:w,title:v,weight:c,lineHeight:L,textAlign:g,fontStyle:T,fontFamily:j,underlineLinks:u,size:N,sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A,style:S,children:h}:{as:y,color:H,className:w,title:v,weight:c,lineHeight:L,textAlign:g,fontStyle:T,fontFamily:j,underlineLinks:u,size:N,sizeXS:k,sizeS:X,sizeM:b,sizeL:M,sizeXL:E,display:A,style:S,dangerouslySetInnerHTML:{__html:f||''}}))};z.Heading=o,z.Ellipse=a,z.displayName="Text";export{p as COMPONENT_NAME,z as Text};
1
+ import{useClassname as e}from'../../hooks/useClassname.js';import{TextHeading as s}from'../Text.Heading/Text.Heading.js';import{TextEllipse as i}from'../Text.Ellipse/Text.Ellipse.js';import{Root as t}from'./style.js';import{jsx as l}from'react/jsx-runtime';function n(s){var{as:i="div",children:a,weight:o="normal",content:r,textAlign:m,underlineLinks:z,className:d,style:p,lineHeight:g="m",fontStyle:x="normal",title:y,color:c,size:h="m",sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H}=s;var j=e(n.displayName,d);return l(t,a?{as:i,color:c,className:j,title:y,weight:o,lineHeight:g,textAlign:m,fontStyle:x,underlineLinks:z,size:h,sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H,style:p,children:a}:{as:i,color:c,className:j,title:y,weight:o,lineHeight:g,textAlign:m,fontStyle:x,underlineLinks:z,size:h,sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H,style:p,dangerouslySetInnerHTML:{__html:r||''}})}n.Heading=s,n.Ellipse=i,n.displayName='Text';export{n as Text};
2
2
  //# sourceMappingURL=Text.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport type { TextProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\nconst Text = (props: TextProps) => {\n const theme = useFallbackTheme()\n\n const {\n as = 'div',\n children,\n weight = 'normal',\n content,\n textAlign,\n underlineLinks,\n className: origClassName,\n style,\n lineHeight = 'm',\n fontStyle = 'normal',\n fontFamily,\n title,\n color,\n size = 'm',\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n display,\n ...configProps\n } = useConfigPriority<TextProps>(theme.components?.[COMPONENT_NAME], props)\n\n const className = useClassname(Text.displayName, origClassName)\n\n if (children) {\n return (\n <Styled.Root\n {...configProps}\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n fontFamily={fontFamily}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n {...configProps}\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n fontFamily={fontFamily}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\nText.displayName = COMPONENT_NAME\n\nexport { Text, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Text","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","as","children","weight","content","textAlign","underlineLinks","className","origClassName","style","lineHeight","fontStyle","fontFamily","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","useClassname","displayName","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"msBAQMA,IAAAA,EAAiB,OAEjBC,IAAAA,EAAQC,IAAqB,IAAAC,EACjC,IAAMC,EAAQC,IAEd,IAsBIC,EAAAA,EAA6B,QAAAF,EAAAA,EAAMG,kBAAAA,IAANJ,OAAAA,EAAAA,EAAAF,KAAoCC,IAtB/DM,GACJA,EAAK,MADDC,SAEJA,EAFIC,OAGJA,EAAS,SAHLC,QAIJA,EAJIC,UAKJA,EALIC,eAMJA,EACAC,UAAWC,EAPPC,MAQJA,EARIC,WASJA,EAAa,IATTC,UAUJA,EAAY,SAVRC,WAWJA,EAXIC,MAYJA,EAZIC,MAaJA,EAbIC,KAcJA,EAAO,IAdHC,OAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,MAkBJA,EAlBIC,OAmBJA,EAnBIC,QAoBJA,GApBFC,EAqBKC,EArBLC,EAAAF,EAAAG,GAwBA,IAAMlB,EAAYmB,EAAahC,EAAKiC,YAAanB,GAEjD,OAEIoB,EAACC,SACKN,GADN,GAFArB,EAEA,CAEED,GAAIA,EACJa,MAAOA,EACPP,UAAWA,EACXM,MAAOA,EACPV,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXC,WAAYA,EACZN,eAAgBA,EAChBS,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTZ,MAAOA,EAnBTP,SAqBGA,GAML,CAEED,GAAIA,EACJa,MAAOA,EACPP,UAAWA,EACXM,MAAOA,EACPV,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXC,WAAYA,EACZN,eAAgBA,EAChBS,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTZ,MAAOA,EACPqB,wBAAyB,CAAEC,OAAQ3B,GAAW,QAKpDV,EAAKsC,QAAUC,EACfvC,EAAKwC,QAAUC,EACfzC,EAAKiC,YAvFkB"}
1
+ {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface TextProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * An element type to render as (string).\n */\n as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p'\n /**\n * Primary content\n */\n content?: string\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Text font weight\n */\n weight?: 'lighter' | 'normal' | 'bold' | 'bolder' | number\n /**\n * Text font style\n */\n fontStyle?: 'normal' | 'italic'\n /**\n * Add underline to inline links\n */\n underlineLinks?: boolean\n /**\n * Text align\n */\n textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'\n /**\n * Line height\n */\n lineHeight?: 'l' | 'm' | 's' | 'xs' | number\n /**\n * Element title\n */\n title?: string\n}\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\nText.displayName = 'Text'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport function Text(props: TextProps) {\n const {\n as = 'div',\n children,\n weight = 'normal',\n content,\n textAlign,\n underlineLinks,\n className: origClassName,\n style,\n lineHeight = 'm',\n fontStyle = 'normal',\n title,\n color,\n size = 'm',\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n display,\n } = props\n\n const className = useClassname(Text.displayName, origClassName)\n\n if (children) {\n return (\n <Styled.Root\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}\n"],"names":["Text","props","as","children","weight","content","textAlign","underlineLinks","className","origClassName","style","lineHeight","fontStyle","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display","useClassname","displayName","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"iQA8DO,SAASA,EAAKC,GACnB,IAAMC,GACJA,EAAK,MADDC,SAEJA,EAFIC,OAGJA,EAAS,SAHLC,QAIJA,EAJIC,UAKJA,EALIC,eAMJA,EACAC,UAAWC,EAPPC,MAQJA,EARIC,WASJA,EAAa,IATTC,UAUJA,EAAY,SAVRC,MAWJA,EAXIC,MAYJA,EAZIC,KAaJA,EAAO,IAbHC,OAcJA,EAdIC,MAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,OAkBJA,EAlBIC,QAmBJA,GACEpB,EAEJ,IAAMO,EAAYc,EAAatB,EAAKuB,YAAad,GAEjD,OAEIe,EAACC,EAFDtB,EAEA,CACED,GAAIA,EACJY,MAAOA,EACPN,UAAWA,EACXK,MAAOA,EACPT,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXL,eAAgBA,EAChBQ,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTX,MAAOA,EAjBTP,SAmBGA,GAML,CACED,GAAIA,EACJY,MAAOA,EACPN,UAAWA,EACXK,MAAOA,EACPT,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXL,eAAgBA,EAChBQ,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTX,MAAOA,EACPgB,wBAAyB,CAAEC,OAAQtB,GAAW,MAjFpDL,EAAK4B,QAAUC,EACf7B,EAAK8B,QAAUC,EACf/B,EAAKuB,YAAc"}
@@ -1,2 +1,2 @@
1
- import e,{css as i}from'styled-components';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{display as o}from'../../mixins/display.js';import{color as s}from'../../mixins/color.js';import{property as n,responsiveNamedProperty as r}from'../../mixins/responsive-property.js';var a={lighter:100,normal:400,bold:600,bolder:800};var l={l:1.5,m:1.3,s:1.15,xs:1};var c=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).attrs(t).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;",""],(e=>{var{theme:t,display:c,color:m,fontStyle:p,fontFamily:f,weight:d,lineHeight:h,underlineLinks:y,textAlign:g,size:z,sizeXS:x,sizeS:u,sizeM:v,sizeL:j,sizeXL:L}=e;return i([""," "," "," "," "," "," a{text-decoration:",";&:hover{text-decoration:none;}}"," "," ",""],c&&o(c),s(m||t.textColor),p&&"font-style: ".concat(p,";"),f&&"font-family: ".concat(f,";"),d&&"font-weight: ".concat('string'==typeof h&&a[d]?a[d]:d,";"),h&&"line-height: ".concat('string'==typeof h&&l[h]?l[h]:h,";"),y?'underline':'none',g&&"text-align: ".concat(g,";"),z&&n(z,'font-size'),r({sizes:{sizeXS:x,sizeS:u,sizeM:v,sizeL:j,sizeXL:L},cssProperty:'font-size'}))}));export{c as Root};
1
+ import e,{css as i}from'styled-components';import{display as t}from'../../mixins/display.js';import{color as o}from'../../mixins/color.js';import{property as n,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var l={lighter:100,normal:400,bold:600,bolder:800};var r={l:1.5,m:1.3,s:1.15,xs:1};var a=i(["a{text-decoration:underline;&:hover{text-decoration:none;}}"]);var g=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;"," "," "," "," "," a{text-decoration:none;&:hover{text-decoration:none;}}"," "," "," ",""],(e=>e.display?t(e.display):null),(e=>o(e.color?e.color:e.theme.textColor)),(e=>e.lineHeight?i(["line-height:",";"],'string'==typeof e.lineHeight&&r[e.lineHeight]?r[e.lineHeight]:e.lineHeight):null),(e=>e.fontStyle?i(["font-style:",";"],e.fontStyle):null),(e=>e.weight?i(["font-weight:",";"],'string'==typeof e.lineHeight&&l[e.weight]?l[e.weight]:e.weight):null),(e=>e.underlineLinks?a:null),(e=>e.textAlign?i(["text-align:",";"],e.textAlign):null),(e=>e.size?n(e.size,'font-size'):null),(e=>{var{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:l}=e;return s({sizes:{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:l},cssProperty:'font-size'})}));export{g as Root};
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { display as displayCss } from '../../mixins/display'\nimport { color as ColorCss, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP: Record<Exclude<TextProps['lineHeight'], undefined>, number> = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nexport const Root = styled.div\n .withConfig({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n })\n .attrs(injectDefaultTheme)<TextProps>`\n line-height: inherit;\n margin: initial;\n\n ${({\n theme,\n display,\n color,\n fontStyle,\n fontFamily,\n weight,\n lineHeight,\n underlineLinks,\n textAlign,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }) => css`\n ${display && displayCss(display)}\n ${color ? ColorCss(color) : ColorCss(theme.textColor as ColorValue)}\n ${fontStyle && `font-style: ${fontStyle};`}\n ${fontFamily && `font-family: ${fontFamily};`}\n ${weight && `font-weight: ${typeof lineHeight === 'string' && WEIGHT_MAP[weight] ? WEIGHT_MAP[weight] : weight};`}\n ${lineHeight &&\n `line-height: ${\n typeof lineHeight === 'string' && LINE_HEIGHT_MAP[lineHeight] ? LINE_HEIGHT_MAP[lineHeight] : lineHeight\n };`}\n\n a {\n text-decoration: ${underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n\n ${textAlign && `text-align: ${textAlign};`}\n ${size && property(size, 'font-size')}\n ${responsiveNamedProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n `}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","_ref","theme","display","color","fontStyle","fontFamily","weight","lineHeight","underlineLinks","textAlign","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","css","displayCss","ColorCss","textColor","concat","property","responsiveNamedProperty","sizes","cssProperty"],"mappings":"+SAOA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGC,IAAMC,EAAOC,EAAOC,IACxBC,WAAW,CACVC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAE9GE,MAAMC,GAJQL,WAAA,CAAAM,YAAA,uBAAGR,CAQhB,CAAA,sCAAA,KAAAS,IAAA,IAACC,MACDA,UACAC,QACAC,EAHCC,UAIDA,EAJCC,WAKDA,EALCC,OAMDA,EANCC,WAODA,EAPCC,eAQDA,EARCC,UASDA,EATCC,KAUDA,EAVCC,OAWDA,EAXCC,MAYDA,EAZCC,MAaDA,EAbCC,MAcDA,EAdCC,OAeDA,GAfAf,EAAA,OAgBIgB,+FACFd,GAAWe,EAAWf,GACdgB,EAARf,GAAmCF,EAAMkB,WACzCf,GAAS,eAAAgB,OAAmBhB,EAnB9B,KAoBEC,GAA8BA,gBAAAA,OAAAA,OAC9BC,0BAAgD,iBAAfC,GAA2B3B,EAAW0B,GAAU1B,EAAW0B,GAAUA,EArBxG,KAsBEC,GAEA,gBAAAa,OAAsB,iBAAfb,GAA2BtB,EAAgBsB,GAActB,EAAgBsB,GAAcA,OAI3EC,EAAiB,YAAc,OAMlDC,yBAA4BA,EAAnB,KACTC,GAAQW,EAASX,EAAM,aACvBY,EAAwB,CAAEC,MAAO,CAAEZ,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUS,YAAa"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './Text'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP: Record<Exclude<TextProps['lineHeight'], undefined>, number> = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst underlineLinksStyle = css`\n a {\n text-decoration: underline;\n &:hover {\n text-decoration: none;\n }\n }\n`\n\nexport const Root = styled.div.withConfig<TextProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n})`\n line-height: inherit;\n margin: initial;\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) =>\n props.lineHeight\n ? css`\n line-height: ${typeof props.lineHeight === 'string' && LINE_HEIGHT_MAP[props.lineHeight]\n ? LINE_HEIGHT_MAP[props.lineHeight]\n : props.lineHeight};\n `\n : null}\n ${(props) =>\n props.fontStyle\n ? css`\n font-style: ${props.fontStyle};\n `\n : null}\n ${(props) =>\n props.weight\n ? css`\n font-weight: ${typeof props.lineHeight === 'string' && WEIGHT_MAP[props.weight]\n ? WEIGHT_MAP[props.weight]\n : props.weight};\n `\n : null}\n\n a {\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n ${(props) => (props.underlineLinks ? underlineLinksStyle : null)}\n ${(props) =>\n props.textAlign\n ? css`\n text-align: ${props.textAlign};\n `\n : null}\n\n ${(props) => (props.size ? property(props.size, 'font-size') : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveNamedProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","underlineLinksStyle","css","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","color","theme","textColor","lineHeight","fontStyle","weight","underlineLinks","textAlign","size","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"uOAMA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,IAAMC,EAAsBC,EAA5B,CAAA,gEASO,IAAMC,EAAOC,EAAOC,IAAIC,WAAsB,CACnDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAD9FF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,sCAAA,IAAA,IAAA,IAAA,IAAA,0DAAA,IAAA,IAAA,IAAA,KAKZO,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAyBE,EAAdF,EAAME,MAAcF,EAAME,MAAeF,EAAMG,MAAMC,aAChEJ,GACDA,EAAMK,WACFd,EACiB,CAAA,eAAA,KAA4B,iBAArBS,EAAMK,YAA2BpB,EAAgBe,EAAMK,YACzEpB,EAAgBe,EAAMK,YACtBL,EAAMK,YAEZ,OACHL,GACDA,EAAMM,UACFf,EADJ,CAAA,cAAA,KAEoBS,EAAMM,WAEtB,OACHN,GACDA,EAAMO,OACFhB,EACiB,CAAA,eAAA,KAA4B,iBAArBS,EAAMK,YAA2BzB,EAAWoB,EAAMO,QACpE3B,EAAWoB,EAAMO,QACjBP,EAAMO,QAEZ,OASHP,GAAWA,EAAMQ,eAAiBlB,EAAsB,OACxDU,GACDA,EAAMS,UACFlB,EADJ,CAAA,cAAA,KAEoBS,EAAMS,WAEtB,OAEHT,GAAWA,EAAMU,KAAOC,EAASX,EAAMU,KAAM,aAAe,OAC7DE,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUG,YAAa"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{Text as r}from'../Text/Text.js';import{jsx as s}from'react/jsx-runtime';var a=["h","fontFamily"];var h={h1:{size:44,sizeM:32,lineHeight:'s',weight:'bold'},h2:{size:32,sizeM:28,lineHeight:'s',weight:'bold'},h3:{size:28,lineHeight:'s',weight:'bold'},h4:{size:24,lineHeight:'s',weight:'bold'}};var m='Text.Heading';var l=m=>{var l;var n=t();var g=o(null===(l=n.components)||void 0===l?void 0:l["Text.Heading"],m),{h:p="h1",fontFamily:d}=g,b=i(g,a);return s(r,e(e({as:p,fontFamily:d},h[p]),b))};l.displayName="Text.Heading";export{m as COMPONENT_NAME,l as TextHeading};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{Text as t}from'../Text/Text.js';import{jsx as h}from'react/jsx-runtime';var r=["h"];var s;(e=>{e[e.h1=0]="h1",e[e.h2=1]="h2",e[e.h3=2]="h3",e[e.h4=3]="h4"})(s||(s={}));var o={h1:{size:44,sizeM:32,lineHeight:'s',weight:'bold'},h2:{size:32,sizeM:28,lineHeight:'s',weight:'bold'},h3:{size:28,lineHeight:'s',weight:'bold'},h4:{size:24,lineHeight:'s',weight:'bold'}};function a(s){var{h:a="h1"}=s,l=i(s,r);return h(t,e(e({as:a},o[a]),l))}a.displayName='Text.Heading';export{a as TextHeading};
2
2
  //# sourceMappingURL=Text.Heading.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { Text } from '../Text'\nimport type { TextHeadingProps, H } from './types'\n\nconst PARAMS: Record<H, Partial<TextHeadingProps>> = {\n h1: {\n size: 44,\n sizeM: 32,\n lineHeight: 's',\n weight: 'bold',\n },\n h2: {\n size: 32,\n sizeM: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h3: {\n size: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h4: {\n size: 24,\n lineHeight: 's',\n weight: 'bold',\n },\n}\n\nconst COMPONENT_NAME = 'Text.Heading'\n\n/**\n * @visibleName Text.Heading\n */\nconst TextHeading = (props: TextHeadingProps) => {\n const theme = useFallbackTheme()\n\n const {\n h = 'h1',\n fontFamily,\n ...configProps\n } = useConfigPriority<TextHeadingProps>(theme.components?.[COMPONENT_NAME], props)\n\n const predefinedParams = PARAMS[h]\n\n return <Text as={h} fontFamily={fontFamily} {...predefinedParams} {...configProps} />\n}\n\nTextHeading.displayName = COMPONENT_NAME\n\nexport { TextHeading, COMPONENT_NAME }\n"],"names":["PARAMS","h1","size","sizeM","lineHeight","weight","h2","h3","h4","COMPONENT_NAME","TextHeading","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","h","fontFamily","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","_jsx","Text","_objectSpread","as","displayName"],"mappings":"6VAKA,IAAMA,EAA+C,CACnDC,GAAI,CACFC,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVC,GAAI,CACFJ,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVE,GAAI,CACFL,KAAM,GACNE,WAAY,IACZC,OAAQ,QAEVG,GAAI,CACFN,KAAM,GACNE,WAAY,IACZC,OAAQ,SAINI,IAAAA,EAAiB,eAKjBC,IAAAA,EAAeC,IAA4B,IAAAC,EAC/C,IAAMC,EAAQC,IAEd,IAIIC,EAAAA,EAAoC,QAAAF,EAAAA,EAAMG,sBAANJ,OAAAA,EAAAA,EAZnB,gBAYuDD,IAJtEM,EACJA,EAAI,KADAC,WAEJA,GAFFC,EAGKC,EAHLC,EAAAF,EAAAG,GAQA,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIT,EAAGC,WAAYA,GAFPlB,EAAOiB,IAEsCG,KAGxEV,EAAYiB,YAnBW"}
1
+ {"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { Text, TextProps } from '../Text'\n\n/* eslint-disable no-unused-vars */\nenum H {\n h1,\n h2,\n h3,\n h4,\n}\n/* eslint-enable no-unused-vars */\n\nconst PARAMS: Record<keyof typeof H, Partial<TextProps>> = {\n h1: {\n size: 44,\n sizeM: 32,\n lineHeight: 's',\n weight: 'bold',\n },\n h2: {\n size: 32,\n sizeM: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h3: {\n size: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h4: {\n size: 24,\n lineHeight: 's',\n weight: 'bold',\n },\n}\n\nexport interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {\n h?: keyof typeof H\n /**\n * Children react node\n */\n children?: React.ReactNode\n}\n\nTextHeading.displayName = 'Text.Heading'\n\nexport function TextHeading({ h = 'h1', ...props }: TextHeadingProps) {\n const predefinedParams = PARAMS[h]\n\n return <Text as={h} {...predefinedParams} {...props} />\n}\n"],"names":["H","PARAMS","h1","size","sizeM","lineHeight","weight","h2","h3","h4","TextHeading","_ref","h","props","_objectWithoutProperties","_excluded","_jsx","Text","_objectSpread","as","displayName"],"mappings":"iNAGKA,GAAAA,IAAAA,EAAAA,aAAAA,EAAAA,aAAAA,EAAAA,aAAAA,EAAAA,eAAAA,IAAAA,OAQL,IAAMC,EAAqD,CACzDC,GAAI,CACFC,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVC,GAAI,CACFJ,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVE,GAAI,CACFL,KAAM,GACNE,WAAY,IACZC,OAAQ,QAEVG,GAAI,CACFN,KAAM,GACNE,WAAY,IACZC,OAAQ,SAcL,SAASI,EAAsDC,GAAA,IAA1CC,EAAEA,EAAI,MAAoCD,EAA3BE,EAA2BC,EAAAH,EAAAI,GAGpE,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIP,GAFQX,EAAOW,IAEcC,IALhDH,EAAYU,YAAc"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useRef as a,useState as o,useCallback as t,useEffect as s}from'react';import{omit as l}from'ramda';import{useFallbackTheme as i}from'../../hooks/use-theme.js';import{useConfigPriority as n}from'../../hooks/use-config-priority.js';import{Root as d}from'./style.js';import{jsx as m}from'react/jsx-runtime';var u=["preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width"];var c='Textarea';var h=c=>{var h;var p=i();var f=n(null===(h=p.components)||void 0===h?void 0:h.Textarea,l(['children'],c)),{preset:v,disabled:g,error:b,fluid:x,name:C,onChange:y,maxLength:w,placeholder:T,required:j,tabIndex:N,value:R,className:H,style:I,autosize:k=!0,rounded:E=!0,cols:L=20,rows:M=2,maxRows:P=30,color:S="mineShaft",placeholderColor:q="silver",width:z=p.defaultInputControlsWidth}=f,A=r(f,u);var B=a();var[O,W]=o(M);var F=t((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&k){var a=r.getBoundingClientRect();r.scrollHeight>a.height&&O<P?W(O+1):r.value&&''!==r.value||W(M)}'function'==typeof y&&y(e)}),[y,O,P,k]);s((()=>{if(B&&B.current){var e=B.current;var r=e.getBoundingClientRect();if(e.scrollHeight>r.height){var a=parseInt(getComputedStyle(e).lineHeight,10);var o=Math.floor(e.scrollHeight/a);o<=P&&o>M&&W(o)}}}),[]);var U='brand'===p.preset;return'string'==typeof v&&(U='brand'===v),m(d,e(e({},A),{},{ref:B,className:H,style:I,onChange:F,cols:L,disabled:g,maxLength:w,name:C,placeholder:T,required:j,rows:O,tabIndex:N,value:R,color:S,rounded:E,placeholderColor:q,fluid:x,error:b,width:z,brandPresetUsed:U}))};h.displayName="Textarea";export{c as COMPONENT_NAME,h as Textarea};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useState as o,useRef as a,useCallback as t,useEffect as l}from'react';import{useTheme as s}from'styled-components';import{Root as n}from'./style.js';import{jsx as i}from'react/jsx-runtime';var d=["cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor"];function c(c){var{cols:u,disabled:h,error:m,fluid:p,name:f,onChange:g,maxLength:v,placeholder:x,required:b,rounded:C,rows:w,tabIndex:y,value:R,className:j,style:H,children:I,autosize:T,maxRows:L,color:N,placeholderColor:S}=c,q=r(c,d);var[z,B]=o(w);var E=a();var M=s();var{width:P=M.defaultInputControlsWidth}=q;var W=t((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&T){var o=r.getBoundingClientRect();r.scrollHeight>o.height&&z<L?B(z+1):r.value&&''!==r.value||B(w)}'function'==typeof g&&g(e)}),[g,z,L,T]);return l((()=>{if(E&&E.current){var e=E.current;var r=e.getBoundingClientRect();if(e.scrollHeight>r.height){var o=parseInt(getComputedStyle(e).lineHeight,10);var a=Math.floor(e.scrollHeight/o);a<=L&&a>w&&B(a)}}}),[]),i(n,e(e({ref:E,className:j,style:H,onChange:W,cols:u,disabled:h,maxLength:v,name:f,placeholder:x,required:b,rows:z,tabIndex:y,value:R,color:N,rounded:C,placeholderColor:S,fluid:p,error:m,width:P},q),{},{children:I}))}c.defaultProps={onChange:e=>console.log(e,e.target.value),rounded:!0,color:'mineShaft',placeholderColor:'silver',cols:20,maxRows:30,rows:2,autosize:!0},c.displayName='Textarea';export{c as Textarea};
2
2
  //# sourceMappingURL=Textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { omit } from 'ramda'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport * as Styled from './style'\nimport type { TextareaProps } from './types'\n\nconst COMPONENT_NAME = 'Textarea'\n\nconst Textarea = (props: TextareaProps) => {\n const theme = useFallbackTheme()\n\n const {\n preset,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n tabIndex,\n value,\n className,\n style,\n autosize = true,\n rounded = true,\n cols = 20,\n rows = 2,\n maxRows = 30,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n ...configProps\n } = useConfigPriority<TextareaProps>(theme.components?.[COMPONENT_NAME], omit(['children'], props))\n\n const textarea = useRef() as React.MutableRefObject<HTMLTextAreaElement>\n\n const [tRows, setRows] = useState(rows)\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n useEffect(() => {\n if (!textarea || !textarea.current) return\n\n const el = textarea.current\n const rect = el.getBoundingClientRect()\n if (el.scrollHeight > rect.height) {\n const lh = parseInt(getComputedStyle(el).lineHeight, 10)\n const numberOfLines = Math.floor(el.scrollHeight / lh)\n if (numberOfLines <= maxRows && numberOfLines > rows) {\n setRows(numberOfLines)\n }\n }\n }, [])\n\n let brandPresetUsed = theme.preset === 'brand'\n if (typeof preset === 'string') brandPresetUsed = preset === 'brand'\n\n return (\n <Styled.Root\n {...configProps}\n ref={textarea}\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n width={width}\n brandPresetUsed={brandPresetUsed}\n />\n )\n}\n\nTextarea.displayName = COMPONENT_NAME\n\nexport { Textarea, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Textarea","props","_theme$components","theme","useFallbackTheme","_useConfigPriority","useConfigPriority","components","omit","preset","disabled","error","fluid","name","onChange","maxLength","placeholder","required","tabIndex","value","className","style","autosize","rounded","cols","rows","maxRows","color","placeholderColor","width","defaultInputControlsWidth","configProps","_objectWithoutProperties","_excluded","textarea","useRef","tRows","setRows","useState","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","useEffect","current","el","lh","parseInt","getComputedStyle","lineHeight","numberOfLines","Math","floor","brandPresetUsed","_jsx","Styled.Root","ref","displayName"],"mappings":"moBAOMA,IAAAA,EAAiB,WAEjBC,IAAAA,EAAYC,IAAyB,IAAAC,EACzC,IAAMC,EAAQC,IAEd,IAAAC,EAuBIC,EAAiB,QAAgBH,EAAAA,EAAMI,kBAAtB,IAAAL,OAAA,EAAgBA,EAAAF,SAAoCQ,EAAK,CAAC,YAAaP,KAvBtFQ,OACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,MAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,UAOJA,EAPIC,YAQJA,EARIC,SASJA,EATIC,SAUJA,EAVIC,MAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,SAcJA,GAAW,EAdPC,QAeJA,GAAAA,EAfIC,KAgBJA,EAAO,GAhBHC,KAiBJA,EAAO,EAjBHC,QAkBJA,EAAU,GAlBNC,MAmBJA,EAAQ,YAnBJC,iBAoBJA,EAAmB,SApBfC,MAqBJA,EAAQ1B,EAAM2B,2BArBhBzB,EAsBK0B,EAtBLC,EAAA3B,EAAA4B,GAyBA,IAAMC,EAAWC,IAEjB,IAAOC,EAAOC,GAAWC,EAASb,GAElC,IAAMc,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBrB,EAAU,CACrD,IAAMsB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUX,EAAQV,EAC/CW,EAAQD,EAAQ,GACNM,EAAOvB,OAA0B,KAAjBuB,EAAOvB,OACjCkB,EAAQZ,GAIY,mBAAbX,GACTA,EAAS2B,KAGb,CAAC3B,EAAUsB,EAAOV,EAASJ,IAG7B0B,GAAAA,KACE,GAAKd,GAAaA,EAASe,QAA3B,CAEA,IAAMC,EAAKhB,EAASe,QACpB,IAAML,EAAOM,EAAGL,wBAChB,GAAIK,EAAGJ,aAAeF,EAAKG,OAAQ,CACjC,IAAMI,EAAKC,SAASC,iBAAiBH,GAAII,WAAY,IACrD,IAAMC,EAAgBC,KAAKC,MAAMP,EAAGJ,aAAeK,GAC/CI,GAAiB7B,GAAW6B,EAAgB9B,GAC9CY,EAAQkB,OAGX,IAEH,IAAIG,EAAmC,UAAjBvD,EAAMM,OAG5B,MAFsB,iBAAXA,IAAqBiD,EAA6B,UAAXjD,GAGhDkD,EAACC,SACK7B,GADN,GAAA,CAEE8B,IAAK3B,EACLd,UAAWA,EACXC,MAAOA,EACPP,SAAUyB,EACVf,KAAMA,EACNd,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVQ,KAAMW,EACNlB,SAAUA,EACVC,MAAOA,EACPQ,MAAOA,EACPJ,QAASA,EACTK,iBAAkBA,EAClBhB,MAAOA,EACPD,MAAOA,EACPkB,MAAOA,EACP6B,gBAAiBA,MAKvB1D,EAAS8D,YAnGc"}
1
+ {"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { BaseProps, InputField } from '../../shared/interfaces'\nimport * as Styled from './style'\n\ntype TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>\n\nexport interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {\n /**\n * Specifies the visible width of a text area\n */\n cols?: number\n /**\n * Specifies the visible number of lines in a text area\n */\n rows?: number\n /**\n * Specifies the visible max number of lines in a text area\n */\n maxRows?: number\n /**\n * Specifies the maximum number of characters allowed in the text area\n */\n maxLength?: number\n /**\n * On change handler\n */\n onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void\n /**\n * Value\n */\n value?: string\n /**\n * Autosize for textarea\n */\n autosize?: boolean\n}\n\nTextarea.defaultProps = {\n onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n rounded: true,\n color: 'mineShaft',\n placeholderColor: 'silver',\n cols: 20,\n maxRows: 30,\n rows: 2,\n autosize: true,\n}\n\nTextarea.displayName = 'Textarea'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`InputField`](#/Миксины)\n * - `React.TextareaHTMLAttributes<HTMLTextAreaElement>`\n */\nexport function Textarea({\n cols,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n rounded,\n rows,\n tabIndex,\n value,\n className,\n style,\n children,\n autosize,\n maxRows,\n color,\n placeholderColor,\n ...props\n}: typeof Textarea.defaultProps & TextareaProps) {\n const [tRows, setRows] = useState(rows)\n const textarea = useRef() as React.MutableRefObject<HTMLTextAreaElement>\n const theme = useTheme()\n\n const { width = theme.defaultInputControlsWidth } = props\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n useEffect(() => {\n if (!textarea || !textarea.current) return\n\n const el = textarea.current\n const rect = el.getBoundingClientRect()\n if (el.scrollHeight > rect.height) {\n const lh = parseInt(getComputedStyle(el).lineHeight, 10)\n const numberOfLines = Math.floor(el.scrollHeight / lh)\n if (numberOfLines <= maxRows && numberOfLines > rows) {\n setRows(numberOfLines)\n }\n }\n }, [])\n\n return (\n <Styled.Root\n ref={textarea}\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n width={width}\n {...props}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Textarea","_ref","cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor","props","_objectWithoutProperties","_excluded","tRows","setRows","useState","textarea","useRef","theme","useTheme","width","defaultInputControlsWidth","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","useEffect","current","el","lh","parseInt","getComputedStyle","lineHeight","numberOfLines","Math","floor","_jsx","Styled.Root","_objectSpread","ref","defaultProps","e","console","log","displayName"],"mappings":"0gBAyDO,SAASA,EAsBiCC,GAAA,IAtBxBC,KACvBA,EADuBC,SAEvBA,EAFuBC,MAGvBA,EAHuBC,MAIvBA,EAJuBC,KAKvBA,EALuBC,SAMvBA,EANuBC,UAOvBA,EAPuBC,YAQvBA,EARuBC,SASvBA,EATuBC,QAUvBA,EAVuBC,KAWvBA,EAXuBC,SAYvBA,EAZuBC,MAavBA,EAbuBC,UAcvBA,EAduBC,MAevBA,EAfuBC,SAgBvBA,EAhBuBC,SAiBvBA,EAjBuBC,QAkBvBA,EAlBuBC,MAmBvBA,EAnBuBC,iBAoBvBA,GAE+CpB,EAD5CqB,EAC4CC,EAAAtB,EAAAuB,GAC/C,IAAOC,EAAOC,GAAWC,EAASf,GAClC,IAAMgB,EAAWC,IACjB,IAAMC,EAAQC,IAEd,IAAMC,MAAEA,EAAQF,EAAMG,2BAA8BX,EAEpD,IAAMY,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBpB,EAAU,CACrD,IAAMqB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUjB,EAAQN,EAC/CO,EAAQD,EAAQ,GACNY,EAAOvB,OAA0B,KAAjBuB,EAAOvB,OACjCY,EAAQd,GAIY,mBAAbL,GACTA,EAAS6B,KAGb,CAAC7B,EAAUkB,EAAON,EAASD,IAiB7B,OAdAyB,GAAAA,KACE,GAAKf,GAAaA,EAASgB,QAA3B,CAEA,IAAMC,EAAKjB,EAASgB,QACpB,IAAML,EAAOM,EAAGL,wBAChB,GAAIK,EAAGJ,aAAeF,EAAKG,OAAQ,CACjC,IAAMI,EAAKC,SAASC,iBAAiBH,GAAII,WAAY,IACrD,IAAMC,EAAgBC,KAAKC,MAAMP,EAAGJ,aAAeK,GAC/CI,GAAiB/B,GAAW+B,EAAgBtC,GAC9Cc,EAAQwB,OAGX,IAGDG,EAACC,EAADC,EAAAA,EAAA,CACEC,IAAK5B,EACLb,UAAWA,EACXC,MAAOA,EACPT,SAAU2B,EACVhC,KAAMA,EACNC,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVE,KAAMa,EACNZ,SAAUA,EACVC,MAAOA,EACPM,MAAOA,EACPT,QAASA,EACTU,iBAAkBA,EAClBhB,MAAOA,EACPD,MAAOA,EACP4B,MAAOA,GACHV,GApBN,GAAA,CAAAL,SAsBGA,KA1GPjB,EAASyD,aAAe,CACtBlD,SAAWmD,GAA8CC,QAAQC,IAAIF,EAAGA,EAAErB,OAAOvB,OACjFH,SAAAA,EACAS,MAAO,YACPC,iBAAkB,SAClBnB,KAAM,GACNiB,QAAS,GACTP,KAAM,EACNM,UAAAA,GAGFlB,EAAS6D,YAAc"}
@@ -1,2 +1,2 @@
1
- import o,{css as r}from'styled-components';import{injectDefaultTheme as n}from'../../shared/utils/inject-theme.js';import{property as e,responsiveNamedProperty as t}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'../Input/helpers.js';import{baseInputStyle as a}from'../Input/style.js';var d=r(["",";"," "," "," ",""],(o=>{var{theme:r}=o;return"\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ".concat(r.colors['bg-onmain-secondary'],";\n border: 1px solid ").concat(r.colors['border-onmain-default-large'],";\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ").concat(r.colors['content-onmain-primary'],";\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ").concat(r.colors['content-onmain-secondary'],";\n }\n\n &:focus {\n border: 1px solid ").concat(r.colors['border-brand-primary'],";\n caret-color: ").concat(r.colors['border-brand-primary'],";\n outline: none;\n }\n\n &:disabled {\n background-color: ").concat(r.colors['bg-disabled-large'],";\n border-color: ").concat(r.colors['border-disabled'],";\n color: ").concat(r.colors['content-disabled'],";\n cursor: not-allowed;\n }\n ")}),(o=>o.width?e(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null),(o=>t({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&'auto'!==o.width?'max-width':'width',customSizeHandler:i})),(o=>{var{fluid:r}=o;return r&&'width: 100%;'}),(o=>{var{error:r,theme:n}=o;return r&&"\n background-color: ".concat(n.colors['alert-bg-error-100'],";\n border: 1px solid ").concat(n.colors['alert-bg-error-500'],";\n ")}));var c=r(["resize:none;line-height:23px;padding:16px 20px 11px;",""],a);var s=o.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed','theme'].includes(o)&&!o.includes('width')}).attrs(n).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(o=>{var{brandPresetUsed:r}=o;return r?d:c}));export{s as Root};
1
+ import o from'styled-components';import{baseInputStyle as e}from'../Input/style.js';var r=o.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["resize:none;line-height:23px;padding:16px 20px 11px;",""],(o=>e(o)));export{r as Root};
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from '../../components/Input/helpers'\nimport { baseInputStyle } from '../../components/Input/style'\nimport type { TextareaRootProps } from './types'\n\n/**\n * TODO: combine following styles durnig Input component rebranding and remove it from here\n * https://jira.netology-group.ru/browse/STOEGE-20514\n */\nconst brandTextareaStyle = css<TextareaRootProps>`\n ${({ theme }) => `\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:focus {\n border: 1px solid ${theme.colors['border-brand-primary']};\n caret-color: ${theme.colors['border-brand-primary']};\n outline: none;\n }\n\n &:disabled {\n background-color: ${theme.colors['bg-disabled-large']};\n border-color: ${theme.colors['border-disabled']};\n color: ${theme.colors['content-disabled']};\n cursor: not-allowed;\n }\n `};\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n\n ${(props) =>\n responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n\n ${({ fluid }) => fluid && 'width: 100%;'}\n\n ${({ error, theme }) =>\n error &&\n `\n background-color: ${theme.colors['alert-bg-error-100']};\n border: 1px solid ${theme.colors['alert-bg-error-500']};\n `}\n`\n\nconst baseTextareaStyle = css`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${baseInputStyle}\n`\n\nexport const Root = styled.textarea\n .withConfig({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed', 'theme'].includes(prop) &&\n !prop.includes('width'),\n })\n .attrs(injectDefaultTheme)<TextareaRootProps>`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","concat","colors","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref2","_ref3","error","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","_ref4","brandPresetUsed"],"mappings":"yTAWA,IAAMA,EAAqBC,EACvB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,MAAA,qIAAAE,OAOcD,EAAME,OAAO,uBACPF,6BAAAA,OAAAA,EAAME,OAAO,+BARjC,qKAAAD,OAgBSD,EAAME,OAAO,0BAOXF,uMAAAA,OAAAA,EAAME,OAAO,4BAvBxB,uDAAAD,OA2BsBD,EAAME,OAAO,wBAClBF,0BAAAA,OAAAA,EAAME,OAAO,wBA5B9B,gFAAAD,OAiCsBD,EAAME,OAAO,qBACjBF,2BAAAA,OAAAA,EAAME,OAAO,mBAlC/B,oBAAAD,OAmCWD,EAAME,OAAO,oBAnCxB,+CAwCCC,GACDA,EAAMC,MACFC,EAASC,EAAiBH,EAAMC,OAAQD,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,SAC9F,OAEHD,GACDK,EAAwB,CACtBC,MAAO,CACLC,QAASP,EAAMO,QACfC,OAAQR,EAAMQ,OACdC,OAAQT,EAAMS,OACdC,OAAQV,EAAMU,OACdC,QAASX,EAAMW,SAEjBC,YAAaZ,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,QACnEY,kBAAmBV,MAGrBW,IAAA,IAACV,MAAEA,GAAHU,EAAA,OAAeV,GAAS,kBAExBW,IAAA,IAACC,MAAEA,EAAFnB,MAASA,GAAVkB,EAAA,OACAC,GAAK,6BAAAlB,OAEiBD,EAAME,OAAO,sBAF9B,+BAAAD,OAGiBD,EAAME,OAAO,sBAJnC,cAQJ,IAAMkB,EAAoBtB,EAAH,CAAA,uDAAA,IAInBuB,GAGG,IAAMC,EAAOC,EAAOC,SACxBC,WAAW,CACVC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,kBAAmB,SAASC,SAASD,KAChGA,EAAKC,SAAS,WAElBC,MAAMC,GANQL,WAAA,CAAAM,YAAA,uBAAGR,CAOhB,CAAA,GAAA,KAAAS,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBpC,EAAqBuB"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { baseInputStyle } from '../../components/Input/style'\nimport { TextareaProps } from './Textarea'\n\nexport const Root = styled.textarea.withConfig<TextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n"],"names":["Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","componentId","props","baseInputStyle"],"mappings":"oFAIO,IAAMA,EAAOC,EAAOC,SAASC,WAA0B,CAC5DC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,SAASC,SAASD,KAAUA,EAAKC,SAAS,WAFhFH,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,uDAAA,KAOZO,GAAUC,EAAeD"}