@activecollab/components 2.0.498 → 2.0.499

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":"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,OAAO,MAAMC,WAAW,GAAGP,MAAM,CAACK,OAAO,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+KAUrCC,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,6BAGF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBX,GAAG,6BAGF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,MAAM,IACrBX,GAAG,iCAGF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,6BAGF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBX,GAAG,6BAGF,EAEEU,KAAK,IACRA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,6BAGF,CACJ;AAEDM,WAAW,CAACE,WAAW,GAAG,aAAa;AAEvC,MAAMI,MAAM,GAAG;EAAEC,OAAO,EAAE,SAAS;EAAEC,IAAI,EAAE,UAAU;EAAEC,IAAI,EAAE;AAAS,CAAC;AAEvE,MAAMC,KAAK,GAAG;EACZC,OAAO,EAAEjB,GAAG,2EAGX;EACDkB,KAAK,EAAElB,GAAG,2EAGT;EACDmB,IAAI,EAAEnB,GAAG,wEAIR;EACDoB,OAAO,EAAEpB,GAAG,0GAGX;EACDqB,QAAQ,EAAErB,GAAG,kHAIZ;EACDsB,OAAO,EAAEtB,GAAG,gEAGX;EACDuB,KAAK,EAAEvB,GAAG,0EAGT;EACDwB,OAAO,EAAExB,GAAG;AAId,CAAC;AAUD;AACA,OAAO,MAAMyB,aAAa,GAAG1B,MAAM,CAAC2B,GAAG,CAAAnB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iaAEnBC,KAAK;EAAA,IAAAiB,aAAA;EAAA,OAAKf,MAAM,EAAAe,aAAA,GAACjB,KAAK,CAACkB,MAAM,YAAAD,aAAA,GAAI,SAAS,CAAC;AAAA,GAO3DzB,SAAS,EACTD,cAAc,EASdI,gBAAgB,EAOfK,KAAK,IAAKA,KAAK,CAACmB,KAAK,IAAIb,KAAK,CAACN,KAAK,CAACmB,KAAK,CAAC,EAE3CnB,KAAK,IACNA,KAAK,CAACmB,KAAK,IACX7B,GAAG,kDACCK,gBAAgB,CAOnB,EAEDyB,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACL/B,GAAG,iFACsC+B,KAAK,EAE1C1B,gBAAgB,EACP0B,KAAK,CAEjB;AAAA,GAEDC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACLjC,GAAG,wBACCK,gBAAgB,EACP4B,KAAK,CAEjB;AAAA,GAEDC,KAAA;EAAA,IAAGC,eAAe,GAAAD,KAAA,CAAfC,eAAe;EAAA,OAClBA,eAAe,IACfnC,GAAG,6BACmBmC,eAAe,CACpC;AAAA,GAEAzB,KAAK,IACNA,KAAK,CAAC0B,SAAS,GACX,IAAI,GACJpC,GAAG,6BAEF,EAEJU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,kBAEF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBX,GAAG,kBAEF,EAEAU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,2CAGCU,KAAK,CAAC0B,SAAS,GAAG,EAAE,GAAG,wBAAwB,CAClD,EAEA1B,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,MAAM,IACrBX,GAAG,8CAGCU,KAAK,CAAC0B,SAAS,GAAG,EAAE,GAAG,yBAAyB,CACnD,EAEA1B,KAAK;EAAA,IAAA2B,qBAAA,EAAAC,sBAAA;EAAA,OACN5B,KAAK,CAAC6B,UAAU,KAAK,SAAS,IAC9BvC,GAAG,oTAICM,WAAW,EAWPI,KAAK,CAACqB,KAAK,2BACarB,KAAK,CAACqB,KAAK,2BAAAM,qBAAA,GACjC3B,KAAK,CAACyB,eAAe,YAAAE,qBAAA,GAAI,aAAa,EACxC3B,KAAK,CAACqB,KAAK,2BACarB,KAAK,CAACqB,KAAK,2BAAAO,sBAAA,GACjC5B,KAAK,CAACyB,eAAe,YAAAG,sBAAA,GAAI,aAAa,EAIpChC,WAAW,EAAKA,WAAW,CAGtC;AAAA,GAEAI,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBX,GAAG,kBAEF,EAEEU,KAAK,IACNA,KAAK,CAACC,IAAI,KAAK,SAAS,IACxBX,GAAG,kBAEF,CACN;AAEDyB,aAAa,CAACjB,WAAW,GAAG,eAAe;AAE3C,OAAO,MAAMgC,SAAS,GAAGzC,MAAM,CAAC0C,IAAI,CAAAlC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAKnC;AAED+B,SAAS,CAAChC,WAAW,GAAG,WAAW;AAEnC,OAAO,MAAMkC,aAAa,GAAG3C,MAAM,CAACI,cAAc,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAElD;AAEDiC,aAAa,CAAClC,WAAW,GAAG,eAAe","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"}

package/dist/esm/components/Collapse/Collapse.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "duration", "unmountOnExit", "appear", "clip", "className", "children"];
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { StyledCollapse, StyledCollapseContent } from "./Styles";
+export const Collapse = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let open = _ref.open,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 200 : _ref$duration,
+    _ref$unmountOnExit = _ref.unmountOnExit,
+    unmountOnExit = _ref$unmountOnExit === void 0 ? false : _ref$unmountOnExit,
+    _ref$appear = _ref.appear,
+    appear = _ref$appear === void 0 ? false : _ref$appear,
+    _ref$clip = _ref.clip,
+    clip = _ref$clip === void 0 ? "both" : _ref$clip,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const _useState = useState(open || !unmountOnExit),
+    mounted = _useState[0],
+    setMounted = _useState[1];
+  const _useState2 = useState(open && !appear),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  const mountedRef = useRef(mounted);
+  const isFirstRun = useRef(true);
+  mountedRef.current = mounted;
+  useEffect(() => {
+    const isFirst = isFirstRun.current;
+    isFirstRun.current = false;
+    if (open) {
+      // Content that was painted closed can open in the same frame.
+      if (mountedRef.current && !isFirst) {
+        setExpanded(true);
+        return undefined;
+      }
+      setMounted(true);
+      // Two frames, so the closed state paints before the clip starts.
+      let frame = requestAnimationFrame(() => {
+        frame = requestAnimationFrame(() => setExpanded(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setExpanded(false);
+    if (!unmountOnExit) {
+      return undefined;
+    }
+    const timer = setTimeout(() => setMounted(false), duration);
+    return () => clearTimeout(timer);
+  }, [duration, open, unmountOnExit]);
+  if (!mounted) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledCollapse, _extends({}, rest, {
+    inert: open ? undefined : "",
+    ref: ref,
+    $open: expanded,
+    $duration: duration,
+    "data-open": expanded,
+    className: classnames("c-collapse", className)
+  }), /*#__PURE__*/React.createElement(StyledCollapseContent, {
+    $clip: clip,
+    className: "c-collapse__content"
+  }, children));
+});
+Collapse.displayName = "Collapse";
+//# sourceMappingURL=Collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","names":["React","forwardRef","useEffect","useRef","useState","classnames","StyledCollapse","StyledCollapseContent","Collapse","_ref","ref","open","_ref$duration","duration","_ref$unmountOnExit","unmountOnExit","_ref$appear","appear","_ref$clip","clip","className","children","rest","_objectWithoutPropertiesLoose","_excluded","_useState","mounted","setMounted","_useState2","expanded","setExpanded","mountedRef","isFirstRun","current","isFirst","undefined","frame","requestAnimationFrame","cancelAnimationFrame","timer","setTimeout","clearTimeout","createElement","_extends","inert","$open","$duration","$clip","displayName"],"sources":["../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCollapse, StyledCollapseContent } from \"./Styles\";\n\nexport interface ICollapseProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shows the content. */\n  open: boolean;\n  /** The time of the clip, in milliseconds. */\n  duration?: number;\n  /** Removes the content from the page after the close. */\n  unmountOnExit?: boolean;\n  /** Opens with a clip on the first render. */\n  appear?: boolean;\n  /** \"vertical\" clips only the height, so content beside the box stays visible. */\n  clip?: \"both\" | \"vertical\";\n}\n\nexport const Collapse = forwardRef<HTMLDivElement, ICollapseProps>(\n  (\n    {\n      open,\n      duration = 200,\n      unmountOnExit = false,\n      appear = false,\n      clip = \"both\",\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [mounted, setMounted] = useState(open || !unmountOnExit);\n    const [expanded, setExpanded] = useState(open && !appear);\n\n    const mountedRef = useRef(mounted);\n    const isFirstRun = useRef(true);\n\n    mountedRef.current = mounted;\n\n    useEffect(() => {\n      const isFirst = isFirstRun.current;\n\n      isFirstRun.current = false;\n\n      if (open) {\n        // Content that was painted closed can open in the same frame.\n        if (mountedRef.current && !isFirst) {\n          setExpanded(true);\n\n          return undefined;\n        }\n\n        setMounted(true);\n        // Two frames, so the closed state paints before the clip starts.\n        let frame = requestAnimationFrame(() => {\n          frame = requestAnimationFrame(() => setExpanded(true));\n        });\n\n        return () => cancelAnimationFrame(frame);\n      }\n\n      setExpanded(false);\n\n      if (!unmountOnExit) {\n        return undefined;\n      }\n\n      const timer = setTimeout(() => setMounted(false), duration);\n\n      return () => clearTimeout(timer);\n    }, [duration, open, unmountOnExit]);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <StyledCollapse\n        {...rest}\n        {...{ inert: open ? undefined : \"\" }}\n        ref={ref}\n        $open={expanded}\n        $duration={duration}\n        data-open={expanded}\n        className={classnames(\"c-collapse\", className)}\n      >\n        <StyledCollapseContent $clip={clip} className=\"c-collapse__content\">\n          {children}\n        </StyledCollapseContent>\n      </StyledCollapse>\n    );\n  }\n);\n\nCollapse.displayName = \"Collapse\";\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+export declare const StyledCollapse: import("styled-components").StyledComponent<"div", any, {
+    $open: boolean;
+    $duration: number;
+}, never>;
+export declare const StyledCollapseContent: import("styled-components").StyledComponent<"div", any, {
+    $clip: "both" | "vertical";
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Collapse/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;WAAuB,OAAO;eAAa,MAAM;SAS3E,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,MAAM,GAAG,UAAU;SAI3E,CAAC"}

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+export const StyledCollapse = styled.div.withConfig({
+  displayName: "Styles__StyledCollapse",
+  componentId: "sc-1ov56au-0"
+})(["display:grid;grid-template-rows:", ";transition:grid-template-rows ", "ms cubic-bezier(0,0,0.2,1);@media (prefers-reduced-motion:reduce){transition:none;}"], _ref => {
+  let $open = _ref.$open;
+  return $open ? "1fr" : "0fr";
+}, _ref2 => {
+  let $duration = _ref2.$duration;
+  return $duration;
+});
+export const StyledCollapseContent = styled.div.withConfig({
+  displayName: "Styles__StyledCollapseContent",
+  componentId: "sc-1ov56au-1"
+})(["min-height:0;", ""], _ref3 => {
+  let $clip = _ref3.$clip;
+  return $clip === "vertical" ? "clip-path: inset(0 -100vw);" : "overflow: hidden;";
+});
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","StyledCollapse","div","withConfig","displayName","componentId","_ref","$open","_ref2","$duration","StyledCollapseContent","_ref3","$clip"],"sources":["../../../../src/components/Collapse/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledCollapse = styled.div<{ $open: boolean; $duration: number }>`\n  display: grid;\n  grid-template-rows: ${({ $open }) => ($open ? \"1fr\" : \"0fr\")};\n  transition: grid-template-rows ${({ $duration }) => $duration}ms\n    cubic-bezier(0, 0, 0.2, 1);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nexport const StyledCollapseContent = styled.div<{ $clip: \"both\" | \"vertical\" }>`\n  min-height: 0;\n  ${({ $clip }) =>\n    $clip === \"vertical\" ? \"clip-path: inset(0 -100vw);\" : \"overflow: hidden;\"}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mKAEhBC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,EAC3BC,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OAAOA,SAAS;AAAA,EAM9D;AAED,OAAO,MAAMC,qBAAqB,GAAGV,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAE3CM,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OACRA,KAAK,KAAK,UAAU,GAAG,6BAA6B,GAAG,mBAAmB;AAAA,EAC7E","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ButtonHTMLAttributes } from "react";
+import React, { FC, MouseEvent, ButtonHTMLAttributes, SVGAttributes } from "react";
 export interface ICompleteCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Change completed state of checkbox */
     completed?: boolean;
@@ -16,4 +16,12 @@ export interface ICompleteCheckboxProps extends ButtonHTMLAttributes<HTMLButtonE
     checkMarkClassName?: string;
 }
 export declare const CompleteCheckbox: FC<ICompleteCheckboxProps>;
+export interface ICompleteCheckboxRingProps extends SVGAttributes<SVGSVGElement> {
+    /** Closes the ring into a full circle and fades it out, when the wait ends. */
+    closing?: boolean;
+    /** The width and the height in pixels. */
+    size?: number;
+}
+/** Stands in the place of a checkbox while its object waits for the server. */
+export declare const CompleteCheckboxRing: ({ closing, size, className, ...rest }: ICompleteCheckboxRingProps) => React.JSX.Element;
 //# sourceMappingURL=CompleteCheckbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMpE,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC"}
+{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,EAAE,EACF,UAAU,EACV,oBAAoB,EACpB,aAAa,EACd,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,aAAa,CAAC,aAAa,CAAC;IACpC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,GAAI,uCAKlC,0BAA0B,sBAW5B,CAAC"}