@max-ts/components 0.1.0 → 0.2.0

package/lib/components/Select/useLogic/useLogic.d.ts

@@ -0,0 +1,10 @@
+import { SelectProps } from '../Select';
+export declare function useLogic<Value>({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isShowClearButton, }: SelectProps<Value>): {
+    isOpened: boolean;
+    isNoData: boolean;
+    isShowingClearButton: boolean;
+    resetButtonRef: import('react').RefObject<HTMLButtonElement | null>;
+    openSelect: () => void;
+    closeSelect: () => void;
+    onClearAll: () => void;
+};

package/lib/components/Select/useLogic/useLogic.mjs

@@ -0,0 +1,33 @@
+import { useState as d, useRef as y, Children as A } from "react";
+function m({
+  value: t,
+  onChange: n,
+  children: o,
+  open: s,
+  defaultOpen: r,
+  multiple: c,
+  isShowClearButton: l = !0
+}) {
+  const [i, e] = d(
+    r || s || !1
+  ), a = y(null), u = () => e(!0), f = () => e(!1), g = () => {
+    const S = {
+      target: {
+        value: c ? [] : ""
+      }
+    };
+    n?.call({}, S);
+  }, p = l && !(!t || Array.isArray(t) && t.length === 0 || typeof t == "string" && t.length === 0), h = !A.count(o);
+  return {
+    isOpened: i,
+    isNoData: h,
+    isShowingClearButton: p,
+    resetButtonRef: a,
+    openSelect: u,
+    closeSelect: f,
+    onClearAll: g
+  };
+}
+export {
+  m as useLogic
+};

package/lib/components/Skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs"),o=require("./styles.cjs"),l=e=>t.j.jsx(o.StyledSkeleton,{...e});exports.Skeleton=l;

package/lib/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,14 @@
+import { SkeletonProps as MuiSkeletonProps } from '@mui/material';
+import { ElementType } from 'react';
+import { WithoutEmotionSpecific } from '../types';
+export type SkeletonProps<TComponent extends ElementType, TComponentProps = object> = Omit<WithoutEmotionSpecific<MuiSkeletonProps<TComponent, TComponentProps>>, 'variant' | 'animation'> & {
+    /**
+     * Компонент, используемый для корневого узла. Либо строка для использования элемента HTML, либо компонент
+     */
+    component?: TComponent;
+    /**
+     * Тип контента, который будет отображаться
+     */
+    variant?: 'text' | 'rounded' | 'circular';
+};
+export declare const Skeleton: <TComponent extends ElementType = "span", TComponentProps = object>(props: SkeletonProps<TComponent, TComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Skeleton/Skeleton.mjs

@@ -0,0 +1,6 @@
+import { j as t } from "../../_virtual/jsx-runtime.mjs";
+import { StyledSkeleton as e } from "./styles.mjs";
+const s = (o) => /* @__PURE__ */ t.jsx(e, { ...o });
+export {
+  s as Skeleton
+};

package/lib/components/Skeleton/styles.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),l=e.styled(e.Skeleton)`
+  /* stylelint-disable-next-line */
+  background-color: ${({theme:t})=>e.alpha(t.palette.grey[900],.12)};
+
+  /* TODO: Заменить на значения из темы в рамках
+  https://track.astral.ru/soft/browse/UIKIT-1400 */
+  &.${e.skeletonClasses.text} {
+    border-radius: 4px;
+  }
+
+  &.${e.skeletonClasses.rounded} {
+    border-radius: 4px;
+  }
+`;exports.StyledSkeleton=l;

package/lib/components/Skeleton/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledSkeleton: import('@emotion/styled').StyledComponent<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "className" | "height" | "style" | "width" | "children" | "animation" | "classes" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/components/Skeleton/styles.mjs

@@ -0,0 +1,18 @@
+import { alpha as r, skeletonClasses as e, styled as o, Skeleton as l } from "@mui/material";
+const a = o(l)`
+  /* stylelint-disable-next-line */
+  background-color: ${({ theme: t }) => r(t.palette.grey[900], 0.12)};
+
+  /* TODO: Заменить на значения из темы в рамках
+  https://track.astral.ru/soft/browse/UIKIT-1400 */
+  &.${e.text} {
+    border-radius: 4px;
+  }
+
+  &.${e.rounded} {
+    border-radius: 4px;
+  }
+`;
+export {
+  a as StyledSkeleton
+};

package/lib/components/Switch/Switch.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs"),i=require("react"),u=require("./styles.cjs"),s=i.forwardRef((e,r)=>t.j.jsx(u.StyledSwitch,{ref:r,...e}));exports.Switch=s;

package/lib/components/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps as MuiSwitchProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps>;
+export declare const Switch: import('react').ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/lib/components/Switch/Switch.mjs

@@ -0,0 +1,9 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { forwardRef as m } from "react";
+import { StyledSwitch as i } from "./styles.mjs";
+const s = m(
+  (r, t) => /* @__PURE__ */ o.jsx(i, { ref: t, ...r })
+);
+export {
+  s as Switch
+};

package/lib/components/Switch/styles.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),s=e.styled(e.Switch)`
+  .Mui-focusVisible {
+    border: 2px solid ${({theme:t})=>t.palette.primary[400]};
+  }
+  ${`.${e.switchClasses.track}`}::before {
+    display: none;
+  }
+
+  ${`.${e.switchClasses.track}`}::after {
+    display: none;
+  }
+`;exports.StyledSwitch=s;

package/lib/components/Switch/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledSwitch: import('@emotion/styled').StyledComponent<import('@mui/material').SwitchProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/components/Switch/styles.mjs

@@ -0,0 +1,16 @@
+import { switchClasses as e, styled as i, Switch as r } from "@mui/material";
+const o = i(r)`
+  .Mui-focusVisible {
+    border: 2px solid ${({ theme: t }) => t.palette.primary[400]};
+  }
+  ${`.${e.track}`}::before {
+    display: none;
+  }
+
+  ${`.${e.track}`}::after {
+    display: none;
+  }
+`;
+export {
+  o as StyledSwitch
+};

package/lib/components/Tab/Tab.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.cjs"),r=require("./styles.cjs"),s=e=>t.j.jsx(r.StyledTab,{...e});exports.Tab=s;

package/lib/components/Tab/Tab.d.ts

@@ -0,0 +1,7 @@
+import { TabProps as MuiTabProps } from '@mui/material';
+import { ElementType } from 'react';
+import { WithoutEmotionSpecific } from '../types';
+export type TabProps<TComponent extends ElementType, TComponentProps = object> = WithoutEmotionSpecific<MuiTabProps<TComponent, TComponentProps>> & {
+    component?: TComponent;
+};
+export declare const Tab: <TComponent extends ElementType = "div", TComponentProps = object>(props: TabProps<TComponent, TComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Tab/Tab.mjs

@@ -0,0 +1,6 @@
+import { j as t } from "../../_virtual/jsx-runtime.mjs";
+import { StyledTab as r } from "./styles.mjs";
+const p = (o) => /* @__PURE__ */ t.jsx(r, { ...o });
+export {
+  p as Tab
+};

package/lib/components/Tab/styles.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@mui/material"),r=t.styled(t.Tab)`
+  min-height: 36px;
+  margin-right: ${({theme:e})=>e.spacing(4)};
+  padding: 0;
+
+  line-height: 20px;
+  color: ${({theme:e})=>e.palette.grey[900]};
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: ${({theme:e})=>e.palette.primary[800]};
+  }
+
+  &:active {
+    color: ${({theme:e})=>e.palette.primary[900]};
+  }
+`;exports.StyledTab=r;

package/lib/components/Tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledTab: import('@emotion/styled').StyledComponent<import('@mui/material').TabOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "className" | "style" | "tabIndex" | "children" | "classes" | "label" | "action" | "disabled" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/components/Tab/styles.mjs

@@ -0,0 +1,24 @@
+import { styled as r, Tab as e } from "@mui/material";
+const a = r(e)`
+  min-height: 36px;
+  margin-right: ${({ theme: t }) => t.spacing(4)};
+  padding: 0;
+
+  line-height: 20px;
+  color: ${({ theme: t }) => t.palette.grey[900]};
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: ${({ theme: t }) => t.palette.primary[800]};
+  }
+
+  &:active {
+    color: ${({ theme: t }) => t.palette.primary[900]};
+  }
+`;
+export {
+  a as StyledTab
+};

package/lib/components/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),s=require("@mui/material"),i=require("./styles.cjs"),j=({nextFeatureFlags:t,...r})=>t?.hasBottomDivider?e.j.jsxs(i.Container,{children:[e.j.jsx(s.Tabs,{...r}),e.j.jsx(i.Divider,{})]}):e.j.jsx(s.Tabs,{...r});exports.Tabs=j;

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { TabsProps as MuiTabsProps } from '@mui/material';
+import { WithoutEmotionSpecific } from '../types';
+export type TabsProps = WithoutEmotionSpecific<MuiTabsProps> & {
+    nextFeatureFlags?: {
+        /**
+         * @deprecated
+         * Флаг включения нижнего разделителя
+         * В мажорном релизе, флаг будет удален
+         */
+        hasBottomDivider: boolean;
+    };
+};
+export declare const Tabs: ({ nextFeatureFlags, ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Tabs/Tabs.mjs

@@ -0,0 +1,10 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { Tabs as o } from "@mui/material";
+import { Container as t, Divider as m } from "./styles.mjs";
+const j = ({ nextFeatureFlags: i, ...s }) => i?.hasBottomDivider ? /* @__PURE__ */ r.jsxs(t, { children: [
+  /* @__PURE__ */ r.jsx(o, { ...s }),
+  /* @__PURE__ */ r.jsx(m, {})
+] }) : /* @__PURE__ */ r.jsx(o, { ...s });
+export {
+  j as Tabs
+};

package/lib/components/Tabs/styles.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mui/material"),i=e.styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: 100%;
+`,o=e.styled("div")`
+  position: relative;
+  z-index: -1;
+  bottom: 2px;
+
+  width: 100%;
+  height: 2px;
+
+  background-color: ${t=>t.theme.palette.grey[200]};
+`;exports.Container=i;exports.Divider=o;

package/lib/components/Tabs/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Divider: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Tabs/styles.mjs

@@ -0,0 +1,21 @@
+import { styled as t } from "@mui/material";
+const o = t("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: 100%;
+`, r = t("div")`
+  position: relative;
+  z-index: -1;
+  bottom: 2px;
+
+  width: 100%;
+  height: 2px;
+
+  background-color: ${(e) => e.theme.palette.grey[200]};
+`;
+export {
+  o as Container,
+  r as Divider
+};

package/lib/components/Tag/Tag.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.cjs"),j=require("react"),d=require("lucide-react");require("@mui/material"),require("remeda"),require("clsx"),require("../Button/styles.cjs");const q=require("../../theme/hooks/useTheme/index.cjs"),r=require("./styles.cjs"),m=j.forwardRef(({color:o="grey",variant:t="contained",deleteIcon:s,size:l="small",label:a,startAddon:u,endAddon:i,...n},c)=>{q.useTheme();const g=e.j.jsxs(r.LabelContainer,{children:[u&&e.j.jsx(u,{color:r.getBadgeColor({variant:t,tagColor:o})}),a,i&&e.j.jsx(i,{color:r.getBadgeColor({variant:t,tagColor:o})})]});return e.j.jsx(r.StyledTag,{ref:c,customColor:o,customVariant:t,customSize:l,label:g,...n,deleteIcon:s||e.j.jsx(d.X,{})})});exports.Tag=m;

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,36 @@
+import { ChipProps as MuiTagProps } from '@mui/material';
+import { ReactElement } from 'react';
+import { BadgeColor } from '../Badge';
+import { WithoutEmotionSpecific } from '../types';
+import { TagColor, TagSize, TagVariant } from './types';
+export type TagAddonProps = {
+    color?: BadgeColor;
+};
+export type TagAddon = (props: TagAddonProps) => ReactElement | null;
+export type TagProps = Omit<WithoutEmotionSpecific<MuiTagProps>, 'color' | 'variant' | 'size'> & {
+    /**
+     * Цвет тега
+     */
+    color?: TagColor;
+    /**
+     * Тип тега
+     */
+    variant?: TagVariant;
+    /**
+     * Скругленная форма тега
+     */
+    rounded?: boolean;
+    /**
+     * Размер тега
+     */
+    size?: TagSize;
+    /**
+     * Контент слева от label
+     */
+    startAddon?: TagAddon;
+    /**
+     * Контент справа от label
+     */
+    endAddon?: TagAddon;
+};
+export declare const Tag: import('react').ForwardRefExoticComponent<Omit<TagProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/Tag/Tag.mjs

@@ -0,0 +1,59 @@
+import { j as o } from "../../_virtual/jsx-runtime.mjs";
+import { forwardRef as c } from "react";
+import { X as f } from "lucide-react";
+import "@mui/material";
+import "remeda";
+import "clsx";
+import "../Button/styles.mjs";
+import { useTheme as g } from "../../theme/hooks/useTheme/index.mjs";
+import { LabelContainer as j, getBadgeColor as i, StyledTag as u } from "./styles.mjs";
+const B = c(
+  ({
+    color: r = "grey",
+    variant: t = "contained",
+    deleteIcon: e,
+    size: l = "small",
+    label: a,
+    startAddon: m,
+    endAddon: s,
+    ...p
+  }, n) => {
+    g();
+    const x = /* @__PURE__ */ o.jsxs(j, { children: [
+      m && /* @__PURE__ */ o.jsx(
+        m,
+        {
+          color: i({
+            variant: t,
+            tagColor: r
+          })
+        }
+      ),
+      a,
+      s && /* @__PURE__ */ o.jsx(
+        s,
+        {
+          color: i({
+            variant: t,
+            tagColor: r
+          })
+        }
+      )
+    ] });
+    return /* @__PURE__ */ o.jsx(
+      u,
+      {
+        ref: n,
+        customColor: r,
+        customVariant: t,
+        customSize: l,
+        label: x,
+        ...p,
+        deleteIcon: e || /* @__PURE__ */ o.jsx(f, {})
+      }
+    );
+  }
+);
+export {
+  B as Tag
+};

package/lib/components/Tag/enums.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var r=(e=>(e.DEFAULT="default",e.PRIMARY="primary",e.ERROR="error",e.GREY="grey",e.SUCCESS="success",e.WARNING="warning",e))(r||{}),t=(e=>(e.CONTAINED="contained",e.LIGHT="light",e.TEXT="text",e))(t||{}),u=(e=>(e.DEFAULT="default",e.HOVER="hover",e.ACTIVE="active",e))(u||{});exports.TagColors=r;exports.TagStates=u;exports.TagVariants=t;

package/lib/components/Tag/enums.mjs

@@ -0,0 +1,6 @@
+var r = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PRIMARY = "primary", e.ERROR = "error", e.GREY = "grey", e.SUCCESS = "success", e.WARNING = "warning", e))(r || {}), E = /* @__PURE__ */ ((e) => (e.CONTAINED = "contained", e.LIGHT = "light", e.TEXT = "text", e))(E || {}), R = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.HOVER = "hover", e.ACTIVE = "active", e))(R || {});
+export {
+  r as TagColors,
+  R as TagStates,
+  E as TagVariants
+};

package/lib/components/Tag/styles.cjs

@@ -0,0 +1,79 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@mui/material"),s=require("../Container/Container.cjs"),a=require("./enums.cjs"),d={small:"20px",medium:"24px",large:"32px"},u=e=>{const{tagColor:r,variant:t}=e;return t===a.TagVariants.CONTAINED?"white":{[a.TagColors.PRIMARY]:"primary",[a.TagColors.ERROR]:"error",[a.TagColors.GREY]:"grey",[a.TagColors.SUCCESS]:"success",[a.TagColors.WARNING]:"warning",[a.TagColors.DEFAULT]:"grey"}[r||"default"]},y=({theme:e,rounded:r})=>r?"100px":e.shape.small,f=({theme:e,rounded:r})=>r?"100px":`0  ${e.shape.small}  ${e.shape.small} 0`,g=({theme:e,customColor:r,customVariant:t,disabled:n})=>{if(n)return e.palette.grey[100];if(t==="text")return"transparent";const l={contained:{primary:e.palette.primary.main,error:e.palette.red[800],success:e.palette.green[800],warning:e.palette.yellow[800],grey:e.palette.grey[300],default:e.palette.background.element},light:{primary:e.palette.primary[100],error:e.palette.red[100],success:e.palette.green[100],warning:e.palette.yellow[100],grey:e.palette.grey[100],default:e.palette.background.element}};return t&&r?l[t][r]:!t&&r?l.contained[r]:e.palette.grey[300]},o=({theme:e,customColor:r,customVariant:t,disabled:n})=>{if(n)return e.palette.text.disabled;if(t==="text")return e.palette.grey[900];const l={contained:{primary:e.palette.primary.contrastText,error:e.palette.error.contrastText,success:e.palette.warning.contrastText,warning:e.palette.success.contrastText,default:e.palette.text.primary,grey:e.palette.grey[900]},light:{primary:e.palette.primary.main,error:e.palette.red[800],success:e.palette.green[800],warning:e.palette.yellow[800],default:e.palette.text.primary,grey:e.palette.grey[900]}};return!t&&!r?e.palette.grey[900]:!t&&r!=="grey"?e.palette.common.white:r?t&&r?l[t][r]:e.palette.text.primary:l.contained.default},x=({theme:e,rounded:r,customSize:t})=>{if(r)return e.spacing(0,2);switch(t){case"small":return e.spacing(0,1);case"medium":case"large":return e.spacing(0,2)}},p=({theme:e,iconState:r,customVariant:t,customColor:n})=>{const l={contained:{primary:e.palette.primary[600],error:e.palette.red[600],success:e.palette.green[600],warning:e.palette.yellow[600],grey:e.palette.grey[100],default:e.palette.grey[300]},light:{primary:e.palette.primary[300],error:e.palette.red[300],success:e.palette.green[300],warning:e.palette.yellow[300],grey:e.palette.grey[300],default:e.palette.grey[300]}};if(r!=="default"){if((t==="contained"||t==="light")&&n)return l[t][n||"default"];if(t==="text")return l.light.grey}return"transparent"},i=({customVariant:e,customColor:r,theme:t})=>e==="contained"&&r!=="grey"&&r!=="default"?t.palette.common.white:t.palette.grey[900],T=c.styled(c.Chip,{shouldForwardProp:e=>e!=="customColor"&&e!=="customVariant"&&e!=="rounded"&&e!=="customSize"})`
+  user-select: none;
+
+  height: ${({customSize:e})=>d[e]};
+
+  font-size: 14px;
+
+  background-color: ${g};
+  border-radius: ${y};
+
+  &:hover {
+    color: ${o};
+
+    background-color: ${g};
+  }
+
+  &:active {
+    color: ${o};
+
+    background-color: ${g};
+  }
+
+  .MuiChip-label {
+    padding: ${x};
+
+    color: ${o};
+
+    &:hover {
+      color: ${o};
+    }
+
+    &:active {
+      color: ${o};
+    }
+  }
+
+  .MuiChip-deleteIcon {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    color: ${i};
+
+    background: ${e=>p({...e,iconState:a.TagStates.DEFAULT})};
+    border-radius: ${f};
+
+    &:hover {
+      color: ${i};
+
+      background: ${e=>p({...e,iconState:a.TagStates.HOVER})};
+    }
+
+    &:active {
+      color: ${i};
+
+      background: ${e=>p({...e,iconState:a.TagStates.ACTIVE})};
+    }
+  }
+
+  &.Mui-disabled {
+    opacity: 1;
+  }
+
+  .MuiChip-avatar {
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+
+    color: ${o};
+  }
+
+  .MuiChip-icon {
+    width: 16px;
+    height: 16px;
+  }
+`,C=c.styled(s.Container)`
+  align-items: center;
+  justify-content: flex-start;
+`;exports.LabelContainer=C;exports.StyledTag=T;exports.getBadgeColor=u;exports.getDeleteIconColor=i;

package/lib/components/Tag/styles.d.ts

@@ -0,0 +1,26 @@
+import { ChipProps } from '@mui/material';
+import { Theme } from '../../theme';
+import { BadgeColor } from '../Badge';
+import { TagColor, TagSize, TagVariant } from './types';
+type StyledTagProps = {
+    customColor?: TagColor;
+    customVariant?: TagVariant;
+    rounded?: boolean;
+    customSize: TagSize;
+};
+type StyledTagThemeProps = StyledTagProps & {
+    theme: Theme;
+} & Pick<ChipProps, 'onDelete' | 'disabled'>;
+export declare const getBadgeColor: (args: {
+    tagColor?: TagColor;
+    variant?: TagVariant;
+    theme: Theme;
+}) => BadgeColor;
+export declare const getDeleteIconColor: ({ customVariant, customColor, theme, }: StyledTagThemeProps) => string;
+export declare const StyledTag: import('@emotion/styled').StyledComponent<import('@mui/material').ChipOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "className" | "color" | "style" | "tabIndex" | "children" | "size" | "classes" | "label" | "disabled" | "variant" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & StyledTagProps, {}, {}>;
+export declare const LabelContainer: import('@emotion/styled').StyledComponent<import('../Container/styles').ContainerRootProps & {
+    style?: import('react').CSSProperties;
+    id?: string;
+    ref?: React.Ref<HTMLDivElement>;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export {};