@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/ChipGroup/ChipGroup.mjs

@@ -0,0 +1,54 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import '../../atoms/Avatar/Avatar.mjs';
+import '../../atoms/Badge/Badge.mjs';
+import '../../atoms/Box/Box.mjs';
+import '../../atoms/Button/Button.mjs';
+import '../../atoms/CategoryBadge/CategoryBadge.mjs';
+import '../../atoms/CategoryLabel/CategoryLabel.mjs';
+import { Chip } from '../../atoms/Chip/Chip.mjs';
+import '../../atoms/Icon/Icon.mjs';
+import '../../atoms/Chip/shared/ChipBase.mjs';
+import '../../atoms/Container/Container.mjs';
+import '../../atoms/Picture/Picture.mjs';
+import '../../atoms/DateFormatter/DateFormatter.mjs';
+import '../../atoms/IconButton/IconButton.mjs';
+import '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
+import '../../atoms/ProgressBar/ProgressBar.mjs';
+import '../../atoms/Divider/Divider.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import '../../atoms/StatusBadge/StatusBadge.mjs';
+import '../../atoms/StatusLabel/StatusLabel.mjs';
+import '../../atoms/Tag/Tag.mjs';
+import '../../atoms/Typography/Typography.mjs';
+
+var ChipGroupWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChipGroup__ChipGroupWrapper",
+  componentId: "sc-ae049w-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+var ChipGroup = function ChipGroup(_a) {
+  var labels = _a.labels,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    dataTestId = _a["data-testid"];
+  return jsx(ChipGroupWrapper, {
+    "data-testid": dataTestId,
+    children: jsx(Stack, {
+      direction: "row",
+      gap: "sm",
+      children: labels && labels.map(function (title, index) {
+        return jsx(Chip, {
+          title: title,
+          variant: variant
+        }, index);
+      })
+    })
+  });
+};
+var templateObject_1;
+
+export { ChipGroup };
+//# sourceMappingURL=ChipGroup.mjs.map

package/dist/components/molecules/ChipGroup/ChipGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/ChipGroup/index.d.mts

@@ -0,0 +1 @@
+export * from './ChipGroup.mjs';

package/dist/components/molecules/CodeBlock/CodeBlock.d.mts

@@ -0,0 +1,46 @@
+import React from 'react';
+export interface CodeBlockProps {
+    children: string;
+    showCopyButton?: boolean;
+    onCopy?: () => void;
+    /**
+     * Maximum height in pixels before content is collapsed.
+     * When set, enables expand/collapse functionality.
+     */
+    maxHeight?: number;
+    /**
+     * Initial expanded state when maxHeight is set.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    'data-testid'?: string;
+}
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export default CodeBlock;

package/dist/components/molecules/CodeBlock/CodeBlock.mjs

@@ -0,0 +1,231 @@
+'use client';
+import { __makeTemplateObject, __awaiter, __generator } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Button } from '../../atoms/Button/Button.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { reducedMotion, visuallyHidden } from '../../../lib/styleUtils.mjs';
+
+var _a = tokens.semantic,
+  color = _a.color,
+  border = _a.border,
+  motion = _a.motion;
+var StyledCodeBlock = /*#__PURE__*/styled.pre.withConfig({
+  displayName: "CodeBlock__StyledCodeBlock",
+  componentId: "sc-1p1t0kp-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color.text["default"], function (_a) {
+  var $isExpanded = _a.$isExpanded,
+    $needsExpansion = _a.$needsExpansion;
+  return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
+}, tokens.semantic.space[200], motion.duration.slow, motion.easing.standard, reducedMotion, function (_a) {
+  var $maxHeight = _a.$maxHeight,
+    $isExpanded = _a.$isExpanded,
+    $needsExpansion = _a.$needsExpansion;
+  if (!$maxHeight || !$needsExpansion) return '';
+  // Use a large value when expanded to allow smooth transition
+  // 10000px is effectively "no limit" for most code blocks
+  return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
+}, border.focus, border.focusOffset);
+var CodeBlockWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CodeBlock__CodeBlockWrapper",
+  componentId: "sc-1p1t0kp-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+var CopyButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CodeBlock__CopyButtonWrapper",
+  componentId: "sc-1p1t0kp-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), tokens.semantic.space[400], tokens.semantic.space[200]);
+var ExpandButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CodeBlock__ExpandButtonWrapper",
+  componentId: "sc-1p1t0kp-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", " 0;\n  position: absolute;\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  width: calc(100% - 2 * ", ");\n  margin-bottom: ", ";\n  border-radius: ", ";\n  transition: opacity ", " ", ", background ", " ", ";\n  \n  ", "\n"])), tokens.semantic.space[200], tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.border.width.thin, tokens.semantic.space[200], tokens.semantic.radius.sm, motion.duration.slow, motion.easing.standard, motion.duration.slow, motion.easing.standard, function (_a) {
+  var $hasGradient = _a.$hasGradient;
+  return $hasGradient ? "\n    margin-top: calc(-1 * ".concat(tokens.semantic.space[800], ");\n    padding-top: ").concat(tokens.semantic.space[800], ";\n    background: linear-gradient(\n      to bottom,\n      transparent 0%,\n      ").concat(tokens.semantic.surface.raised, " 60%\n    );\n  ") : "\n    background: transparent;\n  ";
+});
+var CopyButton = function CopyButton(_a) {
+  var text = _a.text,
+    onCopy = _a.onCopy;
+  var _b = useState(false),
+    copied = _b[0],
+    setCopied = _b[1];
+  var timeoutRef = useRef(null);
+  var handleCopy = function handleCopy() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var err_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, navigator.clipboard.writeText(text)];
+          case 1:
+            _a.sent();
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy();
+            // Clear any existing timeout
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+            // Set new timeout
+            timeoutRef.current = setTimeout(function () {
+              setCopied(false);
+              timeoutRef.current = null;
+            }, 2000);
+            return [3 /*break*/, 3];
+          case 2:
+            err_1 = _a.sent();
+            console.error('Failed to copy text: ', err_1);
+            return [3 /*break*/, 3];
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  // Cleanup timeout on unmount
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return jsx(CopyButtonWrapper, {
+    children: jsx(Button, {
+      variant: "secondary",
+      size: "small",
+      iconName: "copy",
+      onClick: handleCopy,
+      "data-testid": "copy-button",
+      children: copied ? 'Copied!' : 'Copy'
+    })
+  });
+};
+var LiveRegion = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CodeBlock__LiveRegion",
+  componentId: "sc-1p1t0kp-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */])), visuallyHidden);
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ * and expandable content for long code blocks.
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param maxHeight - Maximum height in pixels before enabling expand/collapse
+ * @param defaultExpanded - Initial expanded state when maxHeight is set
+ * @param data-testid - Test identifier for the code block
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeBlock>const x = 1;</CodeBlock>
+ *
+ * // With max height and expand/collapse
+ * <CodeBlock maxHeight={200}>
+ *   {longCodeString}
+ * </CodeBlock>
+ *
+ * // Start expanded
+ * <CodeBlock maxHeight={200} defaultExpanded>
+ *   {longCodeString}
+ * </CodeBlock>
+ * ```
+ */
+var CodeBlock = function CodeBlock(_a) {
+  var children = _a.children,
+    _b = _a.showCopyButton,
+    showCopyButton = _b === void 0 ? true : _b,
+    onCopy = _a.onCopy,
+    maxHeight = _a.maxHeight,
+    _c = _a.defaultExpanded,
+    defaultExpanded = _c === void 0 ? false : _c,
+    testId = _a["data-testid"];
+  var _d = useState(defaultExpanded),
+    isExpanded = _d[0],
+    setIsExpanded = _d[1];
+  var _e = useState(false),
+    needsExpansion = _e[0],
+    setNeedsExpansion = _e[1];
+  var _f = useState(''),
+    announcement = _f[0],
+    setAnnouncement = _f[1];
+  var contentRef = useRef(null);
+  // Check if content exceeds maxHeight
+  useEffect(function () {
+    if (maxHeight && contentRef.current) {
+      var scrollHeight = contentRef.current.scrollHeight;
+      setNeedsExpansion(scrollHeight > maxHeight);
+    }
+  }, [children, maxHeight]);
+  var handleToggleExpand = function handleToggleExpand() {
+    setIsExpanded(function (prev) {
+      return !prev;
+    });
+    // Announce state change to screen readers
+    setAnnouncement(isExpanded ? 'Code block collapsed' : 'Code block expanded');
+  };
+  var showExpandButton = maxHeight && needsExpansion;
+  return jsxs(CodeBlockWrapper, {
+    children: [jsx(StyledCodeBlock, {
+      ref: contentRef,
+      "data-testid": testId,
+      "$maxHeight": maxHeight,
+      "$isExpanded": isExpanded,
+      "$needsExpansion": needsExpansion,
+      "aria-expanded": showExpandButton ? isExpanded : undefined,
+      tabIndex: 0,
+      children: children
+    }), showExpandButton && jsx(ExpandButtonWrapper, {
+      "$hasGradient": !isExpanded,
+      children: jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        iconName: isExpanded ? 'caretUp' : 'caretDown',
+        onClick: handleToggleExpand,
+        "aria-expanded": isExpanded,
+        "aria-controls": testId,
+        "data-testid": "expand-button",
+        children: isExpanded ? 'Show less' : 'Show more'
+      })
+    }), showExpandButton && jsx(LiveRegion, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: announcement
+    }), showCopyButton && jsx(CopyButton, {
+      text: children,
+      onCopy: onCopy
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { CodeBlock, CodeBlock as default };
+//# sourceMappingURL=CodeBlock.mjs.map

package/dist/components/molecules/CodeBlock/CodeBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/CodeBlock/index.d.mts

@@ -0,0 +1 @@
+export * from './CodeBlock.mjs';

package/dist/components/molecules/DateGroup/DateGroup.d.mts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DateFormatMode } from '../../atoms/DateFormatter/index.mjs';
+export interface DateGroupProps {
+    /** The date for this group (used for formatting the header) */
+    date: Date | string;
+    /** Children to render under the date header (typically transactions) */
+    children: React.ReactNode;
+    /**
+     * Format mode for the date header, passed to DateFormatter's `mode`. `'relative'` is
+     * deprecated: it behaves exactly like `'smart'`, so use `'smart'` (#82).
+     */
+    format?: DateFormatMode;
+    /** Whether to show total amount for this date group */
+    showTotal?: boolean;
+    /** Total amount for this date group (shown if showTotal is true) */
+    totalAmount?: number;
+    /** Whether to show count of items in this group */
+    showCount?: boolean;
+    /** Count of items in this group (shown if showCount is true) */
+    count?: number;
+    /** Whether to make the header sticky (useful for scrolling lists) */
+    sticky?: boolean;
+    /** Currency for total amount display */
+    currency?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * DateGroup component
+ *
+ * Groups related content (typically transactions) under a formatted date header
+ * with optional total amount and item count displays. Supports sticky headers
+ * for scrolling lists.
+ *
+ * Composes: DateFormatter, MoneyDisplay, Stack, Typography
+ */
+export declare const DateGroup: React.FC<DateGroupProps>;

package/dist/components/molecules/DateGroup/DateGroup.mjs

@@ -0,0 +1,104 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { DateFormatter } from '../../atoms/DateFormatter/DateFormatter.mjs';
+import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var StyledHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DateGroup__StyledHeader",
+  componentId: "sc-9nfm1f-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  \n  ", "\n"])), tokens.semantic.space[300], tokens.semantic.space[200], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], function (_a) {
+  var $sticky = _a.$sticky;
+  return $sticky && "\n    position: sticky;\n    top: 0;\n    z-index: ".concat(tokens.semantic.layer.sticky, ";\n    box-shadow: ").concat(tokens.semantic.elevation.sticky, ";\n  ");
+});
+var StyledLeftSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DateGroup__StyledLeftSection",
+  componentId: "sc-9nfm1f-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledRightSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DateGroup__StyledRightSection",
+  componentId: "sc-9nfm1f-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[300]);
+var StyledContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DateGroup__StyledContent",
+  componentId: "sc-9nfm1f-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* Content area for children */\n"], ["\n  /* Content area for children */\n"
+/**
+ * DateGroup component
+ *
+ * Groups related content (typically transactions) under a formatted date header
+ * with optional total amount and item count displays. Supports sticky headers
+ * for scrolling lists.
+ *
+ * Composes: DateFormatter, MoneyDisplay, Stack, Typography
+ */])));
+/**
+ * DateGroup component
+ *
+ * Groups related content (typically transactions) under a formatted date header
+ * with optional total amount and item count displays. Supports sticky headers
+ * for scrolling lists.
+ *
+ * Composes: DateFormatter, MoneyDisplay, Stack, Typography
+ */
+var DateGroup = function DateGroup(_a) {
+  var date = _a.date,
+    children = _a.children,
+    _b = _a.format,
+    format = _b === void 0 ? 'smart' : _b,
+    _c = _a.showTotal,
+    showTotal = _c === void 0 ? false : _c,
+    totalAmount = _a.totalAmount,
+    _d = _a.showCount,
+    showCount = _d === void 0 ? false : _d,
+    count = _a.count,
+    _e = _a.sticky,
+    sticky = _e === void 0 ? false : _e,
+    _f = _a.currency,
+    currency = _f === void 0 ? 'AUD' : _f,
+    dataTestId = _a["data-testid"];
+  // Determine total variant based on amount (positive = income, negative = expense)
+  var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
+  return jsxs("div", {
+    "data-testid": dataTestId,
+    role: "group",
+    "aria-label": "Transactions for ".concat(date),
+    children: [jsxs(StyledHeader, {
+      "$sticky": sticky,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
+      children: [jsxs(StyledLeftSection, {
+        children: [jsx(DateFormatter, {
+          dateString: typeof date === 'string' ? date : date.toISOString(),
+          mode: format,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
+        }), showCount && count !== undefined && jsxs(Typography, {
+          variant: "caption",
+          color: "subdued",
+          "data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined,
+          children: ["(", count, " ", count === 1 ? 'item' : 'items', ")"]
+        })]
+      }), jsx(StyledRightSection, {
+        children: showTotal && totalAmount !== undefined && jsx(MoneyDisplay, {
+          amount: totalAmount,
+          currency: currency,
+          variant: totalVariant,
+          size: "small",
+          weight: "medium",
+          showSign: true,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
+        })
+      })]
+    }), jsx(StyledContent, {
+      "data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined,
+      children: children
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { DateGroup };
+//# sourceMappingURL=DateGroup.mjs.map

package/dist/components/molecules/DateGroup/DateGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateGroup.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/DateGroup/index.d.mts

@@ -0,0 +1,2 @@
+export { DateGroup } from './DateGroup.mjs';
+export type { DateGroupProps } from './DateGroup.mjs';

package/dist/components/molecules/Dropdown/Dropdown.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+interface DropdownOption {
+    id: string;
+    label: string;
+    value?: any;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+declare const DropdownOption: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, {
+    $isSelected: boolean;
+    $isFocused: boolean;
+}>> & string;
+export declare const Dropdown: React.FC<DropdownProps>;
+export {};