@salutejs/plasma-new-hope 0.336.0-canary.2239.17794430722.0 → 0.336.0

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var base = require('./variations/_size/base.js');
+var base$1 = require('./variations/_view/base.js');
 var LineSkeleton_styles = require('./LineSkeleton.styles.js');
 var applySkeletonGradient = require('../../../mixins/applySkeletonGradient.js');
 var applyRoundness = require('../../../mixins/applyRoundness.js');
@@ -13,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["size", "lighter", "customGradientColor", "roundness"];
+var _excluded = ["size", "lighter", "customGradientColor", "roundness", "view"];
 /**
  * Копонент-составляющая Скелетона
  */
@@ -24,17 +25,19 @@ var lineSkeletonRoot = function lineSkeletonRoot(Root) {
       customGradientColor = _ref.customGradientColor,
       _ref$roundness = _ref.roundness,
       roundness = _ref$roundness === void 0 ? '16' : _ref$roundness,
+      view = _ref.view,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     var roundnessValue = applyRoundness.getRoundness({
       roundness: roundness
     });
-    var skeletonGradientColor = applySkeletonGradient.getSkeletonColor({
+    var skeletonGradientColor = lighter ? applySkeletonGradient.getSkeletonColor({
       lighter: lighter,
       customGradientColor: customGradientColor
-    });
+    }) : undefined;
     return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
       ref: outerRootRef,
-      size: size
+      size: size,
+      view: view
     }, rest), /*#__PURE__*/React__default.default.createElement(LineSkeleton_styles.StyledVisibleLine, {
       roundness: roundnessValue,
       gradientColor: skeletonGradientColor
@@ -49,6 +52,9 @@ var lineSkeletonConfig = {
   variations: {
     size: {
       css: base.base
+    },
+    view: {
+      css: base$1.base
     }
   },
   defaults: {}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineSkeleton.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootProps } from '../../../engines';\nimport { getRoundness, getSkeletonColor } from '../../../mixins';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { StyledVisibleLine, base } from './LineSkeleton.styles';\nimport type { LineSkeletonProps } from './LineSkeleton.types';\n\n/**\n * Копонент-составляющая Скелетона\n */\nexport const lineSkeletonRoot = (Root: RootProps<HTMLDivElement, LineSkeletonProps>) =>\n    forwardRef<HTMLDivElement, LineSkeletonProps>(\n        ({ size, lighter, customGradientColor, roundness = '16', ...rest }, outerRootRef) => {\n            const roundnessValue = getRoundness({ roundness });\n            const skeletonGradientColor = getSkeletonColor({ lighter, customGradientColor });\n\n            return (\n                <Root ref={outerRootRef} size={size} {...rest}>\n                    <StyledVisibleLine roundness={roundnessValue} gradientColor={skeletonGradientColor} />\n                </Root>\n            );\n        },\n    );\n\nexport const lineSkeletonConfig = {\n    name: 'LineSkeleton',\n    tag: 'div',\n    layout: lineSkeletonRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {},\n};\n"],"names":["lineSkeletonRoot","Root","forwardRef","_ref","outerRootRef","size","lighter","customGradientColor","_ref$roundness","roundness","rest","_objectWithoutProperties","_excluded","roundnessValue","getRoundness","skeletonGradientColor","getSkeletonColor","React","createElement","_extends","ref","StyledVisibleLine","gradientColor","lineSkeletonConfig","name","tag","layout","base","variations","css","sizeCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;AASA;AACA;AACA;IACaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,IAAkD,EAAA;AAAA,EAAA,oBAC/EC,gBAAU,CACN,UAAAC,IAAA,EAAoEC,YAAY,EAAK;AAAA,IAAA,IAAlFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;MAAEC,mBAAmB,GAAAJ,IAAA,CAAnBI,mBAAmB;MAAAC,cAAA,GAAAL,IAAA,CAAEM,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,cAAA;AAAKE,MAAAA,IAAI,GAAAC,iDAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;IAC5D,IAAMC,cAAc,GAAGC,2BAAY,CAAC;AAAEL,MAAAA,SAAS,EAATA,SAAAA;AAAU,KAAC,CAAC,CAAA;IAClD,IAAMM,qBAAqB,GAAGC,sCAAgB,CAAC;AAAEV,MAAAA,OAAO,EAAPA,OAAO;AAAEC,MAAAA,mBAAmB,EAAnBA,mBAAAA;AAAoB,KAAC,CAAC,CAAA;AAEhF,IAAA,oBACIU,sBAAA,CAAAC,aAAA,CAACjB,IAAI,EAAAkB,iCAAA,CAAA;AAACC,MAAAA,GAAG,EAAEhB,YAAa;AAACC,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,EAAKK,IAAI,CACzCO,eAAAA,sBAAA,CAAAC,aAAA,CAACG,qCAAiB,EAAA;AAACZ,MAAAA,SAAS,EAAEI,cAAe;AAACS,MAAAA,aAAa,EAAEP,qBAAAA;AAAsB,KAAE,CACnF,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMQ,kBAAkB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,cAAc;AACpBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE1B,gBAAgB;AACxB2B,EAAAA,IAAI,EAAJA,wBAAI;AACJC,EAAAA,UAAU,EAAE;AACRvB,IAAAA,IAAI,EAAE;AACFwB,MAAAA,GAAG,EAAEC,SAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;;"}
+{"version":3,"file":"LineSkeleton.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootProps } from '../../../engines';\nimport { getRoundness, getSkeletonColor } from '../../../mixins';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { StyledVisibleLine, base } from './LineSkeleton.styles';\nimport type { LineSkeletonProps } from './LineSkeleton.types';\n\n/**\n * Копонент-составляющая Скелетона\n */\nexport const lineSkeletonRoot = (Root: RootProps<HTMLDivElement, LineSkeletonProps>) =>\n    forwardRef<HTMLDivElement, LineSkeletonProps>(\n        ({ size, lighter, customGradientColor, roundness = '16', view, ...rest }, outerRootRef) => {\n            const roundnessValue = getRoundness({ roundness });\n            const skeletonGradientColor = lighter ? getSkeletonColor({ lighter, customGradientColor }) : undefined;\n\n            return (\n                <Root ref={outerRootRef} size={size} view={view} {...rest}>\n                    <StyledVisibleLine roundness={roundnessValue} gradientColor={skeletonGradientColor} />\n                </Root>\n            );\n        },\n    );\n\nexport const lineSkeletonConfig = {\n    name: 'LineSkeleton',\n    tag: 'div',\n    layout: lineSkeletonRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n    },\n    defaults: {},\n};\n"],"names":["lineSkeletonRoot","Root","forwardRef","_ref","outerRootRef","size","lighter","customGradientColor","_ref$roundness","roundness","view","rest","_objectWithoutProperties","_excluded","roundnessValue","getRoundness","skeletonGradientColor","getSkeletonColor","undefined","React","createElement","_extends","ref","StyledVisibleLine","gradientColor","lineSkeletonConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","defaults"],"mappings":";;;;;;;;;;;;;;;;;AAUA;AACA;AACA;IACaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,IAAkD,EAAA;AAAA,EAAA,oBAC/EC,gBAAU,CACN,UAAAC,IAAA,EAA0EC,YAAY,EAAK;AAAA,IAAA,IAAxFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;MAAEC,mBAAmB,GAAAJ,IAAA,CAAnBI,mBAAmB;MAAAC,cAAA,GAAAL,IAAA,CAAEM,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,cAAA;MAAEE,IAAI,GAAAP,IAAA,CAAJO,IAAI;AAAKC,MAAAA,IAAI,GAAAC,iDAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;IAClE,IAAMC,cAAc,GAAGC,2BAAY,CAAC;AAAEN,MAAAA,SAAS,EAATA,SAAAA;AAAU,KAAC,CAAC,CAAA;AAClD,IAAA,IAAMO,qBAAqB,GAAGV,OAAO,GAAGW,sCAAgB,CAAC;AAAEX,MAAAA,OAAO,EAAPA,OAAO;AAAEC,MAAAA,mBAAmB,EAAnBA,mBAAAA;KAAqB,CAAC,GAAGW,SAAS,CAAA;AAEtG,IAAA,oBACIC,sBAAA,CAAAC,aAAA,CAACnB,IAAI,EAAAoB,iCAAA,CAAA;AAACC,MAAAA,GAAG,EAAElB,YAAa;AAACC,MAAAA,IAAI,EAAEA,IAAK;AAACK,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,EAAKC,IAAI,CACrDQ,eAAAA,sBAAA,CAAAC,aAAA,CAACG,qCAAiB,EAAA;AAACd,MAAAA,SAAS,EAAEK,cAAe;AAACU,MAAAA,aAAa,EAAER,qBAAAA;AAAsB,KAAE,CACnF,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMS,kBAAkB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,cAAc;AACpBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE5B,gBAAgB;AACxB6B,EAAAA,IAAI,EAAJA,wBAAI;AACJC,EAAAA,UAAU,EAAE;AACRzB,IAAAA,IAAI,EAAE;AACF0B,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACDtB,IAAAA,IAAI,EAAE;AACFqB,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE,EAAC;AACf;;;;;"}

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.styles.js

@@ -4,6 +4,7 @@ require('./LineSkeleton.styles_7yl72k.css');
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
+var tokens = require('../tokens.js');
 
 var base = "blop34g";
 var _exp = function _exp() {
@@ -15,7 +16,7 @@ var _exp = function _exp() {
 var _exp3 = function _exp3() {
   return function (_ref2) {
     var gradientColor = _ref2.gradientColor;
-    return gradientColor;
+    return gradientColor || "var(".concat(tokens.tokens.gradientColor, ")");
   };
 };
 var StyledVisibleLine = /*#__PURE__*/react.styled('div')({

package/cjs/components/Skeleton/LineSkeleton/LineSkeleton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineSkeleton.styles.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyRoundness, applySkeletonGradient } from '../../../mixins';\n\nimport type { StyledVisibleLineProps } from './LineSkeleton.types';\n\nexport const base = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n`;\n\nexport const StyledVisibleLine = styled.div<StyledVisibleLineProps>`\n    position: relative;\n    overflow: hidden;\n\n    width: 100%;\n\n    --plasma_private-line-skeleton-roundness: ${({ roundness }) => roundness};\n    ${applyRoundness('var(--plasma_private-line-skeleton-roundness)')};\n\n    --plasma_private-line-skeleton-gradient: ${({ gradientColor }) => gradientColor};\n    ${applySkeletonGradient('var(--plasma_private-line-skeleton-gradient)')};\n`;\n"],"names":["base","_exp","_ref","roundness","_exp3","_ref2","gradientColor","StyledVisibleLine","styled","name","class","propsAsIs","vars"],"mappings":";;;;;;AAOO,IAAMA,IAAI,GAKhB,UAAA;AAAC,IAAAC,IAAA,GAXgBA,SAWhBA,IAAAA,GAAA;AAAA,EAAA,OAQ8C,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,SAAS,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GAnB1DA,SAmB0DA,KAAAA,GAAA;AAAA,EAAA,OAG7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,aAAAA,GAAAA,KAAAA,CAAAA,aAAAA,CAAAA;AAAAA,IAAAA,OAAoBA,aAAa,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAT5E,IAAMC,iBAAiB,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAMSX,IAA4B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAG7BG,KAAoC,EAAA,CAAA;AAAA,GAAA;AAAA,CAElF;;;;;"}
+{"version":3,"file":"LineSkeleton.styles.js","sources":["../../../../src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyRoundness, applySkeletonGradient } from '../../../mixins';\nimport { tokens } from '../tokens';\n\nimport type { StyledVisibleLineProps } from './LineSkeleton.types';\n\nexport const base = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n`;\n\nexport const StyledVisibleLine = styled.div<StyledVisibleLineProps>`\n    position: relative;\n    overflow: hidden;\n\n    width: 100%;\n\n    --plasma_private-line-skeleton-roundness: ${({ roundness }) => roundness};\n    ${applyRoundness('var(--plasma_private-line-skeleton-roundness)')};\n\n    --plasma_private-line-skeleton-gradient: ${({ gradientColor }) => gradientColor || `var(${tokens.gradientColor})`};\n    ${applySkeletonGradient('var(--plasma_private-line-skeleton-gradient)')};\n`;\n"],"names":["base","_exp","_ref","roundness","_exp3","_ref2","gradientColor","concat","tokens","StyledVisibleLine","styled","name","class","propsAsIs","vars"],"mappings":";;;;;;;AAQO,IAAMA,IAAI,GAKhB,UAAA;AAAC,IAAAC,IAAA,GAZgBA,SAYhBA,IAAAA,GAAA;AAAA,EAAA,OAQ8C,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,SAAAA,GAAAA,IAAAA,CAAAA,SAAAA,CAAAA;AAAAA,IAAAA,OAAgBA,SAAS,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAC,KAAA,GApB1DA,SAoB0DA,KAAAA,GAAA;AAAA,EAAA,OAG7B,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGC,aAAAA,GAAAA,KAAAA,CAAAA,aAAAA,CAAAA;AAAAA,IAAAA,OAAoBA,aAAa,IAAAC,MAAAA,CAAAA,MAAA,CAAWC,aAAM,CAACF,aAAa,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAT9G,IAAMG,iBAAiB,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAMSb,IAA4B,EAAA,CAAA;AAAA,IAAA,WAAA,EAAA,cAG7BG,KAAsE,EAAA,CAAA;AAAA,GAAA;AAAA,CAEpH;;;;;"}

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base.js

@@ -1,4 +1,4 @@
-require('./base_1wf7n5i.css');
+require('./base_x642ct.css');
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../src/components/Skeleton/LineSkeleton/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { StyledVisibleLine } from '../../LineSkeleton.styles';\nimport { tokens } from '../../../tokens';\n\nexport const base = css`\n    height: var(${tokens.lineHeight});\n\n    & ${StyledVisibleLine} {\n        height: var(${tokens.visibleLineHeight});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAMhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../src/components/Skeleton/LineSkeleton/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/Skeleton/LineSkeleton/variations/_size/base_x642ct.css

@@ -0,0 +1 @@
+

package/cjs/components/Skeleton/LineSkeleton/variations/_view/base.js

@@ -0,0 +1,9 @@
+require('./base_1it9pjr.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "b160f301";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/cjs/components/Skeleton/LineSkeleton/variations/_view/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../../src/components/Skeleton/LineSkeleton/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { StyledVisibleLine } from '../../LineSkeleton.styles';\nimport { tokens } from '../../../tokens';\n\nexport const base = css`\n    height: var(${tokens.lineHeight});\n\n    & ${StyledVisibleLine} {\n        height: var(${tokens.visibleLineHeight});\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAMhB;;;;"}

package/cjs/components/Skeleton/LineSkeleton/variations/_view/base_1it9pjr.css

@@ -0,0 +1 @@
+.b160f301{height:var(--plasma-skeleton-line-height);}.b160f301 .sn3du7u{height:var(--plasma-skeleton-visible-line-height);}

package/cjs/components/Skeleton/TextSkeleton/TextSkeleton.js

@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["lines", "width", "roundness", "customGradientColor", "lighter", "size"];
+var _excluded = ["lines", "width", "roundness", "customGradientColor", "lighter", "size", "view"];
 var variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];
 
 /**
@@ -26,6 +26,8 @@ var textSkeleton = function textSkeleton(Component) {
       lighter = _ref.lighter,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'bodyM' : _ref$size,
+      _ref$view = _ref.view,
+      view = _ref$view === void 0 ? 'default' : _ref$view,
       props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     var _useState = React.useState(null),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -67,6 +69,7 @@ var textSkeleton = function textSkeleton(Component) {
       return /*#__PURE__*/React__default.default.createElement(ComponentSkeleton, {
         key: "line:".concat(i),
         size: size,
+        view: view,
         roundness: roundness,
         customGradientColor: customGradientColor,
         lighter: lighter,

package/cjs/components/Skeleton/TextSkeleton/TextSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSkeleton.js","sources":["../../../../src/components/Skeleton/TextSkeleton/TextSkeleton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { FC, HTMLAttributes } from 'react';\n\nimport type { LineSkeletonProps } from '../LineSkeleton';\n\nimport type { TextSkeletonBaseProps } from './TextSkeleton.types';\nimport { StyledTextSkeleton } from './TextSkeleton.styles';\n\nconst variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];\n\n/**\n * Хок для создания компонента плейсхолдера нескольких строк текста.\n * Размеры компонента задаются с помощью констант и соответствуют размерам [типографических элементов](/?path=/docs/).\n */\nexport const textSkeleton = <T extends LineSkeletonProps>(\n    Component: FC<T>,\n): FC<T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>> => ({\n    lines,\n    width,\n    roundness,\n    customGradientColor,\n    lighter,\n    size = 'bodyM',\n    ...props\n}: T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>) => {\n    const [fixedWidth, setFixedWidth] = useState<string | number | null>(null);\n    const [linesWidth, setLinesWidth] = useState([]);\n\n    useEffect(() => {\n        if (!width) {\n            setFixedWidth(null);\n            const computedLengths = Array(lines)\n                .fill(0)\n                .reduce((acc, _, i) => {\n                    let w;\n                    // Последняя строка\n                    if (i === lines - 1 && lines !== 1) {\n                        w = 45 - variousWidth[i % variousWidth.length];\n                    } else if (lines === 1 || lines === 2) {\n                        // Единственная или первая из двух\n                        w = 100;\n                    } else {\n                        w = 100 - variousWidth[i % variousWidth.length];\n                    }\n\n                    return { ...acc, [i]: w };\n                }, {});\n\n            setLinesWidth(Object.values(computedLengths));\n            return;\n        }\n\n        if (!Number.isNaN(Number(width))) {\n            setFixedWidth(`${width}%`);\n        } else {\n            setFixedWidth(String(width));\n        }\n    }, [width, lines]);\n\n    // TODO: Подумать как можно обойти явное приведение типов\n    const ComponentSkeleton = Component as FC<LineSkeletonProps>;\n\n    return (\n        <StyledTextSkeleton {...props}>\n            {Array.from(Array<number>(lines), (_, i) => {\n                return (\n                    <ComponentSkeleton\n                        key={`line:${i}`}\n                        size={size}\n                        roundness={roundness}\n                        customGradientColor={customGradientColor}\n                        lighter={lighter}\n                        style={{ width: fixedWidth || `${linesWidth[i]}%` }}\n                    />\n                );\n            })}\n        </StyledTextSkeleton>\n    );\n};\n"],"names":["variousWidth","textSkeleton","Component","_ref","lines","width","roundness","customGradientColor","lighter","_ref$size","size","props","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","fixedWidth","setFixedWidth","_useState3","_useState4","linesWidth","setLinesWidth","useEffect","computedLengths","Array","fill","reduce","acc","_","i","w","length","_objectSpread","_defineProperty","Object","values","Number","isNaN","concat","String","ComponentSkeleton","React","createElement","StyledTextSkeleton","from","key","style"],"mappings":"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"}
+{"version":3,"file":"TextSkeleton.js","sources":["../../../../src/components/Skeleton/TextSkeleton/TextSkeleton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { FC, HTMLAttributes } from 'react';\n\nimport type { LineSkeletonProps } from '../LineSkeleton';\n\nimport type { TextSkeletonBaseProps } from './TextSkeleton.types';\nimport { StyledTextSkeleton } from './TextSkeleton.styles';\n\nconst variousWidth = [7.58, 5.27, 13.54, 6.63, 0.28, 14.8, 0.33, 11.26, 14.1, 10.59, 3.38, 13.5, 7.71, 3.34, 7.96];\n\n/**\n * Хок для создания компонента плейсхолдера нескольких строк текста.\n * Размеры компонента задаются с помощью констант и соответствуют размерам [типографических элементов](/?path=/docs/).\n */\nexport const textSkeleton = <T extends LineSkeletonProps>(\n    Component: FC<T>,\n): FC<T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>> => ({\n    lines,\n    width,\n    roundness,\n    customGradientColor,\n    lighter,\n    size = 'bodyM',\n    view = 'default',\n    ...props\n}: T & TextSkeletonBaseProps & HTMLAttributes<HTMLDivElement>) => {\n    const [fixedWidth, setFixedWidth] = useState<string | number | null>(null);\n    const [linesWidth, setLinesWidth] = useState([]);\n\n    useEffect(() => {\n        if (!width) {\n            setFixedWidth(null);\n            const computedLengths = Array(lines)\n                .fill(0)\n                .reduce((acc, _, i) => {\n                    let w;\n                    // Последняя строка\n                    if (i === lines - 1 && lines !== 1) {\n                        w = 45 - variousWidth[i % variousWidth.length];\n                    } else if (lines === 1 || lines === 2) {\n                        // Единственная или первая из двух\n                        w = 100;\n                    } else {\n                        w = 100 - variousWidth[i % variousWidth.length];\n                    }\n\n                    return { ...acc, [i]: w };\n                }, {});\n\n            setLinesWidth(Object.values(computedLengths));\n            return;\n        }\n\n        if (!Number.isNaN(Number(width))) {\n            setFixedWidth(`${width}%`);\n        } else {\n            setFixedWidth(String(width));\n        }\n    }, [width, lines]);\n\n    // TODO: Подумать как можно обойти явное приведение типов\n    const ComponentSkeleton = Component as FC<LineSkeletonProps>;\n\n    return (\n        <StyledTextSkeleton {...props}>\n            {Array.from(Array<number>(lines), (_, i) => {\n                return (\n                    <ComponentSkeleton\n                        key={`line:${i}`}\n                        size={size}\n                        view={view}\n                        roundness={roundness}\n                        customGradientColor={customGradientColor}\n                        lighter={lighter}\n                        style={{ width: fixedWidth || `${linesWidth[i]}%` }}\n                    />\n                );\n            })}\n        </StyledTextSkeleton>\n    );\n};\n"],"names":["variousWidth","textSkeleton","Component","_ref","lines","width","roundness","customGradientColor","lighter","_ref$size","size","_ref$view","view","props","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","fixedWidth","setFixedWidth","_useState3","_useState4","linesWidth","setLinesWidth","useEffect","computedLengths","Array","fill","reduce","acc","_","i","w","length","_objectSpread","_defineProperty","Object","values","Number","isNaN","concat","String","ComponentSkeleton","React","createElement","StyledTextSkeleton","from","key","style"],"mappings":"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"}

package/cjs/components/Skeleton/tokens.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tokens = {
   lineHeight: '--plasma-skeleton-line-height',
-  visibleLineHeight: '--plasma-skeleton-visible-line-height'
+  visibleLineHeight: '--plasma-skeleton-visible-line-height',
+  gradientColor: '--plasma-skeleton-gradient-color'
 };
 
 exports.tokens = tokens;

package/cjs/components/Skeleton/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Skeleton/tokens.ts"],"sourcesContent":["export const tokens = {\n    lineHeight: '--plasma-skeleton-line-height',\n    visibleLineHeight: '--plasma-skeleton-visible-line-height',\n};\n"],"names":["tokens","lineHeight","visibleLineHeight"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,iBAAiB,EAAE,uCAAA;AACvB;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Skeleton/tokens.ts"],"sourcesContent":["export const tokens = {\n    lineHeight: '--plasma-skeleton-line-height',\n    visibleLineHeight: '--plasma-skeleton-visible-line-height',\n    gradientColor: '--plasma-skeleton-gradient-color',\n};\n"],"names":["tokens","lineHeight","visibleLineHeight","gradientColor"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,+BAA+B;AAC3CC,EAAAA,iBAAiB,EAAE,uCAAuC;AAC1DC,EAAAA,aAAa,EAAE,kCAAA;AACnB;;;;"}

package/cjs/index.css

@@ -429,8 +429,8 @@
 
 .base_fbxbaa_b37w9ja__9aed17a1{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1{position:absolute;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1 .base_fbxbaa_b5xb1jq__9aed17a1{background:transparent;}.base_fbxbaa_b37w9ja__9aed17a1.base_fbxbaa_panelHasHeader__9aed17a1.base_fbxbaa_panelRightCloseButton__9aed17a1{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
 
-.Drawer_styles_h5od79_s1ewnow2__f99f45af{--plasma-panel-close-color:var(--plasma-drawer-close-icon-color);}
-.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerOverlay__f99f45af{-webkit-animation:Drawer_styles_h5od79_fadeInSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_fadeInSv7q57r__f99f45af 0.2s forwards;-webkit-scrollbar-gutter:stable;-moz-scrollbar-gutter:stable;-ms-scrollbar-gutter:stable;scrollbar-gutter:stable;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_drawerOverlay__f99f45af{-webkit-animation:Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_fadeInSv7q57r__f99f45af{from{opacity:0;}to{opacity:1;}}@keyframes Drawer_styles_h5od79_fadeInSv7q57r__f99f45af{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af{from{opacity:1;}to{opacity:0;}}@keyframes Drawer_styles_h5od79_fadeOutSv7q57r__f99f45af{from{opacity:1;}to{opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af,.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af > div{width:var(--sv7q57r-0);height:var(--sv7q57r-1);}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerRightPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_h5od79_rightShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}@keyframes Drawer_styles_h5od79_rightHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerBottomPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_h5od79_bottomShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}@keyframes Drawer_styles_h5od79_bottomHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerLeftPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_h5od79_leftShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}@keyframes Drawer_styles_h5od79_leftHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af 0.2s forwards;}.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_sv7q57r__f99f45af.Drawer_styles_h5od79_drawerTopPlacement__f99f45af.Drawer_styles_h5od79_popupEndAnimation__f99f45af .Drawer_styles_h5od79_popupBaseRoot__f99f45af{-webkit-animation:Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af 0.2s forwards;animation:Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af 0.2s forwards;}@-webkit-keyframes Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_h5od79_topShowAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}@keyframes Drawer_styles_h5od79_topHideAnimationSv7q57r__f99f45af{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}
+.Drawer_styles_1gcp61n_s1ewnow2__fe71c4d5{--plasma-panel-close-color:var(--plasma-drawer-close-icon-color);}
+.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerOverlay__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_fadeInSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_fadeInSv7q57r__fe71c4d5 0.2s forwards;-webkit-scrollbar-gutter:stable;-moz-scrollbar-gutter:stable;-ms-scrollbar-gutter:stable;scrollbar-gutter:stable;}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_drawerOverlay__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_fadeOutSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_fadeOutSv7q57r__fe71c4d5 0.2s forwards;}@-webkit-keyframes Drawer_styles_1gcp61n_fadeInSv7q57r__fe71c4d5{from{opacity:0;}to{opacity:1;}}@keyframes Drawer_styles_1gcp61n_fadeInSv7q57r__fe71c4d5{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes Drawer_styles_1gcp61n_fadeOutSv7q57r__fe71c4d5{from{opacity:1;}to{opacity:0;}}@keyframes Drawer_styles_1gcp61n_fadeOutSv7q57r__fe71c4d5{from{opacity:1;}to{opacity:0;}}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5,.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5 > div{width:var(--sv7q57r-0);height:var(--sv7q57r-1);}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerRightPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerRightPlacement__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_rightShowAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_rightShowAnimationSv7q57r__fe71c4d5 0.2s forwards;}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerRightPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerRightPlacement__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_rightHideAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_rightHideAnimationSv7q57r__fe71c4d5 0.2s forwards;}@-webkit-keyframes Drawer_styles_1gcp61n_rightShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_1gcp61n_rightShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_1gcp61n_rightHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}@keyframes Drawer_styles_1gcp61n_rightHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%);opacity:0;}}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerBottomPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerBottomPlacement__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_bottomShowAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_bottomShowAnimationSv7q57r__fe71c4d5 0.2s forwards;}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerBottomPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerBottomPlacement__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_bottomHideAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_bottomHideAnimationSv7q57r__fe71c4d5 0.2s forwards;}@-webkit-keyframes Drawer_styles_1gcp61n_bottomShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_1gcp61n_bottomShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_1gcp61n_bottomHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}@keyframes Drawer_styles_1gcp61n_bottomHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);opacity:0;}}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerLeftPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerLeftPlacement__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_leftShowAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_leftShowAnimationSv7q57r__fe71c4d5 0.2s forwards;}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerLeftPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerLeftPlacement__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_leftHideAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_leftHideAnimationSv7q57r__fe71c4d5 0.2s forwards;}@-webkit-keyframes Drawer_styles_1gcp61n_leftShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@keyframes Drawer_styles_1gcp61n_leftShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}100%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}}@-webkit-keyframes Drawer_styles_1gcp61n_leftHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}@keyframes Drawer_styles_1gcp61n_leftHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);opacity:1;}100%{-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%);opacity:0;}}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerTopPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerTopPlacement__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_topShowAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_topShowAnimationSv7q57r__fe71c4d5 0.2s forwards;}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerTopPlacement__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerTopPlacement__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:Drawer_styles_1gcp61n_topHideAnimationSv7q57r__fe71c4d5 0.2s forwards;animation:Drawer_styles_1gcp61n_topHideAnimationSv7q57r__fe71c4d5 0.2s forwards;}@-webkit-keyframes Drawer_styles_1gcp61n_topShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@keyframes Drawer_styles_1gcp61n_topShowAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}100%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}}@-webkit-keyframes Drawer_styles_1gcp61n_topHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}@keyframes Drawer_styles_1gcp61n_topHideAnimationSv7q57r__fe71c4d5{0%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:1;}100%{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);opacity:0;}}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerEnterCustomAnimation__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerEnterCustomAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:var(--sv7q57r-2);animation:var(--sv7q57r-2);}.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerExitCustomAnimation__fe71c4d5.Drawer_styles_1gcp61n_sv7q57r__fe71c4d5.Drawer_styles_1gcp61n_drawerExitCustomAnimation__fe71c4d5.Drawer_styles_1gcp61n_popupEndAnimation__fe71c4d5 .Drawer_styles_1gcp61n_popupBaseRoot__fe71c4d5{-webkit-animation:var(--sv7q57r-3);animation:var(--sv7q57r-3);}
 
 .Dropdown_styles_kkvnr1_ln7uamp__173ef985{width:var(--ln7uamp-0);padding:calc(var(--plasma-dropdown-padding) + var(--plasma-dropdown-border-width,0rem));border-radius:var(--plasma-dropdown-border-radius);box-sizing:border-box;background:var(--surface-solid-card-brightness);box-shadow:0px 4px 14px -4px rgba(8,8,8,0.08),0px 1px 4px -1px rgba(0,0,0,0.04), inset 0 0 0 var(--plasma-dropdown-border-width,0) var(--plasma-dropdown-border-color,transparent);}
 .Dropdown_styles_kkvnr1_ujr7fmv__173ef985{max-height:var(--ujr7fmv-0);overflow-x:hidden;overflow-y:auto;border-radius:calc(var(--plasma-dropdown-border-radius) - 0.125rem - var(--plasma-dropdown-border-width,0rem));margin:0;padding:0;}
@@ -502,7 +502,7 @@
 .SegmentItem_styles_16v9odz_l1gg7fed__88f7b421{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:var(--plasma-segment-item-content-icon-margin);color:inherit;}
 .SegmentItem_styles_16v9odz_bctm1j9__88f7b421{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;min-width:0;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;margin-left:var(--plasma-segment-item-margin-left);-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}.SegmentItem_styles_16v9odz_bctm1j9__88f7b421:first-child{margin-left:0;}.SegmentItem_styles_16v9odz_bctm1j9__88f7b421::before{content:'';position:absolute;top:var(--plasma_private-clip-outline-offset);left:var(--plasma_private-clip-outline-offset);right:var(--plasma_private-clip-outline-offset);bottom:var(--plasma_private-clip-outline-offset);z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) + var(--plasma_private-clip-outline-radius));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentItem_styles_16v9odz_bctm1j9__88f7b421.SegmentItem_styles_16v9odz_focusVisible__88f7b421:focus::before,.SegmentItem_styles_16v9odz_bctm1j9__88f7b421[data-focus-visible-added]::before{z-index:1;outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentItem_styles_16v9odz_bctm1j9__88f7b421.SegmentItem_styles_16v9odz_segmentTruncate__88f7b421 .SegmentItem_styles_16v9odz_sxcdyja__88f7b421{overflow:hidden;text-overflow:ellipsis;}
 
-.base_1wf7n5i_b1x66a6y__80fc5ddb{height:var(--plasma-skeleton-line-height);}.base_1wf7n5i_b1x66a6y__80fc5ddb .base_1wf7n5i_sn3du7u__80fc5ddb{height:var(--plasma-skeleton-visible-line-height);}
+.base_1it9pjr_b160f301__9d69d9df{height:var(--plasma-skeleton-line-height);}.base_1it9pjr_b160f301__9d69d9df .base_1it9pjr_sn3du7u__9d69d9df{height:var(--plasma-skeleton-visible-line-height);}
 
 .LineSkeleton_styles_7yl72k_blop34g__2466eef2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
 .LineSkeleton_styles_7yl72k_sn3du7u__2466eef2{position:relative;overflow:hidden;width:100%;--plasma_private-line-skeleton-roundness:var(--sn3du7u-0);border-radius:var(--plasma_private-line-skeleton-roundness);--plasma_private-line-skeleton-gradient:var(--sn3du7u-1);position:relative;overflow:hidden;z-index:1;}.LineSkeleton_styles_7yl72k_sn3du7u__2466eef2::before{content:'';position:absolute;top:0;left:-100vw;width:200vw;height:100%;-webkit-animation:LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2 4s linear infinite;animation:LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2 4s linear infinite;background-image:var(--plasma_private-line-skeleton-gradient);}@-webkit-keyframes LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(100vw);-ms-transform:translateX(100vw);transform:translateX(100vw);}}@keyframes LineSkeleton_styles_7yl72k_loadingSn3du7u__2466eef2{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(100vw);-ms-transform:translateX(100vw);transform:translateX(100vw);}}
@@ -538,19 +538,21 @@
 
 .Counter_styles_1uue90v_b1dqw7l5__00d0b847{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;}
 
-.Avatar_styles_131qvfx_b1d1rtx8__45209762{position:relative;}
-.Avatar_styles_131qvfx_wxwn3we__45209762{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;border-radius:50%;background:var(--plasma-avatar-background);overflow:hidden;}.Avatar_styles_131qvfx_wxwn3we__45209762:hover{scale:var(--wxwn3we-0);cursor:var(--wxwn3we-1);}
-.Avatar_styles_131qvfx_sf2jhi1__45209762{position:absolute;top:calc(1.02 * 0.85 * var(--plasma-avatar-size) - var(--plasma-status-icon-size) / 2);left:calc(1.02 * 0.85 * var(--plasma-avatar-size) - var(--plasma-status-icon-size) / 2);}
-.Avatar_styles_131qvfx_igq6ihg__45209762{width:100%;height:100%;border-radius:50%;}
-.Avatar_styles_131qvfx_t1kfsxcq__45209762{font-size:var(--plasma-avatar-font-size);font-family:var(--plasma-avatar-font-family);font-weight:var(--plasma-avatar-font-weight);line-height:var(--plasma-avatar-line-height);background-image:var(--plasma-avatar-color);background-color:var(--plasma-avatar-color);background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
-.Avatar_styles_131qvfx_e1i3umn2__45209762{max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;}.Avatar_styles_131qvfx_e1i3umn2__45209762.Avatar_styles_131qvfx_avatarExtraPlacementTopLeft__45209762{top:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));left:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_131qvfx_e1i3umn2__45209762.Avatar_styles_131qvfx_avatarExtraPlacementTopRight__45209762{top:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));right:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_131qvfx_e1i3umn2__45209762.Avatar_styles_131qvfx_avatarExtraPlacementBottomRight__45209762{bottom:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));right:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_131qvfx_e1i3umn2__45209762.Avatar_styles_131qvfx_avatarExtraPlacementBottomLeft__45209762{bottom:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));left:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}
-.Avatar_styles_131qvfx_eqy70yy__45209762{--plasma-badge-background:var(--plasma-avatar-extra-badge-background);--plasma-badge-color:var(--plasma-avatar-extra-badge-color);--plasma-badge-background-transparent:var(--plasma-avatar-extra-badge-background-transparent);--plasma-badge-color-transparent:var(--plasma-avatar-extra-badge-color-transparent);--plasma-badge-color-clear:var(--plasma-avatar-extra-badge-color-clear);--plasma-badge-background-clear:var(--plasma-avatar-extra-badge-background-clear);--plasma-badge-border-radius:var(--plasma-avatar-extra-badge-border-radius);--plasma-badge-pilled-border-radius:var(--plasma-avatar-extra-badge-pilled-border-radius);--plasma-badge-height:var(--plasma-avatar-extra-badge-height);--plasma-badge-padding:var(--plasma-avatar-extra-badge-padding);--plasma-badge-padding-icon-only:var(--plasma-avatar-extra-badge-padding-icon-only);--plasma-badge-font-family:var(--plasma-avatar-extra-badge-font-family);--plasma-badge-font-size:var(--plasma-avatar-extra-badge-font-size);--plasma-badge-font-style:var(--plasma-avatar-extra-badge-font-style);--plasma-badge-font-weight:var(--plasma-avatar-extra-badge-font-weight);--plasma-badge-letter-spacing:var(--plasma-avatar-extra-badge-letter-spacing);--plasma-badge-lineheight:var(--plasma-avatar-extra-badge-lineheight);--plasma-badge-left-content-margin-left:var(--plasma-avatar-extra-badge-left-content-margin-left);--plasma-badge-left-content-margin-right:var(--plasma-avatar-extra-badge-left-content-margin-right);--plasma-badge-right-content-margin-left:var(--plasma-avatar-extra-badge-right-content-margin-left);--plasma-badge-right-content-margin-right:var(--plasma-avatar-extra-badge-right-content-margin-right);}
-.Avatar_styles_131qvfx_e4nvvok__45209762{--plasma-counter-background:var(--plasma-avatar-extra-counter-background);--plasma-counter-color:var(--plasma-avatar-extra-counter-color);--plasma-counter-border-radius:var(--plasma-avatar-extra-counter-border-radius);--plasma-counter-height:var(--plasma-avatar-extra-counter-height);--plasma-counter-padding:var(--plasma-avatar-extra-counter-padding);--plasma-counter-font-family:var(--plasma-avatar-extra-counter-font-family);--plasma-counter-font-size:var(--plasma-avatar-extra-counter-font-size);--plasma-counter-font-style:var(--plasma-avatar-extra-counter-font-style);--plasma-counter-font-weight:var(--plasma-avatar-extra-counter-font-weight);--plasma-counter-letter-spacing:var(--plasma-avatar-extra-counter-letter-spacing);--plasma-counter-lineheight:var(--plasma-avatar-extra-counter-lineheight);}
+.Avatar_styles_1kvh8pj_b1d1rtx8__0cd12c59{position:relative;}
+.Avatar_styles_1kvh8pj_wxwn3we__0cd12c59{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;background:var(--plasma-avatar-background);overflow:hidden;}.Avatar_styles_1kvh8pj_wxwn3we__0cd12c59:hover{scale:var(--wxwn3we-0);cursor:var(--wxwn3we-1);}
+.Avatar_styles_1kvh8pj_sf2jhi1__0cd12c59{position:absolute;}
+.Avatar_styles_1kvh8pj_igq6ihg__0cd12c59{width:100%;height:100%;}
+.Avatar_styles_1kvh8pj_t1kfsxcq__0cd12c59{font-size:var(--plasma-avatar-font-size);font-family:var(--plasma-avatar-font-family);font-weight:var(--plasma-avatar-font-weight);line-height:var(--plasma-avatar-line-height);background-image:var(--plasma-avatar-color);background-color:var(--plasma-avatar-color);background-size:100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
+.Avatar_styles_1kvh8pj_e1i3umn2__0cd12c59{max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;}.Avatar_styles_1kvh8pj_e1i3umn2__0cd12c59.Avatar_styles_1kvh8pj_avatarExtraPlacementTopLeft__0cd12c59{top:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));left:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_1kvh8pj_e1i3umn2__0cd12c59.Avatar_styles_1kvh8pj_avatarExtraPlacementTopRight__0cd12c59{top:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));right:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_1kvh8pj_e1i3umn2__0cd12c59.Avatar_styles_1kvh8pj_avatarExtraPlacementBottomRight__0cd12c59{bottom:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));right:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}.Avatar_styles_1kvh8pj_e1i3umn2__0cd12c59.Avatar_styles_1kvh8pj_avatarExtraPlacementBottomLeft__0cd12c59{bottom:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));left:calc(-0.063rem * var(--plasma-avatar-extra-placement-factor,0));}
+.Avatar_styles_1kvh8pj_eqy70yy__0cd12c59{--plasma-badge-background:var(--plasma-avatar-extra-badge-background);--plasma-badge-color:var(--plasma-avatar-extra-badge-color);--plasma-badge-background-transparent:var(--plasma-avatar-extra-badge-background-transparent);--plasma-badge-color-transparent:var(--plasma-avatar-extra-badge-color-transparent);--plasma-badge-color-clear:var(--plasma-avatar-extra-badge-color-clear);--plasma-badge-background-clear:var(--plasma-avatar-extra-badge-background-clear);--plasma-badge-border-radius:var(--plasma-avatar-extra-badge-border-radius);--plasma-badge-pilled-border-radius:var(--plasma-avatar-extra-badge-pilled-border-radius);--plasma-badge-height:var(--plasma-avatar-extra-badge-height);--plasma-badge-padding:var(--plasma-avatar-extra-badge-padding);--plasma-badge-padding-icon-only:var(--plasma-avatar-extra-badge-padding-icon-only);--plasma-badge-font-family:var(--plasma-avatar-extra-badge-font-family);--plasma-badge-font-size:var(--plasma-avatar-extra-badge-font-size);--plasma-badge-font-style:var(--plasma-avatar-extra-badge-font-style);--plasma-badge-font-weight:var(--plasma-avatar-extra-badge-font-weight);--plasma-badge-letter-spacing:var(--plasma-avatar-extra-badge-letter-spacing);--plasma-badge-lineheight:var(--plasma-avatar-extra-badge-lineheight);--plasma-badge-left-content-margin-left:var(--plasma-avatar-extra-badge-left-content-margin-left);--plasma-badge-left-content-margin-right:var(--plasma-avatar-extra-badge-left-content-margin-right);--plasma-badge-right-content-margin-left:var(--plasma-avatar-extra-badge-right-content-margin-left);--plasma-badge-right-content-margin-right:var(--plasma-avatar-extra-badge-right-content-margin-right);}
+.Avatar_styles_1kvh8pj_e4nvvok__0cd12c59{--plasma-counter-background:var(--plasma-avatar-extra-counter-background);--plasma-counter-color:var(--plasma-avatar-extra-counter-color);--plasma-counter-border-radius:var(--plasma-avatar-extra-counter-border-radius);--plasma-counter-height:var(--plasma-avatar-extra-counter-height);--plasma-counter-padding:var(--plasma-avatar-extra-counter-padding);--plasma-counter-font-family:var(--plasma-avatar-extra-counter-font-family);--plasma-counter-font-size:var(--plasma-avatar-extra-counter-font-size);--plasma-counter-font-style:var(--plasma-avatar-extra-counter-font-style);--plasma-counter-font-weight:var(--plasma-avatar-extra-counter-font-weight);--plasma-counter-letter-spacing:var(--plasma-avatar-extra-counter-letter-spacing);--plasma-counter-lineheight:var(--plasma-avatar-extra-counter-lineheight);}
 
 .base_1vhlhpd_bf4ss7k__c5337153{width:var(--plasma-avatar-size);height:var(--plasma-avatar-size);}
 
 .base_a6i4i9_boftdhc__c8d1b637{position:relative;}.base_a6i4i9_boftdhc__c8d1b637:focus-visible{outline:none;}.base_a6i4i9_boftdhc__c8d1b637::before{content:'';position:absolute;top:var(--plasma-avatar-outline-offset);left:var(--plasma-avatar-outline-offset);right:var(--plasma-avatar-outline-offset);bottom:var(--plasma-avatar-outline-offset);z-index:1;display:block;box-sizing:content-box;border:var(--plasma-avatar-outline-size) solid transparent;border-radius:100%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_a6i4i9_boftdhc__c8d1b637.base_a6i4i9_focusVisible__c8d1b637:focus::before,.base_a6i4i9_boftdhc__c8d1b637[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma-avatar-outline-size) var(--plasma-avatar-outline-color);}
 
+.base_1qwucc7_be2qour__d1f6e07e .base_1qwucc7_igq6ihg__d1f6e07e{border-radius:var(--plasma-avatar-border-radius);}.base_1qwucc7_be2qour__d1f6e07e .base_1qwucc7_wxwn3we__d1f6e07e{border-radius:var(--plasma-avatar-border-radius);}.base_1qwucc7_be2qour__d1f6e07e .base_1qwucc7_sf2jhi1__d1f6e07e{top:var(--plasma-avatar-status-top);left:var(--plasma-avatar-status-left);}
+
 .Avatar_13f2qzh_sgw0czr__a18675b6{--plasma-indicator-size:var(--plasma-status-icon-size);--plasma-indicator-color:var(--sgw0czr-0);}
 
 .AvatarGroup_styles_rsmybl_bxtue4e__126d9711{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711{margin-left:calc(var(--plasma-avatar-size) * -0.2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * 1.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * 1.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:first-child{margin-left:0;}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:last-child{-webkit-mask-image:none;}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:hover,.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:focus-visible{position:relative;-webkit-mask:none;mask:none;cursor:pointer;}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:hover + .AvatarGroup_styles_rsmybl_avatarItem__126d9711,.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:focus-visible + .AvatarGroup_styles_rsmybl_avatarItem__126d9711{-webkit-mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * 1.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 ), radial-gradient( circle at calc(var(--plasma-avatar-size) * -0.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * 1.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 ), radial-gradient( circle at calc(var(--plasma-avatar-size) * -0.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );-webkit-mask-composite:intersect;mask-composite:intersect;}.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:hover + .AvatarGroup_styles_rsmybl_avatarItem__126d9711:last-child,.AvatarGroup_styles_rsmybl_bxtue4e__126d9711 .AvatarGroup_styles_rsmybl_avatarItem__126d9711:focus-visible + .AvatarGroup_styles_rsmybl_avatarItem__126d9711:last-child{-webkit-mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * -0.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );mask:radial-gradient( circle at calc(var(--plasma-avatar-size) * -0.3) center, #0000 calc(var(--plasma-avatar-size) * 0.58), #000 0 );}
@@ -860,17 +862,19 @@
 
 .base_54y6eh_b1x5zqph__a3c52690 .base_54y6eh_e1fh2i5t__a3c52690{padding-left:var(--plasma-editable-edit-button-padding-left);}.base_54y6eh_b1x5zqph__a3c52690 .base_54y6eh_editableTextBox__a3c52690{margin-right:var(--plasma-editable-text-box-margin-right);padding-right:var(--plasma-editable-text-box-padding-right);}
 
-.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_horizontal__17bf833c{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_vertical__17bf833c{row-gap:var(--plasma-attach-vertical-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_auto__17bf833c{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_withHelperText__17bf833c{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_suojwhg__17bf833c{font-family:var(--plasma-attach-cell-title-font-family);font-size:var(--plasma-attach-cell-title-font-size);font-style:var(--plasma-attach-cell-title-font-style);font-weight:var(--plasma-attach-cell-title-font-weight);-webkit-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-moz-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-ms-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);letter-spacing:var(--plasma-attach-cell-title-letter-spacing);line-height:var(--plasma-attach-cell-title-line-height);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_sssye98__17bf833c{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
+.base_kpo9at_b1pj1390__d0613261.base_kpo9at_horizontal__d0613261{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_kpo9at_b1pj1390__d0613261.base_kpo9at_vertical__d0613261{row-gap:var(--plasma-attach-vertical-gap);}.base_kpo9at_b1pj1390__d0613261.base_kpo9at_auto__d0613261{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_kpo9at_b1pj1390__d0613261.base_kpo9at_withHelperText__d0613261{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_kpo9at_b1pj1390__d0613261 .base_kpo9at_fssye98__d0613261{font-family:var(--plasma-attach-cell-title-font-family);font-size:var(--plasma-attach-cell-title-font-size);font-style:var(--plasma-attach-cell-title-font-style);font-weight:var(--plasma-attach-cell-title-font-weight);-webkit-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-moz-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-ms-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);letter-spacing:var(--plasma-attach-cell-title-letter-spacing);line-height:var(--plasma-attach-cell-title-line-height);height:var(--plasma-attach-filename-wrapper-height);}.base_kpo9at_b1pj1390__d0613261 .base_kpo9at_sjp429d__d0613261{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
 
 .base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_horizontal__83d45116{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_vertical__83d45116{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_auto__83d45116{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
 
-.base_1vgke1p_b1psfq3i__7fabfd50 .base_1vgke1p_sssye98__7fabfd50{color:var(--plasma-attach-helper-text-color);}
+.base_1tgnvl9_b1psfq3i__8ccb119d .base_1tgnvl9_sjp429d__8ccb119d{color:var(--plasma-attach-helper-text-color);}
+
+.Attach_styles_pso18d_by826kf__6f8aab6e{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.Attach_styles_pso18d_sw7vb9c__6f8aab6e{display:none;}
+.Attach_styles_pso18d_suojwhg__6f8aab6e{position:relative;}
+.Attach_styles_pso18d_sjp429d__6f8aab6e{position:absolute;margin-top:0.25rem;}
+.Attach_styles_pso18d_fssye98__6f8aab6e{display:inline-grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;}
+.Attach_styles_pso18d_t1531dv__6f8aab6e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
-.Attach_styles_1w3ga58_by826kf__eb7ab604{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.Attach_styles_1w3ga58_sw7vb9c__eb7ab604{display:none;}
-.Attach_styles_1w3ga58_suojwhg__eb7ab604{position:absolute;visibility:hidden;white-space:nowrap;}
-.Attach_styles_1w3ga58_sjp429d__eb7ab604{position:relative;}
-.Attach_styles_1w3ga58_sssye98__eb7ab604{position:absolute;margin-top:0.25rem;}
 
 .Cell_styles_69w962_si1k6gv__a96d6b9b{--plasma-cell-label-color:var(--plasma-attach-cell-label-color);--plasma-cell-title-color:var(--plasma-attach-cell-title-color);--plasma-cell-subtitle-color:var(--plasma-attach-cell-subtitle-color);--plasma-cell-background-color:var(--plasma-attach-cell-background-color);--plasma-cell-width:var(--plasma-attach-cell-width);--plasma-cell-padding:var(--plasma-attach-cell-padding);--plasma-cell-padding-left-content:var(--plasma-attach-cell-padding-left-content);--plasma-cell-padding-content:var(--plasma-attach-cell-padding-content);--plasma-cell-padding-right-content:var(--plasma-attach-cell-padding-right-content);--plasma-cell-textbox-gap:var(--plasma-attach-cell-textbox-gap);--plasma-cell-gap:var(--plasma-attach-cell-gap);--plasma-cell-label-font-family:var(--plasma-attach-cell-label-font-family);--plasma-cell-label-font-size:var(--plasma-attach-cell-label-font-size);--plasma-cell-label-font-style:var(--plasma-attach-cell-label-font-style);--plasma-cell-label-font-weight:var(--plasma-attach-cell-label-font-weight);--plasma-cell-label-letter-spacing:var(--plasma-attach-cell-label-letter-spacing);--plasma-cell-label-line-height:var(--plasma-attach-cell-label-line-height);--plasma-cell-title-font-family:var(--plasma-attach-cell-title-font-family);--plasma-cell-title-font-size:var(--plasma-attach-cell-title-font-size);--plasma-cell-title-font-style:var(--plasma-attach-cell-title-font-style);--plasma-cell-title-font-weight:var(--plasma-attach-cell-title-font-weight);--plasma-cell-title-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);--plasma-cell-title-line-height:var(--plasma-attach-cell-title-line-height);--plasma-cell-subtitle-font-family:var(--plasma-attach-cell-subtitle-font-family);--plasma-cell-subtitle-font-size:var(--plasma-attach-cell-subtitle-font-size);--plasma-cell-subtitle-font-style:var(--plasma-attach-cell-subtitle-font-style);--plasma-cell-subtitle-font-weight:var(--plasma-attach-cell-subtitle-font-weight);--plasma-cell-subtitle-letter-spacing:var(--plasma-attach-cell-subtitle-letter-spacing);--plasma-cell-subtitle-line-height:var(--plasma-attach-cell-subtitle-line-height);white-space:nowrap;}.Cell_styles_69w962_si1k6gv__a96d6b9b.Cell_styles_69w962_cellHidden__a96d6b9b{visibility:hidden;}
 

package/emotion/cjs/components/Attach/Attach.js

@@ -173,9 +173,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var attachRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, outerRef) {
-        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
+        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hideButtonOnAttach = props.hideButtonOnAttach, hideButtonOnAttach = _props_hideButtonOnAttach === void 0 ? false : _props_hideButtonOnAttach, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onClick = props.onClick, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
             "flow",
             "buttonType",
+            "hideButtonOnAttach",
             "hasAttachment",
             "acceptedFileFormats",
             "helperText",
@@ -189,66 +190,31 @@ var attachRoot = function(Root) {
             "id",
             "name",
             "customIcon",
+            "onClick",
             "onChange",
             "onClear"
         ]);
         var innerRef = (0, _react.useRef)(null);
         var ref = (0, _plasmacore.useForkRef)(outerRef, innerRef);
         var inputRef = (0, _react.useRef)(null);
-        var inputHelperRef = (0, _react.useRef)(null);
         var cellRef = (0, _react.useRef)(null);
         var buttonRef = (0, _react.useRef)(null);
-        var emptyTextCellWidth = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(''), 2), filename = _useState[0], setFilename = _useState[1];
-        var _useState1 = _sliced_to_array((0, _react.useState)(''), 2), truncatedFilename = _useState1[0], setTruncatedFilename = _useState1[1];
         var horizontalClass = flow === 'horizontal' ? _Attachtokens.classes.horizontal : undefined;
         var verticalClass = flow === 'vertical' ? _Attachtokens.classes.vertical : undefined;
         var withHelperTextClass = helperText ? _Attachtokens.classes.withHelperText : undefined;
         var autoClass = flow === 'auto' ? _Attachtokens.classes.auto : undefined;
-        var cellHiddenClass = truncatedFilename.length === 0 ? _Attachtokens.classes.cellHidden : undefined;
         var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
         var extension = (0, _utils1.extractExtension)(filename);
-        var cellContentLeft = customIcon || (0, _utils1.getFileicon)(extension, size);
-        (0, _react.useEffect)(function() {
-            var _cellRef_current;
-            emptyTextCellWidth.current = ((_cellRef_current = cellRef.current) === null || _cellRef_current === void 0 ? void 0 : _cellRef_current.offsetWidth) || 0;
-        }, []);
-        (0, _plasmacore.useIsomorphicLayoutEffect)(function() {
-            if (!cellRef.current || !cellRef.current.parentElement || !inputHelperRef.current || !inputHelperRef.current.textContent || !emptyTextCellWidth.current || !buttonRef.current) {
-                return;
-            }
-            var _inputHelperRef_current = inputHelperRef.current, textWidth = _inputHelperRef_current.offsetWidth;
-            var _buttonRef_current = buttonRef.current, buttonWidth = _buttonRef_current.offsetWidth;
-            var _cellRef_current_parentElement_getBoundingClientRect = cellRef.current.parentElement.getBoundingClientRect(), parentWidth = _cellRef_current_parentElement_getBoundingClientRect.width, parentLeft = _cellRef_current_parentElement_getBoundingClientRect.left;
-            var _cellRef_current_getBoundingClientRect = cellRef.current.getBoundingClientRect(), cellLeft = _cellRef_current_getBoundingClientRect.left;
-            var leftDiff = cellLeft - parentLeft;
-            var currentTextWidth = textWidth;
-            if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                setTruncatedFilename(filename);
-                return;
-            }
-            var currFilename = (0, _utils1.addSeparator)(filename, _utils1.separator);
-            for(var i = currFilename.indexOf(_utils1.separator) - 1; i > 0; i -= 1){
-                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
-                    break;
-                }
-                var left = currFilename.slice(0, i);
-                var right = currFilename.slice(i + 1);
-                var newFilename = "".concat(left).concat(right);
-                inputHelperRef.current.textContent = newFilename;
-                currentTextWidth = inputHelperRef.current.offsetWidth;
-                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                    break;
-                }
-                currFilename = newFilename;
-            }
-            inputHelperRef.current.textContent = filename;
-            setTruncatedFilename(currFilename);
-        });
-        var handleClick = function() {
+        var filenameWithoutExtension = filename.slice(0, -1 - ((extension === null || extension === void 0 ? void 0 : extension.length) || 0));
+        var cellContentLeft = customIcon || (0, _utils1.getFileIcon)(extension, size);
+        var handleClick = function(e) {
             if (!inputRef.current) {
                 return;
             }
+            if (onClick) {
+                onClick(e);
+            }
             inputRef.current.click();
         };
         var handleChange = function(e) {
@@ -269,7 +235,6 @@ var attachRoot = function(Root) {
             }
             inputRef.current.value = '';
             setFilename('');
-            setTruncatedFilename('');
         };
         return /*#__PURE__*/ _react.default.createElement(Root, {
             className: (0, _utils.cx)(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
@@ -285,20 +250,16 @@ var attachRoot = function(Root) {
             id: id,
             name: name,
             onChange: handleChange
-        }), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHiddenInputHelper, {
-            ref: inputHelperRef
-        }, filename), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
+        }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
             ref: buttonRef,
             buttonType: buttonType,
             isLoading: isLoading,
             disabled: disabled,
             onClick: handleClick
-        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), hasAttachment && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
+        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
             stretching: "fixed",
-            className: cellHiddenClass,
             ref: cellRef,
             size: size,
-            title: truncatedFilename,
             contentLeft: cellContentLeft,
             contentRight: /*#__PURE__*/ _react.default.createElement(_IconButtonstyles.StyledIconButtonCancel, {
                 onClick: handleClear
@@ -306,7 +267,7 @@ var attachRoot = function(Root) {
                 size: "xs",
                 color: "inherit"
             }))
-        }));
+        }, /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameWrapper, null, /*#__PURE__*/ _react.default.createElement(_Attachstyles.TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
     });
 };
 var attachConfig = {