@activecollab/components 2.0.497 → 2.0.499

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

@@ -0,0 +1,171 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["density", "className", "children"],
+  _excluded2 = ["icon", "label", "value", "action", "tone", "readOnly", "chevron", "className", "children"],
+  _excluded3 = ["expanded", "className", "children"],
+  _excluded4 = ["position"];
+import React, { Children, Fragment, createContext, forwardRef, useContext } from "react";
+import classnames from "classnames";
+import { StyledPropertyList, StyledPropertyListAddIcon, StyledPropertyListBranch, StyledPropertyListBranchLine, StyledPropertyListChevron, StyledPropertyListDivider, StyledPropertyListIcon, StyledPropertyListLabelText, StyledPropertyListRow, StyledPropertyListTableAction, StyledPropertyListTableLabel, StyledPropertyListTableValue, StyledPropertyListToggle, StyledPropertyListValue } from "./Styles";
+import { AddCrossTinyIcon, ArrowDownSmallIcon } from "../Icons";
+const DensityContext = /*#__PURE__*/createContext("form");
+const LayoutContext = /*#__PURE__*/createContext("stacked");
+export const usePropertyListDensity = () => useContext(DensityContext);
+export const usePropertyListLayout = () => useContext(LayoutContext);
+
+/** Sets the layout of the rows below it: one line each, or the three columns of a table. */
+export const PropertyListLayout = _ref => {
+  let _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "stacked" : _ref$value,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: value
+  }, children);
+};
+
+/** The line between two rows. In a stacked list it starts where the label text starts. */
+export const PropertyListDivider = () => /*#__PURE__*/React.createElement(StyledPropertyListDivider, {
+  "aria-hidden": "true",
+  $layout: usePropertyListLayout(),
+  $density: usePropertyListDensity(),
+  className: "c-property-list__divider"
+});
+export const PropertyList = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let _ref2$density = _ref2.density,
+    density = _ref2$density === void 0 ? "form" : _ref2$density,
+    className = _ref2.className,
+    children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const parts = Children.toArray(children).filter(Boolean);
+  return /*#__PURE__*/React.createElement(DensityContext.Provider, {
+    value: density
+  }, /*#__PURE__*/React.createElement(StyledPropertyList, _extends({}, rest, {
+    ref: ref,
+    variant: "raised",
+    radius: 20,
+    shadow: density === "page",
+    className: classnames("c-property-list", className)
+  }), parts.map((part, index) => {
+    var _key;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: (_key = part.key) != null ? _key : index
+    }, index > 0 ? /*#__PURE__*/React.createElement(PropertyListDivider, null) : null, part);
+  })));
+});
+PropertyList.displayName = "PropertyList";
+export const PropertyListValue = _ref3 => {
+  let _ref3$placeholder = _ref3.placeholder,
+    placeholder = _ref3$placeholder === void 0 ? false : _ref3$placeholder,
+    className = _ref3.className,
+    children = _ref3.children;
+  return /*#__PURE__*/React.createElement(StyledPropertyListValue, {
+    forwardedAs: "span",
+    color: placeholder ? "quaternary" : undefined,
+    $density: usePropertyListDensity(),
+    $placeholder: placeholder,
+    className: classnames("c-property-list__value", className),
+    "data-placeholder": placeholder || undefined
+  }, children);
+};
+
+/** The "Add" of a row: a placeholder with a plus where another row has its chevron. */
+export const PropertyListAdd = _ref4 => {
+  let children = _ref4.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PropertyListValue, {
+    placeholder: true
+  }, children), /*#__PURE__*/React.createElement(StyledPropertyListAddIcon, null, /*#__PURE__*/React.createElement(AddCrossTinyIcon, null)));
+};
+export const PropertyListLabel = _ref5 => {
+  let icon = _ref5.icon,
+    label = _ref5.label;
+  const density = usePropertyListDensity();
+  const layout = usePropertyListLayout();
+  if (layout === "table") {
+    return /*#__PURE__*/React.createElement(StyledPropertyListTableLabel, {
+      className: "c-property-list__label"
+    }, /*#__PURE__*/React.createElement(StyledPropertyListIcon, {
+      $size: 16,
+      $scale: true
+    }, icon), /*#__PURE__*/React.createElement(StyledPropertyListLabelText, {
+      forwardedAs: "span",
+      weight: "medium",
+      $layout: layout,
+      $density: density
+    }, label));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropertyListIcon, {
+    $size: density === "page" ? 28 : 24,
+    $scale: false
+  }, icon), /*#__PURE__*/React.createElement(StyledPropertyListLabelText, {
+    forwardedAs: "span",
+    weight: "medium",
+    $layout: layout,
+    $density: density,
+    className: "c-property-list__label"
+  }, label));
+};
+export const PropertyListRow = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let icon = _ref6.icon,
+    label = _ref6.label,
+    value = _ref6.value,
+    action = _ref6.action,
+    _ref6$tone = _ref6.tone,
+    tone = _ref6$tone === void 0 ? "regular" : _ref6$tone,
+    _ref6$readOnly = _ref6.readOnly,
+    readOnly = _ref6$readOnly === void 0 ? false : _ref6$readOnly,
+    _ref6$chevron = _ref6.chevron,
+    chevron = _ref6$chevron === void 0 ? true : _ref6$chevron,
+    className = _ref6.className,
+    children = _ref6.children,
+    rest = _objectWithoutPropertiesLoose(_ref6, _excluded2);
+  const density = usePropertyListDensity();
+  const layout = usePropertyListLayout();
+  const caret = !readOnly && chevron ? /*#__PURE__*/React.createElement(StyledPropertyListChevron, null, /*#__PURE__*/React.createElement(ArrowDownSmallIcon, null)) : null;
+  return /*#__PURE__*/React.createElement(StyledPropertyListRow, _extends({}, rest, {
+    as: readOnly ? "div" : "button",
+    ref: ref
+  }, readOnly ? null : {
+    type: "button"
+  }, {
+    $layout: layout,
+    $density: density,
+    $tone: tone,
+    $clickable: !readOnly,
+    className: classnames("c-property-list__row", className)
+  }), children != null ? children : layout === "table" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PropertyListLabel, {
+    icon: icon,
+    label: label
+  }), /*#__PURE__*/React.createElement(StyledPropertyListTableValue, null, value), /*#__PURE__*/React.createElement(StyledPropertyListTableAction, null, action, caret)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PropertyListLabel, {
+    icon: icon,
+    label: label
+  }), value, action, caret));
+});
+PropertyListRow.displayName = "PropertyListRow";
+/** The last row of a list: it opens and closes the rows with no value. */
+export const PropertyListToggle = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  let _ref7$expanded = _ref7.expanded,
+    expanded = _ref7$expanded === void 0 ? false : _ref7$expanded,
+    className = _ref7.className,
+    children = _ref7.children,
+    rest = _objectWithoutPropertiesLoose(_ref7, _excluded3);
+  return /*#__PURE__*/React.createElement(StyledPropertyListToggle, _extends({
+    type: "button"
+  }, rest, {
+    ref: ref,
+    "aria-expanded": expanded,
+    className: classnames("c-property-list__toggle", className)
+  }), children);
+});
+PropertyListToggle.displayName = "PropertyListToggle";
+/** The tree line before a row that belongs to the row above it. Its parent must be positioned. */
+export const PropertyListBranch = _ref8 => {
+  let _ref8$position = _ref8.position,
+    position = _ref8$position === void 0 ? "last" : _ref8$position,
+    rest = _objectWithoutPropertiesLoose(_ref8, _excluded4);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropertyListBranch, _extends({
+    "aria-hidden": "true"
+  }, rest)), position === "middle" ? /*#__PURE__*/React.createElement(StyledPropertyListBranchLine, {
+    "aria-hidden": "true"
+  }) : null);
+};
+//# sourceMappingURL=PropertyList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyList.js","names":["React","Children","Fragment","createContext","forwardRef","useContext","classnames","StyledPropertyList","StyledPropertyListAddIcon","StyledPropertyListBranch","StyledPropertyListBranchLine","StyledPropertyListChevron","StyledPropertyListDivider","StyledPropertyListIcon","StyledPropertyListLabelText","StyledPropertyListRow","StyledPropertyListTableAction","StyledPropertyListTableLabel","StyledPropertyListTableValue","StyledPropertyListToggle","StyledPropertyListValue","AddCrossTinyIcon","ArrowDownSmallIcon","DensityContext","LayoutContext","usePropertyListDensity","usePropertyListLayout","PropertyListLayout","_ref","_ref$value","value","children","createElement","Provider","PropertyListDivider","$layout","$density","className","PropertyList","_ref2","ref","_ref2$density","density","rest","_objectWithoutPropertiesLoose","_excluded","parts","toArray","filter","Boolean","_extends","variant","radius","shadow","map","part","index","_key","key","displayName","PropertyListValue","_ref3","_ref3$placeholder","placeholder","forwardedAs","color","undefined","$placeholder","PropertyListAdd","_ref4","PropertyListLabel","_ref5","icon","label","layout","$size","$scale","weight","PropertyListRow","_ref6","action","_ref6$tone","tone","_ref6$readOnly","readOnly","_ref6$chevron","chevron","_excluded2","caret","as","type","$tone","$clickable","PropertyListToggle","_ref7","_ref7$expanded","expanded","_excluded3","PropertyListBranch","_ref8","_ref8$position","position","_excluded4"],"sources":["../../../../src/components/PropertyList/PropertyList.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  Children,\n  Fragment,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  Ref,\n  createContext,\n  forwardRef,\n  useContext,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  PropertyListDensity,\n  PropertyListLayoutName,\n  PropertyListTone,\n  StyledPropertyList,\n  StyledPropertyListAddIcon,\n  StyledPropertyListBranch,\n  StyledPropertyListBranchLine,\n  StyledPropertyListChevron,\n  StyledPropertyListDivider,\n  StyledPropertyListIcon,\n  StyledPropertyListLabelText,\n  StyledPropertyListRow,\n  StyledPropertyListTableAction,\n  StyledPropertyListTableLabel,\n  StyledPropertyListTableValue,\n  StyledPropertyListToggle,\n  StyledPropertyListValue,\n} from \"./Styles\";\nimport { AddCrossTinyIcon, ArrowDownSmallIcon } from \"../Icons\";\n\nconst DensityContext = createContext<PropertyListDensity>(\"form\");\nconst LayoutContext = createContext<PropertyListLayoutName>(\"stacked\");\n\nexport const usePropertyListDensity = () => useContext(DensityContext);\nexport const usePropertyListLayout = () => useContext(LayoutContext);\n\n/** Sets the layout of the rows below it: one line each, or the three columns of a table. */\nexport const PropertyListLayout = ({\n  value = \"stacked\",\n  children,\n}: {\n  value?: PropertyListLayoutName;\n  children?: ReactNode;\n}) => <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;\n\n/** The line between two rows. In a stacked list it starts where the label text starts. */\nexport const PropertyListDivider = () => (\n  <StyledPropertyListDivider\n    aria-hidden=\"true\"\n    $layout={usePropertyListLayout()}\n    $density={usePropertyListDensity()}\n    className=\"c-property-list__divider\"\n  />\n);\n\nexport interface IPropertyListProps extends HTMLAttributes<HTMLDivElement> {\n  /** \"form\" for a compact list in a form, \"page\" for a list on a page, with a shadow. */\n  density?: PropertyListDensity;\n}\n\nexport const PropertyList = forwardRef<HTMLDivElement, IPropertyListProps>(\n  ({ density = \"form\", className, children, ...rest }, ref) => {\n    const parts = Children.toArray(children).filter(Boolean);\n\n    return (\n      <DensityContext.Provider value={density}>\n        <StyledPropertyList\n          {...rest}\n          ref={ref}\n          variant=\"raised\"\n          radius={20}\n          shadow={density === \"page\"}\n          className={classnames(\"c-property-list\", className)}\n        >\n          {parts.map((part, index) => (\n            <Fragment key={(part as ReactElement).key ?? index}>\n              {index > 0 ? <PropertyListDivider /> : null}\n              {part}\n            </Fragment>\n          ))}\n        </StyledPropertyList>\n      </DensityContext.Provider>\n    );\n  }\n);\n\nPropertyList.displayName = \"PropertyList\";\n\nexport interface IPropertyListValueProps {\n  /** A row with no value shows its text in the placeholder color. */\n  placeholder?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const PropertyListValue = ({\n  placeholder = false,\n  className,\n  children,\n}: IPropertyListValueProps) => (\n  <StyledPropertyListValue\n    forwardedAs=\"span\"\n    color={placeholder ? \"quaternary\" : undefined}\n    $density={usePropertyListDensity()}\n    $placeholder={placeholder}\n    className={classnames(\"c-property-list__value\", className)}\n    data-placeholder={placeholder || undefined}\n  >\n    {children}\n  </StyledPropertyListValue>\n);\n\n/** The \"Add\" of a row: a placeholder with a plus where another row has its chevron. */\nexport const PropertyListAdd = ({ children }: { children?: ReactNode }) => (\n  <>\n    <PropertyListValue placeholder>{children}</PropertyListValue>\n    <StyledPropertyListAddIcon>\n      <AddCrossTinyIcon />\n    </StyledPropertyListAddIcon>\n  </>\n);\n\nexport interface IPropertyListLabelProps {\n  icon?: ReactNode;\n  label?: ReactNode;\n}\n\nexport const PropertyListLabel = ({ icon, label }: IPropertyListLabelProps) => {\n  const density = usePropertyListDensity();\n  const layout = usePropertyListLayout();\n\n  if (layout === \"table\") {\n    return (\n      <StyledPropertyListTableLabel className=\"c-property-list__label\">\n        <StyledPropertyListIcon $size={16} $scale>\n          {icon}\n        </StyledPropertyListIcon>\n        <StyledPropertyListLabelText\n          forwardedAs=\"span\"\n          weight=\"medium\"\n          $layout={layout}\n          $density={density}\n        >\n          {label}\n        </StyledPropertyListLabelText>\n      </StyledPropertyListTableLabel>\n    );\n  }\n\n  return (\n    <>\n      <StyledPropertyListIcon\n        $size={density === \"page\" ? 28 : 24}\n        $scale={false}\n      >\n        {icon}\n      </StyledPropertyListIcon>\n      <StyledPropertyListLabelText\n        forwardedAs=\"span\"\n        weight=\"medium\"\n        $layout={layout}\n        $density={density}\n        className=\"c-property-list__label\"\n      >\n        {label}\n      </StyledPropertyListLabelText>\n    </>\n  );\n};\n\nexport interface IPropertyListRowProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  icon?: ReactNode;\n  label?: ReactNode;\n  value?: ReactNode;\n  /** A control before the chevron. */\n  action?: ReactNode;\n  tone?: PropertyListTone;\n  /** A read only row is plain text. A row that can change is one button. */\n  readOnly?: boolean;\n  chevron?: boolean;\n  /** Replaces the label, the value and the action. */\n  children?: ReactNode;\n}\n\nexport const PropertyListRow = forwardRef<HTMLElement, IPropertyListRowProps>(\n  (\n    {\n      icon,\n      label,\n      value,\n      action,\n      tone = \"regular\",\n      readOnly = false,\n      chevron = true,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const density = usePropertyListDensity();\n    const layout = usePropertyListLayout();\n    const caret =\n      !readOnly && chevron ? (\n        <StyledPropertyListChevron>\n          <ArrowDownSmallIcon />\n        </StyledPropertyListChevron>\n      ) : null;\n\n    return (\n      <StyledPropertyListRow\n        {...rest}\n        as={readOnly ? \"div\" : \"button\"}\n        ref={ref as Ref<HTMLDivElement>}\n        {...(readOnly ? null : { type: \"button\" })}\n        $layout={layout}\n        $density={density}\n        $tone={tone}\n        $clickable={!readOnly}\n        className={classnames(\"c-property-list__row\", className)}\n      >\n        {children ??\n          (layout === \"table\" ? (\n            <>\n              <PropertyListLabel icon={icon} label={label} />\n              <StyledPropertyListTableValue>\n                {value}\n              </StyledPropertyListTableValue>\n              <StyledPropertyListTableAction>\n                {action}\n                {caret}\n              </StyledPropertyListTableAction>\n            </>\n          ) : (\n            <>\n              <PropertyListLabel icon={icon} label={label} />\n              {value}\n              {action}\n              {caret}\n            </>\n          ))}\n      </StyledPropertyListRow>\n    );\n  }\n);\n\nPropertyListRow.displayName = \"PropertyListRow\";\n\nexport interface IPropertyListToggleProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The rows that the toggle opens are on the screen. */\n  expanded?: boolean;\n}\n\n/** The last row of a list: it opens and closes the rows with no value. */\nexport const PropertyListToggle = forwardRef<\n  HTMLButtonElement,\n  IPropertyListToggleProps\n>(({ expanded = false, className, children, ...rest }, ref) => (\n  <StyledPropertyListToggle\n    type=\"button\"\n    {...rest}\n    ref={ref}\n    aria-expanded={expanded}\n    className={classnames(\"c-property-list__toggle\", className)}\n  >\n    {children}\n  </StyledPropertyListToggle>\n));\n\nPropertyListToggle.displayName = \"PropertyListToggle\";\n\nexport interface IPropertyListBranchProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /** \"middle\" continues the line to the next row of the branch. */\n  position?: \"middle\" | \"last\";\n}\n\n/** The tree line before a row that belongs to the row above it. Its parent must be positioned. */\nexport const PropertyListBranch = ({\n  position = \"last\",\n  ...rest\n}: IPropertyListBranchProps) => (\n  <>\n    <StyledPropertyListBranch aria-hidden=\"true\" {...rest} />\n    {position === \"middle\" ? (\n      <StyledPropertyListBranchLine aria-hidden=\"true\" />\n    ) : null}\n  </>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,35 @@
+export type PropertyListDensity = "form" | "page";
+export type PropertyListLayoutName = "stacked" | "table";
+export type PropertyListTone = "regular" | "alert";
+export declare const StyledPropertyList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement> & import("..").ICardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledPropertyListDivider: import("styled-components").StyledComponent<"div", any, {
+    $layout: PropertyListLayoutName;
+    $density: PropertyListDensity;
+}, never>;
+export declare const StyledPropertyListRow: import("styled-components").StyledComponent<"div", any, {
+    $layout: PropertyListLayoutName;
+    $density: PropertyListDensity;
+    $tone: PropertyListTone;
+    $clickable: boolean;
+}, never>;
+export declare const StyledPropertyListTableLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListIcon: import("styled-components").StyledComponent<"span", any, {
+    $size: number;
+    $scale: boolean;
+}, never>;
+export declare const StyledPropertyListLabelText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $layout: PropertyListLayoutName;
+    $density: PropertyListDensity;
+}, never>;
+export declare const StyledPropertyListValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $density: PropertyListDensity;
+    $placeholder: boolean;
+}, never>;
+export declare const StyledPropertyListAddIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListTableValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListTableAction: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListChevron: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledPropertyListBranch: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPropertyListBranchLine: import("styled-components").StyledComponent<"span", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PropertyList/Styles.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD,eAAO,MAAM,kBAAkB,+OAI9B,CAAC;AAEF,eAAO,MAAM,yBAAyB;aAC3B,sBAAsB;cACrB,mBAAmB;SAO9B,CAAC;AAKF,eAAO,MAAM,qBAAqB;aACvB,sBAAsB;cACrB,mBAAmB;WACtB,gBAAgB;gBACX,OAAO;SAsCpB,CAAC;AAEF,eAAO,MAAM,4BAA4B,qEAMxC,CAAC;AAEF,eAAO,MAAM,sBAAsB;WAC1B,MAAM;YACL,OAAO;SAahB,CAAC;AAEF,eAAO,MAAM,2BAA2B;aAC7B,sBAAsB;cACrB,mBAAmB;SAgB9B,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,mBAAmB;kBACf,OAAO;SAgBtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,qEAWrC,CAAC;AAEF,eAAO,MAAM,4BAA4B,qEAKxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,qEAOzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,qEAOrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,uEAkBpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAWpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,qEAQxC,CAAC"}

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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,KAAK,QAAQ,eAAe;AAMrC,OAAO,MAAMC,kBAAkB,GAAGJ,MAAM,CAACE,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAI7C;AAED,OAAO,MAAMC,yBAAyB,GAAGR,MAAM,CAACS,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAO/CG,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAAA,OACpBD,OAAO,KAAK,SAAS,uBAAoBC,QAAQ,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE,SAAK;AAAA,EAC9E;AAED,MAAMC,SAAS,GACb,+DAA+D;AAEjE,OAAO,MAAMC,qBAAqB,GAAGd,MAAM,CAACS,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8FAUzBQ,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAC1BA,KAAK,KAAK,OAAO,GAAG,6BAA6B,GAAG,aAAa;AAAA,GAEjEC,KAAA;EAAA,IAAGN,OAAO,GAAAM,KAAA,CAAPN,OAAO;IAAEC,QAAQ,GAAAK,KAAA,CAARL,QAAQ;EAAA,OACpBD,OAAO,KAAK,OAAO,GACfV,GAAG,yHAOHA,GAAG,kFAIaW,QAAQ,KAAK,MAAM,GAAG,EAAE,GAAG,EAAE,CAE5C;AAAA,GAELM,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;IAAEH,KAAK,GAAAE,KAAA,CAALF,KAAK;EAAA,OACpBG,UAAU,IACVlB,GAAG,6DAKGe,KAAK,KAAK,OAAO,0BACMH,SAAS,SAC9B,2CAA2C,CAElD;AAAA,EACJ;AAED,OAAO,MAAMO,4BAA4B,GAAGpB,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAMtD;AAED,OAAO,MAAMe,sBAAsB,GAAGtB,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gJAQtCgB,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAOA,KAAK;AAAA,GACnBC,KAAA;EAAA,IAAGD,KAAK,GAAAC,KAAA,CAALD,KAAK;EAAA,OAAOA,KAAK;AAAA,GAI1BE,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEH,KAAK,GAAAE,KAAA,CAALF,KAAK;EAAA,OAAOG,MAAM,gBAAcH,KAAK,oBAAeA,KAAK,QAAK;AAAA,EAE9E;AAED,OAAO,MAAMI,2BAA2B,GAAG5B,MAAM,CAACG,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oHAWlDsB,KAAA;EAAA,IAAGlB,OAAO,GAAAkB,KAAA,CAAPlB,OAAO;IAAEC,QAAQ,GAAAiB,KAAA,CAARjB,QAAQ;EAAA,OACpBD,OAAO,KAAK,SAAS,IACrBV,GAAG,uBAECW,QAAQ,KAAK,MAAM,GAAG,oBAAoB,GAAG,oBAAoB,CACpE;AAAA,EAEN;AAED,OAAO,MAAMkB,uBAAuB,GAAG9B,MAAM,CAACG,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sGASnCwB,KAAA;EAAA,IAAGnB,QAAQ,GAAAmB,KAAA,CAARnB,QAAQ;EAAA,OACtBA,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,iBAAiB;AAAA,GAEhDoB,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;IAAErB,QAAQ,GAAAoB,KAAA,CAARpB,QAAQ;EAAA,OACzB,CAACqB,YAAY,iBAEXrB,QAAQ,KAAK,MAAM,GAAG,mBAAmB,GAAG,wBAAwB,OACnE;AAAA,EAER;AAED,OAAO,MAAMsB,yBAAyB,GAAGlC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uIAWnD;AAED,OAAO,MAAM4B,4BAA4B,GAAGnC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAKtD;AAED,OAAO,MAAM6B,6BAA6B,GAAGpC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yGAOvD;AAED,OAAO,MAAM8B,yBAAyB,GAAGrC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sEAOnD;AAED,OAAO,MAAM+B,wBAAwB,GAAGtC,MAAM,CAACuC,MAAM,CAAAlC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAkBpD;AAED,OAAO,MAAMiC,wBAAwB,GAAGxC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sMAWlD;AAED,OAAO,MAAMkC,4BAA4B,GAAGzC,MAAM,CAACqB,IAAI,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HAQtD","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