@activecollab/components 2.0.498 → 2.0.499

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 .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 .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,umDAwCzB;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"}

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