@spaced-out/ui-design-system 0.5.17 → 0.5.19

package/lib/components/Checklist/index.d.ts

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

package/lib/components/Checklist/index.d.ts.map

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

package/lib/components/Checklist/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Checklist = require("./Checklist");
+Object.keys(_Checklist).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Checklist[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Checklist[key];
+    }
+  });
+});

package/lib/components/PromptChip/PromptChip.d.ts

@@ -37,6 +37,7 @@ export type PromptChipProps = {
     rightSlot?: React.ReactNode;
     showInfoIcon?: boolean;
     infoIconTooltip?: BaseTooltipProps;
+    isMultiline?: boolean;
 };
 export declare const PromptChip: Flow.AbstractComponent<PromptChipProps, HTMLDivElement>;
 export {};

package/lib/components/PromptChip/PromptChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA6If,CAAC"}
+{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA+If,CAAC"}

package/lib/components/PromptChip/PromptChip.js

@@ -32,7 +32,8 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
     dismissable,
     showInfoIcon,
     infoIconTooltip,
-    testId
+    testId,
+    isMultiline
   } = props;
   // Type narrowing to safely access properties only when they exist
   const onDismiss = dismissable === true && 'onDismiss' in props ? props.onDismiss : undefined;
@@ -63,19 +64,20 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
       role: "button",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classify.classify)(_PromptChipModule.default.promptChipContainer, {
-          [_PromptChipModule.default.promptChipContainerHover]: !!onClick
+          [_PromptChipModule.default.promptChipContainerHover]: !!onClick,
+          [_PromptChipModule.default.multilinePromptChipContainer]: !!isMultiline
         }, classNames?.container),
         "data-testid": (0, _qa.generateTestId)({
           base: testId,
           slot: 'content'
         }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _classify.classify)(_PromptChipModule.default.leftSection, classNames?.leftSlot),
           "data-testid": (0, _qa.generateTestId)({
             base: testId,
             slot: 'left'
           }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             size: _Icon.ICON_SIZE.small,
             name: iconName,
             type: iconType,
@@ -87,14 +89,14 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
               base: testId,
               slot: 'icon'
             })
-          }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children),
-            "data-testid": (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'text'
-            }),
-            children: children
-          })]
+          })
+        }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'text'
+          }),
+          children: children
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _classify.classify)(_PromptChipModule.default.rightSection, classNames?.rightSlot),
           "data-testid": (0, _qa.generateTestId)({

package/lib/components/PromptChip/PromptChip.module.css

@@ -1,29 +1,32 @@
 @value (
-    spaceSmall,
-    spaceXSmall,
-    spaceFluid
+  spaceSmall,
+  spaceXSmall,
+  spaceFluid
 ) from '../../styles/variables/_space.css';
+
 @value (
-    colorDataViz2,
-    colorFillPrimary,
-    colorInformation,
-    colorFocusPrimary,
-    colorFillSecondary,
-    colorTextClickable,
-    colorNeutralLightest,
-    colorBackgroundTertiary,
-    colorInformationLightest
- ) from '../../styles/variables/_color.css';
+  colorDataViz2,
+  colorFillPrimary,
+  colorInformation,
+  colorFocusPrimary,
+  colorFillSecondary,
+  colorTextClickable,
+  colorNeutralLightest,
+  colorBackgroundTertiary,
+  colorInformationLightest
+) from '../../styles/variables/_color.css';
+
 @value (
-    borderWidthNone,  
-    borderRadiusMedium,
-    borderWidthPrimary,
-    borderWidthTertiary
- ) from '../../styles/variables/_border.css';
+  borderWidthNone,
+  borderRadiusMedium,
+  borderWidthPrimary,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
 @value (
-    opacity0,
-    opacity100
- ) from '../../styles/variables/_opacity.css';
+  opacity0,
+  opacity100
+) from '../../styles/variables/_opacity.css';
 
 .promptChipWrapper {
   composes: boxShadow2 from '../../styles/shadow.module.css';
@@ -53,41 +56,70 @@
   background-color: colorNeutralLightest;
 }
 
+/* ---- Grid Layout for Content ---- */
 .promptChipContainer {
-  display: flex;
+  display: grid;
   width: spaceFluid;
   gap: spaceSmall;
   padding: spaceXSmall;
   padding-left: spaceSmall;
   align-items: center;
   border-radius: borderRadiusMedium;
-  justify-content: space-between;
 
-  & .chipIconDefaultColor {
+  .chipIconDefaultColor {
     color: colorDataViz2;
   }
-}
 
-.promptChipContainerHover:hover {
-  background-image: linear-gradient(
-    to right,
-    colorFillSecondary,
-    colorInformationLightest
-  );
-  cursor: pointer;
-
-  & .chipIconDefaultColor {
-    color: colorTextClickable;
+  /* 
+    NORMAL MODE (when isMultiline={false}):
+    - single row, 3 columns: icon | children | right
+  */
+  &:not(.multilinePromptChipContainer) {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: 'leftSection childrenWrapper rightSection';
+  }
+
+  /*
+    MULTILINE MODE (when isMultiline={true}):
+    - 2 rows: first row for icon (leftSection) and actions (rightSection)
+    - children on second row spanning full width
+  */
+  &.multilinePromptChipContainer {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'leftSection . rightSection'
+      'childrenWrapper childrenWrapper childrenWrapper';
+  }
+
+  &.promptChipContainerHover:hover {
+    background-image: linear-gradient(
+      to right,
+      colorFillSecondary,
+      colorInformationLightest
+    );
+    cursor: pointer;
+
+    .chipIconDefaultColor {
+      color: colorTextClickable;
+    }
   }
 }
 
-.leftSection,
-.rightSection {
+.leftSection {
+  grid-area: leftSection;
   display: flex;
   gap: spaceSmall;
   align-items: center;
 }
 
 .childrenWrapper {
+  grid-area: childrenWrapper;
   composes: bodyMedium from '../../styles/typography.module.css';
 }
+
+.rightSection {
+  grid-area: rightSection;
+  display: flex;
+  gap: spaceSmall;
+  align-items: center;
+}

package/lib/components/TemplateCard/TemplateCard.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { IconType } from '../../components/Icon';
+export declare const TEMPLATE_CARD_HEADER_COLOR: Readonly<{
+    information: "information";
+    success: "success";
+    warning: "warning";
+    error: "error";
+    neutral: "neutral";
+    pending: "pending";
+}>;
+export type HeaderColorType = (typeof TEMPLATE_CARD_HEADER_COLOR)[keyof typeof TEMPLATE_CARD_HEADER_COLOR];
+type ClassNames = Readonly<{
+    wrapper?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+}>;
+export interface TemplateCardProps {
+    headerColor?: HeaderColorType;
+    iconName: string;
+    iconType?: IconType;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    classNames?: ClassNames;
+    testId?: string;
+}
+export declare const TemplateCard: React.ForwardRefExoticComponent<TemplateCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TemplateCard.d.ts.map

package/lib/components/TemplateCard/TemplateCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCard.d.ts","sourceRoot":"","sources":["../../../src/components/TemplateCard/TemplateCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAMlD,eAAO,MAAM,0BAA0B;;;;;;;EAOrC,CAAC;AAEH,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,OAAO,0BAA0B,CAAC,CAAC;AAE/E,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,0FAsExB,CAAC"}

package/lib/components/TemplateCard/TemplateCard.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateCard = exports.TEMPLATE_CARD_HEADER_COLOR = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _TemplateCardModule = _interopRequireDefault(require("./TemplateCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TEMPLATE_CARD_HEADER_COLOR = exports.TEMPLATE_CARD_HEADER_COLOR = Object.freeze({
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+  neutral: 'neutral',
+  pending: 'pending'
+});
+const TemplateCard = exports.TemplateCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    headerColor = 'neutral',
+    iconName,
+    iconType = 'solid',
+    footer,
+    children,
+    classNames,
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classify.default)(_TemplateCardModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.header, _TemplateCardModule.default[headerColor], classNames?.header),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_TemplateCardModule.default.iconContainer, _TemplateCardModule.default[headerColor]),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon-container'
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: iconName,
+          type: iconType,
+          size: "large",
+          className: _TemplateCardModule.default[headerColor],
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'icon'
+          })
+        })
+      })
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.content, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_TemplateCardModule.default.footer, classNames?.footer),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'footer'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _TemplateCardModule.default.footerSeparator,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer-separator'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _TemplateCardModule.default.footerContent,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer-content'
+        }),
+        children: footer
+      })]
+    })]
+  });
+});

package/lib/components/TemplateCard/TemplateCard.module.css

@@ -0,0 +1,170 @@
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorNeutral,
+  colorInformationLightest,
+  colorInformation,
+  colorSuccessLightest,
+  colorSuccess,
+  colorDangerLightest,
+  colorDanger,
+  colorWarningLightest,
+  colorWarning
+) from '../../styles/variables/_color.css';
+
+@value (
+  size58,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceSmall,
+  spaceMedium,
+  spaceLarge
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderRadiusSmall,
+  borderRadiusCircle,
+  borderWidthPrimary,
+  borderWidthSecondary
+) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusSmall;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  overflow: hidden;
+}
+
+.header {
+  position: relative;
+  width: sizeFluid;
+  height: 49px;
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Header background colors for each state */
+.header.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.header.information {
+  background-color: colorInformationLightest;
+}
+
+.header.success {
+  background-color: colorSuccessLightest;
+}
+
+.header.warning {
+  background-color: colorWarningLightest;
+}
+
+.header.error {
+  background-color: colorDangerLightest;
+}
+
+.header.pending {
+  background-color: colorWarningLightest;
+}
+
+.iconContainer {
+  position: absolute;
+  left: spaceSmall;
+  top: spaceSmall;
+  width: size58;
+  height: size58;
+  min-width: size58;
+  min-height: size58;
+  border-radius: borderRadiusCircle;
+  border: borderWidthSecondary solid colorBackgroundTertiary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Icon container background colors for each state */
+.iconContainer.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.iconContainer.information {
+  background-color: colorInformationLightest;
+}
+
+.iconContainer.success {
+  background-color: colorSuccessLightest;
+}
+
+.iconContainer.warning {
+  background-color: colorWarningLightest;
+}
+
+.iconContainer.error {
+  background-color: colorDangerLightest;
+}
+
+.iconContainer.pending {
+  background-color: colorWarningLightest;
+}
+
+/* Icon colors using descendant selectors */
+.iconContainer .neutral {
+  color: colorNeutral;
+}
+
+.iconContainer .information {
+  color: colorInformation;
+}
+
+.iconContainer .success {
+  color: colorSuccess;
+}
+
+.iconContainer .warning {
+  color: colorWarning;
+}
+
+.iconContainer .error {
+  color: colorDanger;
+}
+
+.iconContainer .pending {
+  color: colorWarning;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall spaceMedium;
+  padding-top: spaceLarge;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall spaceMedium;
+  padding-top: 0;
+  gap: spaceSmall;
+}
+
+.footerSeparator {
+  width: sizeFluid;
+  height: 0;
+  composes: borderTopPrimary from '../../styles/border.module.css';
+}
+
+.footerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: sizeFluid;
+}

package/lib/components/TemplateCard/index.d.ts

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

package/lib/components/TemplateCard/index.d.ts.map

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

package/lib/components/TemplateCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TemplateCard = require("./TemplateCard");
+Object.keys(_TemplateCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TemplateCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TemplateCard[key];
+    }
+  });
+});

package/lib/components/index.d.ts

@@ -12,6 +12,7 @@ export * from '../components/Card';
 export * from '../components/Charts';
 export * from '../components/ChatBubble';
 export * from '../components/Checkbox';
+export * from '../components/Checklist';
 export * from '../components/Chip';
 export * from '../components/CircularLoader';
 export * from '../components/CollapsibleCard';
@@ -62,6 +63,7 @@ export * from '../components/StickyBar';
 export * from '../components/SubMenu';
 export * from '../components/Table';
 export * from '../components/Tabs';
+export * from '../components/TemplateCard';
 export * from '../components/Text';
 export * from '../components/Textarea';
 export * from '../components/TextTile';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/lib/components/index.js

@@ -157,6 +157,17 @@ Object.keys(_Checkbox).forEach(function (key) {
     }
   });
 });
+var _Checklist = require("./Checklist");
+Object.keys(_Checklist).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Checklist[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Checklist[key];
+    }
+  });
+});
 var _Chip = require("./Chip");
 Object.keys(_Chip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -707,6 +718,17 @@ Object.keys(_Tabs).forEach(function (key) {
     }
   });
 });
+var _TemplateCard = require("./TemplateCard");
+Object.keys(_TemplateCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TemplateCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TemplateCard[key];
+    }
+  });
+});
 var _Text = require("./Text");
 Object.keys(_Text).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;