@activecollab/components 2.0.498 → 2.0.499

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

@@ -0,0 +1,97 @@
+import styled, { css } from "styled-components";
+import { Card } from "../Card";
+import { Body2 } from "../Typography";
+export const StyledPropertyList = styled(Card).withConfig({
+  displayName: "Styles__StyledPropertyList",
+  componentId: "sc-ssdfzo-0"
+})(["display:flex;flex-direction:column;overflow:clip;"]);
+export const StyledPropertyListDivider = styled.div.withConfig({
+  displayName: "Styles__StyledPropertyListDivider",
+  componentId: "sc-ssdfzo-1"
+})(["flex-shrink:0;height:1px;background-color:var(--border-raised);", ""], _ref => {
+  let $layout = _ref.$layout,
+    $density = _ref.$density;
+  return $layout === "stacked" && "margin-left: " + ($density === "page" ? 44 : 46) + "px;";
+});
+const highlight = "linear-gradient(var(--highlight-dark), var(--highlight-dark))";
+export const StyledPropertyListRow = styled.div.withConfig({
+  displayName: "Styles__StyledPropertyListRow",
+  componentId: "sc-ssdfzo-2"
+})(["position:relative;width:100%;border:0;text-align:left;background-color:", ";", " ", ""], _ref2 => {
+  let $tone = _ref2.$tone;
+  return $tone === "alert" ? "var(--alert-surface-subtle)" : "transparent";
+}, _ref3 => {
+  let $layout = _ref3.$layout,
+    $density = _ref3.$density;
+  return $layout === "table" ? css(["display:grid;grid-template-columns:185px minmax(0,1fr) auto;align-items:center;min-height:36px;padding:4px 12px;"]) : css(["display:flex;align-items:center;gap:8px;min-height:", "px;padding:6px 12px;"], $density === "page" ? 44 : 40);
+}, _ref4 => {
+  let $clickable = _ref4.$clickable,
+    $tone = _ref4.$tone;
+  return $clickable && css(["cursor:pointer;&:hover,&[aria-expanded=\"true\"]{", "}"], $tone === "alert" ? "background-image: " + highlight + ";" : "background-color: var(--color-theme-200);");
+});
+export const StyledPropertyListTableLabel = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListTableLabel",
+  componentId: "sc-ssdfzo-3"
+})(["display:flex;align-items:center;gap:10px;min-width:0;padding-right:8px;"]);
+export const StyledPropertyListIcon = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListIcon",
+  componentId: "sc-ssdfzo-4"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;width:", "px;height:", "px;& svg{fill:var(--color-theme-700);", "}"], _ref5 => {
+  let $size = _ref5.$size;
+  return $size;
+}, _ref6 => {
+  let $size = _ref6.$size;
+  return $size;
+}, _ref7 => {
+  let $scale = _ref7.$scale,
+    $size = _ref7.$size;
+  return $scale && "width: " + $size + "px; height: " + $size + "px;";
+});
+export const StyledPropertyListLabelText = styled(Body2).withConfig({
+  displayName: "Styles__StyledPropertyListLabelText",
+  componentId: "sc-ssdfzo-5"
+})(["&&{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-theme-700);", "}"], _ref8 => {
+  let $layout = _ref8.$layout,
+    $density = _ref8.$density;
+  return $layout === "stacked" && css(["flex:1 1 0%;", ""], $density === "page" ? "margin-left: -4px;" : "padding-left: 6px;");
+});
+export const StyledPropertyListValue = styled(Body2).withConfig({
+  displayName: "Styles__StyledPropertyListValue",
+  componentId: "sc-ssdfzo-6"
+})(["&&{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:", ";", "}"], _ref9 => {
+  let $density = _ref9.$density;
+  return $density === "page" ? "15px" : "calc(1em + 1px)";
+}, _ref0 => {
+  let $placeholder = _ref0.$placeholder,
+    $density = _ref0.$density;
+  return !$placeholder && "color: " + ($density === "page" ? "var(--muted-text)" : "var(--color-theme-800)") + ";";
+});
+export const StyledPropertyListAddIcon = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListAddIcon",
+  componentId: "sc-ssdfzo-7"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;& svg{fill:var(--color-theme-700);}"]);
+export const StyledPropertyListTableValue = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListTableValue",
+  componentId: "sc-ssdfzo-8"
+})(["display:flex;align-items:center;gap:8px;min-width:0;"]);
+export const StyledPropertyListTableAction = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListTableAction",
+  componentId: "sc-ssdfzo-9"
+})(["display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:16px;padding-left:8px;"]);
+export const StyledPropertyListChevron = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListChevron",
+  componentId: "sc-ssdfzo-10"
+})(["display:flex;flex-shrink:0;& svg{fill:var(--color-theme-700);}"]);
+export const StyledPropertyListToggle = styled.button.withConfig({
+  displayName: "Styles__StyledPropertyListToggle",
+  componentId: "sc-ssdfzo-11"
+})(["display:flex;align-items:center;width:100%;min-height:36px;padding:0 12px;border:0;background-color:transparent;color:var(--color-theme-600);font-size:13px;line-height:20px;text-align:left;cursor:pointer;&:hover,&:focus-visible{background-color:var(--color-theme-200);}"]);
+export const StyledPropertyListBranch = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListBranch",
+  componentId: "sc-ssdfzo-12"
+})(["position:absolute;top:0;left:19px;width:13px;height:50%;border:0 solid var(--color-theme-500);border-bottom-width:1px;border-left-width:1px;border-bottom-left-radius:4px;pointer-events:none;"]);
+export const StyledPropertyListBranchLine = styled.span.withConfig({
+  displayName: "Styles__StyledPropertyListBranchLine",
+  componentId: "sc-ssdfzo-13"
+})(["position:absolute;top:50%;bottom:0;left:19px;width:1px;background-color:var(--color-theme-500);pointer-events:none;"]);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","Card","Body2","StyledPropertyList","withConfig","displayName","componentId","StyledPropertyListDivider","div","_ref","$layout","$density","highlight","StyledPropertyListRow","_ref2","$tone","_ref3","_ref4","$clickable","StyledPropertyListTableLabel","span","StyledPropertyListIcon","_ref5","$size","_ref6","_ref7","$scale","StyledPropertyListLabelText","_ref8","StyledPropertyListValue","_ref9","_ref0","$placeholder","StyledPropertyListAddIcon","StyledPropertyListTableValue","StyledPropertyListTableAction","StyledPropertyListChevron","StyledPropertyListToggle","button","StyledPropertyListBranch","StyledPropertyListBranchLine"],"sources":["../../../../src/components/PropertyList/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Card } from \"../Card\";\nimport { Body2 } from \"../Typography\";\n\nexport type PropertyListDensity = \"form\" | \"page\";\nexport type PropertyListLayoutName = \"stacked\" | \"table\";\nexport type PropertyListTone = \"regular\" | \"alert\";\n\nexport const StyledPropertyList = styled(Card)`\n  display: flex;\n  flex-direction: column;\n  overflow: clip;\n`;\n\nexport const StyledPropertyListDivider = styled.div<{\n  $layout: PropertyListLayoutName;\n  $density: PropertyListDensity;\n}>`\n  flex-shrink: 0;\n  height: 1px;\n  background-color: var(--border-raised);\n  ${({ $layout, $density }) =>\n    $layout === \"stacked\" && `margin-left: ${$density === \"page\" ? 44 : 46}px;`}\n`;\n\nconst highlight =\n  \"linear-gradient(var(--highlight-dark), var(--highlight-dark))\";\n\nexport const StyledPropertyListRow = styled.div<{\n  $layout: PropertyListLayoutName;\n  $density: PropertyListDensity;\n  $tone: PropertyListTone;\n  $clickable: boolean;\n}>`\n  position: relative;\n  width: 100%;\n  border: 0;\n  text-align: left;\n  background-color: ${({ $tone }) =>\n    $tone === \"alert\" ? \"var(--alert-surface-subtle)\" : \"transparent\"};\n\n  ${({ $layout, $density }) =>\n    $layout === \"table\"\n      ? css`\n          display: grid;\n          grid-template-columns: 185px minmax(0, 1fr) auto;\n          align-items: center;\n          min-height: 36px;\n          padding: 4px 12px;\n        `\n      : css`\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          min-height: ${$density === \"page\" ? 44 : 40}px;\n          padding: 6px 12px;\n        `}\n\n  ${({ $clickable, $tone }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n\n      &:hover,\n      &[aria-expanded=\"true\"] {\n        ${$tone === \"alert\"\n          ? `background-image: ${highlight};`\n          : \"background-color: var(--color-theme-200);\"}\n      }\n    `}\n`;\n\nexport const StyledPropertyListTableLabel = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-right: 8px;\n`;\n\nexport const StyledPropertyListIcon = styled.span<{\n  $size: number;\n  $scale: boolean;\n}>`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: ${({ $size }) => $size}px;\n  height: ${({ $size }) => $size}px;\n\n  & svg {\n    fill: var(--color-theme-700);\n    ${({ $scale, $size }) => $scale && `width: ${$size}px; height: ${$size}px;`}\n  }\n`;\n\nexport const StyledPropertyListLabelText = styled(Body2)<{\n  $layout: PropertyListLayoutName;\n  $density: PropertyListDensity;\n}>`\n  && {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--color-theme-700);\n\n    ${({ $layout, $density }) =>\n      $layout === \"stacked\" &&\n      css`\n        flex: 1 1 0%;\n        ${$density === \"page\" ? \"margin-left: -4px;\" : \"padding-left: 6px;\"}\n      `}\n  }\n`;\n\nexport const StyledPropertyListValue = styled(Body2)<{\n  $density: PropertyListDensity;\n  $placeholder: boolean;\n}>`\n  && {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: ${({ $density }) =>\n      $density === \"page\" ? \"15px\" : \"calc(1em + 1px)\"};\n\n    ${({ $placeholder, $density }) =>\n      !$placeholder &&\n      `color: ${\n        $density === \"page\" ? \"var(--muted-text)\" : \"var(--color-theme-800)\"\n      };`}\n  }\n`;\n\nexport const StyledPropertyListAddIcon = styled.span`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n  & svg {\n    fill: var(--color-theme-700);\n  }\n`;\n\nexport const StyledPropertyListTableValue = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n`;\n\nexport const StyledPropertyListTableAction = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  min-width: 16px;\n  padding-left: 8px;\n`;\n\nexport const StyledPropertyListChevron = styled.span`\n  display: flex;\n  flex-shrink: 0;\n\n  & svg {\n    fill: var(--color-theme-700);\n  }\n`;\n\nexport const StyledPropertyListToggle = styled.button`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 36px;\n  padding: 0 12px;\n  border: 0;\n  background-color: transparent;\n  color: var(--color-theme-600);\n  font-size: 13px;\n  line-height: 20px;\n  text-align: left;\n  cursor: pointer;\n\n  &:hover,\n  &:focus-visible {\n    background-color: var(--color-theme-200);\n  }\n`;\n\nexport const StyledPropertyListBranch = styled.span`\n  position: absolute;\n  top: 0;\n  left: 19px;\n  width: 13px;\n  height: 50%;\n  border: 0 solid var(--color-theme-500);\n  border-bottom-width: 1px;\n  border-left-width: 1px;\n  border-bottom-left-radius: 4px;\n  pointer-events: none;\n`;\n\nexport const StyledPropertyListBranchLine = styled.span`\n  position: absolute;\n  top: 50%;\n  bottom: 0;\n  left: 19px;\n  width: 1px;\n  background-color: var(--color-theme-500);\n  pointer-events: none;\n`;\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes } from "react";
+export interface IResizeHandleProps extends HTMLAttributes<HTMLDivElement> {
+    /** The accessible name of the handle. */
+    label: string;
+    /** The edge of its positioned parent the handle stands on. */
+    edge?: "left" | "right";
+    /** Shows the line, as during a drag. */
+    active?: boolean;
+}
+export declare const ResizeHandle: React.ForwardRefExoticComponent<IResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ResizeHandle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAM1D,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,2FAexB,CAAC"}

package/dist/esm/components/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["label", "edge", "active", "className"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledResizeHandle, StyledResizeHandleLine } from "./Styles";
+export const ResizeHandle = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let label = _ref.label,
+    _ref$edge = _ref.edge,
+    edge = _ref$edge === void 0 ? "left" : _ref$edge,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledResizeHandle, _extends({
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-label": label,
+    tabIndex: 0
+  }, rest, {
+    ref: ref,
+    $edge: edge,
+    className: classnames("c-resize-handle", className)
+  }), /*#__PURE__*/React.createElement(StyledResizeHandleLine, {
+    $active: active
+  }));
+});
+ResizeHandle.displayName = "ResizeHandle";
+//# sourceMappingURL=ResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","names":["React","forwardRef","classnames","StyledResizeHandle","StyledResizeHandleLine","ResizeHandle","_ref","ref","label","_ref$edge","edge","_ref$active","active","className","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","role","tabIndex","$edge","$active","displayName"],"sources":["../../../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledResizeHandle, StyledResizeHandleLine } from \"./Styles\";\n\nexport interface IResizeHandleProps extends HTMLAttributes<HTMLDivElement> {\n  /** The accessible name of the handle. */\n  label: string;\n  /** The edge of its positioned parent the handle stands on. */\n  edge?: \"left\" | \"right\";\n  /** Shows the line, as during a drag. */\n  active?: boolean;\n}\n\nexport const ResizeHandle = forwardRef<HTMLDivElement, IResizeHandleProps>(\n  ({ label, edge = \"left\", active = false, className, ...rest }, ref) => (\n    <StyledResizeHandle\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label={label}\n      tabIndex={0}\n      {...rest}\n      ref={ref}\n      $edge={edge}\n      className={classnames(\"c-resize-handle\", className)}\n    >\n      <StyledResizeHandleLine $active={active} />\n    </StyledResizeHandle>\n  )\n);\n\nResizeHandle.displayName = \"ResizeHandle\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAoBC,UAAU,QAAQ,OAAO;AAEzD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,UAAU;AAWrE,OAAO,MAAMC,YAAY,gBAAGJ,UAAU,CACpC,CAAAK,IAAA,EAA+DC,GAAG;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,SAAA,GAAAH,IAAA,CAAEI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,MAAM,GAAAA,SAAA;IAAAE,WAAA,GAAAL,IAAA,CAAEM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAEE,SAAS,GAAAP,IAAA,CAATO,SAAS;IAAKC,IAAI,GAAAC,6BAAA,CAAAT,IAAA,EAAAU,SAAA;EAAA,oBACzDhB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,EAAAe,QAAA;IACjBC,IAAI,EAAC,WAAW;IAChB,oBAAiB,UAAU;IAC3B,cAAYX,KAAM;IAClBY,QAAQ,EAAE;EAAE,GACRN,IAAI;IACRP,GAAG,EAAEA,GAAI;IACTc,KAAK,EAAEX,IAAK;IACZG,SAAS,EAAEX,UAAU,CAAC,iBAAiB,EAAEW,SAAS;EAAE,iBAEpDb,KAAA,CAAAiB,aAAA,CAACb,sBAAsB;IAACkB,OAAO,EAAEV;EAAO,CAAE,CACxB,CAAC;AAAA,CAEzB,CAAC;AAEDP,YAAY,CAACkB,WAAW,GAAG,cAAc","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+export declare const StyledResizeHandleLine: import("styled-components").StyledComponent<"span", any, {
+    $active: boolean;
+}, never>;
+export declare const StyledResizeHandle: import("styled-components").StyledComponent<"div", any, {
+    $edge: "left" | "right";
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;aAA0B,OAAO;SAWnE,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAAuB,MAAM,GAAG,OAAO;SAcrE,CAAC"}

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+export const StyledResizeHandleLine = styled.span.withConfig({
+  displayName: "Styles__StyledResizeHandleLine",
+  componentId: "sc-bg73bx-0"
+})(["position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);background-color:var(--selectable-active);opacity:", ";pointer-events:none;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1);"], _ref => {
+  let $active = _ref.$active;
+  return $active ? 1 : 0;
+});
+export const StyledResizeHandle = styled.div.withConfig({
+  displayName: "Styles__StyledResizeHandle",
+  componentId: "sc-bg73bx-1"
+})(["position:absolute;top:0;bottom:0;", ":0;width:8px;transform:translateX(", ");cursor:col-resize;outline:none;touch-action:none;&:hover ", ",&:focus-visible ", "{opacity:1;}"], _ref2 => {
+  let $edge = _ref2.$edge;
+  return $edge;
+}, _ref3 => {
+  let $edge = _ref3.$edge;
+  return $edge === "left" ? "-50%" : "50%";
+}, StyledResizeHandleLine, StyledResizeHandleLine);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","StyledResizeHandleLine","span","withConfig","displayName","componentId","_ref","$active","StyledResizeHandle","div","_ref2","$edge","_ref3"],"sources":["../../../../src/components/ResizeHandle/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledResizeHandleLine = styled.span<{ $active: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  transform: translateX(-50%);\n  background-color: var(--selectable-active);\n  opacity: ${({ $active }) => ($active ? 1 : 0)};\n  pointer-events: none;\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n`;\n\nexport const StyledResizeHandle = styled.div<{ $edge: \"left\" | \"right\" }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  ${({ $edge }) => $edge}: 0;\n  width: 8px;\n  transform: translateX(${({ $edge }) => ($edge === \"left\" ? \"-50%\" : \"50%\")});\n  cursor: col-resize;\n  outline: none;\n  touch-action: none;\n\n  &:hover ${StyledResizeHandleLine}, &:focus-visible ${StyledResizeHandleLine} {\n    opacity: 1;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,sBAAsB,GAAGD,MAAM,CAACE,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sNAQpCC,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAQA,OAAO,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC,CAG9C;AAED,OAAO,MAAMC,kBAAkB,GAAGR,MAAM,CAACS,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oLAIxCK,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAOA,KAAK;AAAA,GAEEC,KAAA;EAAA,IAAGD,KAAK,GAAAC,KAAA,CAALD,KAAK;EAAA,OAAQA,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC,EAKhEV,sBAAsB,EAAqBA,sBAAsB,CAG5E","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface ISectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** The title of the section. Without it the section has no header. */
+    title?: ReactNode;
+    /** A short count beside the title, for example "9 of 15". */
+    counter?: ReactNode;
+    /** Controls at the right end of the header. */
+    actions?: ReactNode;
+    /** Puts the body in a raised card. */
+    card?: boolean;
+}
+export declare const Section: React.ForwardRefExoticComponent<ISectionProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAa5E,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAClD,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,mFAwCnB,CAAC"}

package/dist/esm/components/Section/Section.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["title", "counter", "actions", "card", "className", "children"];
+import React, { forwardRef, useId } from "react";
+import classnames from "classnames";
+import { StyledSection, StyledSectionActions, StyledSectionCounter, StyledSectionHeader, StyledSectionTitle } from "./Styles";
+import { Card } from "../Card";
+export const Section = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let title = _ref.title,
+    counter = _ref.counter,
+    actions = _ref.actions,
+    _ref$card = _ref.card,
+    card = _ref$card === void 0 ? false : _ref$card,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const titleId = useId();
+  const hasCounter = counter !== undefined && counter !== null;
+  return /*#__PURE__*/React.createElement(StyledSection, _extends({}, rest, {
+    ref: ref,
+    "aria-labelledby": title ? titleId : undefined,
+    className: classnames("c-section", className)
+  }), title ? /*#__PURE__*/React.createElement(StyledSectionHeader, {
+    className: "c-section__header"
+  }, /*#__PURE__*/React.createElement(StyledSectionTitle, {
+    id: titleId
+  }, title), hasCounter ? /*#__PURE__*/React.createElement(StyledSectionCounter, {
+    className: "c-section__counter"
+  }, counter) : null, actions ? /*#__PURE__*/React.createElement(StyledSectionActions, {
+    className: "c-section__actions"
+  }, actions) : null) : null, card ? /*#__PURE__*/React.createElement(Card, {
+    variant: "raised",
+    radius: 24,
+    className: "c-section__body"
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: "c-section__body"
+  }, children));
+});
+Section.displayName = "Section";
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","names":["React","forwardRef","useId","classnames","StyledSection","StyledSectionActions","StyledSectionCounter","StyledSectionHeader","StyledSectionTitle","Card","Section","_ref","ref","title","counter","actions","_ref$card","card","className","children","rest","_objectWithoutPropertiesLoose","_excluded","titleId","hasCounter","undefined","createElement","_extends","id","variant","radius","displayName"],"sources":["../../../../src/components/Section/Section.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, forwardRef, useId } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledSection,\n  StyledSectionActions,\n  StyledSectionCounter,\n  StyledSectionHeader,\n  StyledSectionTitle,\n} from \"./Styles\";\nimport { Card } from \"../Card\";\n\nexport interface ISectionProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The title of the section. Without it the section has no header. */\n  title?: ReactNode;\n  /** A short count beside the title, for example \"9 of 15\". */\n  counter?: ReactNode;\n  /** Controls at the right end of the header. */\n  actions?: ReactNode;\n  /** Puts the body in a raised card. */\n  card?: boolean;\n}\n\nexport const Section = forwardRef<HTMLElement, ISectionProps>(\n  (\n    { title, counter, actions, card = false, className, children, ...rest },\n    ref\n  ) => {\n    const titleId = useId();\n    const hasCounter = counter !== undefined && counter !== null;\n\n    return (\n      <StyledSection\n        {...rest}\n        ref={ref}\n        aria-labelledby={title ? titleId : undefined}\n        className={classnames(\"c-section\", className)}\n      >\n        {title ? (\n          <StyledSectionHeader className=\"c-section__header\">\n            <StyledSectionTitle id={titleId}>{title}</StyledSectionTitle>\n            {hasCounter ? (\n              <StyledSectionCounter className=\"c-section__counter\">\n                {counter}\n              </StyledSectionCounter>\n            ) : null}\n            {actions ? (\n              <StyledSectionActions className=\"c-section__actions\">\n                {actions}\n              </StyledSectionActions>\n            ) : null}\n          </StyledSectionHeader>\n        ) : null}\n        {card ? (\n          <Card variant=\"raised\" radius={24} className=\"c-section__body\">\n            {children}\n          </Card>\n        ) : (\n          <div className=\"c-section__body\">{children}</div>\n        )}\n      </StyledSection>\n    );\n  }\n);\n\nSection.displayName = \"Section\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAA+BC,UAAU,EAAEC,KAAK,QAAQ,OAAO;AAE3E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,aAAa,EACbC,oBAAoB,EACpBC,oBAAoB,EACpBC,mBAAmB,EACnBC,kBAAkB,QACb,UAAU;AACjB,SAASC,IAAI,QAAQ,SAAS;AAc9B,OAAO,MAAMC,OAAO,gBAAGT,UAAU,CAC/B,CAAAU,IAAA,EAEEC,GAAG,KACA;EAAA,IAFDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,SAAA,GAAAL,IAAA,CAAEM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,KAAK,GAAAA,SAAA;IAAEE,SAAS,GAAAP,IAAA,CAATO,SAAS;IAAEC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAV,IAAA,EAAAW,SAAA;EAGrE,MAAMC,OAAO,GAAGrB,KAAK,CAAC,CAAC;EACvB,MAAMsB,UAAU,GAAGV,OAAO,KAAKW,SAAS,IAAIX,OAAO,KAAK,IAAI;EAE5D,oBACEd,KAAA,CAAA0B,aAAA,CAACtB,aAAa,EAAAuB,QAAA,KACRP,IAAI;IACRR,GAAG,EAAEA,GAAI;IACT,mBAAiBC,KAAK,GAAGU,OAAO,GAAGE,SAAU;IAC7CP,SAAS,EAAEf,UAAU,CAAC,WAAW,EAAEe,SAAS;EAAE,IAE7CL,KAAK,gBACJb,KAAA,CAAA0B,aAAA,CAACnB,mBAAmB;IAACW,SAAS,EAAC;EAAmB,gBAChDlB,KAAA,CAAA0B,aAAA,CAAClB,kBAAkB;IAACoB,EAAE,EAAEL;EAAQ,GAAEV,KAA0B,CAAC,EAC5DW,UAAU,gBACTxB,KAAA,CAAA0B,aAAA,CAACpB,oBAAoB;IAACY,SAAS,EAAC;EAAoB,GACjDJ,OACmB,CAAC,GACrB,IAAI,EACPC,OAAO,gBACNf,KAAA,CAAA0B,aAAA,CAACrB,oBAAoB;IAACa,SAAS,EAAC;EAAoB,GACjDH,OACmB,CAAC,GACrB,IACe,CAAC,GACpB,IAAI,EACPE,IAAI,gBACHjB,KAAA,CAAA0B,aAAA,CAACjB,IAAI;IAACoB,OAAO,EAAC,QAAQ;IAACC,MAAM,EAAE,EAAG;IAACZ,SAAS,EAAC;EAAiB,GAC3DC,QACG,CAAC,gBAEPnB,KAAA,CAAA0B,aAAA;IAAKR,SAAS,EAAC;EAAiB,GAAEC,QAAc,CAErC,CAAC;AAEpB,CACF,CAAC;AAEDT,OAAO,CAACqB,WAAW,GAAG,SAAS","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+export declare const StyledSection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const StyledSectionHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSectionTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const StyledSectionCounter: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledSectionActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Section/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,wEAKzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAM/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mEAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oEAKhC,CAAC"}

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

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+export const StyledSection = styled.section.withConfig({
+  displayName: "Styles__StyledSection",
+  componentId: "sc-vhpgru-0"
+})(["display:flex;flex-direction:column;gap:8px;min-width:0;"]);
+export const StyledSectionHeader = styled.div.withConfig({
+  displayName: "Styles__StyledSectionHeader",
+  componentId: "sc-vhpgru-1"
+})(["display:flex;align-items:center;gap:8px;min-height:24px;padding:0 16px;"]);
+export const StyledSectionTitle = styled.h3.withConfig({
+  displayName: "Styles__StyledSectionTitle",
+  componentId: "sc-vhpgru-2"
+})(["margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--color-theme-800);"]);
+export const StyledSectionCounter = styled.span.withConfig({
+  displayName: "Styles__StyledSectionCounter",
+  componentId: "sc-vhpgru-3"
+})(["font-size:13px;line-height:20px;color:var(--color-theme-700);"]);
+export const StyledSectionActions = styled.div.withConfig({
+  displayName: "Styles__StyledSectionActions",
+  componentId: "sc-vhpgru-4"
+})(["display:flex;align-items:center;gap:16px;margin-left:auto;"]);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","StyledSection","section","withConfig","displayName","componentId","StyledSectionHeader","div","StyledSectionTitle","h3","StyledSectionCounter","span","StyledSectionActions"],"sources":["../../../../src/components/Section/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledSection = styled.section`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n`;\n\nexport const StyledSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 24px;\n  padding: 0 16px;\n`;\n\nexport const StyledSectionTitle = styled.h3`\n  margin: 0;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--color-theme-800);\n`;\n\nexport const StyledSectionCounter = styled.span`\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--color-theme-700);\n`;\n\nexport const StyledSectionActions = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-left: auto;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,OAAO,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+DAK1C;AAED,OAAO,MAAMC,mBAAmB,GAAGN,MAAM,CAACO,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAM5C;AAED,OAAO,MAAMG,kBAAkB,GAAGR,MAAM,CAACS,EAAE,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8FAM1C;AAED,OAAO,MAAMK,oBAAoB,GAAGV,MAAM,CAACW,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAI9C;AAED,OAAO,MAAMO,oBAAoB,GAAGZ,MAAM,CAACO,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kEAK7C","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -13,6 +13,10 @@ interface ISheet {
     animation?: "top" | "bottom" | "left" | "right";
     position?: "center" | "left" | "right";
     mode?: "normal" | "stretch";
+    /** The widest the sheet gets in stretch mode. A number is in pixels. */
+    maxWidth?: number | string;
+    /** "sheet" draws the paper on the sheet surface with large corners. */
+    surface?: "paper" | "sheet";
     disableFocusLock?: boolean;
     disableScrollLock?: boolean;
     disableBackgroundColor?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAuBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAoLjB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAuBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHA0LjB,CAAC"}

package/dist/esm/components/Sheet/Sheet.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+const _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "maxWidth", "surface", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
 import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, SHEET_ENTER_MS, SHEET_EXIT_MS, StyledSheetSurface, StyledSheetWrapperPaper } from "./Styles";
@@ -22,6 +22,9 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     position = _ref$position === void 0 ? "center" : _ref$position,
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? "normal" : _ref$mode,
+    maxWidth = _ref.maxWidth,
+    _ref$surface = _ref.surface,
+    surface = _ref$surface === void 0 ? "paper" : _ref$surface,
     _ref$disableFocusLock = _ref.disableFocusLock,
     disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
     _ref$disableScrollLoc = _ref.disableScrollLock,
@@ -97,7 +100,8 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: classnames("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,
-    $mode: mode
+    $mode: mode,
+    $maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(StyledCssTransition, {
     appear: true,
     in: open,
@@ -122,7 +126,8 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
       className: className
     }, IconComponent));
   })), /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
-    paperClass: "c-sheet__wrapper__paper"
+    paperClass: "c-sheet__wrapper__paper",
+    $surface: surface
   }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledIconsWrapperSmall, null, controls.map((_ref3, index) => {
     let IconComponent = _ref3.icon,
       tooltip = _ref3.tooltip,

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","SHEET_ENTER_MS","SHEET_EXIT_MS","StyledSheetSurface","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Fade","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","_useState3","overlayEntered","setOverlayEntered","handleEnter","handleExited","handleClose","handleOverlayEntered","handleOverlayExit","handleBackgroundClick","event","preventDefault","close","createElement","_extends","style","pointerEvents","in","timeout","onEntered","onExit","onClick","className","$position","$mode","appear","classNames","$direction","onEnter","onExited","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","title","disable","key","$disabled","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  SHEET_ENTER_MS,\n  SHEET_EXIT_MS,\n  StyledSheetSurface,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Fade } from \"../Transitions\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    // Clicks pass through the overlay until it has faded in, and again from the first moment it fades out.\n    const [overlayEntered, setOverlayEntered] = useState(false);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      onClose?.();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleOverlayEntered = useCallback(() => {\n      setOverlayEntered(true);\n    }, []);\n\n    const handleOverlayExit = useCallback(() => {\n      setOverlayEntered(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        // The overlay and the sheet take the clicks, so the window lets them through where the overlay does.\n        style={{ ...rest.style, pointerEvents: \"none\" }}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        <Fade\n          in={open}\n          timeout={open ? SHEET_ENTER_MS : SHEET_EXIT_MS}\n          onEntered={handleOverlayEntered}\n          onExit={handleOverlayExit}\n        >\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n            style={{\n              pointerEvents: open && overlayEntered ? \"auto\" : \"none\",\n            }}\n          />\n        </Fade>\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={SHEET_ENTER_MS}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetSurface>\n              {controls.length > 0 && (\n                <StyledSheetIcons>\n                  {controls.map(\n                    (\n                      {\n                        icon: IconComponent,\n                        tooltip,\n                        onClick,\n                        disabled,\n                        className,\n                      },\n                      index\n                    ) => (\n                      <Tooltip\n                        title={tooltip}\n                        disable={!tooltip || disabled}\n                        key={`c-sheet-control-${index}`}\n                      >\n                        <StyledAnimatedSpan\n                          onClick={onClick}\n                          $disabled={disabled}\n                          className={className}\n                        >\n                          {IconComponent}\n                        </StyledAnimatedSpan>\n                      </Tooltip>\n                    )\n                  )}\n                </StyledSheetIcons>\n              )}\n              <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n                {controls.length > 0 && (\n                  <StyledHeader>\n                    <StyledIconsWrapperSmall>\n                      {controls.map(\n                        (\n                          {\n                            icon: IconComponent,\n                            tooltip,\n                            onClick,\n                            disabled,\n                            className,\n                          },\n                          index\n                        ) => (\n                          <Tooltip\n                            title={tooltip}\n                            disable={!tooltip || disabled}\n                            key={index}\n                          >\n                            <IconButton\n                              onClick={onClick}\n                              disabled={disabled}\n                              className={className}\n                              variant=\"text gray\"\n                            >\n                              {IconComponent}\n                            </IconButton>\n                          </Tooltip>\n                        )\n                      )}\n                    </StyledIconsWrapperSmall>\n                    <StyledListSeparator />\n                  </StyledHeader>\n                )}\n                {children}\n              </StyledSheetWrapperPaper>\n            </StyledSheetSurface>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","SHEET_ENTER_MS","SHEET_EXIT_MS","StyledSheetSurface","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Fade","Window","Sheet","_ref","ref","children","onClose","_ref$controls","controls","_ref$open","open","defaultOpen","_ref$animation","animation","_ref$position","position","_ref$mode","mode","maxWidth","_ref$surface","surface","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundColor","bodyStyle","bodyClassName","_ref$disableBackgroun2","disableBackgroundClick","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","_useState3","overlayEntered","setOverlayEntered","handleEnter","handleExited","handleClose","handleOverlayEntered","handleOverlayExit","handleBackgroundClick","event","preventDefault","close","createElement","_extends","style","pointerEvents","in","timeout","onEntered","onExit","onClick","className","$position","$mode","$maxWidth","appear","classNames","$direction","onEnter","onExited","length","map","_ref2","index","IconComponent","icon","tooltip","disabled","title","disable","key","$disabled","paperClass","$surface","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  SHEET_ENTER_MS,\n  SHEET_EXIT_MS,\n  StyledSheetSurface,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Fade } from \"../Transitions\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  /** The widest the sheet gets in stretch mode. A number is in pixels. */\n  maxWidth?: number | string;\n  /** \"sheet\" draws the paper on the sheet surface with large corners. */\n  surface?: \"paper\" | \"sheet\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      maxWidth,\n      surface = \"paper\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    // Clicks pass through the overlay until it has faded in, and again from the first moment it fades out.\n    const [overlayEntered, setOverlayEntered] = useState(false);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      onClose?.();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleOverlayEntered = useCallback(() => {\n      setOverlayEntered(true);\n    }, []);\n\n    const handleOverlayExit = useCallback(() => {\n      setOverlayEntered(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        // The overlay and the sheet take the clicks, so the window lets them through where the overlay does.\n        style={{ ...rest.style, pointerEvents: \"none\" }}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        <Fade\n          in={open}\n          timeout={open ? SHEET_ENTER_MS : SHEET_EXIT_MS}\n          onEntered={handleOverlayEntered}\n          onExit={handleOverlayExit}\n        >\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n            style={{\n              pointerEvents: open && overlayEntered ? \"auto\" : \"none\",\n            }}\n          />\n        </Fade>\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n          $maxWidth={maxWidth}\n        >\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={SHEET_ENTER_MS}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetSurface>\n              {controls.length > 0 && (\n                <StyledSheetIcons>\n                  {controls.map(\n                    (\n                      {\n                        icon: IconComponent,\n                        tooltip,\n                        onClick,\n                        disabled,\n                        className,\n                      },\n                      index\n                    ) => (\n                      <Tooltip\n                        title={tooltip}\n                        disable={!tooltip || disabled}\n                        key={`c-sheet-control-${index}`}\n                      >\n                        <StyledAnimatedSpan\n                          onClick={onClick}\n                          $disabled={disabled}\n                          className={className}\n                        >\n                          {IconComponent}\n                        </StyledAnimatedSpan>\n                      </Tooltip>\n                    )\n                  )}\n                </StyledSheetIcons>\n              )}\n              <StyledSheetWrapperPaper\n                paperClass=\"c-sheet__wrapper__paper\"\n                $surface={surface}\n              >\n                {controls.length > 0 && (\n                  <StyledHeader>\n                    <StyledIconsWrapperSmall>\n                      {controls.map(\n                        (\n                          {\n                            icon: IconComponent,\n                            tooltip,\n                            onClick,\n                            disabled,\n                            className,\n                          },\n                          index\n                        ) => (\n                          <Tooltip\n                            title={tooltip}\n                            disable={!tooltip || disabled}\n                            key={index}\n                          >\n                            <IconButton\n                              onClick={onClick}\n                              disabled={disabled}\n                              className={className}\n                              variant=\"text gray\"\n                            >\n                              {IconComponent}\n                            </IconButton>\n                          </Tooltip>\n                        )\n                      )}\n                    </StyledIconsWrapperSmall>\n                    <StyledListSeparator />\n                  </StyledHeader>\n                )}\n                {children}\n              </StyledSheetWrapperPaper>\n            </StyledSheetSurface>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,10 +5,12 @@ export declare const StyledSheetIcons: import("styled-components").StyledCompone
 interface IStyledSheetWrapper {
     $position?: "center" | "left" | "right";
     $mode?: "normal" | "stretch";
+    $maxWidth?: number | string;
 }
 export declare const StyledSheetWrapper: import("styled-components").StyledComponent<"div", any, IStyledSheetWrapper, never>;
 interface IStyledSheetWrapperPaper {
     paperClass?: string;
+    $surface?: "paper" | "sheet";
 }
 export declare const StyledSheetSurface: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSheetWrapperPaper: import("styled-components").StyledComponent<"div", any, IStyledSheetWrapperPaper, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAiG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,oEAQ9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,0FAkBnC,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAc9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAKD,eAAO,MAAM,kBAAkB,qFAiG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,oEAQ9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,0FA4BnC,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAc9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}

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

@@ -10,10 +10,14 @@ export const StyledSheetIcons = styled.div.withConfig({
   componentId: "sc-144eyxd-0"
 })(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}@media (max-width:640px){display:none;}"]);
 StyledSheetIcons.displayName = "StyledSheetIcons";
+const toCssSize = value => typeof value === "number" ? value + "px" : value;
 export const StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => {
+  var _props$$maxWidth;
+  return props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:", ";", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;}span{top:8px;}}"], toCssSize((_props$$maxWidth = props.$maxWidth) != null ? _props$$maxWidth : 1000), StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
+}, props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "auto"
 }), props => props.$position === "left" && css(["", ""], {
@@ -34,7 +38,7 @@ export const StyledSheetWrapperPaper = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
   componentId: "sc-144eyxd-3"
-})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;transform:translateZ(0);contain:paint;overscroll-behavior:contain;", ""], {
+})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;transform:translateZ(0);contain:paint;overscroll-behavior:contain;", " ", ""], props => props.$surface === "sheet" && css(["background-color:var(--surface-sheet);@media (min-width:641px){border-radius:24px;}"]), {
   "flex": "1 1 auto"
 });
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";