@activecollab/components 2.0.498 → 2.0.500

package/dist/esm/components/Chip/Chip.js

@@ -1,15 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["startAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "typographyProps"];
+const _excluded = ["startAdornment", "label", "onClose", "size", "shape", "tone", "tint", "uppercase", "closeMode", "color", "backgroundColor", "closeClassName", "typographyProps"];
 import React, { useMemo } from "react";
 import { ChipCloseIcon, ChipContainer, ChipTrigger } from "./Styles";
 import { Typography } from "../Typography/Typography";
 export const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var _ref2;
   let startAdornment = _ref.startAdornment,
     label = _ref.label,
     onClose = _ref.onClose,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "regular" : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "rounded" : _ref$shape,
+    tone = _ref.tone,
+    tint = _ref.tint,
+    _ref$uppercase = _ref.uppercase,
+    uppercase = _ref$uppercase === void 0 ? false : _ref$uppercase,
+    _ref$closeMode = _ref.closeMode,
+    closeMode = _ref$closeMode === void 0 ? "inline" : _ref$closeMode,
     color = _ref.color,
     backgroundColor = _ref.backgroundColor,
     closeClassName = _ref.closeClassName,
@@ -26,23 +35,29 @@ export const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         return "Caption 1";
     }
   }, [size]);
-  return /*#__PURE__*/React.createElement(ChipContainer, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(ChipContainer, _extends({
+    "data-testid": "chip-container"
+  }, rest, {
     ref: ref,
     size: size,
-    showClose: showClose,
+    showClose: showClose && closeMode === "inline",
     color: color,
     backgroundColor: backgroundColor,
-    "data-testid": "chip-container"
+    $shape: shape,
+    $tone: tone,
+    $tint: tint,
+    $closeMode: closeMode
   }), startAdornment, /*#__PURE__*/React.createElement(Typography, _extends({
     variant: variant,
     "data-testid": "chip-typography",
-    weight: size === "biggest" ? "medium" : "regular"
+    weight: size === "biggest" ? "medium" : "regular",
+    transform: uppercase ? "uppercase" : undefined
   }, typographyProps), label), showClose ? /*#__PURE__*/React.createElement(ChipTrigger, {
     size: size,
     onClick: onClose,
     className: closeClassName
   }, /*#__PURE__*/React.createElement(ChipCloseIcon, {
-    fill: color ? color : "currentColor"
+    fill: (_ref2 = tint != null ? tint : color) != null ? _ref2 : "currentColor"
   })) : null);
 });
 Chip.displayName = "Chip";

package/dist/esm/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["React","useMemo","ChipCloseIcon","ChipContainer","ChipTrigger","Typography","Chip","forwardRef","_ref","ref","startAdornment","label","onClose","_ref$size","size","color","backgroundColor","closeClassName","typographyProps","rest","_objectWithoutPropertiesLoose","_excluded","showClose","variant","createElement","_extends","weight","onClick","className","fill","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography, ITypographyProps } from \"../Typography/Typography\";\n\nexport interface ChipProps {\n  label: string;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  startAdornment?: ReactNode;\n  size?: InputSize;\n  color?: string;\n  backgroundColor?: string;\n  closeClassName?: string;\n  typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n  HTMLDivElement,\n  ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n  (\n    {\n      startAdornment,\n      label,\n      onClose,\n      size = \"regular\",\n      color,\n      backgroundColor,\n      closeClassName,\n      typographyProps,\n      ...rest\n    },\n    ref\n  ) => {\n    const showClose = typeof onClose === \"function\";\n    const variant = useMemo(() => {\n      switch (size) {\n        case \"big\":\n          return \"Body 1\";\n        case \"biggest\":\n          return \"Body 1\";\n        default:\n          return \"Caption 1\";\n      }\n    }, [size]);\n\n    return (\n      <ChipContainer\n        {...rest}\n        ref={ref}\n        size={size}\n        showClose={showClose}\n        color={color}\n        backgroundColor={backgroundColor}\n        data-testid=\"chip-container\"\n      >\n        {startAdornment}\n        <Typography\n          variant={variant}\n          data-testid=\"chip-typography\"\n          weight={size === \"biggest\" ? \"medium\" : \"regular\"}\n          {...typographyProps}\n        >\n          {label}\n        </Typography>\n        {showClose ? (\n          <ChipTrigger size={size} onClick={onClose} className={closeClassName}>\n            <ChipCloseIcon fill={color ? color : \"currentColor\"} />\n          </ChipTrigger>\n        ) : null}\n      </ChipContainer>\n    );\n  }\n);\n\nChip.displayName = \"Chip\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAeC,OAAO,QAAQ,OAAO;AAEjD,SAASC,aAAa,EAAEC,aAAa,EAAEC,WAAW,QAAQ,UAAU;AAEpE,SAASC,UAAU,QAA0B,0BAA0B;AAavE,OAAO,MAAMC,IAAI,gBAAGN,KAAK,CAACO,UAAU,CAIlC,CAAAC,IAAA,EAYEC,GAAG,KACA;EAAA,IAXDC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IACdC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,SAAA,GAAAL,IAAA,CACPM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,SAAS,GAAAA,SAAA;IAChBE,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,eAAe,GAAAR,IAAA,CAAfQ,eAAe;IACfC,cAAc,GAAAT,IAAA,CAAdS,cAAc;IACdC,eAAe,GAAAV,IAAA,CAAfU,eAAe;IACZC,IAAI,GAAAC,6BAAA,CAAAZ,IAAA,EAAAa,SAAA;EAIT,MAAMC,SAAS,GAAG,OAAOV,OAAO,KAAK,UAAU;EAC/C,MAAMW,OAAO,GAAGtB,OAAO,CAAC,MAAM;IAC5B,QAAQa,IAAI;MACV,KAAK,KAAK;QACR,OAAO,QAAQ;MACjB,KAAK,SAAS;QACZ,OAAO,QAAQ;MACjB;QACE,OAAO,WAAW;IACtB;EACF,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACEd,KAAA,CAAAwB,aAAA,CAACrB,aAAa,EAAAsB,QAAA,KACRN,IAAI;IACRV,GAAG,EAAEA,GAAI;IACTK,IAAI,EAAEA,IAAK;IACXQ,SAAS,EAAEA,SAAU;IACrBP,KAAK,EAAEA,KAAM;IACbC,eAAe,EAAEA,eAAgB;IACjC,eAAY;EAAgB,IAE3BN,cAAc,eACfV,KAAA,CAAAwB,aAAA,CAACnB,UAAU,EAAAoB,QAAA;IACTF,OAAO,EAAEA,OAAQ;IACjB,eAAY,iBAAiB;IAC7BG,MAAM,EAAEZ,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG;EAAU,GAC9CI,eAAe,GAElBP,KACS,CAAC,EACZW,SAAS,gBACRtB,KAAA,CAAAwB,aAAA,CAACpB,WAAW;IAACU,IAAI,EAAEA,IAAK;IAACa,OAAO,EAAEf,OAAQ;IAACgB,SAAS,EAAEX;EAAe,gBACnEjB,KAAA,CAAAwB,aAAA,CAACtB,aAAa;IAAC2B,IAAI,EAAEd,KAAK,GAAGA,KAAK,GAAG;EAAe,CAAE,CAC3C,CAAC,GACZ,IACS,CAAC;AAEpB,CACF,CAAC;AAEDT,IAAI,CAACwB,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"file":"Chip.js","names":["React","useMemo","ChipCloseIcon","ChipContainer","ChipTrigger","Typography","Chip","forwardRef","_ref","ref","_ref2","startAdornment","label","onClose","_ref$size","size","_ref$shape","shape","tone","tint","_ref$uppercase","uppercase","_ref$closeMode","closeMode","color","backgroundColor","closeClassName","typographyProps","rest","_objectWithoutPropertiesLoose","_excluded","showClose","variant","createElement","_extends","$shape","$tone","$tint","$closeMode","weight","transform","undefined","onClick","className","fill","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\n\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography, ITypographyProps } from \"../Typography/Typography\";\n\nexport type ChipSize = InputSize | \"tiny\" | \"compact\";\nexport type ChipShape = \"rounded\" | \"soft\" | \"pill\";\nexport type ChipTone =\n  | \"neutral\"\n  | \"muted\"\n  | \"info\"\n  | \"primary\"\n  | \"bordered\"\n  | \"warning\"\n  | \"alert\"\n  | \"success\";\n\nexport interface ChipProps {\n  label: string;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  startAdornment?: ReactNode;\n  size?: ChipSize;\n  /** Corner shape: 4px, 6px or a full pill. */\n  shape?: ChipShape;\n  /** A semantic surface and text color from the theme. */\n  tone?: ChipTone;\n  /** A data color: the text takes it and the background is its 13% tint. */\n  tint?: string;\n  uppercase?: boolean;\n  /** \"overlay\" draws the close button over the end of the label, on hover and focus. */\n  closeMode?: \"inline\" | \"overlay\";\n  color?: string;\n  backgroundColor?: string;\n  closeClassName?: string;\n  typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n  HTMLDivElement,\n  ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n  (\n    {\n      startAdornment,\n      label,\n      onClose,\n      size = \"regular\",\n      shape = \"rounded\",\n      tone,\n      tint,\n      uppercase = false,\n      closeMode = \"inline\",\n      color,\n      backgroundColor,\n      closeClassName,\n      typographyProps,\n      ...rest\n    },\n    ref\n  ) => {\n    const showClose = typeof onClose === \"function\";\n    const variant = useMemo(() => {\n      switch (size) {\n        case \"big\":\n          return \"Body 1\";\n        case \"biggest\":\n          return \"Body 1\";\n        default:\n          return \"Caption 1\";\n      }\n    }, [size]);\n\n    return (\n      <ChipContainer\n        data-testid=\"chip-container\"\n        {...rest}\n        ref={ref}\n        size={size}\n        showClose={showClose && closeMode === \"inline\"}\n        color={color}\n        backgroundColor={backgroundColor}\n        $shape={shape}\n        $tone={tone}\n        $tint={tint}\n        $closeMode={closeMode}\n      >\n        {startAdornment}\n        <Typography\n          variant={variant}\n          data-testid=\"chip-typography\"\n          weight={size === \"biggest\" ? \"medium\" : \"regular\"}\n          transform={uppercase ? \"uppercase\" : undefined}\n          {...typographyProps}\n        >\n          {label}\n        </Typography>\n        {showClose ? (\n          <ChipTrigger size={size} onClick={onClose} className={closeClassName}>\n            <ChipCloseIcon fill={tint ?? color ?? \"currentColor\"} />\n          </ChipTrigger>\n        ) : null}\n      </ChipContainer>\n    );\n  }\n);\n\nChip.displayName = \"Chip\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAeC,OAAO,QAAQ,OAAO;AAEjD,SAASC,aAAa,EAAEC,aAAa,EAAEC,WAAW,QAAQ,UAAU;AAEpE,SAASC,UAAU,QAA0B,0BAA0B;AAkCvE,OAAO,MAAMC,IAAI,gBAAGN,KAAK,CAACO,UAAU,CAIlC,CAAAC,IAAA,EAiBEC,GAAG,KACA;EAAA,IAAAC,KAAA;EAAA,IAhBDC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAAC,SAAA,GAAAN,IAAA,CACPO,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,SAAS,GAAAA,SAAA;IAAAE,UAAA,GAAAR,IAAA,CAChBS,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,IAAI,GAAAV,IAAA,CAAJU,IAAI;IACJC,IAAI,GAAAX,IAAA,CAAJW,IAAI;IAAAC,cAAA,GAAAZ,IAAA,CACJa,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,cAAA,GAAAd,IAAA,CACjBe,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,QAAQ,GAAAA,cAAA;IACpBE,KAAK,GAAAhB,IAAA,CAALgB,KAAK;IACLC,eAAe,GAAAjB,IAAA,CAAfiB,eAAe;IACfC,cAAc,GAAAlB,IAAA,CAAdkB,cAAc;IACdC,eAAe,GAAAnB,IAAA,CAAfmB,eAAe;IACZC,IAAI,GAAAC,6BAAA,CAAArB,IAAA,EAAAsB,SAAA;EAIT,MAAMC,SAAS,GAAG,OAAOlB,OAAO,KAAK,UAAU;EAC/C,MAAMmB,OAAO,GAAG/B,OAAO,CAAC,MAAM;IAC5B,QAAQc,IAAI;MACV,KAAK,KAAK;QACR,OAAO,QAAQ;MACjB,KAAK,SAAS;QACZ,OAAO,QAAQ;MACjB;QACE,OAAO,WAAW;IACtB;EACF,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACEf,KAAA,CAAAiC,aAAA,CAAC9B,aAAa,EAAA+B,QAAA;IACZ,eAAY;EAAgB,GACxBN,IAAI;IACRnB,GAAG,EAAEA,GAAI;IACTM,IAAI,EAAEA,IAAK;IACXgB,SAAS,EAAEA,SAAS,IAAIR,SAAS,KAAK,QAAS;IAC/CC,KAAK,EAAEA,KAAM;IACbC,eAAe,EAAEA,eAAgB;IACjCU,MAAM,EAAElB,KAAM;IACdmB,KAAK,EAAElB,IAAK;IACZmB,KAAK,EAAElB,IAAK;IACZmB,UAAU,EAAEf;EAAU,IAErBZ,cAAc,eACfX,KAAA,CAAAiC,aAAA,CAAC5B,UAAU,EAAA6B,QAAA;IACTF,OAAO,EAAEA,OAAQ;IACjB,eAAY,iBAAiB;IAC7BO,MAAM,EAAExB,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAU;IAClDyB,SAAS,EAAEnB,SAAS,GAAG,WAAW,GAAGoB;EAAU,GAC3Cd,eAAe,GAElBf,KACS,CAAC,EACZmB,SAAS,gBACR/B,KAAA,CAAAiC,aAAA,CAAC7B,WAAW;IAACW,IAAI,EAAEA,IAAK;IAAC2B,OAAO,EAAE7B,OAAQ;IAAC8B,SAAS,EAAEjB;EAAe,gBACnE1B,KAAA,CAAAiC,aAAA,CAAC/B,aAAa;IAAC0C,IAAI,GAAAlC,KAAA,GAAES,IAAI,WAAJA,IAAI,GAAIK,KAAK,YAAAd,KAAA,GAAI;EAAe,CAAE,CAC5C,CAAC,GACZ,IACS,CAAC;AAEpB,CACF,CAAC;AAEDJ,IAAI,CAACuC,WAAW,GAAG,MAAM","ignoreList":[]}

package/dist/esm/components/Chip/ChipGroup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ChipGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** The chips touch, 1px apart, and the group rounds the outer corners. */
+    joined?: boolean;
+}
+export declare const ChipGroup: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ChipGroup.d.ts.map

package/dist/esm/components/Chip/ChipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC3E,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,uFAWrB,CAAC"}

package/dist/esm/components/Chip/ChipGroup.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["joined", "children"];
+import React from "react";
+import { StyledChipGroup } from "./ChipGroupStyles";
+export const ChipGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let _ref$joined = _ref.joined,
+    joined = _ref$joined === void 0 ? false : _ref$joined,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledChipGroup, _extends({
+    "data-testid": "chip-group"
+  }, rest, {
+    ref: ref,
+    $joined: joined
+  }), children);
+});
+ChipGroup.displayName = "ChipGroup";
+//# sourceMappingURL=ChipGroup.js.map

package/dist/esm/components/Chip/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","names":["React","StyledChipGroup","ChipGroup","forwardRef","_ref","ref","_ref$joined","joined","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$joined","displayName"],"sources":["../../../../src/components/Chip/ChipGroup.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { StyledChipGroup } from \"./ChipGroupStyles\";\n\nexport interface ChipGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /** The chips touch, 1px apart, and the group rounds the outer corners. */\n  joined?: boolean;\n}\n\nexport const ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(\n  ({ joined = false, children, ...rest }, ref) => (\n    <StyledChipGroup\n      data-testid=\"chip-group\"\n      {...rest}\n      ref={ref}\n      $joined={joined}\n    >\n      {children}\n    </StyledChipGroup>\n  )\n);\n\nChipGroup.displayName = \"ChipGroup\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,mBAAmB;AAOnD,OAAO,MAAMC,SAAS,gBAAGF,KAAK,CAACG,UAAU,CACvC,CAAAC,IAAA,EAAwCC,GAAG;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAAxCG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAEE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBAClCX,KAAA,CAAAY,aAAA,CAACX,eAAe,EAAAY,QAAA;IACd,eAAY;EAAY,GACpBJ,IAAI;IACRJ,GAAG,EAAEA,GAAI;IACTS,OAAO,EAAEP;EAAO,IAEfC,QACc,CAAC;AAAA,CAEtB,CAAC;AAEDN,SAAS,CAACa,WAAW,GAAG,WAAW","ignoreList":[]}

package/dist/esm/components/Chip/ChipGroupStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledChipGroup: import("styled-components").StyledComponent<"div", any, {
+    $joined: boolean;
+}, never>;
+//# sourceMappingURL=ChipGroupStyles.d.ts.map

package/dist/esm/components/Chip/ChipGroupStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroupStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/ChipGroupStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;aAAyB,OAAO;SAwB3D,CAAC"}

package/dist/esm/components/Chip/ChipGroupStyles.js

@@ -0,0 +1,8 @@
+import styled, { css } from "styled-components";
+import { ChipContainer } from "./Styles";
+export const StyledChipGroup = styled.div.withConfig({
+  displayName: "ChipGroupStyles__StyledChipGroup",
+  componentId: "sc-1wgqzaj-0"
+})(["display:flex;align-items:center;min-width:0;", ""], props => props.$joined ? css(["gap:1px;overflow:hidden;border-radius:9999px;", "{min-width:0;max-width:none;border-radius:0;padding-left:0.5rem;padding-right:0.5rem;}"], ChipContainer) : css(["flex-wrap:wrap;gap:0.375rem;"]));
+StyledChipGroup.displayName = "StyledChipGroup";
+//# sourceMappingURL=ChipGroupStyles.js.map

package/dist/esm/components/Chip/ChipGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroupStyles.js","names":["styled","css","ChipContainer","StyledChipGroup","div","withConfig","displayName","componentId","props","$joined"],"sources":["../../../../src/components/Chip/ChipGroupStyles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ChipContainer } from \"./Styles\";\n\nexport const StyledChipGroup = styled.div<{ $joined: boolean }>`\n  display: flex;\n  align-items: center;\n  min-width: 0;\n\n  ${(props) =>\n    props.$joined\n      ? css`\n          gap: 1px;\n          overflow: hidden;\n          border-radius: 9999px;\n\n          ${ChipContainer} {\n            min-width: 0;\n            max-width: none;\n            border-radius: 0;\n            padding-left: 0.5rem;\n            padding-right: 0.5rem;\n          }\n        `\n      : css`\n          flex-wrap: wrap;\n          gap: 0.375rem;\n        `}\n`;\n\nStyledChipGroup.displayName = \"StyledChipGroup\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,aAAa,QAAQ,UAAU;AAExC,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAKpCC,KAAK,IACNA,KAAK,CAACC,OAAO,GACTR,GAAG,8IAKCC,aAAa,IAQjBD,GAAG,kCAGF,CACR;AAEDE,eAAe,CAACG,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/dist/esm/components/Chip/Styles.d.ts

@@ -1,10 +1,16 @@
 import type { ChipProps } from "./Chip";
-export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, Partial<ChipProps> & {
+export declare const ChipTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, any, Pick<ChipProps, "size">, never>;
+interface ChipLook {
     showClose: boolean;
-}, never>;
+    $shape?: ChipProps["shape"];
+    $tone?: ChipProps["tone"];
+    $tint?: string;
+    $closeMode?: ChipProps["closeMode"];
+}
+export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, Partial<ChipProps> & ChipLook, never>;
 export declare const ChipLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ChipTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, any, Pick<ChipProps, "size">, never>;
 export declare const ChipCloseIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement> & {
     gradient?: string;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export {};
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Chip/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAQxC,eAAO,MAAM,aAAa;eAAgD,OAAO;SAsEhF,CAAC;AAIF,eAAO,MAAM,SAAS,qEAKrB,CAAC;AAIF,eAAO,MAAM,WAAW,4SAqCvB,CAAC;AAIF,eAAO,MAAM,aAAa;;0EAEzB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAOxC,eAAO,MAAM,WAAW,4SAmDvB,CAAC;AA2CF,UAAU,QAAQ;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACrC;AAGD,eAAO,MAAM,aAAa,+FA6IzB,CAAC;AAIF,eAAO,MAAM,SAAS,qEAKrB,CAAC;AAIF,eAAO,MAAM,aAAa;;0EAEzB,CAAC"}

package/dist/esm/components/Chip/Styles.js

@@ -4,29 +4,52 @@ import { FontStyle } from "../FontStyle";
 import { CloseSmallIcon } from "../Icons";
 import { Trigger } from "../Trigger";
 import { StyledTypography } from "../Typography/Styles";
-
+export const ChipTrigger = styled(Trigger).withConfig({
+  displayName: "Styles__ChipTrigger",
+  componentId: "sc-7s0bd1-0"
+})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", " ", " ", " ", ""], props => props.size === "regular" && css(["height:24px;width:24px;"]), props => props.size === "small" && css(["height:18px;width:18px;"]), props => props.size === "tiny" && css(["height:16.5px;width:16.5px;"]), props => props.size === "compact" && css(["height:20px;width:20px;"]), props => props.size === "big" && css(["height:30px;width:30px;"]), props => props.size === "biggest" && css(["height:40px;width:40px;"]));
+ChipTrigger.displayName = "ChipTrigger";
+const RADIUS = {
+  rounded: "0.25rem",
+  soft: "0.375rem",
+  pill: "9999px"
+};
+const TONES = {
+  neutral: css(["background-color:var(--pill-background);color:var(--color-theme-700);"]),
+  muted: css(["background-color:var(--color-theme-200);color:var(--color-theme-700);"]),
+  info: css(["background-color:#a0cbfd1a;border:1px solid #a0cbfd;color:#568ccb;"]),
+  primary: css(["background-color:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);"]),
+  bordered: css(["background-color:var(--color-theme-200);border:1px solid var(--border-primary);color:var(--color-theme-900);"]),
+  warning: css(["background-color:var(--note-bg);color:var(--warning-text);"]),
+  alert: css(["background-color:var(--alert-surface-subtle);color:var(--red-alert);"]),
+  success: css(["background-color:var(--success-surface);color:var(--color-sucess-green);"])
+};
 // prettier-ignore
 export const ChipContainer = styled.div.withConfig({
   displayName: "Styles__ChipContainer",
-  componentId: "sc-7s0bd1-0"
-})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, StyledTypography, _ref => {
-  let color = _ref.color;
-  return color && css(["", "{color:", ";}"], StyledTypography, color);
+  componentId: "sc-7s0bd1-1"
+})(["align-items:center;border-radius:", ";display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => {
+  var _props$$shape;
+  return RADIUS[(_props$$shape = props.$shape) != null ? _props$$shape : "rounded"];
+}, FontStyle, BoxSizingStyle, StyledTypography, props => props.$tone && TONES[props.$tone], props => props.$tone && css(["", "{color:inherit;}svg{fill:currentColor;}"], StyledTypography), _ref => {
+  let $tint = _ref.$tint;
+  return $tint && css(["background-color:color-mix(in srgb,", " 13%,transparent);", "{color:", ";}"], $tint, StyledTypography, $tint);
 }, _ref2 => {
-  let backgroundColor = _ref2.backgroundColor;
+  let color = _ref2.color;
+  return color && css(["", "{color:", ";}"], StyledTypography, color);
+}, _ref3 => {
+  let backgroundColor = _ref3.backgroundColor;
   return backgroundColor && css(["background-color:", ";"], backgroundColor);
-}, props => props.showClose ? null : css(["padding-right:0.375rem;"]), props => props.size === "regular" && css(["height:24px;"]), props => props.size === "small" && css(["height:18px;"]), props => props.size === "big" && css(["height:30px;"]), props => props.size === "biggest" && css(["height:40px;"]));
+}, props => props.showClose ? null : css(["padding-right:0.375rem;"]), props => props.size === "regular" && css(["height:24px;"]), props => props.size === "small" && css(["height:18px;"]), props => props.size === "compact" && css(["height:20px;padding-left:0.5rem;", ""], props.showClose ? "" : "padding-right: 0.5rem;"), props => props.size === "tiny" && css(["height:16.5px;padding-left:0.25rem;", ""], props.showClose ? "" : "padding-right: 0.25rem;"), props => {
+  var _props$backgroundColo, _props$backgroundColo2;
+  return props.$closeMode === "overlay" && css(["position:relative;padding-right:0.375rem;", "{position:absolute;top:0;right:0;bottom:0;height:auto;margin:0;border-radius:0 inherit inherit 0;opacity:0;background-color:var(--chip-surface,var(--surface-raised));background-image:linear-gradient( ", ",", " );}&:hover ", ",", ":focus-visible{opacity:1;}"], ChipTrigger, props.$tint ? "color-mix(in srgb, " + props.$tint + " 13%, transparent)" : (_props$backgroundColo = props.backgroundColor) != null ? _props$backgroundColo : "transparent", props.$tint ? "color-mix(in srgb, " + props.$tint + " 13%, transparent)" : (_props$backgroundColo2 = props.backgroundColor) != null ? _props$backgroundColo2 : "transparent", ChipTrigger, ChipTrigger);
+}, props => props.size === "big" && css(["height:30px;"]), props => props.size === "biggest" && css(["height:40px;"]));
 ChipContainer.displayName = "ChipContainer";
 export const ChipLabel = styled.span.withConfig({
   displayName: "Styles__ChipLabel",
-  componentId: "sc-7s0bd1-1"
+  componentId: "sc-7s0bd1-2"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
 ChipLabel.displayName = "ChipLabel";
-export const ChipTrigger = styled(Trigger).withConfig({
-  displayName: "Styles__ChipTrigger",
-  componentId: "sc-7s0bd1-2"
-})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", " ", ""], props => props.size === "regular" && css(["height:24px;width:24px;"]), props => props.size === "small" && css(["height:18px;width:18px;"]), props => props.size === "big" && css(["height:30px;width:30px;"]), props => props.size === "biggest" && css(["height:40px;width:40px;"]));
-ChipTrigger.displayName = "ChipTrigger";
 export const ChipCloseIcon = styled(CloseSmallIcon).withConfig({
   displayName: "Styles__ChipCloseIcon",
   componentId: "sc-7s0bd1-3"

package/dist/esm/components/Chip/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","CloseSmallIcon","Trigger","StyledTypography","ChipContainer","div","withConfig","displayName","componentId","_ref","color","_ref2","backgroundColor","props","showClose","size","ChipLabel","span","ChipTrigger","ChipCloseIcon"],"sources":["../../../../src/components/Chip/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type { ChipProps } from \"./Chip\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { StyledTypography } from \"../Typography/Styles\";\n\n// prettier-ignore\nexport const ChipContainer = styled.div<Partial<ChipProps> & { showClose: boolean }>`\n  align-items: center;\n  border-radius: 0.25rem;\n  display: flex;\n  height: 1.5rem;\n  max-width: 220px;\n  overflow: hidden;\n  padding-left: 0.375rem;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  background-color: var(--color-theme-400);\n  color: var(--color-theme-900);\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  line-height: 1.375;\n\n  ${StyledTypography} {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ${({ color }) =>\n    color &&\n    css`\n      ${StyledTypography} {\n        color: ${color};\n      }\n    `}\n\n  ${({ backgroundColor }) =>\n    backgroundColor &&\n    css`\n      background-color: ${backgroundColor};\n    `}\n\n  ${(props) =>\n    props.showClose\n      ? null\n      : css`\n          padding-right: 0.375rem;\n        `}\n\n  ${(props) =>\n    props.size === \"regular\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 18px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 30px;\n    `}\n\n    ${(props) =>\n      props.size === \"biggest\" &&\n      css`\n        height: 40px;\n      `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<Pick<ChipProps, \"size\">>`\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-left: 0.125rem;\n\n  &:hover {\n    background-color: var(--color-theme-transparent-400);\n  }\n\n  ${(props) =>\n    props.size === \"regular\" &&\n    css`\n      height: 24px;\n      width: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 18px;\n      width: 18px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 30px;\n      width: 30px;\n    `}\n\n    ${(props) =>\n    props.size === \"biggest\" &&\n    css`\n      height: 40px;\n      width: 40px;\n    `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n  color: var(--color-theme-700);\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,gBAAgB,QAAQ,sBAAsB;;AAEvD;AACA,OAAO,MAAMC,aAAa,GAAGP,MAAM,CAACQ,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sYASnCR,SAAS,EACTD,cAAc,EASdI,gBAAgB,EAOhBM,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACLZ,GAAG,wBACCK,gBAAgB,EACPO,KAAK,CAEjB;AAAA,GAEDC,KAAA;EAAA,IAAGC,eAAe,GAAAD,KAAA,CAAfC,eAAe;EAAA,OAClBA,eAAe,IACfd,GAAG,6BACmBc,eAAe,CACpC;AAAA,GAEAC,KAAK,IACNA,KAAK,CAACC,SAAS,GACX,IAAI,GACJhB,GAAG,6BAEF,EAEJe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBjB,GAAG,kBAEF,EAEAe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,OAAO,IACtBjB,GAAG,kBAEF,EAEAe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,KAAK,IACpBjB,GAAG,kBAEF,EAEEe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBjB,GAAG,kBAEF,CACN;AAEDM,aAAa,CAACG,WAAW,GAAG,eAAe;AAE3C,OAAO,MAAMS,SAAS,GAAGnB,MAAM,CAACoB,IAAI,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAKnC;AAEDQ,SAAS,CAACT,WAAW,GAAG,WAAW;AAEnC,OAAO,MAAMW,WAAW,GAAGrB,MAAM,CAACK,OAAO,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAUrCK,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBjB,GAAG,6BAGF,EAEAe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,OAAO,IACtBjB,GAAG,6BAGF,EAEAe,KAAK,IACNA,KAAK,CAACE,IAAI,KAAK,KAAK,IACpBjB,GAAG,6BAGF,EAEEe,KAAK,IACRA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBjB,GAAG,6BAGF,CACJ;AAEDoB,WAAW,CAACX,WAAW,GAAG,aAAa;AAEvC,OAAO,MAAMY,aAAa,GAAGtB,MAAM,CAACI,cAAc,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAElD;AAEDW,aAAa,CAACZ,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","CloseSmallIcon","Trigger","StyledTypography","ChipTrigger","withConfig","displayName","componentId","props","size","RADIUS","rounded","soft","pill","TONES","neutral","muted","info","primary","bordered","warning","alert","success","ChipContainer","div","_props$$shape","$shape","$tone","_ref","$tint","_ref2","color","_ref3","backgroundColor","showClose","_props$backgroundColo","_props$backgroundColo2","$closeMode","ChipLabel","span","ChipCloseIcon"],"sources":["../../../../src/components/Chip/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type { ChipProps } from \"./Chip\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { StyledTypography } from \"../Typography/Styles\";\n\nexport const ChipTrigger = styled(Trigger)<Pick<ChipProps, \"size\">>`\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin-left: 0.125rem;\n\n  &:hover {\n    background-color: var(--color-theme-transparent-400);\n  }\n\n  ${(props) =>\n    props.size === \"regular\" &&\n    css`\n      height: 24px;\n      width: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 18px;\n      width: 18px;\n    `}\n\n  ${(props) =>\n    props.size === \"tiny\" &&\n    css`\n      height: 16.5px;\n      width: 16.5px;\n    `}\n\n  ${(props) =>\n    props.size === \"compact\" &&\n    css`\n      height: 20px;\n      width: 20px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 30px;\n      width: 30px;\n    `}\n\n    ${(props) =>\n    props.size === \"biggest\" &&\n    css`\n      height: 40px;\n      width: 40px;\n    `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nconst RADIUS = { rounded: \"0.25rem\", soft: \"0.375rem\", pill: \"9999px\" };\n\nconst TONES = {\n  neutral: css`\n    background-color: var(--pill-background);\n    color: var(--color-theme-700);\n  `,\n  muted: css`\n    background-color: var(--color-theme-200);\n    color: var(--color-theme-700);\n  `,\n  info: css`\n    background-color: #a0cbfd1a;\n    border: 1px solid #a0cbfd;\n    color: #568ccb;\n  `,\n  primary: css`\n    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);\n    color: var(--color-primary);\n  `,\n  bordered: css`\n    background-color: var(--color-theme-200);\n    border: 1px solid var(--border-primary);\n    color: var(--color-theme-900);\n  `,\n  warning: css`\n    background-color: var(--note-bg);\n    color: var(--warning-text);\n  `,\n  alert: css`\n    background-color: var(--alert-surface-subtle);\n    color: var(--red-alert);\n  `,\n  success: css`\n    background-color: var(--success-surface);\n    color: var(--color-sucess-green);\n  `,\n};\n\ninterface ChipLook {\n  showClose: boolean;\n  $shape?: ChipProps[\"shape\"];\n  $tone?: ChipProps[\"tone\"];\n  $tint?: string;\n  $closeMode?: ChipProps[\"closeMode\"];\n}\n\n// prettier-ignore\nexport const ChipContainer = styled.div<Partial<ChipProps> & ChipLook>`\n  align-items: center;\n  border-radius: ${(props) => RADIUS[props.$shape ?? \"rounded\"]};\n  display: flex;\n  height: 1.5rem;\n  max-width: 220px;\n  overflow: hidden;\n  padding-left: 0.375rem;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  background-color: var(--color-theme-400);\n  color: var(--color-theme-900);\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  line-height: 1.375;\n\n  ${StyledTypography} {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ${(props) => props.$tone && TONES[props.$tone]}\n\n  ${(props) =>\n    props.$tone &&\n    css`\n      ${StyledTypography} {\n        color: inherit;\n      }\n\n      svg {\n        fill: currentColor;\n      }\n    `}\n\n  ${({ $tint }) =>\n    $tint &&\n    css`\n      background-color: color-mix(in srgb, ${$tint} 13%, transparent);\n\n      ${StyledTypography} {\n        color: ${$tint};\n      }\n    `}\n\n  ${({ color }) =>\n    color &&\n    css`\n      ${StyledTypography} {\n        color: ${color};\n      }\n    `}\n\n  ${({ backgroundColor }) =>\n    backgroundColor &&\n    css`\n      background-color: ${backgroundColor};\n    `}\n\n  ${(props) =>\n    props.showClose\n      ? null\n      : css`\n          padding-right: 0.375rem;\n        `}\n\n  ${(props) =>\n    props.size === \"regular\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 18px;\n    `}\n\n  ${(props) =>\n    props.size === \"compact\" &&\n    css`\n      height: 20px;\n      padding-left: 0.5rem;\n      ${props.showClose ? \"\" : \"padding-right: 0.5rem;\"}\n    `}\n\n  ${(props) =>\n    props.size === \"tiny\" &&\n    css`\n      height: 16.5px;\n      padding-left: 0.25rem;\n      ${props.showClose ? \"\" : \"padding-right: 0.25rem;\"}\n    `}\n\n  ${(props) =>\n    props.$closeMode === \"overlay\" &&\n    css`\n      position: relative;\n      padding-right: 0.375rem;\n\n      ${ChipTrigger} {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        height: auto;\n        margin: 0;\n        border-radius: 0 inherit inherit 0;\n        opacity: 0;\n        background-color: var(--chip-surface, var(--surface-raised));\n        background-image: linear-gradient(\n          ${props.$tint\n            ? `color-mix(in srgb, ${props.$tint} 13%, transparent)`\n            : props.backgroundColor ?? \"transparent\"},\n          ${props.$tint\n            ? `color-mix(in srgb, ${props.$tint} 13%, transparent)`\n            : props.backgroundColor ?? \"transparent\"}\n        );\n      }\n\n      &:hover ${ChipTrigger}, ${ChipTrigger}:focus-visible {\n        opacity: 1;\n      }\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 30px;\n    `}\n\n    ${(props) =>\n      props.size === \"biggest\" &&\n      css`\n        height: 40px;\n      `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n  color: var(--color-theme-700);\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Chip/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Chip";
+export * from "./ChipGroup";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/dist/esm/components/Chip/index.js

@@ -1,2 +1,3 @@
 export * from "./Chip";
+export * from "./ChipGroup";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Chip/index.ts"],"sourcesContent":["export * from \"./Chip\";\n"],"mappings":"AAAA,cAAc,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Chip/index.ts"],"sourcesContent":["export * from \"./Chip\";\nexport * from \"./ChipGroup\";\n"],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,aAAa","ignoreList":[]}

package/dist/esm/components/ClampedContent/ClampedContent.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface IClampedContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** The height of the clamp, in pixels. */
+    maxHeight?: number;
+    /** Content up to this much taller than the clamp shows whole. */
+    slack?: number;
+    /** The text of the control that opens the content. */
+    moreLabel: ReactNode;
+    /** The text of the control that closes the content. */
+    lessLabel: ReactNode;
+    /** Controlled state. Without it the component keeps its own state. */
+    expanded?: boolean;
+    /** The first state of an uncontrolled component. */
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+export declare const ClampedContent: React.ForwardRefExoticComponent<IClampedContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ClampedContent.d.ts.map

package/dist/esm/components/ClampedContent/ClampedContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClampedContent.d.ts","sourceRoot":"","sources":["../../../../src/components/ClampedContent/ClampedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,cAAc,EAEd,SAAS,EAQV,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,EAAE,SAAS,CAAC;IACrB,uDAAuD;IACvD,SAAS,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAUD,eAAO,MAAM,cAAc,6FA6H1B,CAAC"}

package/dist/esm/components/ClampedContent/ClampedContent.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["maxHeight", "slack", "moreLabel", "lessLabel", "expanded", "defaultExpanded", "onExpandedChange", "className", "children"];
+import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { StyledClampedContent, StyledClampedContentFrame, StyledClampedContentToggle } from "./Styles";
+import { PRESS_IGNORED, hasSelectedText } from "../../hooks/useLongPress";
+const isKeyboardFocus = node => {
+  try {
+    return node.matches(":focus-visible");
+  } catch (_error) {
+    return false;
+  }
+};
+export const ClampedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 288 : _ref$maxHeight,
+    _ref$slack = _ref.slack,
+    slack = _ref$slack === void 0 ? 48 : _ref$slack,
+    moreLabel = _ref.moreLabel,
+    lessLabel = _ref.lessLabel,
+    controlled = _ref.expanded,
+    _ref$defaultExpanded = _ref.defaultExpanded,
+    defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
+    onExpandedChange = _ref.onExpandedChange,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const frameId = useId();
+  const frameRef = useRef(null);
+  const contentRef = useRef(null);
+  const _useState = useState(false),
+    overflows = _useState[0],
+    setOverflows = _useState[1];
+  const _useState2 = useState(0),
+    fullHeight = _useState2[0],
+    setFullHeight = _useState2[1];
+  const _useState3 = useState(defaultExpanded),
+    own = _useState3[0],
+    setOwn = _useState3[1];
+  const expanded = controlled != null ? controlled : own;
+  const setExpanded = useCallback(next => {
+    setOwn(next);
+    onExpandedChange == null || onExpandedChange(next);
+  }, [onExpandedChange]);
+  const measure = useCallback(() => {
+    const frame = frameRef.current;
+    if (frame) {
+      setOverflows(frame.scrollHeight > maxHeight + slack);
+      setFullHeight(frame.scrollHeight);
+    }
+  }, [maxHeight, slack]);
+  useLayoutEffect(measure);
+
+  // Images load late, so the height of the content is watched.
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined" || !contentRef.current) {
+      return undefined;
+    }
+
+    // eslint-disable-next-line compat/compat
+    const observer = new ResizeObserver(measure);
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [measure]);
+  const clamped = overflows && !expanded;
+
+  // A click on a link, an image or a selection keeps its own meaning.
+  const handleClick = useCallback(event => {
+    if (!event.target.closest(PRESS_IGNORED) && !hasSelectedText()) {
+      setExpanded(true);
+    }
+  }, [setExpanded]);
+
+  // A link under the cut must not take the keyboard focus unseen.
+  const handleFocus = useCallback(event => {
+    if (isKeyboardFocus(event.target)) {
+      setExpanded(true);
+    }
+  }, [setExpanded]);
+  const toggle = useCallback(() => setExpanded(!expanded), [expanded, setExpanded]);
+  return /*#__PURE__*/React.createElement(StyledClampedContent, _extends({}, rest, {
+    ref: ref,
+    className: classnames("c-clamped-content", className)
+  }), /*#__PURE__*/React.createElement(StyledClampedContentFrame, {
+    id: frameId,
+    ref: frameRef,
+    $overflows: overflows,
+    $clamped: clamped,
+    $slack: slack,
+    "data-clamped": clamped,
+    onFocus: clamped ? handleFocus : undefined,
+    onClick: clamped ? handleClick : undefined,
+    style: overflows ? {
+      maxHeight: expanded ? fullHeight : maxHeight
+    } : undefined,
+    className: "c-clamped-content__frame"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, children)), overflows ? /*#__PURE__*/React.createElement(StyledClampedContentToggle, {
+    type: "button",
+    onClick: toggle,
+    "aria-expanded": expanded,
+    "aria-controls": frameId,
+    className: "c-clamped-content__toggle"
+  }, expanded ? lessLabel : moreLabel) : null);
+});
+ClampedContent.displayName = "ClampedContent";
+//# sourceMappingURL=ClampedContent.js.map

package/dist/esm/components/ClampedContent/ClampedContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClampedContent.js","names":["React","forwardRef","useCallback","useEffect","useId","useLayoutEffect","useRef","useState","classnames","StyledClampedContent","StyledClampedContentFrame","StyledClampedContentToggle","PRESS_IGNORED","hasSelectedText","isKeyboardFocus","node","matches","_error","ClampedContent","_ref","ref","_ref$maxHeight","maxHeight","_ref$slack","slack","moreLabel","lessLabel","controlled","expanded","_ref$defaultExpanded","defaultExpanded","onExpandedChange","className","children","rest","_objectWithoutPropertiesLoose","_excluded","frameId","frameRef","contentRef","_useState","overflows","setOverflows","_useState2","fullHeight","setFullHeight","_useState3","own","setOwn","setExpanded","next","measure","frame","current","scrollHeight","ResizeObserver","undefined","observer","observe","disconnect","clamped","handleClick","event","target","closest","handleFocus","toggle","createElement","_extends","id","$overflows","$clamped","$slack","onFocus","onClick","style","type","displayName"],"sources":["../../../../src/components/ClampedContent/ClampedContent.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledClampedContent,\n  StyledClampedContentFrame,\n  StyledClampedContentToggle,\n} from \"./Styles\";\nimport { PRESS_IGNORED, hasSelectedText } from \"../../hooks/useLongPress\";\n\nexport interface IClampedContentProps extends HTMLAttributes<HTMLDivElement> {\n  /** The height of the clamp, in pixels. */\n  maxHeight?: number;\n  /** Content up to this much taller than the clamp shows whole. */\n  slack?: number;\n  /** The text of the control that opens the content. */\n  moreLabel: ReactNode;\n  /** The text of the control that closes the content. */\n  lessLabel: ReactNode;\n  /** Controlled state. Without it the component keeps its own state. */\n  expanded?: boolean;\n  /** The first state of an uncontrolled component. */\n  defaultExpanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\nconst isKeyboardFocus = (node: Element) => {\n  try {\n    return node.matches(\":focus-visible\");\n  } catch (_error) {\n    return false;\n  }\n};\n\nexport const ClampedContent = forwardRef<HTMLDivElement, IClampedContentProps>(\n  (\n    {\n      maxHeight = 288,\n      slack = 48,\n      moreLabel,\n      lessLabel,\n      expanded: controlled,\n      defaultExpanded = false,\n      onExpandedChange,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const frameId = useId();\n    const frameRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [overflows, setOverflows] = useState(false);\n    const [fullHeight, setFullHeight] = useState(0);\n    const [own, setOwn] = useState(defaultExpanded);\n    const expanded = controlled ?? own;\n\n    const setExpanded = useCallback(\n      (next: boolean) => {\n        setOwn(next);\n        onExpandedChange?.(next);\n      },\n      [onExpandedChange]\n    );\n\n    const measure = useCallback(() => {\n      const frame = frameRef.current;\n\n      if (frame) {\n        setOverflows(frame.scrollHeight > maxHeight + slack);\n        setFullHeight(frame.scrollHeight);\n      }\n    }, [maxHeight, slack]);\n\n    useLayoutEffect(measure);\n\n    // Images load late, so the height of the content is watched.\n    useEffect(() => {\n      if (typeof ResizeObserver === \"undefined\" || !contentRef.current) {\n        return undefined;\n      }\n\n      // eslint-disable-next-line compat/compat\n      const observer = new ResizeObserver(measure);\n\n      observer.observe(contentRef.current);\n\n      return () => observer.disconnect();\n    }, [measure]);\n\n    const clamped = overflows && !expanded;\n\n    // A click on a link, an image or a selection keeps its own meaning.\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (\n          !(event.target as Element).closest(PRESS_IGNORED) &&\n          !hasSelectedText()\n        ) {\n          setExpanded(true);\n        }\n      },\n      [setExpanded]\n    );\n\n    // A link under the cut must not take the keyboard focus unseen.\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        if (isKeyboardFocus(event.target)) {\n          setExpanded(true);\n        }\n      },\n      [setExpanded]\n    );\n\n    const toggle = useCallback(\n      () => setExpanded(!expanded),\n      [expanded, setExpanded]\n    );\n\n    return (\n      <StyledClampedContent\n        {...rest}\n        ref={ref}\n        className={classnames(\"c-clamped-content\", className)}\n      >\n        <StyledClampedContentFrame\n          id={frameId}\n          ref={frameRef}\n          $overflows={overflows}\n          $clamped={clamped}\n          $slack={slack}\n          data-clamped={clamped}\n          onFocus={clamped ? handleFocus : undefined}\n          onClick={clamped ? handleClick : undefined}\n          style={\n            overflows\n              ? { maxHeight: expanded ? fullHeight : maxHeight }\n              : undefined\n          }\n          className=\"c-clamped-content__frame\"\n        >\n          <div ref={contentRef}>{children}</div>\n        </StyledClampedContentFrame>\n        {overflows ? (\n          <StyledClampedContentToggle\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={expanded}\n            aria-controls={frameId}\n            className=\"c-clamped-content__toggle\"\n          >\n            {expanded ? lessLabel : moreLabel}\n          </StyledClampedContentToggle>\n        ) : null}\n      </StyledClampedContent>\n    );\n  }\n);\n\nClampedContent.displayName = \"ClampedContent\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ClampedContent/Styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledClampedContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledClampedContentFrame: import("styled-components").StyledComponent<"div", any, {
+    $overflows: boolean;
+    $clamped: boolean;
+    $slack: number;
+}, never>;
+export declare const StyledClampedContentToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/ClampedContent/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ClampedContent/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,oEAKhC,CAAC;AAEF,eAAO,MAAM,yBAAyB;gBACxB,OAAO;cACT,OAAO;YACT,MAAM;SAkCf,CAAC;AAEF,eAAO,MAAM,0BAA0B,uEAetC,CAAC"}

package/dist/esm/components/ClampedContent/Styles.js

@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components";
+export const StyledClampedContent = styled.div.withConfig({
+  displayName: "Styles__StyledClampedContent",
+  componentId: "sc-13aqf5r-0"
+})(["display:flex;flex-direction:column;gap:8px;min-width:0;"]);
+export const StyledClampedContentFrame = styled.div.withConfig({
+  displayName: "Styles__StyledClampedContentFrame",
+  componentId: "sc-13aqf5r-1"
+})(["min-width:0;", " ", ""], _ref => {
+  let $overflows = _ref.$overflows;
+  return $overflows && css(["overflow:hidden;transition:max-height 200ms cubic-bezier(0,0,0.2,1);@media (prefers-reduced-motion:reduce){transition:none;}@media print{max-height:none !important;overflow:visible;}"]);
+}, _ref2 => {
+  let $clamped = _ref2.$clamped,
+    $slack = _ref2.$slack;
+  return $clamped && css(["cursor:pointer;mask-image:linear-gradient( to bottom,black calc(100% - ", "px),transparent );@media print{mask-image:none;}"], $slack);
+});
+export const StyledClampedContentToggle = styled.button.withConfig({
+  displayName: "Styles__StyledClampedContentToggle",
+  componentId: "sc-13aqf5r-2"
+})(["align-self:flex-start;padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:16px;line-height:24px;text-decoration:underline;color:var(--color-primary);@media print{display:none;}"]);
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/ClampedContent/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","StyledClampedContent","div","withConfig","displayName","componentId","StyledClampedContentFrame","_ref","$overflows","_ref2","$clamped","$slack","StyledClampedContentToggle","button"],"sources":["../../../../src/components/ClampedContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledClampedContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n`;\n\nexport const StyledClampedContentFrame = styled.div<{\n  $overflows: boolean;\n  $clamped: boolean;\n  $slack: number;\n}>`\n  min-width: 0;\n\n  ${({ $overflows }) =>\n    $overflows &&\n    css`\n      overflow: hidden;\n      transition: max-height 200ms cubic-bezier(0, 0, 0.2, 1);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n\n      @media print {\n        max-height: none !important;\n        overflow: visible;\n      }\n    `}\n\n  ${({ $clamped, $slack }) =>\n    $clamped &&\n    css`\n      cursor: pointer;\n      mask-image: linear-gradient(\n        to bottom,\n        black calc(100% - ${$slack}px),\n        transparent\n      );\n\n      @media print {\n        mask-image: none;\n      }\n    `}\n`;\n\nexport const StyledClampedContentToggle = styled.button`\n  align-self: flex-start;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 24px;\n  text-decoration: underline;\n  color: var(--color-primary);\n\n  @media print {\n    display: none;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+DAK7C;AAED,OAAO,MAAMC,yBAAyB,GAAGP,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8BAO/CE,IAAA;EAAA,IAAGC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,IACVR,GAAG,4LAYF;AAAA,GAEDS,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,KAAA,CAANE,MAAM;EAAA,OACnBD,QAAQ,IACRV,GAAG,kIAIqBW,MAAM,CAO7B;AAAA,EACJ;AAED,OAAO,MAAMC,0BAA0B,GAAGb,MAAM,CAACc,MAAM,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2NAetD","ignoreList":[]}

package/dist/esm/components/ClampedContent/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ClampedContent";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ClampedContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ClampedContent/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/esm/components/ClampedContent/index.js

@@ -0,0 +1,2 @@
+export * from "./ClampedContent";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ClampedContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ClampedContent/index.ts"],"sourcesContent":["export * from \"./ClampedContent\";\n"],"mappings":"AAAA,cAAc,kBAAkB","ignoreList":[]}

package/dist/esm/components/Collapse/Collapse.d.ts

@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from "react";
+export interface ICollapseProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shows the content. */
+    open: boolean;
+    /** The time of the clip, in milliseconds. */
+    duration?: number;
+    /** Removes the content from the page after the close. */
+    unmountOnExit?: boolean;
+    /** Opens with a clip on the first render. */
+    appear?: boolean;
+    /** "vertical" clips only the height, so content beside the box stays visible. */
+    clip?: "both" | "vertical";
+}
+export declare const Collapse: React.ForwardRefExoticComponent<ICollapseProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Collapse.d.ts.map

package/dist/esm/components/Collapse/Collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.d.ts","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,yBAAyB;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,uFA2EpB,CAAC"}