@activecollab/components 2.0.498 → 2.0.500

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

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface IObjectLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sticky bar at the top edge. */
+    topBar?: ReactNode;
+    /** Sticky band under the top bar, for the title. */
+    band?: ReactNode;
+    /** A block above the main content. */
+    properties?: ReactNode;
+    main?: ReactNode;
+    /** The 300px right column. Without a rail and a panel the layout has one column. */
+    rail?: ReactNode;
+    /** Rail mode: content after the main column that can hold a part on the bottom edge. */
+    stream?: ReactNode;
+    /** Replaces the rail with a panel at the full height of the layout. */
+    panel?: ReactNode;
+    panelWidth?: number;
+    panelMin?: number;
+    panelMax?: number;
+    /** The width the main part keeps beside the panel. */
+    mainMin?: number;
+    /** With it the panel has a resize handle. Called with a whole pixel. */
+    onPanelWidthChange?: (width: number) => void;
+    /** The accessible name of the resize handle. */
+    resizeLabel?: string;
+    /** Panel mode: the layout has the height of its parent and the main part scrolls by itself. */
+    ownScroll?: boolean;
+    /** Rail mode: a new value measures the opening height of the rail again. */
+    resetKey?: string | number;
+    "data-testid"?: string;
+}
+export declare const ObjectLayout: React.ForwardRefExoticComponent<IObjectLayoutProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ObjectLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ObjectLayout/ObjectLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,cAAc,EACd,SAAS,EAMV,MAAM,OAAO,CAAC;AAyBf,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0CD,eAAO,MAAM,YAAY,2FA6KxB,CAAC"}

package/dist/esm/components/ObjectLayout/ObjectLayout.js

@@ -0,0 +1,167 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["topBar", "band", "properties", "main", "rail", "stream", "panel", "panelWidth", "panelMin", "panelMax", "mainMin", "onPanelWidthChange", "resizeLabel", "ownScroll", "resetKey", "className", "data-testid"];
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { CONTAINER_CSS, StyledBand, StyledColumns, StyledHeader, StyledLeft, StyledMain, StyledObjectLayout, StyledPanel, StyledPanelHandle, StyledPart, StyledPartColumns, StyledProperties, StyledRail, StyledSplit, StyledStream, StyledTopBar } from "./Styles";
+import { clampPanelWidth, useResizablePanel } from "../../hooks";
+import { useContainerCss } from "../../utils/useContainerCss";
+// The height of the rail as the object opens. It stops to follow the rail at the first action of the user.
+const useOpeningRailHeight = resetKey => {
+  const railRef = useRef(null);
+  const isFrozen = useRef(false);
+  const _useState = useState(0),
+    height = _useState[0],
+    setHeight = _useState[1];
+  useEffect(() => {
+    const rail = railRef.current;
+    isFrozen.current = false;
+    const measure = () => {
+      if (rail && !isFrozen.current) {
+        setHeight(rail.offsetHeight);
+      }
+    };
+    measure();
+    if (!rail || typeof ResizeObserver === "undefined") {
+      return undefined;
+    }
+
+    // eslint-disable-next-line compat/compat
+    const observer = new ResizeObserver(measure);
+    observer.observe(rail);
+    return () => observer.disconnect();
+  }, [resetKey]);
+  const freeze = useCallback(() => {
+    isFrozen.current = true;
+  }, []);
+  return {
+    railRef,
+    height,
+    freeze
+  };
+};
+const noChange = () => undefined;
+export const ObjectLayout = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let topBar = _ref.topBar,
+    band = _ref.band,
+    properties = _ref.properties,
+    main = _ref.main,
+    rail = _ref.rail,
+    stream = _ref.stream,
+    panel = _ref.panel,
+    _ref$panelWidth = _ref.panelWidth,
+    panelWidth = _ref$panelWidth === void 0 ? 600 : _ref$panelWidth,
+    _ref$panelMin = _ref.panelMin,
+    panelMin = _ref$panelMin === void 0 ? 300 : _ref$panelMin,
+    _ref$panelMax = _ref.panelMax,
+    panelMax = _ref$panelMax === void 0 ? 750 : _ref$panelMax,
+    _ref$mainMin = _ref.mainMin,
+    mainMin = _ref$mainMin === void 0 ? 550 : _ref$mainMin,
+    onPanelWidthChange = _ref.onPanelWidthChange,
+    _ref$resizeLabel = _ref.resizeLabel,
+    resizeLabel = _ref$resizeLabel === void 0 ? "Resize panel" : _ref$resizeLabel,
+    _ref$ownScroll = _ref.ownScroll,
+    ownScroll = _ref$ownScroll === void 0 ? false : _ref$ownScroll,
+    resetKey = _ref.resetKey,
+    className = _ref.className,
+    testId = _ref["data-testid"],
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useContainerCss("c-object-layout-container", CONTAINER_CSS);
+  const hasPanel = panel !== undefined && panel !== null;
+  const hasRail = rail !== undefined && rail !== null;
+  const _useOpeningRailHeight = useOpeningRailHeight(resetKey),
+    railRef = _useOpeningRailHeight.railRef,
+    height = _useOpeningRailHeight.height,
+    freeze = _useOpeningRailHeight.freeze;
+  const _useResizablePanel = useResizablePanel({
+      side: "right",
+      width: clampPanelWidth(panelWidth, panelMin, panelMax),
+      min: panelMin,
+      max: panelMax,
+      onChange: onPanelWidthChange != null ? onPanelWidthChange : noChange
+    }),
+    width = _useResizablePanel.width,
+    handleProps = _useResizablePanel.handleProps;
+  const part = name => testId ? testId + "-" + name : undefined;
+  const header = topBar ? /*#__PURE__*/React.createElement(StyledHeader, {
+    $panel: hasPanel,
+    className: "c-object-layout__header",
+    "data-testid": part("header")
+  }, /*#__PURE__*/React.createElement(StyledTopBar, {
+    "data-testid": part("top-bar")
+  }, topBar)) : null;
+  const bandNode = band ? /*#__PURE__*/React.createElement(StyledBand, {
+    className: "c-object-layout__band",
+    "data-testid": part("band")
+  }, band) : null;
+  if (hasPanel) {
+    return /*#__PURE__*/React.createElement(StyledObjectLayout, _extends({}, rest, {
+      ref: ref,
+      $fill: ownScroll,
+      "data-testid": testId,
+      className: classnames("c-object-layout c-object-layout--panel", {
+        "c-object-layout--own-scroll": ownScroll
+      }, className)
+    }), /*#__PURE__*/React.createElement(StyledSplit, {
+      $ownScroll: ownScroll,
+      className: "c-object-layout__split",
+      style: {
+        "--panel-width": width + "px",
+        "--main-min": mainMin + "px"
+      },
+      "data-testid": part("split")
+    }, /*#__PURE__*/React.createElement(StyledPart, {
+      className: "c-object-layout__part",
+      "data-testid": part("part")
+    }, header, bandNode, /*#__PURE__*/React.createElement(StyledPartColumns, {
+      className: "c-object-layout__part-columns",
+      "data-testid": part("columns")
+    }, properties ? /*#__PURE__*/React.createElement(StyledProperties, {
+      "data-testid": part("properties")
+    }, properties) : null, /*#__PURE__*/React.createElement(StyledMain, {
+      $padded: true,
+      className: "c-object-layout__main",
+      "data-testid": part("main")
+    }, main))), /*#__PURE__*/React.createElement(StyledPanel, {
+      className: "c-object-layout__panel",
+      "data-testid": part("rail")
+    }, onPanelWidthChange ? /*#__PURE__*/React.createElement(StyledPanelHandle, _extends({}, handleProps, {
+      label: resizeLabel,
+      className: "c-object-layout__handle",
+      "data-testid": part("resize")
+    })) : null, panel)));
+  }
+  return /*#__PURE__*/React.createElement(StyledObjectLayout, _extends({}, rest, {
+    ref: ref,
+    $fill: false,
+    "data-testid": testId,
+    onPointerDownCapture: freeze,
+    onKeyDownCapture: freeze,
+    className: classnames("c-object-layout", {
+      "c-object-layout--single": !hasRail
+    }, className)
+  }), header, bandNode, /*#__PURE__*/React.createElement(StyledColumns, {
+    className: "c-object-layout__columns",
+    "data-testid": part("columns")
+  }, /*#__PURE__*/React.createElement(StyledLeft, {
+    className: "c-object-layout__left",
+    style: {
+      "--opening-rail-height": height + "px"
+    },
+    "data-testid": part("left")
+  }, properties ? /*#__PURE__*/React.createElement(StyledProperties, {
+    "data-testid": part("properties")
+  }, properties) : null, /*#__PURE__*/React.createElement(StyledMain, {
+    $padded: !stream,
+    className: "c-object-layout__main",
+    "data-testid": part("main")
+  }, main), /*#__PURE__*/React.createElement(StyledStream, {
+    "data-testid": part("stream")
+  }, stream)), hasRail ? /*#__PURE__*/React.createElement(StyledRail, {
+    ref: railRef,
+    className: "c-object-layout__rail",
+    "data-testid": part("rail")
+  }, rail) : null));
+});
+ObjectLayout.displayName = "ObjectLayout";
+//# sourceMappingURL=ObjectLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectLayout.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","classnames","CONTAINER_CSS","StyledBand","StyledColumns","StyledHeader","StyledLeft","StyledMain","StyledObjectLayout","StyledPanel","StyledPanelHandle","StyledPart","StyledPartColumns","StyledProperties","StyledRail","StyledSplit","StyledStream","StyledTopBar","clampPanelWidth","useResizablePanel","useContainerCss","useOpeningRailHeight","resetKey","railRef","isFrozen","_useState","height","setHeight","rail","current","measure","offsetHeight","ResizeObserver","undefined","observer","observe","disconnect","freeze","noChange","ObjectLayout","_ref","ref","topBar","band","properties","main","stream","panel","_ref$panelWidth","panelWidth","_ref$panelMin","panelMin","_ref$panelMax","panelMax","_ref$mainMin","mainMin","onPanelWidthChange","_ref$resizeLabel","resizeLabel","_ref$ownScroll","ownScroll","className","testId","rest","_objectWithoutPropertiesLoose","_excluded","hasPanel","hasRail","_useOpeningRailHeight","_useResizablePanel","side","width","min","max","onChange","handleProps","part","name","header","createElement","$panel","bandNode","_extends","$fill","$ownScroll","style","$padded","label","onPointerDownCapture","onKeyDownCapture","displayName"],"sources":["../../../../src/components/ObjectLayout/ObjectLayout.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  CONTAINER_CSS,\n  StyledBand,\n  StyledColumns,\n  StyledHeader,\n  StyledLeft,\n  StyledMain,\n  StyledObjectLayout,\n  StyledPanel,\n  StyledPanelHandle,\n  StyledPart,\n  StyledPartColumns,\n  StyledProperties,\n  StyledRail,\n  StyledSplit,\n  StyledStream,\n  StyledTopBar,\n} from \"./Styles\";\nimport { clampPanelWidth, useResizablePanel } from \"../../hooks\";\nimport { useContainerCss } from \"../../utils/useContainerCss\";\n\nexport interface IObjectLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Sticky bar at the top edge. */\n  topBar?: ReactNode;\n  /** Sticky band under the top bar, for the title. */\n  band?: ReactNode;\n  /** A block above the main content. */\n  properties?: ReactNode;\n  main?: ReactNode;\n  /** The 300px right column. Without a rail and a panel the layout has one column. */\n  rail?: ReactNode;\n  /** Rail mode: content after the main column that can hold a part on the bottom edge. */\n  stream?: ReactNode;\n  /** Replaces the rail with a panel at the full height of the layout. */\n  panel?: ReactNode;\n  panelWidth?: number;\n  panelMin?: number;\n  panelMax?: number;\n  /** The width the main part keeps beside the panel. */\n  mainMin?: number;\n  /** With it the panel has a resize handle. Called with a whole pixel. */\n  onPanelWidthChange?: (width: number) => void;\n  /** The accessible name of the resize handle. */\n  resizeLabel?: string;\n  /** Panel mode: the layout has the height of its parent and the main part scrolls by itself. */\n  ownScroll?: boolean;\n  /** Rail mode: a new value measures the opening height of the rail again. */\n  resetKey?: string | number;\n  \"data-testid\"?: string;\n}\n\n// The height of the rail as the object opens. It stops to follow the rail at the first action of the user.\nconst useOpeningRailHeight = (resetKey?: string | number) => {\n  const railRef = useRef<HTMLDivElement>(null);\n  const isFrozen = useRef(false);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const rail = railRef.current;\n\n    isFrozen.current = false;\n\n    const measure = () => {\n      if (rail && !isFrozen.current) {\n        setHeight(rail.offsetHeight);\n      }\n    };\n\n    measure();\n\n    if (!rail || typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    // eslint-disable-next-line compat/compat\n    const observer = new ResizeObserver(measure);\n\n    observer.observe(rail);\n\n    return () => observer.disconnect();\n  }, [resetKey]);\n\n  const freeze = useCallback(() => {\n    isFrozen.current = true;\n  }, []);\n\n  return { railRef, height, freeze };\n};\n\nconst noChange = () => undefined;\n\nexport const ObjectLayout = forwardRef<HTMLDivElement, IObjectLayoutProps>(\n  (\n    {\n      topBar,\n      band,\n      properties,\n      main,\n      rail,\n      stream,\n      panel,\n      panelWidth = 600,\n      panelMin = 300,\n      panelMax = 750,\n      mainMin = 550,\n      onPanelWidthChange,\n      resizeLabel = \"Resize panel\",\n      ownScroll = false,\n      resetKey,\n      className,\n      \"data-testid\": testId,\n      ...rest\n    },\n    ref\n  ) => {\n    useContainerCss(\"c-object-layout-container\", CONTAINER_CSS);\n\n    const hasPanel = panel !== undefined && panel !== null;\n    const hasRail = rail !== undefined && rail !== null;\n    const { railRef, height, freeze } = useOpeningRailHeight(resetKey);\n    const { width, handleProps } = useResizablePanel({\n      side: \"right\",\n      width: clampPanelWidth(panelWidth, panelMin, panelMax),\n      min: panelMin,\n      max: panelMax,\n      onChange: onPanelWidthChange ?? noChange,\n    });\n    const part = (name: string) => (testId ? `${testId}-${name}` : undefined);\n\n    const header = topBar ? (\n      <StyledHeader\n        $panel={hasPanel}\n        className=\"c-object-layout__header\"\n        data-testid={part(\"header\")}\n      >\n        <StyledTopBar data-testid={part(\"top-bar\")}>{topBar}</StyledTopBar>\n      </StyledHeader>\n    ) : null;\n\n    const bandNode = band ? (\n      <StyledBand className=\"c-object-layout__band\" data-testid={part(\"band\")}>\n        {band}\n      </StyledBand>\n    ) : null;\n\n    if (hasPanel) {\n      return (\n        <StyledObjectLayout\n          {...rest}\n          ref={ref}\n          $fill={ownScroll}\n          data-testid={testId}\n          className={classnames(\n            \"c-object-layout c-object-layout--panel\",\n            { \"c-object-layout--own-scroll\": ownScroll },\n            className\n          )}\n        >\n          <StyledSplit\n            $ownScroll={ownScroll}\n            className=\"c-object-layout__split\"\n            style={\n              {\n                \"--panel-width\": `${width}px`,\n                \"--main-min\": `${mainMin}px`,\n              } as CSSProperties\n            }\n            data-testid={part(\"split\")}\n          >\n            <StyledPart\n              className=\"c-object-layout__part\"\n              data-testid={part(\"part\")}\n            >\n              {header}\n              {bandNode}\n              <StyledPartColumns\n                className=\"c-object-layout__part-columns\"\n                data-testid={part(\"columns\")}\n              >\n                {properties ? (\n                  <StyledProperties data-testid={part(\"properties\")}>\n                    {properties}\n                  </StyledProperties>\n                ) : null}\n                <StyledMain\n                  $padded\n                  className=\"c-object-layout__main\"\n                  data-testid={part(\"main\")}\n                >\n                  {main}\n                </StyledMain>\n              </StyledPartColumns>\n            </StyledPart>\n            <StyledPanel\n              className=\"c-object-layout__panel\"\n              data-testid={part(\"rail\")}\n            >\n              {onPanelWidthChange ? (\n                <StyledPanelHandle\n                  {...handleProps}\n                  label={resizeLabel}\n                  className=\"c-object-layout__handle\"\n                  data-testid={part(\"resize\")}\n                />\n              ) : null}\n              {panel}\n            </StyledPanel>\n          </StyledSplit>\n        </StyledObjectLayout>\n      );\n    }\n\n    return (\n      <StyledObjectLayout\n        {...rest}\n        ref={ref}\n        $fill={false}\n        data-testid={testId}\n        onPointerDownCapture={freeze}\n        onKeyDownCapture={freeze}\n        className={classnames(\n          \"c-object-layout\",\n          { \"c-object-layout--single\": !hasRail },\n          className\n        )}\n      >\n        {header}\n        {bandNode}\n        <StyledColumns\n          className=\"c-object-layout__columns\"\n          data-testid={part(\"columns\")}\n        >\n          <StyledLeft\n            className=\"c-object-layout__left\"\n            style={{ \"--opening-rail-height\": `${height}px` } as CSSProperties}\n            data-testid={part(\"left\")}\n          >\n            {properties ? (\n              <StyledProperties data-testid={part(\"properties\")}>\n                {properties}\n              </StyledProperties>\n            ) : null}\n            <StyledMain\n              $padded={!stream}\n              className=\"c-object-layout__main\"\n              data-testid={part(\"main\")}\n            >\n              {main}\n            </StyledMain>\n            <StyledStream data-testid={part(\"stream\")}>{stream}</StyledStream>\n          </StyledLeft>\n          {hasRail ? (\n            <StyledRail\n              ref={railRef}\n              className=\"c-object-layout__rail\"\n              data-testid={part(\"rail\")}\n            >\n              {rail}\n            </StyledRail>\n          ) : null}\n        </StyledColumns>\n      </StyledObjectLayout>\n    );\n  }\n);\n\nObjectLayout.displayName = \"ObjectLayout\";\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,25 @@
+export declare const CONTAINER_CSS = "\n@container (min-width: 900px) {\n  .c-object-layout .c-object-layout__header,\n  .c-object-layout .c-object-layout__band {\n    position: sticky;\n    z-index: 6;\n    background-color: var(--surface-sheet);\n  }\n  .c-object-layout .c-object-layout__header { top: 0; }\n  .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n  .c-object-layout .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr) 300px;\n    column-gap: 32px;\n    padding-top: 0;\n    padding-left: 32px;\n  }\n  .c-object-layout--single .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr);\n    padding-right: 32px;\n  }\n  .c-object-layout .c-object-layout__left {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: 16px;\n    min-width: 0;\n    min-height: var(--opening-rail-height);\n  }\n  .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n  .c-object-layout .c-object-layout__split {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n  }\n  .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n  .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n  .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n  .c-object-layout .c-object-layout__panel { padding: 0; }\n  .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n  .c-object-layout .c-object-layout__columns { align-content: start; }\n  .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n  .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n";
+export declare const StyledObjectLayout: import("styled-components").StyledComponent<"div", any, {
+    $fill: boolean;
+}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
+    $panel: boolean;
+}, never>;
+export declare const StyledTopBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBand: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColumns: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"div", any, {
+    $padded: boolean;
+}, never>;
+export declare const StyledStream: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledRail: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSplit: import("styled-components").StyledComponent<"div", any, {
+    $ownScroll: boolean;
+}, never>;
+export declare const StyledPart: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPartColumns: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledProperties: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPanelHandle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").IResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ObjectLayout/Styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,0uDA4CzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAAuB,OAAO;SAS5D,CAAC;AAEF,eAAO,MAAM,YAAY;YAAwB,OAAO;SAGvD,CAAC;AAEF,eAAO,MAAM,YAAY,oEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAGtB,CAAC;AAEF,eAAO,MAAM,aAAa,oEAOzB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAEtB,CAAC;AAEF,eAAO,MAAM,UAAU;aAAyB,OAAO;SAOtD,CAAC;AAEF,eAAO,MAAM,YAAY,oEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,WAAW;gBAA4B,OAAO;SAK1D,CAAC;AAEF,eAAO,MAAM,UAAU,oEAItB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAE5B,CAAC;AAEF,eAAO,MAAM,WAAW,oEAIvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,yLAG7B,CAAC"}

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

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import { ResizeHandle } from "../ResizeHandle";
+export const CONTAINER_CSS = "\n@container (min-width: 900px) {\n  .c-object-layout .c-object-layout__header,\n  .c-object-layout .c-object-layout__band {\n    position: sticky;\n    z-index: 6;\n    background-color: var(--surface-sheet);\n  }\n  .c-object-layout .c-object-layout__header { top: 0; }\n  .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n  .c-object-layout .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr) 300px;\n    column-gap: 32px;\n    padding-top: 0;\n    padding-left: 32px;\n  }\n  .c-object-layout--single .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr);\n    padding-right: 32px;\n  }\n  .c-object-layout .c-object-layout__left {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: 16px;\n    min-width: 0;\n    min-height: var(--opening-rail-height);\n  }\n  .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n  .c-object-layout .c-object-layout__split {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n  }\n  .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n  .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n  .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n  .c-object-layout .c-object-layout__panel { padding: 0; }\n  .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n  .c-object-layout .c-object-layout__columns { align-content: start; }\n  .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n  .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n";
+export const StyledObjectLayout = styled.div.withConfig({
+  displayName: "Styles__StyledObjectLayout",
+  componentId: "sc-hmqt3m-0"
+})(["container-type:inline-size;display:flex;flex-direction:column;width:100%;", " border-radius:inherit;color:var(--color-theme-900);background-color:var(--surface-sheet);"], _ref => {
+  let $fill = _ref.$fill;
+  return $fill ? "height: 100%;" : "min-height: 100%;";
+});
+export const StyledHeader = styled.div.withConfig({
+  displayName: "Styles__StyledHeader",
+  componentId: "sc-hmqt3m-1"
+})(["border-top-left-radius:inherit;", ""], _ref2 => {
+  let $panel = _ref2.$panel;
+  return !$panel && "border-top-right-radius: inherit;";
+});
+export const StyledTopBar = styled.div.withConfig({
+  displayName: "Styles__StyledTopBar",
+  componentId: "sc-hmqt3m-2"
+})(["padding:9px 12px 0;"]);
+export const StyledBand = styled.div.withConfig({
+  displayName: "Styles__StyledBand",
+  componentId: "sc-hmqt3m-3"
+})(["min-width:0;padding:16px 16px 0;"]);
+export const StyledColumns = styled.div.withConfig({
+  displayName: "Styles__StyledColumns",
+  componentId: "sc-hmqt3m-4"
+})(["display:grid;flex:1 1 0%;grid-template-columns:repeat(1,minmax(0,1fr));align-items:start;row-gap:24px;padding:16px 16px 0;"]);
+export const StyledLeft = styled.div.withConfig({
+  displayName: "Styles__StyledLeft",
+  componentId: "sc-hmqt3m-5"
+})(["display:contents;"]);
+export const StyledMain = styled.div.withConfig({
+  displayName: "Styles__StyledMain",
+  componentId: "sc-hmqt3m-6"
+})(["order:1;display:flex;flex-direction:column;gap:24px;min-width:0;", ""], _ref3 => {
+  let $padded = _ref3.$padded;
+  return $padded && "padding-bottom: 24px;";
+});
+export const StyledStream = styled.div.withConfig({
+  displayName: "Styles__StyledStream",
+  componentId: "sc-hmqt3m-7"
+})(["display:contents;"]);
+export const StyledRail = styled.div.withConfig({
+  displayName: "Styles__StyledRail",
+  componentId: "sc-hmqt3m-8"
+})(["order:2;display:flex;flex-direction:column;gap:16px;min-width:0;"]);
+export const StyledSplit = styled.div.withConfig({
+  displayName: "Styles__StyledSplit",
+  componentId: "sc-hmqt3m-9"
+})(["display:flex;flex:1 1 0%;flex-direction:column;", ""], _ref4 => {
+  let $ownScroll = _ref4.$ownScroll;
+  return $ownScroll && "min-height: 0;";
+});
+export const StyledPart = styled.div.withConfig({
+  displayName: "Styles__StyledPart",
+  componentId: "sc-hmqt3m-10"
+})(["display:flex;flex-direction:column;min-width:0;"]);
+export const StyledPartColumns = styled.div.withConfig({
+  displayName: "Styles__StyledPartColumns",
+  componentId: "sc-hmqt3m-11"
+})(["display:flex;flex-direction:column;gap:16px;min-width:0;padding:16px 16px 0;"]);
+export const StyledProperties = styled.div.withConfig({
+  displayName: "Styles__StyledProperties",
+  componentId: "sc-hmqt3m-12"
+})(["min-width:0;"]);
+export const StyledPanel = styled.div.withConfig({
+  displayName: "Styles__StyledPanel",
+  componentId: "sc-hmqt3m-13"
+})(["position:relative;min-width:0;padding:0 16px;"]);
+export const StyledPanelHandle = styled(ResizeHandle).withConfig({
+  displayName: "Styles__StyledPanelHandle",
+  componentId: "sc-hmqt3m-14"
+})(["display:none;z-index:7;"]);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","ResizeHandle","CONTAINER_CSS","StyledObjectLayout","div","withConfig","displayName","componentId","_ref","$fill","StyledHeader","_ref2","$panel","StyledTopBar","StyledBand","StyledColumns","StyledLeft","StyledMain","_ref3","$padded","StyledStream","StyledRail","StyledSplit","_ref4","$ownScroll","StyledPart","StyledPartColumns","StyledProperties","StyledPanel","StyledPanelHandle"],"sources":["../../../../src/components/ObjectLayout/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ResizeHandle } from \"../ResizeHandle\";\n\nexport const CONTAINER_CSS = `\n@container (min-width: 900px) {\n  .c-object-layout .c-object-layout__header,\n  .c-object-layout .c-object-layout__band {\n    position: sticky;\n    z-index: 6;\n    background-color: var(--surface-sheet);\n  }\n  .c-object-layout .c-object-layout__header { top: 0; }\n  .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n  .c-object-layout .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr) 300px;\n    column-gap: 32px;\n    padding-top: 0;\n    padding-left: 32px;\n  }\n  .c-object-layout--single .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr);\n    padding-right: 32px;\n  }\n  .c-object-layout .c-object-layout__left {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: 16px;\n    min-width: 0;\n    min-height: var(--opening-rail-height);\n  }\n  .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n  .c-object-layout .c-object-layout__split {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n  }\n  .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n  .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n  .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n  .c-object-layout .c-object-layout__panel { padding: 0; }\n  .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n  .c-object-layout .c-object-layout__columns { align-content: start; }\n  .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n  .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n`;\n\nexport const StyledObjectLayout = styled.div<{ $fill: boolean }>`\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${({ $fill }) => ($fill ? \"height: 100%;\" : \"min-height: 100%;\")}\n  border-radius: inherit;\n  color: var(--color-theme-900);\n  background-color: var(--surface-sheet);\n`;\n\nexport const StyledHeader = styled.div<{ $panel: boolean }>`\n  border-top-left-radius: inherit;\n  ${({ $panel }) => !$panel && \"border-top-right-radius: inherit;\"}\n`;\n\nexport const StyledTopBar = styled.div`\n  padding: 9px 12px 0;\n`;\n\nexport const StyledBand = styled.div`\n  min-width: 0;\n  padding: 16px 16px 0;\n`;\n\nexport const StyledColumns = styled.div`\n  display: grid;\n  flex: 1 1 0%;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  align-items: start;\n  row-gap: 24px;\n  padding: 16px 16px 0;\n`;\n\nexport const StyledLeft = styled.div`\n  display: contents;\n`;\n\nexport const StyledMain = styled.div<{ $padded: boolean }>`\n  order: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  min-width: 0;\n  ${({ $padded }) => $padded && \"padding-bottom: 24px;\"}\n`;\n\nexport const StyledStream = styled.div`\n  display: contents;\n`;\n\nexport const StyledRail = styled.div`\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  min-width: 0;\n`;\n\nexport const StyledSplit = styled.div<{ $ownScroll: boolean }>`\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n  ${({ $ownScroll }) => $ownScroll && \"min-height: 0;\"}\n`;\n\nexport const StyledPart = styled.div`\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n`;\n\nexport const StyledPartColumns = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  min-width: 0;\n  padding: 16px 16px 0;\n`;\n\nexport const StyledProperties = styled.div`\n  min-width: 0;\n`;\n\nexport const StyledPanel = styled.div`\n  position: relative;\n  min-width: 0;\n  padding: 0 16px;\n`;\n\nexport const StyledPanelHandle = styled(ResizeHandle)`\n  display: none;\n  z-index: 7;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,aAAa,0uDA4CzB;AAED,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gLAKxCC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,eAAe,GAAG,mBAAmB;AAAA,CAAC,CAIjE;AAED,OAAO,MAAMC,YAAY,GAAGV,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAElCI,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,OAAO,CAACA,MAAM,IAAI,mCAAmC;AAAA,EACjE;AAED,OAAO,MAAMC,YAAY,GAAGb,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAErC;AAED,OAAO,MAAMO,UAAU,GAAGd,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wCAGnC;AAED,OAAO,MAAMQ,aAAa,GAAGf,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kIAOtC;AAED,OAAO,MAAMS,UAAU,GAAGhB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEnC;AAED,OAAO,MAAMU,UAAU,GAAGjB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAMhCW,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO,IAAI,uBAAuB;AAAA,EACtD;AAED,OAAO,MAAMC,YAAY,GAAGpB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAErC;AAED,OAAO,MAAMc,UAAU,GAAGrB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAMnC;AAED,OAAO,MAAMe,WAAW,GAAGtB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAIjCgB,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI,gBAAgB;AAAA,EACrD;AAED,OAAO,MAAMC,UAAU,GAAGzB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAInC;AAED,OAAO,MAAMmB,iBAAiB,GAAG1B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oFAM1C;AAED,OAAO,MAAMoB,gBAAgB,GAAG3B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oBAEzC;AAED,OAAO,MAAMqB,WAAW,GAAG5B,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDAIpC;AAED,OAAO,MAAMsB,iBAAiB,GAAG7B,MAAM,CAACC,YAAY,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAGpD","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,14 @@
 import { FC } from "react";
 export interface IProgressBarProps {
-    /** Progress prop can be number. */
-    progress: number;
+    /** Progress in percent. Not needed with value and limit. */
+    progress?: number;
+    /** A value against a limit. Above the limit the bar is full and takes the alert color. */
+    value?: number;
+    limit?: number;
+    /** A fixed width in pixels, in place of the percent width. */
+    length?: number;
+    /** Round the ends of the bar. */
+    rounded?: boolean;
     /** Custom classname for styling. */
     backgroundColor?: string;
     /** Custom classname for styling. */

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAM3C,MAAM,WAAW,iBAAiB;IAChC,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAyD7C,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAM3C,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAoE7C,CAAC"}

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -3,7 +3,12 @@ import classNames from "classnames";
 import { StyledProgressBar, StyledProgressBarProgress } from "./Styles";
 export const ProgressBar = _ref => {
   let _ref$progress = _ref.progress,
-    progress = _ref$progress === void 0 ? 0 : _ref$progress,
+    progressProp = _ref$progress === void 0 ? 0 : _ref$progress,
+    value = _ref.value,
+    limit = _ref.limit,
+    length = _ref.length,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     backgroundColor = _ref.backgroundColor,
     progressColor = _ref.progressColor,
     _ref$stroke = _ref.stroke,
@@ -11,6 +16,9 @@ export const ProgressBar = _ref => {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 100 : _ref$width,
     className = _ref.className;
+  const hasLimit = typeof value === "number" && typeof limit === "number";
+  const isOver = hasLimit && value > limit;
+  const progress = hasLimit && limit > 0 ? value / limit * 100 : progressProp;
   const progressNumber = useMemo(() => {
     let width = progress;
     if (progress > 100) {
@@ -41,14 +49,17 @@ export const ProgressBar = _ref => {
   return /*#__PURE__*/React.createElement(StyledProgressBar, {
     className: classNames("c-progress-bar", className),
     $color: backgroundColor,
-    $width: widthPercent
+    $width: widthPercent,
+    $length: length,
+    $rounded: rounded
   }, /*#__PURE__*/React.createElement(StyledProgressBarProgress, {
     className: "c-progress-bar__progress",
     style: {
       width: progressNumber + "%"
     },
     $height: height,
-    $color: progressColor
+    $color: isOver ? "var(--red-alert)" : progressColor,
+    $rounded: rounded
   }));
 };
 ProgressBar.displayName = "ProgressBar";

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","useMemo","classNames","StyledProgressBar","StyledProgressBarProgress","ProgressBar","_ref","_ref$progress","progress","backgroundColor","progressColor","_ref$stroke","stroke","_ref$width","width","className","progressNumber","widthPercent","width_percent","height","stroke_min","createElement","$color","$width","style","$height","displayName"],"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n  /** Progress prop can be number. */\n  progress: number;\n  /** Custom classname for styling. */\n  backgroundColor?: string;\n  /** Custom classname for styling. */\n  progressColor?: string;\n  /** Progress height. */\n  stroke?: number;\n  /** Progress width in percentage. */\n  width?: number;\n  className?: string;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n  progress = 0,\n  backgroundColor,\n  progressColor,\n  stroke = 3,\n  width = 100,\n  className,\n}) => {\n  const progressNumber = useMemo(() => {\n    let width = progress;\n    if (progress > 100) {\n      width = 100;\n    }\n    if (progress < 0) {\n      width = 0;\n    }\n    return width;\n  }, [progress]);\n\n  const widthPercent = useMemo(() => {\n    let width_percent = width;\n\n    if (width > 100) {\n      width_percent = 100;\n    }\n\n    if (width <= 0) {\n      width_percent = 100;\n    }\n\n    return width_percent;\n  }, [width]);\n\n  const height = useMemo(() => {\n    let stroke_min = stroke;\n\n    if (stroke <= 0) {\n      stroke_min = 3;\n    }\n\n    return stroke_min;\n  }, [stroke]);\n\n  return (\n    <StyledProgressBar\n      className={classNames(\"c-progress-bar\", className)}\n      $color={backgroundColor}\n      $width={widthPercent}\n    >\n      <StyledProgressBarProgress\n        className=\"c-progress-bar__progress\"\n        style={{ width: `${progressNumber}%` }}\n        $height={height}\n        $color={progressColor}\n      />\n    </StyledProgressBar>\n  );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAE1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,UAAU;AAgBvE,OAAO,MAAMC,WAAkC,GAAGC,IAAA,IAO5C;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,CAAC,GAAAA,aAAA;IACZE,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,aAAa,GAAAJ,IAAA,CAAbI,aAAa;IAAAC,WAAA,GAAAL,IAAA,CACbM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IAAAE,UAAA,GAAAP,IAAA,CACVQ,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,GAAG,GAAAA,UAAA;IACXE,SAAS,GAAAT,IAAA,CAATS,SAAS;EAET,MAAMC,cAAc,GAAGf,OAAO,CAAC,MAAM;IACnC,IAAIa,KAAK,GAAGN,QAAQ;IACpB,IAAIA,QAAQ,GAAG,GAAG,EAAE;MAClBM,KAAK,GAAG,GAAG;IACb;IACA,IAAIN,QAAQ,GAAG,CAAC,EAAE;MAChBM,KAAK,GAAG,CAAC;IACX;IACA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,MAAMS,YAAY,GAAGhB,OAAO,CAAC,MAAM;IACjC,IAAIiB,aAAa,GAAGJ,KAAK;IAEzB,IAAIA,KAAK,GAAG,GAAG,EAAE;MACfI,aAAa,GAAG,GAAG;IACrB;IAEA,IAAIJ,KAAK,IAAI,CAAC,EAAE;MACdI,aAAa,GAAG,GAAG;IACrB;IAEA,OAAOA,aAAa;EACtB,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;EAEX,MAAMK,MAAM,GAAGlB,OAAO,CAAC,MAAM;IAC3B,IAAImB,UAAU,GAAGR,MAAM;IAEvB,IAAIA,MAAM,IAAI,CAAC,EAAE;MACfQ,UAAU,GAAG,CAAC;IAChB;IAEA,OAAOA,UAAU;EACnB,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,oBACEZ,KAAA,CAAAqB,aAAA,CAAClB,iBAAiB;IAChBY,SAAS,EAAEb,UAAU,CAAC,gBAAgB,EAAEa,SAAS,CAAE;IACnDO,MAAM,EAAEb,eAAgB;IACxBc,MAAM,EAAEN;EAAa,gBAErBjB,KAAA,CAAAqB,aAAA,CAACjB,yBAAyB;IACxBW,SAAS,EAAC,0BAA0B;IACpCS,KAAK,EAAE;MAAEV,KAAK,EAAKE,cAAc;IAAI,CAAE;IACvCS,OAAO,EAAEN,MAAO;IAChBG,MAAM,EAAEZ;EAAc,CACvB,CACgB,CAAC;AAExB,CAAC;AAEDL,WAAW,CAACqB,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"file":"ProgressBar.js","names":["React","useMemo","classNames","StyledProgressBar","StyledProgressBarProgress","ProgressBar","_ref","_ref$progress","progress","progressProp","value","limit","length","_ref$rounded","rounded","backgroundColor","progressColor","_ref$stroke","stroke","_ref$width","width","className","hasLimit","isOver","progressNumber","widthPercent","width_percent","height","stroke_min","createElement","$color","$width","$length","$rounded","style","$height","displayName"],"sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useMemo } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledProgressBar, StyledProgressBarProgress } from \"./Styles\";\n\nexport interface IProgressBarProps {\n  /** Progress in percent. Not needed with value and limit. */\n  progress?: number;\n  /** A value against a limit. Above the limit the bar is full and takes the alert color. */\n  value?: number;\n  limit?: number;\n  /** A fixed width in pixels, in place of the percent width. */\n  length?: number;\n  /** Round the ends of the bar. */\n  rounded?: boolean;\n  /** Custom classname for styling. */\n  backgroundColor?: string;\n  /** Custom classname for styling. */\n  progressColor?: string;\n  /** Progress height. */\n  stroke?: number;\n  /** Progress width in percentage. */\n  width?: number;\n  className?: string;\n}\n\nexport const ProgressBar: FC<IProgressBarProps> = ({\n  progress: progressProp = 0,\n  value,\n  limit,\n  length,\n  rounded = false,\n  backgroundColor,\n  progressColor,\n  stroke = 3,\n  width = 100,\n  className,\n}) => {\n  const hasLimit = typeof value === \"number\" && typeof limit === \"number\";\n  const isOver = hasLimit && value > limit;\n  const progress = hasLimit && limit > 0 ? (value / limit) * 100 : progressProp;\n\n  const progressNumber = useMemo(() => {\n    let width = progress;\n    if (progress > 100) {\n      width = 100;\n    }\n    if (progress < 0) {\n      width = 0;\n    }\n    return width;\n  }, [progress]);\n\n  const widthPercent = useMemo(() => {\n    let width_percent = width;\n\n    if (width > 100) {\n      width_percent = 100;\n    }\n\n    if (width <= 0) {\n      width_percent = 100;\n    }\n\n    return width_percent;\n  }, [width]);\n\n  const height = useMemo(() => {\n    let stroke_min = stroke;\n\n    if (stroke <= 0) {\n      stroke_min = 3;\n    }\n\n    return stroke_min;\n  }, [stroke]);\n\n  return (\n    <StyledProgressBar\n      className={classNames(\"c-progress-bar\", className)}\n      $color={backgroundColor}\n      $width={widthPercent}\n      $length={length}\n      $rounded={rounded}\n    >\n      <StyledProgressBarProgress\n        className=\"c-progress-bar__progress\"\n        style={{ width: `${progressNumber}%` }}\n        $height={height}\n        $color={isOver ? \"var(--red-alert)\" : progressColor}\n        $rounded={rounded}\n      />\n    </StyledProgressBar>\n  );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAE1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,UAAU;AAuBvE,OAAO,MAAMC,WAAkC,GAAGC,IAAA,IAW5C;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAVJE,QAAQ;IAAEC,YAAY,GAAAF,aAAA,cAAG,CAAC,GAAAA,aAAA;IAC1BG,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,MAAM,GAAAN,IAAA,CAANM,MAAM;IAAAC,YAAA,GAAAP,IAAA,CACNQ,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,eAAe,GAAAT,IAAA,CAAfS,eAAe;IACfC,aAAa,GAAAV,IAAA,CAAbU,aAAa;IAAAC,WAAA,GAAAX,IAAA,CACbY,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IAAAE,UAAA,GAAAb,IAAA,CACVc,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,GAAG,GAAAA,UAAA;IACXE,SAAS,GAAAf,IAAA,CAATe,SAAS;EAET,MAAMC,QAAQ,GAAG,OAAOZ,KAAK,KAAK,QAAQ,IAAI,OAAOC,KAAK,KAAK,QAAQ;EACvE,MAAMY,MAAM,GAAGD,QAAQ,IAAIZ,KAAK,GAAGC,KAAK;EACxC,MAAMH,QAAQ,GAAGc,QAAQ,IAAIX,KAAK,GAAG,CAAC,GAAID,KAAK,GAAGC,KAAK,GAAI,GAAG,GAAGF,YAAY;EAE7E,MAAMe,cAAc,GAAGvB,OAAO,CAAC,MAAM;IACnC,IAAImB,KAAK,GAAGZ,QAAQ;IACpB,IAAIA,QAAQ,GAAG,GAAG,EAAE;MAClBY,KAAK,GAAG,GAAG;IACb;IACA,IAAIZ,QAAQ,GAAG,CAAC,EAAE;MAChBY,KAAK,GAAG,CAAC;IACX;IACA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACZ,QAAQ,CAAC,CAAC;EAEd,MAAMiB,YAAY,GAAGxB,OAAO,CAAC,MAAM;IACjC,IAAIyB,aAAa,GAAGN,KAAK;IAEzB,IAAIA,KAAK,GAAG,GAAG,EAAE;MACfM,aAAa,GAAG,GAAG;IACrB;IAEA,IAAIN,KAAK,IAAI,CAAC,EAAE;MACdM,aAAa,GAAG,GAAG;IACrB;IAEA,OAAOA,aAAa;EACtB,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEX,MAAMO,MAAM,GAAG1B,OAAO,CAAC,MAAM;IAC3B,IAAI2B,UAAU,GAAGV,MAAM;IAEvB,IAAIA,MAAM,IAAI,CAAC,EAAE;MACfU,UAAU,GAAG,CAAC;IAChB;IAEA,OAAOA,UAAU;EACnB,CAAC,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,oBACElB,KAAA,CAAA6B,aAAA,CAAC1B,iBAAiB;IAChBkB,SAAS,EAAEnB,UAAU,CAAC,gBAAgB,EAAEmB,SAAS,CAAE;IACnDS,MAAM,EAAEf,eAAgB;IACxBgB,MAAM,EAAEN,YAAa;IACrBO,OAAO,EAAEpB,MAAO;IAChBqB,QAAQ,EAAEnB;EAAQ,gBAElBd,KAAA,CAAA6B,aAAA,CAACzB,yBAAyB;IACxBiB,SAAS,EAAC,0BAA0B;IACpCa,KAAK,EAAE;MAAEd,KAAK,EAAKI,cAAc;IAAI,CAAE;IACvCW,OAAO,EAAER,MAAO;IAChBG,MAAM,EAAEP,MAAM,GAAG,kBAAkB,GAAGP,aAAc;IACpDiB,QAAQ,EAAEnB;EAAQ,CACnB,CACgB,CAAC;AAExB,CAAC;AAEDT,WAAW,CAAC+B,WAAW,GAAG,aAAa","ignoreList":[]}

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

@@ -2,6 +2,8 @@ interface IStyledProgressBar {
     $color?: string;
     $height?: number;
     $width?: number;
+    $length?: number;
+    $rounded?: boolean;
 }
 export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;
 export declare const StyledProgressBarProgress: import("styled-components").StyledComponent<"div", any, IStyledProgressBar, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,oFAoB7B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oFAkBrC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/Styles.ts"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oFAkC7B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oFAwBrC,CAAC"}

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

@@ -3,11 +3,11 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
 export const StyledProgressBar = styled.div.withConfig({
   displayName: "Styles__StyledProgressBar",
   componentId: "sc-k5nm08-0"
-})(["", " ", " ", ""], BoxSizingStyle, props => props.$width ? css(["width:", "%;"], props.$width) : css(["width:100%;"]), props => props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-theme-300);"]));
+})(["", " ", " ", " ", " ", ""], BoxSizingStyle, props => props.$width ? css(["width:", "%;"], props.$width) : css(["width:100%;"]), props => props.$length && css(["flex-shrink:0;width:", "px;"], props.$length), props => props.$rounded && css(["overflow:hidden;border-radius:9999px;"]), props => props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-theme-300);"]));
 StyledProgressBar.displayName = "StyledProgressBar";
 export const StyledProgressBarProgress = styled.div.withConfig({
   displayName: "Styles__StyledProgressBarProgress",
   componentId: "sc-k5nm08-1"
-})(["", " ", ""], props => props.$height ? css(["height:", "px;"], props.$height) : css(["height:3px;"]), props => props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-secondary);"]));
+})(["", " ", " ", ""], props => props.$rounded && css(["border-radius:9999px;"]), props => props.$height ? css(["height:", "px;"], props.$height) : css(["height:3px;"]), props => props.$color ? css(["background-color:", ";"], props.$color) : css(["background-color:var(--color-secondary);"]));
 StyledProgressBarProgress.displayName = "StyledProgressBarProgress";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","StyledProgressBar","div","withConfig","displayName","componentId","props","$width","$color","StyledProgressBarProgress","$height"],"sources":["../../../../src/components/ProgressBar/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n  $color?: string;\n  $height?: number;\n  $width?: number;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$width\n      ? css`\n          width: ${props.$width}%;\n        `\n      : css`\n          width: 100%;\n        `}\n\n  ${(props) =>\n    props.$color\n      ? css`\n          background-color: ${props.$color};\n        `\n      : css`\n          background-color: var(--color-theme-300);\n        `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n  ${(props) =>\n    props.$height\n      ? css`\n          height: ${props.$height}px;\n        `\n      : css`\n          height: 3px;\n        `}\n\n  ${(props) =>\n    props.$color\n      ? css`\n          background-color: ${props.$color};\n        `\n      : css`\n          background-color: var(--color-secondary);\n        `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAQlD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBACvCL,cAAc,EAEbM,KAAK,IACNA,KAAK,CAACC,MAAM,GACRR,GAAG,mBACQO,KAAK,CAACC,MAAM,IAEvBR,GAAG,iBAEF,EAEJO,KAAK,IACNA,KAAK,CAACE,MAAM,GACRT,GAAG,6BACmBO,KAAK,CAACE,MAAM,IAElCT,GAAG,8CAEF,CACR;AAEDE,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMK,yBAAyB,GAAGX,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBAC9CC,KAAK,IACNA,KAAK,CAACI,OAAO,GACTX,GAAG,qBACSO,KAAK,CAACI,OAAO,IAEzBX,GAAG,iBAEF,EAEJO,KAAK,IACNA,KAAK,CAACE,MAAM,GACRT,GAAG,6BACmBO,KAAK,CAACE,MAAM,IAElCT,GAAG,8CAEF,CACR;AAEDU,yBAAyB,CAACL,WAAW,GAAG,2BAA2B","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","StyledProgressBar","div","withConfig","displayName","componentId","props","$width","$length","$rounded","$color","StyledProgressBarProgress","$height"],"sources":["../../../../src/components/ProgressBar/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface IStyledProgressBar {\n  $color?: string;\n  $height?: number;\n  $width?: number;\n  $length?: number;\n  $rounded?: boolean;\n}\n\nexport const StyledProgressBar = styled.div<IStyledProgressBar>`\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$width\n      ? css`\n          width: ${props.$width}%;\n        `\n      : css`\n          width: 100%;\n        `}\n\n  ${(props) =>\n    props.$length &&\n    css`\n      flex-shrink: 0;\n      width: ${props.$length}px;\n    `}\n\n  ${(props) =>\n    props.$rounded &&\n    css`\n      overflow: hidden;\n      border-radius: 9999px;\n    `}\n\n  ${(props) =>\n    props.$color\n      ? css`\n          background-color: ${props.$color};\n        `\n      : css`\n          background-color: var(--color-theme-300);\n        `}\n`;\n\nStyledProgressBar.displayName = \"StyledProgressBar\";\n\nexport const StyledProgressBarProgress = styled.div<IStyledProgressBar>`\n  ${(props) =>\n    props.$rounded &&\n    css`\n      border-radius: 9999px;\n    `}\n\n  ${(props) =>\n    props.$height\n      ? css`\n          height: ${props.$height}px;\n        `\n      : css`\n          height: 3px;\n        `}\n\n  ${(props) =>\n    props.$color\n      ? css`\n          background-color: ${props.$color};\n        `\n      : css`\n          background-color: var(--color-secondary);\n        `}\n`;\n\nStyledProgressBarProgress.displayName = \"StyledProgressBarProgress\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAUlD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCACvCL,cAAc,EAEbM,KAAK,IACNA,KAAK,CAACC,MAAM,GACRR,GAAG,mBACQO,KAAK,CAACC,MAAM,IAEvBR,GAAG,iBAEF,EAEJO,KAAK,IACNA,KAAK,CAACE,OAAO,IACbT,GAAG,kCAEQO,KAAK,CAACE,OAAO,CACvB,EAEAF,KAAK,IACNA,KAAK,CAACG,QAAQ,IACdV,GAAG,2CAGF,EAEAO,KAAK,IACNA,KAAK,CAACI,MAAM,GACRX,GAAG,6BACmBO,KAAK,CAACI,MAAM,IAElCX,GAAG,8CAEF,CACR;AAEDE,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMO,yBAAyB,GAAGb,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBAC9CC,KAAK,IACNA,KAAK,CAACG,QAAQ,IACdV,GAAG,2BAEF,EAEAO,KAAK,IACNA,KAAK,CAACM,OAAO,GACTb,GAAG,qBACSO,KAAK,CAACM,OAAO,IAEzBb,GAAG,iBAEF,EAEJO,KAAK,IACNA,KAAK,CAACI,MAAM,GACRX,GAAG,6BACmBO,KAAK,CAACI,MAAM,IAElCX,GAAG,8CAEF,CACR;AAEDY,yBAAyB,CAACP,WAAW,GAAG,2BAA2B","ignoreList":[]}

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

@@ -0,0 +1,59 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { PropertyListDensity, PropertyListLayoutName, PropertyListTone } from "./Styles";
+export declare const usePropertyListDensity: () => PropertyListDensity;
+export declare const usePropertyListLayout: () => PropertyListLayoutName;
+/** Sets the layout of the rows below it: one line each, or the three columns of a table. */
+export declare const PropertyListLayout: ({ value, children, }: {
+    value?: PropertyListLayoutName;
+    children?: ReactNode;
+}) => React.JSX.Element;
+/** The line between two rows. In a stacked list it starts where the label text starts. */
+export declare const PropertyListDivider: () => React.JSX.Element;
+export interface IPropertyListProps extends HTMLAttributes<HTMLDivElement> {
+    /** "form" for a compact list in a form, "page" for a list on a page, with a shadow. */
+    density?: PropertyListDensity;
+}
+export declare const PropertyList: React.ForwardRefExoticComponent<IPropertyListProps & React.RefAttributes<HTMLDivElement>>;
+export interface IPropertyListValueProps {
+    /** A row with no value shows its text in the placeholder color. */
+    placeholder?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const PropertyListValue: ({ placeholder, className, children, }: IPropertyListValueProps) => React.JSX.Element;
+/** The "Add" of a row: a placeholder with a plus where another row has its chevron. */
+export declare const PropertyListAdd: ({ children }: {
+    children?: ReactNode;
+}) => React.JSX.Element;
+export interface IPropertyListLabelProps {
+    icon?: ReactNode;
+    label?: ReactNode;
+}
+export declare const PropertyListLabel: ({ icon, label }: IPropertyListLabelProps) => React.JSX.Element;
+export interface IPropertyListRowProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    icon?: ReactNode;
+    label?: ReactNode;
+    value?: ReactNode;
+    /** A control before the chevron. */
+    action?: ReactNode;
+    tone?: PropertyListTone;
+    /** A read only row is plain text. A row that can change is one button. */
+    readOnly?: boolean;
+    chevron?: boolean;
+    /** Replaces the label, the value and the action. */
+    children?: ReactNode;
+}
+export declare const PropertyListRow: React.ForwardRefExoticComponent<IPropertyListRowProps & React.RefAttributes<HTMLElement>>;
+export interface IPropertyListToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The rows that the toggle opens are on the screen. */
+    expanded?: boolean;
+}
+/** The last row of a list: it opens and closes the rows with no value. */
+export declare const PropertyListToggle: React.ForwardRefExoticComponent<IPropertyListToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IPropertyListBranchProps extends HTMLAttributes<HTMLSpanElement> {
+    /** "middle" continues the line to the next row of the branch. */
+    position?: "middle" | "last";
+}
+/** The tree line before a row that belongs to the row above it. Its parent must be positioned. */
+export declare const PropertyListBranch: ({ position, ...rest }: IPropertyListBranchProps) => React.JSX.Element;
+//# sourceMappingURL=PropertyList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyList.d.ts","sourceRoot":"","sources":["../../../../src/components/PropertyList/PropertyList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,oBAAoB,EAGpB,cAAc,EAEd,SAAS,EAKV,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,gBAAgB,EAejB,MAAM,UAAU,CAAC;AAMlB,eAAO,MAAM,sBAAsB,2BAAmC,CAAC;AACvE,eAAO,MAAM,qBAAqB,8BAAkC,CAAC;AAErE,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,GAAI,sBAGhC;IACD,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,sBAA8E,CAAC;AAEhF,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,yBAO/B,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,uFAAuF;IACvF,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,2FAwBxB,CAAC;AAIF,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,GAAI,uCAI/B,uBAAuB,sBAWzB,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,sBAOrE,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,GAAI,iBAAiB,uBAAuB,sBAyCzE,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,2FA4D3B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,0EAA0E;AAC1E,eAAO,MAAM,kBAAkB,oGAa7B,CAAC;AAIH,MAAM,WAAW,wBACf,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC9B;AAED,kGAAkG;AAClG,eAAO,MAAM,kBAAkB,GAAI,uBAGhC,wBAAwB,sBAO1B,CAAC"}