@activecollab/components 2.0.497 → 2.0.499

package/dist/cjs/hooks/useResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanel.js","names":["_react","require","_slicedToArray","r","e","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","t","toString","call","slice","constructor","name","Array","from","test","length","n","l","Symbol","iterator","i","u","f","o","next","Object","done","push","value","return","isArray","clampPanelWidth","exports","width","min","max","fallback","arguments","undefined","numeric","Number","isFinite","Math","useResizablePanel","_ref","side","_ref$step","step","onChange","_useState","useState","_useState2","resized","setResized","_useState3","_useState4","isResizing","setIsResizing","resizedRef","useRef","isResizingRef","stopRef","current","useEffect","_stopRef$current","onPointerDown","useCallback","event","button","startX","clientX","startWidth","handleMove","moveEvent","delta","handleEnd","_stopRef$current2","round","window","removeEventListener","addEventListener","preventDefault","onKeyDown","grow","shrink","targets","Home","End","key","handleProps","useMemo","active"],"sources":["../../../src/hooks/useResizablePanel.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type React from \"react\";\n\nexport const clampPanelWidth = (\n  width: unknown,\n  min: number,\n  max: number,\n  fallback: number = min\n): number => {\n  const numeric = Number(width);\n\n  if (!Number.isFinite(numeric)) return fallback;\n\n  return Math.min(Math.max(numeric, min), max);\n};\n\nexport interface UseResizablePanelOptions {\n  /** The side of the layout the panel stands on. Its handle is on the opposite edge. */\n  side: \"left\" | \"right\";\n  width: number;\n  min: number;\n  max: number;\n  /** The change of one arrow key press, in pixels. */\n  step?: number;\n  /** Called once at the end of a drag, and on each key press. */\n  onChange: (width: number) => void;\n}\n\nexport interface ResizeHandleProps {\n  active: boolean;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  \"aria-valuenow\": number;\n}\n\nexport const useResizablePanel = ({\n  side,\n  width,\n  min,\n  max,\n  step = 16,\n  onChange,\n}: UseResizablePanelOptions) => {\n  const [resized, setResized] = useState(() =>\n    clampPanelWidth(width, min, max)\n  );\n  const [isResizing, setIsResizing] = useState(false);\n  const resizedRef = useRef(resized);\n  const isResizingRef = useRef(false);\n  const stopRef = useRef<(() => void) | null>(null);\n\n  resizedRef.current = resized;\n\n  useEffect(() => {\n    if (!isResizingRef.current) {\n      setResized(clampPanelWidth(width, min, max));\n    }\n  }, [width, min, max]);\n\n  useEffect(() => () => stopRef.current?.(), []);\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLElement>) => {\n      if (event.button != null && event.button !== 0) return;\n\n      const startX = event.clientX;\n      const startWidth = resizedRef.current;\n\n      isResizingRef.current = true;\n      setIsResizing(true);\n\n      const handleMove = (moveEvent: PointerEvent) => {\n        const delta =\n          side === \"right\"\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX;\n        const next = clampPanelWidth(startWidth + delta, min, max);\n\n        resizedRef.current = next;\n        setResized(next);\n      };\n\n      const handleEnd = () => {\n        stopRef.current?.();\n\n        if (resizedRef.current !== startWidth) {\n          onChange(Math.round(resizedRef.current));\n        }\n      };\n\n      stopRef.current = () => {\n        isResizingRef.current = false;\n        setIsResizing(false);\n        stopRef.current = null;\n        window.removeEventListener(\"pointermove\", handleMove);\n        window.removeEventListener(\"pointerup\", handleEnd);\n        window.removeEventListener(\"pointercancel\", handleEnd);\n      };\n\n      window.addEventListener(\"pointermove\", handleMove);\n      window.addEventListener(\"pointerup\", handleEnd);\n      window.addEventListener(\"pointercancel\", handleEnd);\n      event.preventDefault();\n    },\n    [side, min, max, onChange]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      const grow = side === \"right\" ? \"ArrowLeft\" : \"ArrowRight\";\n      const shrink = side === \"right\" ? \"ArrowRight\" : \"ArrowLeft\";\n      const current = resizedRef.current;\n      const targets: Record<string, number> = {\n        [grow]: current + step,\n        [shrink]: current - step,\n        Home: min,\n        End: max,\n      };\n\n      if (!(event.key in targets)) return;\n\n      event.preventDefault();\n\n      const next = clampPanelWidth(targets[event.key], min, max);\n\n      if (next !== current) {\n        resizedRef.current = next;\n        setResized(next);\n        onChange(Math.round(next));\n      }\n    },\n    [side, min, max, step, onChange]\n  );\n\n  const handleProps: ResizeHandleProps = useMemo(\n    () => ({\n      active: isResizing,\n      onPointerDown,\n      onKeyDown,\n      \"aria-valuemin\": min,\n      \"aria-valuemax\": max,\n      \"aria-valuenow\": resized,\n    }),\n    [isResizing, onPointerDown, onKeyDown, min, max, resized]\n  );\n\n  return { width: resized, isResizing, handleProps };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/utils/useContainerCss.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useContainerCss = void 0;
+var _react = require("react");
+// styled-components 5 cannot print container queries, so a component adds such rules to the page as plain CSS, once.
+var useContainerCss = exports.useContainerCss = function useContainerCss(id, css) {
+  return (0, _react.useInsertionEffect)(function () {
+    if (!document.getElementById(id)) {
+      var style = document.createElement("style");
+      style.id = id;
+      style.textContent = css;
+      document.head.appendChild(style);
+    }
+  }, [id, css]);
+};
+//# sourceMappingURL=useContainerCss.js.map

package/dist/cjs/utils/useContainerCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerCss.js","names":["_react","require","useContainerCss","exports","id","css","useInsertionEffect","document","getElementById","style","createElement","textContent","head","appendChild"],"sources":["../../../src/utils/useContainerCss.ts"],"sourcesContent":["import { useInsertionEffect } from \"react\";\n\n// styled-components 5 cannot print container queries, so a component adds such rules to the page as plain CSS, once.\nexport const useContainerCss = (id: string, css: string) =>\n  useInsertionEffect(() => {\n    if (!document.getElementById(id)) {\n      const style = document.createElement(\"style\");\n\n      style.id = id;\n      style.textContent = css;\n      document.head.appendChild(style);\n    }\n  }, [id, css]);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA;AACO,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAIE,EAAU,EAAEC,GAAW;EAAA,OACrD,IAAAC,yBAAkB,EAAC,YAAM;IACvB,IAAI,CAACC,QAAQ,CAACC,cAAc,CAACJ,EAAE,CAAC,EAAE;MAChC,IAAMK,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAE7CD,KAAK,CAACL,EAAE,GAAGA,EAAE;MACbK,KAAK,CAACE,WAAW,GAAGN,GAAG;MACvBE,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACJ,KAAK,CAAC;IAClC;EACF,CAAC,EAAE,CAACL,EAAE,EAAEC,GAAG,CAAC,CAAC;AAAA","ignoreList":[]}

package/dist/esm/components/Button/AddToListButton/AddToListButton.d.ts

@@ -1,9 +1,13 @@
-import React, { ButtonHTMLAttributes } from "react";
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
 export interface IAddToListButton extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Text to display */
     text: string;
     /** CSS classes */
     className?: string;
+    /** "row" is the full width last row of a card, with a plain plus. */
+    appearance?: "pill" | "row";
+    /** Row appearance only: a part at the end of the row, outside the button. */
+    trailing?: ReactNode;
 }
 export declare const AddToListButton: React.ForwardRefExoticComponent<IAddToListButton & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=AddToListButton.d.ts.map

package/dist/esm/components/Button/AddToListButton/AddToListButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddToListButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/AddToListButton/AddToListButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAUhE,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,4FAa3B,CAAC"}
+{"version":3,"file":"AddToListButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/AddToListButton/AddToListButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3E,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,4FA2B3B,CAAC"}

package/dist/esm/components/Button/AddToListButton/AddToListButton.js

@@ -1,13 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["text", "className"];
+const _excluded = ["text", "className", "appearance", "trailing"];
 import React, { forwardRef } from "react";
 import classnames from "classnames";
-import { StyledAddCrossIcon, StyledAddToListButton, StyledText } from "./Styles";
+import { StyledAddCrossIcon, StyledAddRow, StyledAddRowButton, StyledAddRowIcon, StyledAddToListButton, StyledText } from "./Styles";
+import { AddCrossTinyIcon } from "../../Icons/collection";
 export const AddToListButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let text = _ref.text,
     className = _ref.className,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? "pill" : _ref$appearance,
+    trailing = _ref.trailing,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (appearance === "row") {
+    return /*#__PURE__*/React.createElement(StyledAddRow, {
+      className: classnames("c--add-to-list-row", className)
+    }, /*#__PURE__*/React.createElement(StyledAddRowButton, _extends({
+      ref: ref,
+      type: "button"
+    }, rest), /*#__PURE__*/React.createElement(StyledAddRowIcon, null, /*#__PURE__*/React.createElement(AddCrossTinyIcon, null)), text), trailing);
+  }
   return /*#__PURE__*/React.createElement(StyledAddToListButton, _extends({
     ref: ref,
     className: classnames("c--add-to-list-btn", className)

package/dist/esm/components/Button/AddToListButton/AddToListButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddToListButton.js","names":["React","forwardRef","classnames","StyledAddCrossIcon","StyledAddToListButton","StyledText","AddToListButton","_ref","ref","text","className","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","weight","displayName"],"sources":["../../../../../src/components/Button/AddToListButton/AddToListButton.tsx"],"sourcesContent":["import React, { forwardRef, ButtonHTMLAttributes } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAddCrossIcon,\n  StyledAddToListButton,\n  StyledText,\n} from \"./Styles\";\n\nexport interface IAddToListButton\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Text to display */\n  text: string;\n  /** CSS classes */\n  className?: string;\n}\n\nexport const AddToListButton = forwardRef<HTMLButtonElement, IAddToListButton>(\n  ({ text, className, ...rest }, ref) => {\n    return (\n      <StyledAddToListButton\n        ref={ref}\n        className={classnames(\"c--add-to-list-btn\", className)}\n        {...rest}\n      >\n        <StyledAddCrossIcon />\n        <StyledText weight=\"medium\">{text}</StyledText>\n      </StyledAddToListButton>\n    );\n  }\n);\n\nAddToListButton.displayName = \"AddToListButton\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAA8B,OAAO;AAE/D,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,kBAAkB,EAClBC,qBAAqB,EACrBC,UAAU,QACL,UAAU;AAUjB,OAAO,MAAMC,eAAe,gBAAGL,UAAU,CACvC,CAAAM,IAAA,EAA+BC,GAAG,KAAK;EAAA,IAApCC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAKC,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EACzB,oBACEb,KAAA,CAAAc,aAAA,CAACV,qBAAqB,EAAAW,QAAA;IACpBP,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAER,UAAU,CAAC,oBAAoB,EAAEQ,SAAS;EAAE,GACnDC,IAAI,gBAERX,KAAA,CAAAc,aAAA,CAACX,kBAAkB,MAAE,CAAC,eACtBH,KAAA,CAAAc,aAAA,CAACT,UAAU;IAACW,MAAM,EAAC;EAAQ,GAAEP,IAAiB,CACzB,CAAC;AAE5B,CACF,CAAC;AAEDH,eAAe,CAACW,WAAW,GAAG,iBAAiB","ignoreList":[]}
+{"version":3,"file":"AddToListButton.js","names":["React","forwardRef","classnames","StyledAddCrossIcon","StyledAddRow","StyledAddRowButton","StyledAddRowIcon","StyledAddToListButton","StyledText","AddCrossTinyIcon","AddToListButton","_ref","ref","text","className","_ref$appearance","appearance","trailing","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","type","weight","displayName"],"sources":["../../../../../src/components/Button/AddToListButton/AddToListButton.tsx"],"sourcesContent":["import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAddCrossIcon,\n  StyledAddRow,\n  StyledAddRowButton,\n  StyledAddRowIcon,\n  StyledAddToListButton,\n  StyledText,\n} from \"./Styles\";\nimport { AddCrossTinyIcon } from \"../../Icons/collection\";\n\nexport interface IAddToListButton\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Text to display */\n  text: string;\n  /** CSS classes */\n  className?: string;\n  /** \"row\" is the full width last row of a card, with a plain plus. */\n  appearance?: \"pill\" | \"row\";\n  /** Row appearance only: a part at the end of the row, outside the button. */\n  trailing?: ReactNode;\n}\n\nexport const AddToListButton = forwardRef<HTMLButtonElement, IAddToListButton>(\n  ({ text, className, appearance = \"pill\", trailing, ...rest }, ref) => {\n    if (appearance === \"row\") {\n      return (\n        <StyledAddRow className={classnames(\"c--add-to-list-row\", className)}>\n          <StyledAddRowButton ref={ref} type=\"button\" {...rest}>\n            <StyledAddRowIcon>\n              <AddCrossTinyIcon />\n            </StyledAddRowIcon>\n            {text}\n          </StyledAddRowButton>\n          {trailing}\n        </StyledAddRow>\n      );\n    }\n\n    return (\n      <StyledAddToListButton\n        ref={ref}\n        className={classnames(\"c--add-to-list-btn\", className)}\n        {...rest}\n      >\n        <StyledAddCrossIcon />\n        <StyledText weight=\"medium\">{text}</StyledText>\n      </StyledAddToListButton>\n    );\n  }\n);\n\nAddToListButton.displayName = \"AddToListButton\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAyC,OAAO;AAE1E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,kBAAkB,EAClBC,YAAY,EACZC,kBAAkB,EAClBC,gBAAgB,EAChBC,qBAAqB,EACrBC,UAAU,QACL,UAAU;AACjB,SAASC,gBAAgB,QAAQ,wBAAwB;AAczD,OAAO,MAAMC,eAAe,gBAAGT,UAAU,CACvC,CAAAU,IAAA,EAA8DC,GAAG,KAAK;EAAA,IAAnEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,eAAA,GAAAJ,IAAA,CAAEK,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,MAAM,GAAAA,eAAA;IAAEE,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;EACxD,IAAIJ,UAAU,KAAK,KAAK,EAAE;IACxB,oBACEhB,KAAA,CAAAqB,aAAA,CAACjB,YAAY;MAACU,SAAS,EAAEZ,UAAU,CAAC,oBAAoB,EAAEY,SAAS;IAAE,gBACnEd,KAAA,CAAAqB,aAAA,CAAChB,kBAAkB,EAAAiB,QAAA;MAACV,GAAG,EAAEA,GAAI;MAACW,IAAI,EAAC;IAAQ,GAAKL,IAAI,gBAClDlB,KAAA,CAAAqB,aAAA,CAACf,gBAAgB,qBACfN,KAAA,CAAAqB,aAAA,CAACZ,gBAAgB,MAAE,CACH,CAAC,EAClBI,IACiB,CAAC,EACpBI,QACW,CAAC;EAEnB;EAEA,oBACEjB,KAAA,CAAAqB,aAAA,CAACd,qBAAqB,EAAAe,QAAA;IACpBV,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEZ,UAAU,CAAC,oBAAoB,EAAEY,SAAS;EAAE,GACnDI,IAAI,gBAERlB,KAAA,CAAAqB,aAAA,CAAClB,kBAAkB,MAAE,CAAC,eACtBH,KAAA,CAAAqB,aAAA,CAACb,UAAU;IAACgB,MAAM,EAAC;EAAQ,GAAEX,IAAiB,CACzB,CAAC;AAE5B,CACF,CAAC;AAEDH,eAAe,CAACe,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/dist/esm/components/Button/AddToListButton/Styles.d.ts

@@ -3,4 +3,7 @@ export declare const StyledAddCrossIcon: import("styled-components").StyledCompo
     gradient?: string;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const StyledAddToListButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledAddRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAddRowButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledAddRowIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Button/AddToListButton/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/AddToListButton/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,yQAItB,CAAC;AAIF,eAAO,MAAM,kBAAkB;;0EAM9B,CAAC;AAGF,eAAO,MAAM,qBAAqB,uEA2CjC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/AddToListButton/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,yQAItB,CAAC;AAIF,eAAO,MAAM,kBAAkB;;0EAM9B,CAAC;AAGF,eAAO,MAAM,qBAAqB,uEA2CjC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAYxB,CAAC;AAIF,eAAO,MAAM,kBAAkB,uEAiB9B,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAU5B,CAAC"}

package/dist/esm/components/Button/AddToListButton/Styles.js

@@ -16,4 +16,19 @@ export const StyledAddToListButton = styled("button").withConfig({
   componentId: "sc-1fx7urq-2"
 })(["display:flex;justify-content:center;gap:12px;align-items:center;height:32px;padding:4px 16px 4px 4px;position:relative;background:none;border:none;cursor:pointer;&:before{content:\"\";display:block;height:2px;width:0%;position:absolute;left:16px;background:var(--color-primary);transition:ease 0.3s all;border-radius:30px;opacity:0;}&:hover{", "{color:var(--page-paper-main);}&:before{height:32px;width:100%;left:0;opacity:1;}", "{fill:var(--page-paper-main);transform:rotate(90deg);transition:ease 0.3s;}}"], StyledText, StyledAddCrossIcon);
 StyledAddToListButton.displayName = "StyledAddToListButton";
+export const StyledAddRow = styled.div.withConfig({
+  displayName: "Styles__StyledAddRow",
+  componentId: "sc-1fx7urq-3"
+})(["display:flex;align-items:center;gap:8px;min-height:40px;padding-right:16px;border-radius:inherit;&:hover,&:focus-within{background-color:var(--color-theme-200);}"]);
+StyledAddRow.displayName = "StyledAddRow";
+export const StyledAddRowButton = styled.button.withConfig({
+  displayName: "Styles__StyledAddRowButton",
+  componentId: "sc-1fx7urq-4"
+})(["display:flex;flex:1;align-items:center;gap:8px;min-width:0;height:40px;padding:0 0 0 16px;border:0;border-radius:inherit;background:transparent;color:var(--color-primary);font-family:inherit;font-size:16px;line-height:24px;text-align:left;cursor:pointer;"]);
+StyledAddRowButton.displayName = "StyledAddRowButton";
+export const StyledAddRowIcon = styled.span.withConfig({
+  displayName: "Styles__StyledAddRowIcon",
+  componentId: "sc-1fx7urq-5"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;width:20px;svg{fill:var(--color-primary);}"]);
+StyledAddRowIcon.displayName = "StyledAddRowIcon";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Button/AddToListButton/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","AddCrossIcon","Body2","StyledText","withConfig","displayName","componentId","StyledAddCrossIcon","StyledAddToListButton"],"sources":["../../../../../src/components/Button/AddToListButton/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { AddCrossIcon } from \"../../Icons/collection\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledText = styled(Body2)`\n  transition: ease 0.3s all;\n  color: var(--color-primary);\n  position: relative;\n`;\n\nStyledText.displayName = \"StyledText\";\n\nexport const StyledAddCrossIcon = styled(AddCrossIcon)`\n  fill: var(--page-paper-main);\n  background: var(--color-primary);\n  border-radius: 30px;\n  padding: 7px;\n  box-sizing: content-box;\n`;\nStyledAddCrossIcon.displayName = \"StyledAddCrossIcon\";\n\nexport const StyledAddToListButton = styled(\"button\")`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  align-items: center;\n  height: 32px;\n  padding: 4px 16px 4px 4px;\n  position: relative;\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &:before {\n    content: \"\";\n    display: block;\n    height: 2px;\n    width: 0%;\n    position: absolute;\n    left: 16px;\n    background: var(--color-primary);\n    transition: ease 0.3s all;\n    border-radius: 30px;\n    opacity: 0;\n  }\n\n  &:hover {\n    ${StyledText} {\n      color: var(--page-paper-main);\n    }\n\n    &:before {\n      height: 32px;\n      width: 100%;\n      left: 0;\n      opacity: 1;\n    }\n\n    ${StyledAddCrossIcon} {\n      fill: var(--page-paper-main);\n      transform: rotate(90deg);\n      transition: ease 0.3s;\n    }\n  }\n`;\n\nStyledAddToListButton.displayName = \"StyledAddToListButton\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,UAAU,GAAGH,MAAM,CAACE,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAItC;AAEDH,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAME,kBAAkB,GAAGP,MAAM,CAACC,YAAY,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0HAMrD;AACDC,kBAAkB,CAACF,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMG,qBAAqB,GAAGR,MAAM,CAAC,QAAQ,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mgBA0B/CH,UAAU,EAWVI,kBAAkB,CAMvB;AAEDC,qBAAqB,CAACH,WAAW,GAAG,uBAAuB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","AddCrossIcon","Body2","StyledText","withConfig","displayName","componentId","StyledAddCrossIcon","StyledAddToListButton","StyledAddRow","div","StyledAddRowButton","button","StyledAddRowIcon","span"],"sources":["../../../../../src/components/Button/AddToListButton/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { AddCrossIcon } from \"../../Icons/collection\";\nimport { Body2 } from \"../../Typography\";\n\nexport const StyledText = styled(Body2)`\n  transition: ease 0.3s all;\n  color: var(--color-primary);\n  position: relative;\n`;\n\nStyledText.displayName = \"StyledText\";\n\nexport const StyledAddCrossIcon = styled(AddCrossIcon)`\n  fill: var(--page-paper-main);\n  background: var(--color-primary);\n  border-radius: 30px;\n  padding: 7px;\n  box-sizing: content-box;\n`;\nStyledAddCrossIcon.displayName = \"StyledAddCrossIcon\";\n\nexport const StyledAddToListButton = styled(\"button\")`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  align-items: center;\n  height: 32px;\n  padding: 4px 16px 4px 4px;\n  position: relative;\n  background: none;\n  border: none;\n  cursor: pointer;\n\n  &:before {\n    content: \"\";\n    display: block;\n    height: 2px;\n    width: 0%;\n    position: absolute;\n    left: 16px;\n    background: var(--color-primary);\n    transition: ease 0.3s all;\n    border-radius: 30px;\n    opacity: 0;\n  }\n\n  &:hover {\n    ${StyledText} {\n      color: var(--page-paper-main);\n    }\n\n    &:before {\n      height: 32px;\n      width: 100%;\n      left: 0;\n      opacity: 1;\n    }\n\n    ${StyledAddCrossIcon} {\n      fill: var(--page-paper-main);\n      transform: rotate(90deg);\n      transition: ease 0.3s;\n    }\n  }\n`;\n\nStyledAddToListButton.displayName = \"StyledAddToListButton\";\n\nexport const StyledAddRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 40px;\n  padding-right: 16px;\n  border-radius: inherit;\n\n  &:hover,\n  &:focus-within {\n    background-color: var(--color-theme-200);\n  }\n`;\n\nStyledAddRow.displayName = \"StyledAddRow\";\n\nexport const StyledAddRowButton = styled.button`\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  height: 40px;\n  padding: 0 0 0 16px;\n  border: 0;\n  border-radius: inherit;\n  background: transparent;\n  color: var(--color-primary);\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 24px;\n  text-align: left;\n  cursor: pointer;\n`;\n\nStyledAddRowButton.displayName = \"StyledAddRowButton\";\n\nexport const StyledAddRowIcon = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n\n  svg {\n    fill: var(--color-primary);\n  }\n`;\n\nStyledAddRowIcon.displayName = \"StyledAddRowIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,UAAU,GAAGH,MAAM,CAACE,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAItC;AAEDH,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAME,kBAAkB,GAAGP,MAAM,CAACC,YAAY,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0HAMrD;AACDC,kBAAkB,CAACF,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMG,qBAAqB,GAAGR,MAAM,CAAC,QAAQ,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mgBA0B/CH,UAAU,EAWVI,kBAAkB,CAMvB;AAEDC,qBAAqB,CAACH,WAAW,GAAG,uBAAuB;AAE3D,OAAO,MAAMI,YAAY,GAAGT,MAAM,CAACU,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yKAYrC;AAEDG,YAAY,CAACJ,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMM,kBAAkB,GAAGX,MAAM,CAACY,MAAM,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sQAiB9C;AAEDK,kBAAkB,CAACN,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMQ,gBAAgB,GAAGb,MAAM,CAACc,IAAI,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uHAU1C;AAEDO,gBAAgB,CAACR,WAAW,GAAG,kBAAkB","ignoreList":[]}

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

@@ -1,5 +1,7 @@
 import React from "react";
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     invalid?: boolean;
+    /** "raised" joins its buttons in one raised box with a line between them. */
+    appearance?: "default" | "raised";
 } & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,WAAW;cAE8B,OAAO;wCAU3D,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,WAAW;cAGV,OAAO;IACjB,6EAA6E;iBAChE,SAAS,GAAG,QAAQ;wCAYnC,CAAC"}

package/dist/esm/components/ButtonGroup/ButtonGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "invalid"];
+const _excluded = ["children", "className", "invalid", "appearance"];
 import React, { forwardRef } from "react";
 import classNames from "classnames";
 import { StyledButtonGroup } from "./Styles";
@@ -8,11 +8,14 @@ export const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? "default" : _ref$appearance,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
     ref: ref,
     className: classNames("c-btn-group", className),
-    $invalid: invalid
+    $invalid: invalid,
+    $raised: appearance === "raised"
   }, rest), children);
 });
 ButtonGroup.displayName = "ButtonGroup";

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":["React","forwardRef","classNames","StyledButtonGroup","ButtonGroup","_ref","ref","children","className","invalid","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$invalid","displayName"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledButtonGroup } from \"./Styles\";\n\nexport const ButtonGroup = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\"> & { invalid?: boolean }\n>(({ children, className, invalid, ...rest }, ref) => (\n  <StyledButtonGroup\n    ref={ref}\n    className={classNames(\"c-btn-group\", className)}\n    $invalid={invalid}\n    {...rest}\n  >\n    {children}\n  </StyledButtonGroup>\n));\n\nButtonGroup.displayName = \"ButtonGroup\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAO,MAAMC,WAAW,gBAAGH,UAAU,CAGnC,CAAAI,IAAA,EAA4CC,GAAG;EAAA,IAA5CC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAKC,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBACxCZ,KAAA,CAAAa,aAAA,CAACV,iBAAiB,EAAAW,QAAA;IAChBR,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEN,UAAU,CAAC,aAAa,EAAEM,SAAS,CAAE;IAChDO,QAAQ,EAAEN;EAAQ,GACdC,IAAI,GAEPH,QACgB,CAAC;AAAA,CACrB,CAAC;AAEFH,WAAW,CAACY,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"file":"ButtonGroup.js","names":["React","forwardRef","classNames","StyledButtonGroup","ButtonGroup","_ref","ref","children","className","invalid","_ref$appearance","appearance","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$invalid","$raised","displayName"],"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledButtonGroup } from \"./Styles\";\n\nexport const ButtonGroup = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\"> & {\n    invalid?: boolean;\n    /** \"raised\" joins its buttons in one raised box with a line between them. */\n    appearance?: \"default\" | \"raised\";\n  }\n>(({ children, className, invalid, appearance = \"default\", ...rest }, ref) => (\n  <StyledButtonGroup\n    ref={ref}\n    className={classNames(\"c-btn-group\", className)}\n    $invalid={invalid}\n    $raised={appearance === \"raised\"}\n    {...rest}\n  >\n    {children}\n  </StyledButtonGroup>\n));\n\nButtonGroup.displayName = \"ButtonGroup\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAO,MAAMC,WAAW,gBAAGH,UAAU,CAOnC,CAAAI,IAAA,EAAoEC,GAAG;EAAA,IAApEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,eAAA,GAAAL,IAAA,CAAEM,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,SAAS,GAAAA,eAAA;IAAKE,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBAChEd,KAAA,CAAAe,aAAA,CAACZ,iBAAiB,EAAAa,QAAA;IAChBV,GAAG,EAAEA,GAAI;IACTE,SAAS,EAAEN,UAAU,CAAC,aAAa,EAAEM,SAAS,CAAE;IAChDS,QAAQ,EAAER,OAAQ;IAClBS,OAAO,EAAEP,UAAU,KAAK;EAAS,GAC7BC,IAAI,GAEPL,QACgB,CAAC;AAAA,CACrB,CAAC;AAEFH,WAAW,CAACe,WAAW,GAAG,aAAa","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {
     $invalid?: boolean;
+    $raised?: boolean;
 }, never>;
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;eAA2B,OAAO;SAsD/D,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ButtonGroup/Styles.ts"],"names":[],"mappings":"AAiHA,eAAO,MAAM,iBAAiB;eACjB,OAAO;cACR,OAAO;SAOlB,CAAC"}

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

@@ -1,13 +1,7 @@
 import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
-export const StyledButtonGroup = styled.div.withConfig({
-  displayName: "Styles__StyledButtonGroup",
-  componentId: "sc-1vw4iq2-0"
-})(["", " ", " ", " button{&:disabled{opacity:1;color:var(--color-theme-500);pointer-events:none;}&:first-child:not(:last-child){svg{margin-right:-4px;}", " ", "}&:last-child:not(:first-child){svg{margin-left:-4px;}", " ", "}&:not(:first-child):not(:last-child){", " ", "}}svg{", "}"], {
-  "display": "flex",
-  "flexDirection": "row"
-}, FontStyle, BoxSizingStyle, {
+const joined = css(["button{&:disabled{opacity:1;color:var(--color-theme-500);pointer-events:none;}&:first-child:not(:last-child){svg{margin-right:-4px;}", " ", "}&:last-child:not(:first-child){svg{margin-left:-4px;}", " ", "}&:not(:first-child):not(:last-child){", " ", "}}svg{", "}"], {
   "marginRight": "-1px",
   "borderTopRightRadius": "0px",
   "borderBottomRightRadius": "0px"
@@ -21,5 +15,13 @@ export const StyledButtonGroup = styled.div.withConfig({
   "fill": "currentColor",
   "color": "var(--color-theme-900)"
 });
+const raised = css(["display:inline-flex;align-items:stretch;overflow:hidden;border:1px solid var(--border-raised);border-radius:12px;background-color:var(--surface-raised);box-shadow:var(--shadow-float);&:empty{display:none;}> * + *{border-left:1px solid var(--border-raised);}button{display:inline-flex;flex-shrink:0;align-items:center;gap:10px;height:36px;padding:0 16px 0 12px;border-top:0;border-right:0;border-bottom:0;border-radius:0;background-color:transparent;box-shadow:none;color:var(--color-theme-700);font-family:inherit;letter-spacing:inherit;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;&:hover,&:focus-visible{background-color:var(--color-theme-200);}svg{width:16px;height:16px;fill:var(--color-theme-700);}}> button:first-child{border-left:0;}"]);
+export const StyledButtonGroup = styled.div.withConfig({
+  displayName: "Styles__StyledButtonGroup",
+  componentId: "sc-1vw4iq2-0"
+})(["", " ", " ", " ", ""], {
+  "display": "flex",
+  "flexDirection": "row"
+}, FontStyle, BoxSizingStyle, props => props.$raised ? raised : joined);
 StyledButtonGroup.displayName = "StyledButtonGroup";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButtonGroup","div","withConfig","displayName","componentId","props","$invalid"],"sources":["../../../../src/components/ButtonGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledButtonGroup = styled.div<{ $invalid?: boolean }>`\n  ${tw`tw-flex tw-flex-row`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button {\n    &:disabled {\n      opacity: 1;\n      color: var(--color-theme-500);\n      pointer-events: none;\n    }\n\n    &:first-child:not(:last-child) {\n      svg {\n        margin-right: -4px;\n      }\n      ${tw`tw--mr-px tw-rounded-r-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n          border-left-color: var(--red-alert) !important;\n        `}\n    }\n\n    &:last-child:not(:first-child) {\n      svg {\n        margin-left: -4px;\n      }\n      ${tw`tw-rounded-l-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n          border-right-color: var(--red-alert) !important;\n        `}\n    }\n\n    &:not(:first-child):not(:last-child) {\n      ${tw`tw--mr-px tw-rounded-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n        `}\n    }\n  }\n\n  svg {\n    ${tw`tw-text-theme-900 tw-fill-current`}\n  }\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8RACrC;EAAA;EAAA;AAAoB,CAAC,EACvBL,SAAS,EACTD,cAAc,EAaR;EAAA;EAAA;EAAA;AAA4B,CAAC,EAC9BO,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,iJAIF,EAOC;EAAA;EAAA;AAAkB,CAAC,EACpBQ,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,kJAIF,EAIC;EAAA;EAAA;AAA0B,CAAC,EAC5BQ,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,mGAGF,EAKD;EAAA;EAAA;AAAkC,CAAC,CAE1C;AAEDG,iBAAiB,CAACG,WAAW,GAAG,mBAAmB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","joined","props","$invalid","raised","StyledButtonGroup","div","withConfig","displayName","componentId","$raised"],"sources":["../../../../src/components/ButtonGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nconst joined = css<{ $invalid?: boolean }>`\n  button {\n    &:disabled {\n      opacity: 1;\n      color: var(--color-theme-500);\n      pointer-events: none;\n    }\n\n    &:first-child:not(:last-child) {\n      svg {\n        margin-right: -4px;\n      }\n      ${tw`tw--mr-px tw-rounded-r-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n          border-left-color: var(--red-alert) !important;\n        `}\n    }\n\n    &:last-child:not(:first-child) {\n      svg {\n        margin-left: -4px;\n      }\n      ${tw`tw-rounded-l-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n          border-right-color: var(--red-alert) !important;\n        `}\n    }\n\n    &:not(:first-child):not(:last-child) {\n      ${tw`tw--mr-px tw-rounded-none`}\n      ${(props) =>\n        props.$invalid &&\n        css`\n          border-top-color: var(--red-alert) !important;\n          border-bottom-color: var(--red-alert) !important;\n        `}\n    }\n  }\n\n  svg {\n    ${tw`tw-text-theme-900 tw-fill-current`}\n  }\n`;\n\nconst raised = css`\n  display: inline-flex;\n  align-items: stretch;\n  overflow: hidden;\n  border: 1px solid var(--border-raised);\n  border-radius: 12px;\n  background-color: var(--surface-raised);\n  box-shadow: var(--shadow-float);\n\n  &:empty {\n    display: none;\n  }\n\n  > * + * {\n    border-left: 1px solid var(--border-raised);\n  }\n\n  button {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    gap: 10px;\n    height: 36px;\n    padding: 0 16px 0 12px;\n    border-top: 0;\n    border-right: 0;\n    border-bottom: 0;\n    border-radius: 0;\n    background-color: transparent;\n    box-shadow: none;\n    color: var(--color-theme-700);\n    font-family: inherit;\n    letter-spacing: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    cursor: pointer;\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--color-theme-200);\n    }\n\n    svg {\n      width: 16px;\n      height: 16px;\n      fill: var(--color-theme-700);\n    }\n  }\n\n  > button:first-child {\n    border-left: 0;\n  }\n`;\n\nexport const StyledButtonGroup = styled.div<{\n  $invalid?: boolean;\n  $raised?: boolean;\n}>`\n  ${tw`tw-flex tw-flex-row`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) => (props.$raised ? raised : joined)}\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,MAAMC,MAAM,GAAGH,GAAG,6QAYR;EAAA;EAAA;EAAA;AAA4B,CAAC,EAC9BI,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdL,GAAG,iJAIF,EAOC;EAAA;EAAA;AAAkB,CAAC,EACpBI,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdL,GAAG,kJAIF,EAIC;EAAA;EAAA;AAA0B,CAAC,EAC5BI,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdL,GAAG,mGAGF,EAKD;EAAA;EAAA;AAAkC,CAAC,CAE1C;AAED,MAAMM,MAAM,GAAGN,GAAG,4vBAqDjB;AAED,OAAO,MAAMO,iBAAiB,GAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4BAIrC;EAAA;EAAA;AAAoB,CAAC,EACvBT,SAAS,EACTD,cAAc,EAEbG,KAAK,IAAMA,KAAK,CAACQ,OAAO,GAAGN,MAAM,GAAGH,MAAO,CAC/C;AAEDI,iBAAiB,CAACG,WAAW,GAAG,mBAAmB","ignoreList":[]}

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

@@ -3,7 +3,11 @@ export interface ICardProps {
     /** Choose if card should be hoverable or not */
     hoverable?: boolean;
     /** Set the type of the Paper */
-    variant?: "paper-1" | "paper-2" | "tile-1" | "tile-2";
+    variant?: "paper-1" | "paper-2" | "tile-1" | "tile-2" | "raised";
+    /** Raised variant only: the corner radius in pixels. */
+    radius?: number;
+    /** Raised variant only: set to false for a card with no shadow. */
+    shadow?: boolean;
     /** Ref element */
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAA8B,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACtD,kBAAkB;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,uIA2BhB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAA8B,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACjE,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,uIAgChB,CAAC"}

package/dist/esm/components/Card/Card.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "hoverable", "variant", "onClick"];
+const _excluded = ["children", "className", "hoverable", "variant", "radius", "shadow", "onClick"];
 import React, { forwardRef } from "react";
 import classnames from "classnames";
 import { StyledCard } from "./Styles";
@@ -11,10 +11,17 @@ export const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "paper-2" : _ref$variant,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? 20 : _ref$radius,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledCard, _extends({}, rest, {
-    type: variant,
+    type: variant === "raised" ? "tile-2" : variant,
+    $raised: variant === "raised",
+    $radius: radius,
+    $shadow: shadow,
     className: classnames("c-card", className),
     hover: hoverable,
     $pointer: typeof onClick === "function",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","forwardRef","classnames","StyledCard","Card","_ref","ref","children","className","_ref$hoverable","hoverable","_ref$variant","variant","onClick","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","type","hover","$pointer","useOptimizedShadow","displayName"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { Ref, HTMLAttributes, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCard } from \"./Styles\";\n\nexport interface ICardProps {\n  /** Choose if card should be hoverable or not */\n  hoverable?: boolean;\n  /** Set the type of the Paper */\n  variant?: \"paper-1\" | \"paper-2\" | \"tile-1\" | \"tile-2\";\n  /** Ref element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const Card = forwardRef(\n  (\n    {\n      children,\n      className,\n      hoverable = false,\n      variant = \"paper-2\",\n      onClick,\n      ...rest\n    }: HTMLAttributes<HTMLDivElement> & ICardProps,\n    ref: Ref<HTMLDivElement> | null | undefined\n  ) => {\n    return (\n      <StyledCard\n        {...rest}\n        type={variant}\n        className={classnames(\"c-card\", className)}\n        hover={hoverable}\n        $pointer={typeof onClick === \"function\"}\n        onClick={onClick}\n        useOptimizedShadow\n        ref={ref}\n      >\n        {children}\n      </StyledCard>\n    );\n  }\n);\n\nCard.displayName = \"Card\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAyBC,UAAU,QAAQ,OAAO;AAE9D,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,UAAU,QAAQ,UAAU;AAWrC,OAAO,MAAMC,IAAI,gBAAGH,UAAU,CAC5B,CAAAI,IAAA,EASEC,GAA2C,KACxC;EAAA,IARDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,YAAA,GAAAN,IAAA,CACjBO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IACnBE,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACJC,IAAI,GAAAC,6BAAA,CAAAV,IAAA,EAAAW,SAAA;EAIT,oBACEhB,KAAA,CAAAiB,aAAA,CAACd,UAAU,EAAAe,QAAA,KACLJ,IAAI;IACRK,IAAI,EAAEP,OAAQ;IACdJ,SAAS,EAAEN,UAAU,CAAC,QAAQ,EAAEM,SAAS,CAAE;IAC3CY,KAAK,EAAEV,SAAU;IACjBW,QAAQ,EAAE,OAAOR,OAAO,KAAK,UAAW;IACxCA,OAAO,EAAEA,OAAQ;IACjBS,kBAAkB;IAClBhB,GAAG,EAAEA;EAAI,IAERC,QACS,CAAC;AAEjB,CACF,CAAC;AAEDH,IAAI,CAACmB,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","forwardRef","classnames","StyledCard","Card","_ref","ref","children","className","_ref$hoverable","hoverable","_ref$variant","variant","_ref$radius","radius","_ref$shadow","shadow","onClick","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","type","$raised","$radius","$shadow","hover","$pointer","useOptimizedShadow","displayName"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { Ref, HTMLAttributes, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCard } from \"./Styles\";\n\nexport interface ICardProps {\n  /** Choose if card should be hoverable or not */\n  hoverable?: boolean;\n  /** Set the type of the Paper */\n  variant?: \"paper-1\" | \"paper-2\" | \"tile-1\" | \"tile-2\" | \"raised\";\n  /** Raised variant only: the corner radius in pixels. */\n  radius?: number;\n  /** Raised variant only: set to false for a card with no shadow. */\n  shadow?: boolean;\n  /** Ref element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const Card = forwardRef(\n  (\n    {\n      children,\n      className,\n      hoverable = false,\n      variant = \"paper-2\",\n      radius = 20,\n      shadow = true,\n      onClick,\n      ...rest\n    }: HTMLAttributes<HTMLDivElement> & ICardProps,\n    ref: Ref<HTMLDivElement> | null | undefined\n  ) => {\n    return (\n      <StyledCard\n        {...rest}\n        type={variant === \"raised\" ? \"tile-2\" : variant}\n        $raised={variant === \"raised\"}\n        $radius={radius}\n        $shadow={shadow}\n        className={classnames(\"c-card\", className)}\n        hover={hoverable}\n        $pointer={typeof onClick === \"function\"}\n        onClick={onClick}\n        useOptimizedShadow\n        ref={ref}\n      >\n        {children}\n      </StyledCard>\n    );\n  }\n);\n\nCard.displayName = \"Card\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAyBC,UAAU,QAAQ,OAAO;AAE9D,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,UAAU,QAAQ,UAAU;AAerC,OAAO,MAAMC,IAAI,gBAAGH,UAAU,CAC5B,CAAAI,IAAA,EAWEC,GAA2C,KACxC;EAAA,IAVDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,cAAA,GAAAJ,IAAA,CACTK,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,YAAA,GAAAN,IAAA,CACjBO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IAAAE,WAAA,GAAAR,IAAA,CACnBS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IAAAE,WAAA,GAAAV,IAAA,CACXW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IACbE,OAAO,GAAAZ,IAAA,CAAPY,OAAO;IACJC,IAAI,GAAAC,6BAAA,CAAAd,IAAA,EAAAe,SAAA;EAIT,oBACEpB,KAAA,CAAAqB,aAAA,CAAClB,UAAU,EAAAmB,QAAA,KACLJ,IAAI;IACRK,IAAI,EAAEX,OAAO,KAAK,QAAQ,GAAG,QAAQ,GAAGA,OAAQ;IAChDY,OAAO,EAAEZ,OAAO,KAAK,QAAS;IAC9Ba,OAAO,EAAEX,MAAO;IAChBY,OAAO,EAAEV,MAAO;IAChBR,SAAS,EAAEN,UAAU,CAAC,QAAQ,EAAEM,SAAS,CAAE;IAC3CmB,KAAK,EAAEjB,SAAU;IACjBkB,QAAQ,EAAE,OAAOX,OAAO,KAAK,UAAW;IACxCA,OAAO,EAAEA,OAAQ;IACjBY,kBAAkB;IAClBvB,GAAG,EAAEA;EAAI,IAERC,QACS,CAAC;AAEjB,CACF,CAAC;AAEDH,IAAI,CAAC0B,WAAW,GAAG,MAAM","ignoreList":[]}

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

@@ -1,5 +1,8 @@
 interface StyledCardProps {
     $pointer?: boolean;
+    $raised?: boolean;
+    $radius?: number;
+    $shadow?: boolean;
 }
 export declare const StyledCard: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("..").IPaperProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledCardProps, never>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Styles.ts"],"names":[],"mappings":"AAKA,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,gPAQtB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Styles.ts"],"names":[],"mappings":"AAKA,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,gPAuBtB,CAAC"}

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

@@ -3,11 +3,16 @@ import { Paper } from "../Paper";
 export const StyledCard = styled(Paper).withConfig({
   displayName: "Styles__StyledCard",
   componentId: "sc-hllbj1-0"
-})(["", " ", ""], {
+})(["", " ", " ", ""], {
   "color": "var(--color-theme-900)"
 }, _ref => {
   let $pointer = _ref.$pointer;
   return $pointer && css(["cursor:pointer;"]);
+}, _ref2 => {
+  let $raised = _ref2.$raised,
+    $radius = _ref2.$radius,
+    $shadow = _ref2.$shadow;
+  return $raised && css(["&&{border:1px solid var(--border-raised);border-radius:", "px;background-color:var(--surface-raised);box-shadow:", ";}&&:hover{background-color:var(--surface-raised);}"], $radius, $shadow ? "var(--shadow-float)" : "none");
 });
 StyledCard.displayName = "StyledCard";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","Paper","StyledCard","withConfig","displayName","componentId","_ref","$pointer"],"sources":["../../../../src/components/Card/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Paper } from \"../Paper\";\n\ninterface StyledCardProps {\n  $pointer?: boolean;\n}\n\nexport const StyledCard = styled(Paper)<StyledCardProps>`\n  ${tw`tw-text-theme-900`}\n\n  ${({ $pointer }) =>\n    $pointer &&\n    css`\n      cursor: pointer;\n    `}\n`;\n\nStyledCard.displayName = \"StyledCard\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,KAAK,QAAQ,UAAU;AAMhC,OAAO,MAAMC,UAAU,GAAGH,MAAM,CAACE,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACjC;EAAA;AAAkB,CAAC,EAErBC,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,IACRP,GAAG,qBAEF;AAAA,EACJ;AAEDE,UAAU,CAACE,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","Paper","StyledCard","withConfig","displayName","componentId","_ref","$pointer","_ref2","$raised","$radius","$shadow"],"sources":["../../../../src/components/Card/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Paper } from \"../Paper\";\n\ninterface StyledCardProps {\n  $pointer?: boolean;\n  $raised?: boolean;\n  $radius?: number;\n  $shadow?: boolean;\n}\n\nexport const StyledCard = styled(Paper)<StyledCardProps>`\n  ${tw`tw-text-theme-900`}\n\n  ${({ $pointer }) =>\n    $pointer &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ $raised, $radius, $shadow }) =>\n    $raised &&\n    css`\n      && {\n        border: 1px solid var(--border-raised);\n        border-radius: ${$radius}px;\n        background-color: var(--surface-raised);\n        box-shadow: ${$shadow ? \"var(--shadow-float)\" : \"none\"};\n      }\n\n      &&:hover {\n        background-color: var(--surface-raised);\n      }\n    `}\n`;\n\nStyledCard.displayName = \"StyledCard\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,KAAK,QAAQ,UAAU;AAShC,OAAO,MAAMC,UAAU,GAAGH,MAAM,CAACE,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBACjC;EAAA;AAAkB,CAAC,EAErBC,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,IACRP,GAAG,qBAEF;AAAA,GAEDQ,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;IAAEC,OAAO,GAAAF,KAAA,CAAPE,OAAO;IAAEC,OAAO,GAAAH,KAAA,CAAPG,OAAO;EAAA,OAC5BF,OAAO,IACPT,GAAG,8KAGkBU,OAAO,EAEVC,OAAO,GAAG,qBAAqB,GAAG,MAAM,CAMzD;AAAA,EACJ;AAEDT,UAAU,CAACE,WAAW,GAAG,YAAY","ignoreList":[]}

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

@@ -1,11 +1,23 @@
 import React, { ReactNode } from "react";
 import { InputSize } from "../Input/types";
 import { ITypographyProps } from "../Typography/Typography";
+export type ChipSize = InputSize | "tiny" | "compact";
+export type ChipShape = "rounded" | "soft" | "pill";
+export type ChipTone = "neutral" | "muted" | "info" | "primary" | "bordered" | "warning" | "alert" | "success";
 export interface ChipProps {
     label: string;
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
     startAdornment?: ReactNode;
-    size?: InputSize;
+    size?: ChipSize;
+    /** Corner shape: 4px, 6px or a full pill. */
+    shape?: ChipShape;
+    /** A semantic surface and text color from the theme. */
+    tone?: ChipTone;
+    /** A data color: the text takes it and the background is its 13% tint. */
+    tint?: string;
+    uppercase?: boolean;
+    /** "overlay" draws the close button over the end of the label, on hover and focus. */
+    closeMode?: "inline" | "overlay";
     color?: string;
     backgroundColor?: string;
     closeClassName?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAc,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAExE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,sMAyDhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAc,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAExE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,sMAmEhB,CAAC"}

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"}