@j2-health/design-system 0.5.4 → 0.6.0

package/dist/src/components/listRow/ListRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.cjs","names":["cx","Checkbox","Radio"],"sources":["../../../../src/components/listRow/ListRow.tsx"],"sourcesContent":["import cx from 'classnames'\n\nimport { Checkbox } from '../checkbox'\nimport { Radio } from '../radio'\n\ntype SelectionProps =\n  | {\n      /**\n       * A leading control bound to `selected`: `'checkbox'` for picking\n       * several rows, `'radio'` for picking one. Using it doesn't trigger\n       * `onClick`, so a row can open a record and be selected separately.\n       */\n      selection: 'checkbox' | 'radio'\n      /** Called when the selection control changes. */\n      onSelectedChange?: (selected: boolean) => void\n      /** Accessible name for the selection control, e.g. the row's title. */\n      selectionLabel: string\n    }\n  | {\n      selection?: undefined\n      onSelectedChange?: undefined\n      selectionLabel?: undefined\n    }\n\nexport type ListRowProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onClick'\n> &\n  SelectionProps & {\n    /** The row is part of the current selection. */\n    selected?: boolean\n    /**\n     * The row carries a change that has not been applied yet. Wins over\n     * `selected`, so a pending row reads the same whether or not it is selected.\n     */\n    pending?: boolean\n    /**\n     * Light the row as if hovered. For hover driven from elsewhere, e.g. the\n     * matching marker on a map; the row's own `:hover` works without it.\n     */\n    highlighted?: boolean\n    /** Makes the row a button: focusable, and Enter or Space activates it. */\n    onClick?: () => void\n    /** Called with `true` on pointer enter and `false` on leave. */\n    onHoverChange?: (hovered: boolean) => void\n  }\n\n/**\n * A row in a list of records, with hover, selected and pending states.\n * Precedence: pending, then selected, then hover. A selected row keeps its\n * own fill under the cursor rather than stacking a hover tint on top.\n */\nexport const ListRow = ({\n  selected = false,\n  pending = false,\n  highlighted = false,\n  onClick,\n  onHoverChange,\n  selection,\n  onSelectedChange,\n  selectionLabel,\n  className,\n  children,\n  onKeyDown,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: ListRowProps) => {\n  const resting = !pending && !selected\n\n  return (\n    <div\n      {...props}\n      data-selected={selected || undefined}\n      data-pending={pending || undefined}\n      role={onClick ? 'button' : props.role}\n      tabIndex={onClick ? 0 : props.tabIndex}\n      aria-pressed={onClick && !selection ? selected : undefined}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (!onClick || event.defaultPrevented) return\n        if (event.target !== event.currentTarget) return\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n          onClick()\n        }\n      }}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event)\n        onHoverChange?.(true)\n      }}\n      onMouseLeave={(event) => {\n        onMouseLeave?.(event)\n        onHoverChange?.(false)\n      }}\n      className={cx(\n        'border-b border-j2-gray-3 px-4 py-3 transition-colors',\n        onClick && 'cursor-pointer',\n        pending && 'bg-[var(--j2-color-warning-bg)]',\n        !pending && selected && 'bg-[var(--j2-color-primary-bg-hover)]',\n        resting && (highlighted ? 'bg-j2-gray-3' : 'hover:bg-j2-gray-3'),\n        className\n      )}\n    >\n      {selection ? (\n        <div className=\"flex items-start gap-2\">\n          <span\n            className=\"flex shrink-0 pt-0.5\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            {selection === 'checkbox' ? (\n              <Checkbox\n                checked={selected}\n                aria-label={selectionLabel}\n                onChange={(event) => onSelectedChange?.(event.target.checked)}\n              />\n            ) : (\n              <Radio\n                checked={selected}\n                aria-label={selectionLabel}\n                onChange={() => onSelectedChange?.(true)}\n              />\n            )}\n          </span>\n          <div className=\"min-w-0 flex-1\">{children}</div>\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAoDA,IAAa,WAAW,EACtB,WAAW,OACX,UAAU,OACV,cAAc,OACd,SACA,eACA,WACA,kBACA,gBACA,WACA,UACA,WACA,cACA,cACA,GAAG,YACe;CAClB,MAAM,UAAU,CAAC,WAAW,CAAC;CAE7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,iBAAe,YAAY,KAAA;EAC3B,gBAAc,WAAW,KAAA;EACzB,MAAM,UAAU,WAAW,MAAM;EACjC,UAAU,UAAU,IAAI,MAAM;EAC9B,gBAAc,WAAW,CAAC,YAAY,WAAW,KAAA;EACxC;EACT,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,CAAC,WAAW,MAAM,kBAAkB;GACxC,IAAI,MAAM,WAAW,MAAM,eAAe;GAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,QAAQ;GACV;EACF;EACA,eAAe,UAAU;GACvB,eAAe,KAAK;GACpB,gBAAgB,IAAI;EACtB;EACA,eAAe,UAAU;GACvB,eAAe,KAAK;GACpB,gBAAgB,KAAK;EACvB;EACA,YAAA,GAAWA,WAAAA,QAAAA,CACT,yDACA,WAAW,kBACX,WAAW,mCACX,CAAC,WAAW,YAAY,yCACxB,YAAY,cAAc,iBAAiB,uBAC3C,SACF;EAEC,UAAA,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAU;IACV,UAAU,UAAU,MAAM,gBAAgB;IAEzC,UAAA,cAAc,aACb,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;KACE,SAAS;KACT,cAAY;KACZ,WAAW,UAAU,mBAAmB,MAAM,OAAO,OAAO;IAC7D,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;KACE,SAAS;KACT,cAAY;KACZ,gBAAgB,mBAAmB,IAAI;IACxC,CAAA;GAEC,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAC5C;EAEL,CAAA,IAAA;CAEC,CAAA;AAET"}

package/dist/src/components/listRow/ListRow.d.ts

@@ -0,0 +1,41 @@
+type SelectionProps = {
+    /**
+     * A leading control bound to `selected`: `'checkbox'` for picking
+     * several rows, `'radio'` for picking one. Using it doesn't trigger
+     * `onClick`, so a row can open a record and be selected separately.
+     */
+    selection: 'checkbox' | 'radio';
+    /** Called when the selection control changes. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Accessible name for the selection control, e.g. the row's title. */
+    selectionLabel: string;
+} | {
+    selection?: undefined;
+    onSelectedChange?: undefined;
+    selectionLabel?: undefined;
+};
+export type ListRowProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> & SelectionProps & {
+    /** The row is part of the current selection. */
+    selected?: boolean;
+    /**
+     * The row carries a change that has not been applied yet. Wins over
+     * `selected`, so a pending row reads the same whether or not it is selected.
+     */
+    pending?: boolean;
+    /**
+     * Light the row as if hovered. For hover driven from elsewhere, e.g. the
+     * matching marker on a map; the row's own `:hover` works without it.
+     */
+    highlighted?: boolean;
+    /** Makes the row a button: focusable, and Enter or Space activates it. */
+    onClick?: () => void;
+    /** Called with `true` on pointer enter and `false` on leave. */
+    onHoverChange?: (hovered: boolean) => void;
+};
+/**
+ * A row in a list of records, with hover, selected and pending states.
+ * Precedence: pending, then selected, then hover. A selected row keeps its
+ * own fill under the cursor rather than stacking a hover tint on top.
+ */
+export declare const ListRow: ({ selected, pending, highlighted, onClick, onHoverChange, selection, onSelectedChange, selectionLabel, className, children, onKeyDown, onMouseEnter, onMouseLeave, ...props }: ListRowProps) => import('react').JSX.Element;
+export {};

package/dist/src/components/listRow/ListRow.js

@@ -0,0 +1,63 @@
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { Radio } from "../radio/Radio.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/listRow/ListRow.tsx
+/**
+* A row in a list of records, with hover, selected and pending states.
+* Precedence: pending, then selected, then hover. A selected row keeps its
+* own fill under the cursor rather than stacking a hover tint on top.
+*/
+var ListRow = ({ selected = false, pending = false, highlighted = false, onClick, onHoverChange, selection, onSelectedChange, selectionLabel, className, children, onKeyDown, onMouseEnter, onMouseLeave, ...props }) => {
+	const resting = !pending && !selected;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-selected": selected || void 0,
+		"data-pending": pending || void 0,
+		role: onClick ? "button" : props.role,
+		tabIndex: onClick ? 0 : props.tabIndex,
+		"aria-pressed": onClick && !selection ? selected : void 0,
+		onClick,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (!onClick || event.defaultPrevented) return;
+			if (event.target !== event.currentTarget) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onClick();
+			}
+		},
+		onMouseEnter: (event) => {
+			onMouseEnter?.(event);
+			onHoverChange?.(true);
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			onHoverChange?.(false);
+		},
+		className: cx("border-b border-j2-gray-3 px-4 py-3 transition-colors", onClick && "cursor-pointer", pending && "bg-[var(--j2-color-warning-bg)]", !pending && selected && "bg-[var(--j2-color-primary-bg-hover)]", resting && (highlighted ? "bg-j2-gray-3" : "hover:bg-j2-gray-3"), className),
+		children: selection ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0 pt-0.5",
+				onClick: (event) => event.stopPropagation(),
+				children: selection === "checkbox" ? /* @__PURE__ */ jsx(Checkbox, {
+					checked: selected,
+					"aria-label": selectionLabel,
+					onChange: (event) => onSelectedChange?.(event.target.checked)
+				}) : /* @__PURE__ */ jsx(Radio, {
+					checked: selected,
+					"aria-label": selectionLabel,
+					onChange: () => onSelectedChange?.(true)
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children
+			})]
+		}) : children
+	});
+};
+//#endregion
+export { ListRow };
+
+//# sourceMappingURL=ListRow.js.map

package/dist/src/components/listRow/ListRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.js","names":[],"sources":["../../../../src/components/listRow/ListRow.tsx"],"sourcesContent":["import cx from 'classnames'\n\nimport { Checkbox } from '../checkbox'\nimport { Radio } from '../radio'\n\ntype SelectionProps =\n  | {\n      /**\n       * A leading control bound to `selected`: `'checkbox'` for picking\n       * several rows, `'radio'` for picking one. Using it doesn't trigger\n       * `onClick`, so a row can open a record and be selected separately.\n       */\n      selection: 'checkbox' | 'radio'\n      /** Called when the selection control changes. */\n      onSelectedChange?: (selected: boolean) => void\n      /** Accessible name for the selection control, e.g. the row's title. */\n      selectionLabel: string\n    }\n  | {\n      selection?: undefined\n      onSelectedChange?: undefined\n      selectionLabel?: undefined\n    }\n\nexport type ListRowProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onClick'\n> &\n  SelectionProps & {\n    /** The row is part of the current selection. */\n    selected?: boolean\n    /**\n     * The row carries a change that has not been applied yet. Wins over\n     * `selected`, so a pending row reads the same whether or not it is selected.\n     */\n    pending?: boolean\n    /**\n     * Light the row as if hovered. For hover driven from elsewhere, e.g. the\n     * matching marker on a map; the row's own `:hover` works without it.\n     */\n    highlighted?: boolean\n    /** Makes the row a button: focusable, and Enter or Space activates it. */\n    onClick?: () => void\n    /** Called with `true` on pointer enter and `false` on leave. */\n    onHoverChange?: (hovered: boolean) => void\n  }\n\n/**\n * A row in a list of records, with hover, selected and pending states.\n * Precedence: pending, then selected, then hover. A selected row keeps its\n * own fill under the cursor rather than stacking a hover tint on top.\n */\nexport const ListRow = ({\n  selected = false,\n  pending = false,\n  highlighted = false,\n  onClick,\n  onHoverChange,\n  selection,\n  onSelectedChange,\n  selectionLabel,\n  className,\n  children,\n  onKeyDown,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: ListRowProps) => {\n  const resting = !pending && !selected\n\n  return (\n    <div\n      {...props}\n      data-selected={selected || undefined}\n      data-pending={pending || undefined}\n      role={onClick ? 'button' : props.role}\n      tabIndex={onClick ? 0 : props.tabIndex}\n      aria-pressed={onClick && !selection ? selected : undefined}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (!onClick || event.defaultPrevented) return\n        if (event.target !== event.currentTarget) return\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n          onClick()\n        }\n      }}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event)\n        onHoverChange?.(true)\n      }}\n      onMouseLeave={(event) => {\n        onMouseLeave?.(event)\n        onHoverChange?.(false)\n      }}\n      className={cx(\n        'border-b border-j2-gray-3 px-4 py-3 transition-colors',\n        onClick && 'cursor-pointer',\n        pending && 'bg-[var(--j2-color-warning-bg)]',\n        !pending && selected && 'bg-[var(--j2-color-primary-bg-hover)]',\n        resting && (highlighted ? 'bg-j2-gray-3' : 'hover:bg-j2-gray-3'),\n        className\n      )}\n    >\n      {selection ? (\n        <div className=\"flex items-start gap-2\">\n          <span\n            className=\"flex shrink-0 pt-0.5\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            {selection === 'checkbox' ? (\n              <Checkbox\n                checked={selected}\n                aria-label={selectionLabel}\n                onChange={(event) => onSelectedChange?.(event.target.checked)}\n              />\n            ) : (\n              <Radio\n                checked={selected}\n                aria-label={selectionLabel}\n                onChange={() => onSelectedChange?.(true)}\n              />\n            )}\n          </span>\n          <div className=\"min-w-0 flex-1\">{children}</div>\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoDA,IAAa,WAAW,EACtB,WAAW,OACX,UAAU,OACV,cAAc,OACd,SACA,eACA,WACA,kBACA,gBACA,WACA,UACA,WACA,cACA,cACA,GAAG,YACe;CAClB,MAAM,UAAU,CAAC,WAAW,CAAC;CAE7B,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,iBAAe,YAAY,KAAA;EAC3B,gBAAc,WAAW,KAAA;EACzB,MAAM,UAAU,WAAW,MAAM;EACjC,UAAU,UAAU,IAAI,MAAM;EAC9B,gBAAc,WAAW,CAAC,YAAY,WAAW,KAAA;EACxC;EACT,YAAY,UAAU;GACpB,YAAY,KAAK;GACjB,IAAI,CAAC,WAAW,MAAM,kBAAkB;GACxC,IAAI,MAAM,WAAW,MAAM,eAAe;GAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,QAAQ;GACV;EACF;EACA,eAAe,UAAU;GACvB,eAAe,KAAK;GACpB,gBAAgB,IAAI;EACtB;EACA,eAAe,UAAU;GACvB,eAAe,KAAK;GACpB,gBAAgB,KAAK;EACvB;EACA,WAAW,GACT,yDACA,WAAW,kBACX,WAAW,mCACX,CAAC,WAAW,YAAY,yCACxB,YAAY,cAAc,iBAAiB,uBAC3C,SACF;EAEC,UAAA,YACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IACE,WAAU;IACV,UAAU,UAAU,MAAM,gBAAgB;IAEzC,UAAA,cAAc,aACb,oBAAC,UAAD;KACE,SAAS;KACT,cAAY;KACZ,WAAW,UAAU,mBAAmB,MAAM,OAAO,OAAO;IAC7D,CAAA,IAED,oBAAC,OAAD;KACE,SAAS;KACT,cAAY;KACZ,gBAAgB,mBAAmB,IAAI;IACxC,CAAA;GAEC,CAAA,GACN,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAC5C;EAEL,CAAA,IAAA;CAEC,CAAA;AAET"}

package/dist/src/components/listRow/index.d.ts

@@ -0,0 +1 @@
+export { ListRow, type ListRowProps } from './ListRow.js';

package/dist/src/components/modal/Modal.cjs

@@ -7,10 +7,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/modal/Modal.tsx
-var Modal = ({ open, title, children, onCancel, withContentPadding: withPadding = true, ...props }) => {
+var Modal = ({ open, title, children, onCancel, withContentPadding: withPadding = true, subtitle, className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Modal, {
-		title,
-		className: (0, classnames.default)("j2-modal"),
+		title: subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-normal text-j2-text-secondary",
+				children: subtitle
+			})]
+		}) : title,
+		className: (0, classnames.default)("j2-modal", className),
 		centered: true,
 		closeIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.XIcon, {
 			size: 22,

package/dist/src/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","names":["AntdModal","cx","XIcon"],"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,EACb,MACA,OACA,UACA,UACA,oBAAoB,cAAc,MAClC,GAAG,YACQ;CACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,OAAD;EACS;EACP,YAAA,GAAWC,WAAAA,QAAAA,CAAG,UAAU;EACxB,UAAA;EACA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAD;GAAO,MAAM;GAAI,QAAO;EAAW,CAAA;EACpC;EACJ;EACN,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,YAAA,GAAWD,WAAAA,QAAAA,CAAG,cAAc,cAAc,WAAW;GACvD;EACE,CAAA;CACI,CAAA;AAEf"}
+{"version":3,"file":"Modal.cjs","names":["AntdModal","cx","XIcon"],"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n  /** A line of supporting text under the title. */\n  subtitle?: React.ReactNode\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  subtitle,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={\n        subtitle ? (\n          <div className=\"flex flex-col gap-1\">\n            <span>{title}</span>\n            <span className=\"text-sm font-normal text-j2-text-secondary\">\n              {subtitle}\n            </span>\n          </div>\n        ) : (\n          title\n        )\n      }\n      className={cx('j2-modal', className)}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"mappings":";;;;;;;;;AAWA,IAAM,SAAS,EACb,MACA,OACA,UACA,UACA,oBAAoB,cAAc,MAClC,UACA,WACA,GAAG,YACQ;CACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,OAAD;EACE,OACE,WACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA,CACH;EAEL,CAAA,IAAA;EAGJ,YAAA,GAAWC,WAAAA,QAAAA,CAAG,YAAY,SAAS;EACnC,UAAA;EACA,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,OAAD;GAAO,MAAM;GAAI,QAAO;EAAW,CAAA;EACpC;EACJ;EACN,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,YAAA,GAAWD,WAAAA,QAAAA,CAAG,cAAc,cAAc,WAAW;GACvD;EACE,CAAA;CACI,CAAA;AAEf"}

package/dist/src/components/modal/Modal.d.ts

@@ -1,6 +1,8 @@
 import { ModalProps } from 'antd';
 export type Props = {
     withContentPadding?: boolean;
+    /** A line of supporting text under the title. */
+    subtitle?: React.ReactNode;
 } & Expand<ModalProps>;
-declare const Modal: ({ open, title, children, onCancel, withContentPadding: withPadding, ...props }: Props) => import('react').JSX.Element;
+declare const Modal: ({ open, title, children, onCancel, withContentPadding: withPadding, subtitle, className, ...props }: Props) => import('react').JSX.Element;
 export { Modal };

package/dist/src/components/modal/Modal.js

@@ -1,13 +1,19 @@
 /* empty css          */
 import { Modal } from "antd";
 import { XIcon } from "@phosphor-icons/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/modal/Modal.tsx
-var Modal$1 = ({ open, title, children, onCancel, withContentPadding: withPadding = true, ...props }) => {
+var Modal$1 = ({ open, title, children, onCancel, withContentPadding: withPadding = true, subtitle, className, ...props }) => {
 	return /* @__PURE__ */ jsx(Modal, {
-		title,
-		className: cx("j2-modal"),
+		title: subtitle ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-normal text-j2-text-secondary",
+				children: subtitle
+			})]
+		}) : title,
+		className: cx("j2-modal", className),
 		centered: true,
 		closeIcon: /* @__PURE__ */ jsx(XIcon, {
 			size: 22,

package/dist/src/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","AntdModal"],"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"mappings":";;;;;;AASA,IAAMA,WAAS,EACb,MACA,OACA,UACA,UACA,oBAAoB,cAAc,MAClC,GAAG,YACQ;CACX,OACE,oBAACC,OAAD;EACS;EACP,WAAW,GAAG,UAAU;EACxB,UAAA;EACA,WAAW,oBAAC,OAAD;GAAO,MAAM;GAAI,QAAO;EAAW,CAAA;EACpC;EACJ;EACN,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,cAAc,cAAc,WAAW;GACvD;EACE,CAAA;CACI,CAAA;AAEf"}
+{"version":3,"file":"Modal.js","names":["Modal","AntdModal"],"sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n  /** A line of supporting text under the title. */\n  subtitle?: React.ReactNode\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  subtitle,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={\n        subtitle ? (\n          <div className=\"flex flex-col gap-1\">\n            <span>{title}</span>\n            <span className=\"text-sm font-normal text-j2-text-secondary\">\n              {subtitle}\n            </span>\n          </div>\n        ) : (\n          title\n        )\n      }\n      className={cx('j2-modal', className)}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"mappings":";;;;;;AAWA,IAAMA,WAAS,EACb,MACA,OACA,UACA,UACA,oBAAoB,cAAc,MAClC,UACA,WACA,GAAG,YACQ;CACX,OACE,oBAACC,OAAD;EACE,OACE,WACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA,CACH;EAEL,CAAA,IAAA;EAGJ,WAAW,GAAG,YAAY,SAAS;EACnC,UAAA;EACA,WAAW,oBAAC,OAAD;GAAO,MAAM;GAAI,QAAO;EAAW,CAAA;EACpC;EACJ;EACN,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,cAAc,cAAc,WAAW;GACvD;EACE,CAAA;CACI,CAAA;AAEf"}

package/dist/src/components/navMenu/NavMenu.cjs

@@ -14,8 +14,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames, 1);
 //#region src/components/navMenu/NavMenu.tsx
-var NavMenu = ({ href = "/", items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse }) => {
-	const [isCollapsed, setIsCollapsed] = react$1.useState(false);
+var NavMenu = ({ href = "/", items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse, defaultCollapsed = false }) => {
+	const [isCollapsed, setIsCollapsed] = react$1.useState(defaultCollapsed);
 	const [isToggleTooltipOpen, setToggleTooltipOpen] = react$1.useState(false);
 	const toggleCollapse = react$1.useCallback(() => {
 		setIsCollapsed(!isCollapsed);

package/dist/src/components/navMenu/NavMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavMenu.cjs","names":["React","cx","styles","SmallLogo","LogoWithText","Tooltip","Button","ExpandIcon","CollapseIcon","Menu"],"sources":["../../../../src/components/navMenu/NavMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ItemType } from 'antd/es/menu/interface'\nimport cx from 'classnames'\nimport { Menu } from '../menu'\n\nimport SmallLogo from '../../svgs/j2-logo-menu-collapse.svg'\nimport LogoWithText from '../../svgs/j2-logo-menu.svg'\nimport ExpandIcon from '../../svgs/menu-sidebar-expand.svg'\nimport CollapseIcon from '../../svgs/menu-sidebar-collapse.svg'\nimport { Button } from '../button'\n\nimport styles from './NavMenu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype Props = {\n  href?: string\n  items: ItemType[]\n  headerSlot?: React.ReactNode\n  defaultOpenKeys?: string[]\n  defaultSelectedKeys?: string[]\n  footerItems: ItemType[]\n  className?: string\n  onCollapse?: (isCollapsed: boolean) => void\n}\n\nexport const NavMenu = ({\n  href = '/',\n  items,\n  headerSlot,\n  defaultOpenKeys,\n  defaultSelectedKeys,\n  footerItems,\n  className,\n  onCollapse,\n}: Props) => {\n  const [isCollapsed, setIsCollapsed] = React.useState(false)\n  const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false)\n\n  const toggleCollapse = React.useCallback(() => {\n    setIsCollapsed(!isCollapsed)\n    setToggleTooltipOpen(false)\n    onCollapse?.(!isCollapsed)\n  }, [isCollapsed])\n\n  return (\n    <div\n      className={cx(\n        styles.navMenuContainer,\n        isCollapsed && styles.collapsed,\n        'bg-white',\n        className\n      )}\n    >\n      <div className={cx('flex', 'flex-col', 'h-full')}>\n        <div className=\"py-5 px-3\">\n          <div\n            className={cx(\n              'flex',\n              'items-center',\n              isCollapsed ? 'justify-center' : 'justify-between',\n              styles.headerContainer,\n              'min-h-9'\n            )}\n          >\n            <a\n              href={href}\n              className={cx('flex', 'items-center', 'gap-2', styles.logo)}\n            >\n              {isCollapsed ? <SmallLogo /> : <LogoWithText />}\n            </a>\n            <Tooltip\n              title={isCollapsed ? 'Expand Menu' : 'Collapse Menu'}\n              placement=\"right\"\n              arrow={false}\n              onOpenChange={(shouldBeOpen) => {\n                setToggleTooltipOpen(shouldBeOpen)\n              }}\n              open={isToggleTooltipOpen}\n            >\n              <Button\n                type=\"text\"\n                icon={isCollapsed ? <ExpandIcon /> : <CollapseIcon />}\n                onClick={toggleCollapse}\n                className={cx('toggle-button')}\n              />\n            </Tooltip>\n          </div>\n          {headerSlot && <div className={cx('mt-5')}>{headerSlot}</div>}\n        </div>\n        <div className={cx('flex', 'flex-col', 'justify-between', 'flex-1')}>\n          <Menu\n            key={`nav-menu-main-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            items={items}\n            defaultOpenKeys={isCollapsed ? undefined : defaultOpenKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n          />\n          <Menu\n            key={`nav-menu-footer-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            selectable={false}\n            items={footerItems}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAa,WAAW,EACtB,OAAO,KACP,OACA,YACA,iBACA,qBACA,aACA,WACA,iBACW;CACX,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,KAAK;CAC1D,MAAM,CAAC,qBAAqB,wBAAwBA,QAAM,SAAS,KAAK;CAExE,MAAM,iBAAiBA,QAAM,kBAAkB;EAC7C,eAAe,CAAC,WAAW;EAC3B,qBAAqB,KAAK;EAC1B,aAAa,CAAC,WAAW;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,YAAA,GAAWC,WAAAA,QAAAA,CACTC,uBAAAA,QAAO,kBACP,eAAeA,uBAAAA,QAAO,WACtB,YACA,SACF;EAEA,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,YAAA,GAAWD,WAAAA,QAAAA,CAAG,QAAQ,YAAY,QAAQ;GAA/C,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,QACA,gBACA,cAAc,mBAAmB,mBACjCC,uBAAAA,QAAO,iBACP,SACF;KAPF,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;MACQ;MACN,YAAA,GAAWD,WAAAA,QAAAA,CAAG,QAAQ,gBAAgB,SAASC,uBAAAA,QAAO,IAAI;MAEzD,UAAA,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,SAAD,CAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,SAAD,CAAe,CAAA;KAC7C,CAAA,GACH,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;MACE,OAAO,cAAc,gBAAgB;MACrC,WAAU;MACV,OAAO;MACP,eAAe,iBAAiB;OAC9B,qBAAqB,YAAY;MACnC;MACA,MAAM;MAEN,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;OACE,MAAK;OACL,MAAM,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,SAAD,CAAa,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,SAAD,CAAe,CAAA;OACpD,SAAS;OACT,YAAA,GAAWP,WAAAA,QAAAA,CAAG,eAAe;MAC9B,CAAA;KACM,CAAA,CACN;IACJ,CAAA,GAAA,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,YAAA,GAAWA,WAAAA,QAAAA,CAAG,MAAM;KAAI,UAAA;IAAgB,CAAA,CACzD;GACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,YAAA,GAAWA,WAAAA,QAAAA,CAAG,QAAQ,YAAY,mBAAmB,QAAQ;IAAlE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACQ,aAAAA,MAAD;KAEE,MAAM;KACN,SAAS;KACF;KACP,iBAAiB,cAAc,KAAA,IAAY;KACtB;IACtB,GANM,iBAAiB,aAMvB,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD;KAEE,MAAM;KACN,SAAS;KACT,YAAY;KACZ,OAAO;IACR,GALM,mBAAmB,aAKzB,CACE;GACF,CAAA,CAAA;;CACF,CAAA;AAET"}
+{"version":3,"file":"NavMenu.cjs","names":["React","cx","styles","SmallLogo","LogoWithText","Tooltip","Button","ExpandIcon","CollapseIcon","Menu"],"sources":["../../../../src/components/navMenu/NavMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ItemType } from 'antd/es/menu/interface'\nimport cx from 'classnames'\nimport { Menu } from '../menu'\n\nimport SmallLogo from '../../svgs/j2-logo-menu-collapse.svg'\nimport LogoWithText from '../../svgs/j2-logo-menu.svg'\nimport ExpandIcon from '../../svgs/menu-sidebar-expand.svg'\nimport CollapseIcon from '../../svgs/menu-sidebar-collapse.svg'\nimport { Button } from '../button'\n\nimport styles from './NavMenu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype Props = {\n  href?: string\n  items: ItemType[]\n  headerSlot?: React.ReactNode\n  defaultOpenKeys?: string[]\n  defaultSelectedKeys?: string[]\n  footerItems: ItemType[]\n  className?: string\n  onCollapse?: (isCollapsed: boolean) => void\n  /** Start collapsed to the icon rail. The user can still expand it. */\n  defaultCollapsed?: boolean\n}\n\nexport const NavMenu = ({\n  href = '/',\n  items,\n  headerSlot,\n  defaultOpenKeys,\n  defaultSelectedKeys,\n  footerItems,\n  className,\n  onCollapse,\n  defaultCollapsed = false,\n}: Props) => {\n  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed)\n  const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false)\n\n  const toggleCollapse = React.useCallback(() => {\n    setIsCollapsed(!isCollapsed)\n    setToggleTooltipOpen(false)\n    onCollapse?.(!isCollapsed)\n  }, [isCollapsed])\n\n  return (\n    <div\n      className={cx(\n        styles.navMenuContainer,\n        isCollapsed && styles.collapsed,\n        'bg-white',\n        className\n      )}\n    >\n      <div className={cx('flex', 'flex-col', 'h-full')}>\n        <div className=\"py-5 px-3\">\n          <div\n            className={cx(\n              'flex',\n              'items-center',\n              isCollapsed ? 'justify-center' : 'justify-between',\n              styles.headerContainer,\n              'min-h-9'\n            )}\n          >\n            <a\n              href={href}\n              className={cx('flex', 'items-center', 'gap-2', styles.logo)}\n            >\n              {isCollapsed ? <SmallLogo /> : <LogoWithText />}\n            </a>\n            <Tooltip\n              title={isCollapsed ? 'Expand Menu' : 'Collapse Menu'}\n              placement=\"right\"\n              arrow={false}\n              onOpenChange={(shouldBeOpen) => {\n                setToggleTooltipOpen(shouldBeOpen)\n              }}\n              open={isToggleTooltipOpen}\n            >\n              <Button\n                type=\"text\"\n                icon={isCollapsed ? <ExpandIcon /> : <CollapseIcon />}\n                onClick={toggleCollapse}\n                className={cx('toggle-button')}\n              />\n            </Tooltip>\n          </div>\n          {headerSlot && <div className={cx('mt-5')}>{headerSlot}</div>}\n        </div>\n        <div className={cx('flex', 'flex-col', 'justify-between', 'flex-1')}>\n          <Menu\n            key={`nav-menu-main-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            items={items}\n            defaultOpenKeys={isCollapsed ? undefined : defaultOpenKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n          />\n          <Menu\n            key={`nav-menu-footer-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            selectable={false}\n            items={footerItems}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2BA,IAAa,WAAW,EACtB,OAAO,KACP,OACA,YACA,iBACA,qBACA,aACA,WACA,YACA,mBAAmB,YACR;CACX,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,gBAAgB;CACrE,MAAM,CAAC,qBAAqB,wBAAwBA,QAAM,SAAS,KAAK;CAExE,MAAM,iBAAiBA,QAAM,kBAAkB;EAC7C,eAAe,CAAC,WAAW;EAC3B,qBAAqB,KAAK;EAC1B,aAAa,CAAC,WAAW;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,YAAA,GAAWC,WAAAA,QAAAA,CACTC,uBAAAA,QAAO,kBACP,eAAeA,uBAAAA,QAAO,WACtB,YACA,SACF;EAEA,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,YAAA,GAAWD,WAAAA,QAAAA,CAAG,QAAQ,YAAY,QAAQ;GAA/C,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KACE,YAAA,GAAWA,WAAAA,QAAAA,CACT,QACA,gBACA,cAAc,mBAAmB,mBACjCC,uBAAAA,QAAO,iBACP,SACF;KAPF,UAAA,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;MACQ;MACN,YAAA,GAAWD,WAAAA,QAAAA,CAAG,QAAQ,gBAAgB,SAASC,uBAAAA,QAAO,IAAI;MAEzD,UAAA,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,SAAD,CAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,SAAD,CAAe,CAAA;KAC7C,CAAA,GACH,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,SAAD;MACE,OAAO,cAAc,gBAAgB;MACrC,WAAU;MACV,OAAO;MACP,eAAe,iBAAiB;OAC9B,qBAAqB,YAAY;MACnC;MACA,MAAM;MAEN,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;OACE,MAAK;OACL,MAAM,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,SAAD,CAAa,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,SAAD,CAAe,CAAA;OACpD,SAAS;OACT,YAAA,GAAWP,WAAAA,QAAAA,CAAG,eAAe;MAC9B,CAAA;KACM,CAAA,CACN;IACJ,CAAA,GAAA,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,YAAA,GAAWA,WAAAA,QAAAA,CAAG,MAAM;KAAI,UAAA;IAAgB,CAAA,CACzD;GACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,YAAA,GAAWA,WAAAA,QAAAA,CAAG,QAAQ,YAAY,mBAAmB,QAAQ;IAAlE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACQ,aAAAA,MAAD;KAEE,MAAM;KACN,SAAS;KACF;KACP,iBAAiB,cAAc,KAAA,IAAY;KACtB;IACtB,GANM,iBAAiB,aAMvB,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD;KAEE,MAAM;KACN,SAAS;KACT,YAAY;KACZ,OAAO;IACR,GALM,mBAAmB,aAKzB,CACE;GACF,CAAA,CAAA;;CACF,CAAA;AAET"}

package/dist/src/components/navMenu/NavMenu.d.ts

@@ -9,6 +9,8 @@ type Props = {
     footerItems: ItemType[];
     className?: string;
     onCollapse?: (isCollapsed: boolean) => void;
+    /** Start collapsed to the icon rail. The user can still expand it. */
+    defaultCollapsed?: boolean;
 };
-export declare const NavMenu: ({ href, items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse, }: Props) => React.JSX.Element;
+export declare const NavMenu: ({ href, items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse, defaultCollapsed, }: Props) => React.JSX.Element;
 export {};

package/dist/src/components/navMenu/NavMenu.js

@@ -10,8 +10,8 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/navMenu/NavMenu.tsx
-var NavMenu = ({ href = "/", items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse }) => {
-	const [isCollapsed, setIsCollapsed] = React.useState(false);
+var NavMenu = ({ href = "/", items, headerSlot, defaultOpenKeys, defaultSelectedKeys, footerItems, className, onCollapse, defaultCollapsed = false }) => {
+	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
 	const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false);
 	const toggleCollapse = React.useCallback(() => {
 		setIsCollapsed(!isCollapsed);

package/dist/src/components/navMenu/NavMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavMenu.js","names":["styles","SmallLogo","LogoWithText","ExpandIcon","CollapseIcon"],"sources":["../../../../src/components/navMenu/NavMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ItemType } from 'antd/es/menu/interface'\nimport cx from 'classnames'\nimport { Menu } from '../menu'\n\nimport SmallLogo from '../../svgs/j2-logo-menu-collapse.svg'\nimport LogoWithText from '../../svgs/j2-logo-menu.svg'\nimport ExpandIcon from '../../svgs/menu-sidebar-expand.svg'\nimport CollapseIcon from '../../svgs/menu-sidebar-collapse.svg'\nimport { Button } from '../button'\n\nimport styles from './NavMenu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype Props = {\n  href?: string\n  items: ItemType[]\n  headerSlot?: React.ReactNode\n  defaultOpenKeys?: string[]\n  defaultSelectedKeys?: string[]\n  footerItems: ItemType[]\n  className?: string\n  onCollapse?: (isCollapsed: boolean) => void\n}\n\nexport const NavMenu = ({\n  href = '/',\n  items,\n  headerSlot,\n  defaultOpenKeys,\n  defaultSelectedKeys,\n  footerItems,\n  className,\n  onCollapse,\n}: Props) => {\n  const [isCollapsed, setIsCollapsed] = React.useState(false)\n  const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false)\n\n  const toggleCollapse = React.useCallback(() => {\n    setIsCollapsed(!isCollapsed)\n    setToggleTooltipOpen(false)\n    onCollapse?.(!isCollapsed)\n  }, [isCollapsed])\n\n  return (\n    <div\n      className={cx(\n        styles.navMenuContainer,\n        isCollapsed && styles.collapsed,\n        'bg-white',\n        className\n      )}\n    >\n      <div className={cx('flex', 'flex-col', 'h-full')}>\n        <div className=\"py-5 px-3\">\n          <div\n            className={cx(\n              'flex',\n              'items-center',\n              isCollapsed ? 'justify-center' : 'justify-between',\n              styles.headerContainer,\n              'min-h-9'\n            )}\n          >\n            <a\n              href={href}\n              className={cx('flex', 'items-center', 'gap-2', styles.logo)}\n            >\n              {isCollapsed ? <SmallLogo /> : <LogoWithText />}\n            </a>\n            <Tooltip\n              title={isCollapsed ? 'Expand Menu' : 'Collapse Menu'}\n              placement=\"right\"\n              arrow={false}\n              onOpenChange={(shouldBeOpen) => {\n                setToggleTooltipOpen(shouldBeOpen)\n              }}\n              open={isToggleTooltipOpen}\n            >\n              <Button\n                type=\"text\"\n                icon={isCollapsed ? <ExpandIcon /> : <CollapseIcon />}\n                onClick={toggleCollapse}\n                className={cx('toggle-button')}\n              />\n            </Tooltip>\n          </div>\n          {headerSlot && <div className={cx('mt-5')}>{headerSlot}</div>}\n        </div>\n        <div className={cx('flex', 'flex-col', 'justify-between', 'flex-1')}>\n          <Menu\n            key={`nav-menu-main-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            items={items}\n            defaultOpenKeys={isCollapsed ? undefined : defaultOpenKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n          />\n          <Menu\n            key={`nav-menu-footer-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            selectable={false}\n            items={footerItems}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,WAAW,EACtB,OAAO,KACP,OACA,YACA,iBACA,qBACA,aACA,WACA,iBACW;CACX,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAAS,KAAK;CAC1D,MAAM,CAAC,qBAAqB,wBAAwB,MAAM,SAAS,KAAK;CAExE,MAAM,iBAAiB,MAAM,kBAAkB;EAC7C,eAAe,CAAC,WAAW;EAC3B,qBAAqB,KAAK;EAC1B,aAAa,CAAC,WAAW;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,oBAAC,OAAD;EACE,WAAW,GACTA,uBAAO,kBACP,eAAeA,uBAAO,WACtB,YACA,SACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,YAAY,QAAQ;GAA/C,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,cAAc,mBAAmB,mBACjCA,uBAAO,iBACP,SACF;KAPF,UAAA,CASE,oBAAC,KAAD;MACQ;MACN,WAAW,GAAG,QAAQ,gBAAgB,SAASA,uBAAO,IAAI;MAEzD,UAAA,cAAc,oBAACC,uBAAD,CAAY,CAAA,IAAI,oBAACC,eAAD,CAAe,CAAA;KAC7C,CAAA,GACH,oBAAC,SAAD;MACE,OAAO,cAAc,gBAAgB;MACrC,WAAU;MACV,OAAO;MACP,eAAe,iBAAiB;OAC9B,qBAAqB,YAAY;MACnC;MACA,MAAM;MAEN,UAAA,oBAAC,QAAD;OACE,MAAK;OACL,MAAM,cAAc,oBAACC,sBAAD,CAAa,CAAA,IAAI,oBAACC,wBAAD,CAAe,CAAA;OACpD,SAAS;OACT,WAAW,GAAG,eAAe;MAC9B,CAAA;KACM,CAAA,CACN;IACJ,CAAA,GAAA,cAAc,oBAAC,OAAD;KAAK,WAAW,GAAG,MAAM;KAAI,UAAA;IAAgB,CAAA,CACzD;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAW,GAAG,QAAQ,YAAY,mBAAmB,QAAQ;IAAlE,UAAA,CACE,oBAAC,MAAD;KAEE,MAAM;KACN,SAAS;KACF;KACP,iBAAiB,cAAc,KAAA,IAAY;KACtB;IACtB,GANM,iBAAiB,aAMvB,GACD,oBAAC,MAAD;KAEE,MAAM;KACN,SAAS;KACT,YAAY;KACZ,OAAO;IACR,GALM,mBAAmB,aAKzB,CACE;GACF,CAAA,CAAA;;CACF,CAAA;AAET"}
+{"version":3,"file":"NavMenu.js","names":["styles","SmallLogo","LogoWithText","ExpandIcon","CollapseIcon"],"sources":["../../../../src/components/navMenu/NavMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ItemType } from 'antd/es/menu/interface'\nimport cx from 'classnames'\nimport { Menu } from '../menu'\n\nimport SmallLogo from '../../svgs/j2-logo-menu-collapse.svg'\nimport LogoWithText from '../../svgs/j2-logo-menu.svg'\nimport ExpandIcon from '../../svgs/menu-sidebar-expand.svg'\nimport CollapseIcon from '../../svgs/menu-sidebar-collapse.svg'\nimport { Button } from '../button'\n\nimport styles from './NavMenu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype Props = {\n  href?: string\n  items: ItemType[]\n  headerSlot?: React.ReactNode\n  defaultOpenKeys?: string[]\n  defaultSelectedKeys?: string[]\n  footerItems: ItemType[]\n  className?: string\n  onCollapse?: (isCollapsed: boolean) => void\n  /** Start collapsed to the icon rail. The user can still expand it. */\n  defaultCollapsed?: boolean\n}\n\nexport const NavMenu = ({\n  href = '/',\n  items,\n  headerSlot,\n  defaultOpenKeys,\n  defaultSelectedKeys,\n  footerItems,\n  className,\n  onCollapse,\n  defaultCollapsed = false,\n}: Props) => {\n  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed)\n  const [isToggleTooltipOpen, setToggleTooltipOpen] = React.useState(false)\n\n  const toggleCollapse = React.useCallback(() => {\n    setIsCollapsed(!isCollapsed)\n    setToggleTooltipOpen(false)\n    onCollapse?.(!isCollapsed)\n  }, [isCollapsed])\n\n  return (\n    <div\n      className={cx(\n        styles.navMenuContainer,\n        isCollapsed && styles.collapsed,\n        'bg-white',\n        className\n      )}\n    >\n      <div className={cx('flex', 'flex-col', 'h-full')}>\n        <div className=\"py-5 px-3\">\n          <div\n            className={cx(\n              'flex',\n              'items-center',\n              isCollapsed ? 'justify-center' : 'justify-between',\n              styles.headerContainer,\n              'min-h-9'\n            )}\n          >\n            <a\n              href={href}\n              className={cx('flex', 'items-center', 'gap-2', styles.logo)}\n            >\n              {isCollapsed ? <SmallLogo /> : <LogoWithText />}\n            </a>\n            <Tooltip\n              title={isCollapsed ? 'Expand Menu' : 'Collapse Menu'}\n              placement=\"right\"\n              arrow={false}\n              onOpenChange={(shouldBeOpen) => {\n                setToggleTooltipOpen(shouldBeOpen)\n              }}\n              open={isToggleTooltipOpen}\n            >\n              <Button\n                type=\"text\"\n                icon={isCollapsed ? <ExpandIcon /> : <CollapseIcon />}\n                onClick={toggleCollapse}\n                className={cx('toggle-button')}\n              />\n            </Tooltip>\n          </div>\n          {headerSlot && <div className={cx('mt-5')}>{headerSlot}</div>}\n        </div>\n        <div className={cx('flex', 'flex-col', 'justify-between', 'flex-1')}>\n          <Menu\n            key={`nav-menu-main-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            items={items}\n            defaultOpenKeys={isCollapsed ? undefined : defaultOpenKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n          />\n          <Menu\n            key={`nav-menu-footer-${isCollapsed}`}\n            mode={'inline'}\n            compact={isCollapsed}\n            selectable={false}\n            items={footerItems}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA2BA,IAAa,WAAW,EACtB,OAAO,KACP,OACA,YACA,iBACA,qBACA,aACA,WACA,YACA,mBAAmB,YACR;CACX,MAAM,CAAC,aAAa,kBAAkB,MAAM,SAAS,gBAAgB;CACrE,MAAM,CAAC,qBAAqB,wBAAwB,MAAM,SAAS,KAAK;CAExE,MAAM,iBAAiB,MAAM,kBAAkB;EAC7C,eAAe,CAAC,WAAW;EAC3B,qBAAqB,KAAK;EAC1B,aAAa,CAAC,WAAW;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,oBAAC,OAAD;EACE,WAAW,GACTA,uBAAO,kBACP,eAAeA,uBAAO,WACtB,YACA,SACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,YAAY,QAAQ;GAA/C,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,cAAc,mBAAmB,mBACjCA,uBAAO,iBACP,SACF;KAPF,UAAA,CASE,oBAAC,KAAD;MACQ;MACN,WAAW,GAAG,QAAQ,gBAAgB,SAASA,uBAAO,IAAI;MAEzD,UAAA,cAAc,oBAACC,uBAAD,CAAY,CAAA,IAAI,oBAACC,eAAD,CAAe,CAAA;KAC7C,CAAA,GACH,oBAAC,SAAD;MACE,OAAO,cAAc,gBAAgB;MACrC,WAAU;MACV,OAAO;MACP,eAAe,iBAAiB;OAC9B,qBAAqB,YAAY;MACnC;MACA,MAAM;MAEN,UAAA,oBAAC,QAAD;OACE,MAAK;OACL,MAAM,cAAc,oBAACC,sBAAD,CAAa,CAAA,IAAI,oBAACC,wBAAD,CAAe,CAAA;OACpD,SAAS;OACT,WAAW,GAAG,eAAe;MAC9B,CAAA;KACM,CAAA,CACN;IACJ,CAAA,GAAA,cAAc,oBAAC,OAAD;KAAK,WAAW,GAAG,MAAM;KAAI,UAAA;IAAgB,CAAA,CACzD;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAW,GAAG,QAAQ,YAAY,mBAAmB,QAAQ;IAAlE,UAAA,CACE,oBAAC,MAAD;KAEE,MAAM;KACN,SAAS;KACF;KACP,iBAAiB,cAAc,KAAA,IAAY;KACtB;IACtB,GANM,iBAAiB,aAMvB,GACD,oBAAC,MAAD;KAEE,MAAM;KACN,SAAS;KACT,YAAY;KACZ,OAAO;IACR,GALM,mBAAmB,aAKzB,CACE;GACF,CAAA,CAAA;;CACF,CAAA;AAET"}

package/dist/src/components/popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":["AntdPopover","cx","styles"],"sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Popover.module.css'\n\ntype _Props = AntdPopoverProps & {\n  contentPadding?: boolean\n  scrollable?: boolean\n  /* @deprecated use paddingSize instead */\n  smallPadding?: boolean\n  /* default padding is large */\n  paddingSize?: 'xxs' | 'xs' | 'sm' | 'md' | 'xl'\n}\n\nexport type PopoverProps = Expand<_Props>\n\nconst Popover = ({\n  children,\n  placement = 'top',\n  scrollable = false,\n  contentPadding = true,\n  content,\n  smallPadding = false,\n  paddingSize,\n  arrow = false,\n  rootClassName,\n  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      rootClassName={cx(\n        rootClassName,\n        styles.j2Popover,\n        scrollable && styles.scrollable,\n        smallPadding && styles.smallPadding,\n        paddingSize && styles[`${paddingSize}Padding`]\n      )}\n      {...props}\n      placement={placement}\n      arrow={arrow}\n      content={() => {\n        if (!contentPadding) {\n          return <div>{typeof content == 'function' ? content() : content}</div>\n        }\n\n        return typeof content == 'function' ? content() : content\n      }}\n    >\n      <div>{children}</div>\n    </AntdPopover>\n  )\n}\n\nexport { Popover }\n"],"mappings":";;;;;;;AAeA,IAAM,WAAW,EACf,UACA,YAAY,OACZ,aAAa,OACb,iBAAiB,MACjB,SACA,eAAe,OACf,aACA,QAAQ,OACR,eACA,GAAG,YACe;CAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,SAAD;EACE,gBAAA,GAAeC,WAAAA,QAAAA,CACb,eACAC,uBAAAA,QAAO,WACP,cAAcA,uBAAAA,QAAO,YACrB,gBAAgBA,uBAAAA,QAAO,cACvB,eAAeA,uBAAAA,QAAO,GAAG,YAAY,SACvC;EACA,GAAI;EACO;EACJ;EACP,eAAe;GACb,IAAI,CAAC,gBACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAM,OAAO,WAAW,aAAa,QAAQ,IAAI,QAAa,CAAA;GAGvE,OAAO,OAAO,WAAW,aAAa,QAAQ,IAAI;EACpD;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAM,SAAc,CAAA;CACT,CAAA;AAEjB"}
+{"version":3,"file":"Popover.cjs","names":["AntdPopover","cx","styles"],"sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Popover.module.css'\n\ntype _Props = AntdPopoverProps & {\n  contentPadding?: boolean\n  scrollable?: boolean\n  /* @deprecated use paddingSize instead */\n  smallPadding?: boolean\n  /* default padding is large; `'none'` lets the content run to the edges */\n  paddingSize?: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'xl'\n}\n\nexport type PopoverProps = Expand<_Props>\n\nconst Popover = ({\n  children,\n  placement = 'top',\n  scrollable = false,\n  contentPadding = true,\n  content,\n  smallPadding = false,\n  paddingSize,\n  arrow = false,\n  rootClassName,\n  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      rootClassName={cx(\n        rootClassName,\n        styles.j2Popover,\n        scrollable && styles.scrollable,\n        smallPadding && styles.smallPadding,\n        paddingSize && styles[`${paddingSize}Padding`]\n      )}\n      {...props}\n      placement={placement}\n      arrow={arrow}\n      content={() => {\n        if (!contentPadding) {\n          return <div>{typeof content == 'function' ? content() : content}</div>\n        }\n\n        return typeof content == 'function' ? content() : content\n      }}\n    >\n      <div>{children}</div>\n    </AntdPopover>\n  )\n}\n\nexport { Popover }\n"],"mappings":";;;;;;;AAeA,IAAM,WAAW,EACf,UACA,YAAY,OACZ,aAAa,OACb,iBAAiB,MACjB,SACA,eAAe,OACf,aACA,QAAQ,OACR,eACA,GAAG,YACe;CAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,KAAAA,SAAD;EACE,gBAAA,GAAeC,WAAAA,QAAAA,CACb,eACAC,uBAAAA,QAAO,WACP,cAAcA,uBAAAA,QAAO,YACrB,gBAAgBA,uBAAAA,QAAO,cACvB,eAAeA,uBAAAA,QAAO,GAAG,YAAY,SACvC;EACA,GAAI;EACO;EACJ;EACP,eAAe;GACb,IAAI,CAAC,gBACH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAA,UAAM,OAAO,WAAW,aAAa,QAAQ,IAAI,QAAa,CAAA;GAGvE,OAAO,OAAO,WAAW,aAAa,QAAQ,IAAI;EACpD;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAM,SAAc,CAAA;CACT,CAAA;AAEjB"}

package/dist/src/components/popover/Popover.d.ts

@@ -3,7 +3,7 @@ type _Props = AntdPopoverProps & {
     contentPadding?: boolean;
     scrollable?: boolean;
     smallPadding?: boolean;
-    paddingSize?: 'xxs' | 'xs' | 'sm' | 'md' | 'xl';
+    paddingSize?: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'xl';
 };
 export type PopoverProps = Expand<_Props>;
 declare const Popover: ({ children, placement, scrollable, contentPadding, content, smallPadding, paddingSize, arrow, rootClassName, ...props }: PopoverProps) => import('react').JSX.Element;

package/dist/src/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","AntdPopover","styles"],"sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Popover.module.css'\n\ntype _Props = AntdPopoverProps & {\n  contentPadding?: boolean\n  scrollable?: boolean\n  /* @deprecated use paddingSize instead */\n  smallPadding?: boolean\n  /* default padding is large */\n  paddingSize?: 'xxs' | 'xs' | 'sm' | 'md' | 'xl'\n}\n\nexport type PopoverProps = Expand<_Props>\n\nconst Popover = ({\n  children,\n  placement = 'top',\n  scrollable = false,\n  contentPadding = true,\n  content,\n  smallPadding = false,\n  paddingSize,\n  arrow = false,\n  rootClassName,\n  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      rootClassName={cx(\n        rootClassName,\n        styles.j2Popover,\n        scrollable && styles.scrollable,\n        smallPadding && styles.smallPadding,\n        paddingSize && styles[`${paddingSize}Padding`]\n      )}\n      {...props}\n      placement={placement}\n      arrow={arrow}\n      content={() => {\n        if (!contentPadding) {\n          return <div>{typeof content == 'function' ? content() : content}</div>\n        }\n\n        return typeof content == 'function' ? content() : content\n      }}\n    >\n      <div>{children}</div>\n    </AntdPopover>\n  )\n}\n\nexport { Popover }\n"],"mappings":";;;;;AAeA,IAAMA,aAAW,EACf,UACA,YAAY,OACZ,aAAa,OACb,iBAAiB,MACjB,SACA,eAAe,OACf,aACA,QAAQ,OACR,eACA,GAAG,YACe;CAClB,OACE,oBAACC,SAAD;EACE,eAAe,GACb,eACAC,uBAAO,WACP,cAAcA,uBAAO,YACrB,gBAAgBA,uBAAO,cACvB,eAAeA,uBAAO,GAAG,YAAY,SACvC;EACA,GAAI;EACO;EACJ;EACP,eAAe;GACb,IAAI,CAAC,gBACH,OAAO,oBAAC,OAAD,EAAA,UAAM,OAAO,WAAW,aAAa,QAAQ,IAAI,QAAa,CAAA;GAGvE,OAAO,OAAO,WAAW,aAAa,QAAQ,IAAI;EACpD;EAEA,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACT,CAAA;AAEjB"}
+{"version":3,"file":"Popover.js","names":["Popover","AntdPopover","styles"],"sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd'\nimport cx from 'classnames'\nimport styles from './Popover.module.css'\n\ntype _Props = AntdPopoverProps & {\n  contentPadding?: boolean\n  scrollable?: boolean\n  /* @deprecated use paddingSize instead */\n  smallPadding?: boolean\n  /* default padding is large; `'none'` lets the content run to the edges */\n  paddingSize?: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'xl'\n}\n\nexport type PopoverProps = Expand<_Props>\n\nconst Popover = ({\n  children,\n  placement = 'top',\n  scrollable = false,\n  contentPadding = true,\n  content,\n  smallPadding = false,\n  paddingSize,\n  arrow = false,\n  rootClassName,\n  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      rootClassName={cx(\n        rootClassName,\n        styles.j2Popover,\n        scrollable && styles.scrollable,\n        smallPadding && styles.smallPadding,\n        paddingSize && styles[`${paddingSize}Padding`]\n      )}\n      {...props}\n      placement={placement}\n      arrow={arrow}\n      content={() => {\n        if (!contentPadding) {\n          return <div>{typeof content == 'function' ? content() : content}</div>\n        }\n\n        return typeof content == 'function' ? content() : content\n      }}\n    >\n      <div>{children}</div>\n    </AntdPopover>\n  )\n}\n\nexport { Popover }\n"],"mappings":";;;;;AAeA,IAAMA,aAAW,EACf,UACA,YAAY,OACZ,aAAa,OACb,iBAAiB,MACjB,SACA,eAAe,OACf,aACA,QAAQ,OACR,eACA,GAAG,YACe;CAClB,OACE,oBAACC,SAAD;EACE,eAAe,GACb,eACAC,uBAAO,WACP,cAAcA,uBAAO,YACrB,gBAAgBA,uBAAO,cACvB,eAAeA,uBAAO,GAAG,YAAY,SACvC;EACA,GAAI;EACO;EACJ;EACP,eAAe;GACb,IAAI,CAAC,gBACH,OAAO,oBAAC,OAAD,EAAA,UAAM,OAAO,WAAW,aAAa,QAAQ,IAAI,QAAa,CAAA;GAGvE,OAAO,OAAO,WAAW,aAAa,QAAQ,IAAI;EACpD;EAEA,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACT,CAAA;AAEjB"}

package/dist/src/components/popover/Popover.module.css.cjs

@@ -1,17 +1,19 @@
 //#region src/components/popover/Popover.module.css
-var j2Popover = "_j2Popover_wjtre_1";
-var smallPadding = "_smallPadding_wjtre_6";
-var smPadding = "_smPadding_wjtre_7";
-var xxsPadding = "_xxsPadding_wjtre_11";
-var xsPadding = "_xsPadding_wjtre_15";
-var mdPadding = "_mdPadding_wjtre_19";
-var xlPadding = "_xlPadding_wjtre_23";
-var popoverHeader = "_popoverHeader_wjtre_34";
-var scrollable = "_scrollable_wjtre_40";
+var j2Popover = "_j2Popover_r2pkr_1";
+var smallPadding = "_smallPadding_r2pkr_6";
+var smPadding = "_smPadding_r2pkr_7";
+var nonePadding = "_nonePadding_r2pkr_11";
+var xxsPadding = "_xxsPadding_r2pkr_15";
+var xsPadding = "_xsPadding_r2pkr_19";
+var mdPadding = "_mdPadding_r2pkr_23";
+var xlPadding = "_xlPadding_r2pkr_27";
+var popoverHeader = "_popoverHeader_r2pkr_38";
+var scrollable = "_scrollable_r2pkr_44";
 var Popover_module_default = {
 	j2Popover,
 	smallPadding,
 	smPadding,
+	nonePadding,
 	xxsPadding,
 	xsPadding,
 	mdPadding,
@@ -23,6 +25,7 @@ var Popover_module_default = {
 exports.default = Popover_module_default;
 exports.j2Popover = j2Popover;
 exports.mdPadding = mdPadding;
+exports.nonePadding = nonePadding;
 exports.popoverHeader = popoverHeader;
 exports.scrollable = scrollable;
 exports.smPadding = smPadding;

package/dist/src/components/popover/Popover.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.css.cjs","names":[],"sources":["../../../../src/components/popover/Popover.module.css"],"sourcesContent":[".j2Popover {\n  :global(.ant-popover-container) {\n    padding: var(--j2-padding-lg);\n  }\n\n  &.smallPadding,\n  &.smPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-sm);\n  }\n\n  &.xxsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xxs);\n  }\n\n  &.xsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xs);\n  }\n\n  &.mdPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-md);\n  }\n\n  &.xlPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xl);\n  }\n\n  :global(.ant-popover-title) {\n    font-size: var(--j2-font-size-heading-4);\n    font-weight: var(--j2-font-weight-strong);\n    line-height: var(--j2-line-height-heading-4);\n  }\n}\n\n.popoverHeader {\n  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  font-weight: bold;\n}\n\n.scrollable {\n  :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  :global(.ant-popover-title) {\n    top: 0;\n    z-index: 10;\n    position: sticky;\n    margin-bottom: 0;\n    background: white;\n    padding: var(--j2-padding-sm);\n    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n    font-size: var(--j2-font-size);\n    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  }\n\n  :global(.ant-popover-content) {\n    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)\n      var(--j2-padding-sm);\n    overflow: auto;\n    max-height: 295px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.css.cjs","names":[],"sources":["../../../../src/components/popover/Popover.module.css"],"sourcesContent":[".j2Popover {\n  :global(.ant-popover-container) {\n    padding: var(--j2-padding-lg);\n  }\n\n  &.smallPadding,\n  &.smPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-sm);\n  }\n\n  &.nonePadding :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  &.xxsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xxs);\n  }\n\n  &.xsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xs);\n  }\n\n  &.mdPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-md);\n  }\n\n  &.xlPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xl);\n  }\n\n  :global(.ant-popover-title) {\n    font-size: var(--j2-font-size-heading-4);\n    font-weight: var(--j2-font-weight-strong);\n    line-height: var(--j2-line-height-heading-4);\n  }\n}\n\n.popoverHeader {\n  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  font-weight: bold;\n}\n\n.scrollable {\n  :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  :global(.ant-popover-title) {\n    top: 0;\n    z-index: 10;\n    position: sticky;\n    margin-bottom: 0;\n    background: white;\n    padding: var(--j2-padding-sm);\n    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n    font-size: var(--j2-font-size);\n    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  }\n\n  :global(.ant-popover-content) {\n    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)\n      var(--j2-padding-sm);\n    overflow: auto;\n    max-height: 295px;\n  }\n}\n"],"mappings":""}

package/dist/src/components/popover/Popover.module.css.js

@@ -1,17 +1,19 @@
 //#region src/components/popover/Popover.module.css
-var j2Popover = "_j2Popover_wjtre_1";
-var smallPadding = "_smallPadding_wjtre_6";
-var smPadding = "_smPadding_wjtre_7";
-var xxsPadding = "_xxsPadding_wjtre_11";
-var xsPadding = "_xsPadding_wjtre_15";
-var mdPadding = "_mdPadding_wjtre_19";
-var xlPadding = "_xlPadding_wjtre_23";
-var popoverHeader = "_popoverHeader_wjtre_34";
-var scrollable = "_scrollable_wjtre_40";
+var j2Popover = "_j2Popover_r2pkr_1";
+var smallPadding = "_smallPadding_r2pkr_6";
+var smPadding = "_smPadding_r2pkr_7";
+var nonePadding = "_nonePadding_r2pkr_11";
+var xxsPadding = "_xxsPadding_r2pkr_15";
+var xsPadding = "_xsPadding_r2pkr_19";
+var mdPadding = "_mdPadding_r2pkr_23";
+var xlPadding = "_xlPadding_r2pkr_27";
+var popoverHeader = "_popoverHeader_r2pkr_38";
+var scrollable = "_scrollable_r2pkr_44";
 var Popover_module_default = {
 	j2Popover,
 	smallPadding,
 	smPadding,
+	nonePadding,
 	xxsPadding,
 	xsPadding,
 	mdPadding,
@@ -20,6 +22,6 @@ var Popover_module_default = {
 	scrollable
 };
 //#endregion
-export { Popover_module_default as default, j2Popover, mdPadding, popoverHeader, scrollable, smPadding, smallPadding, xlPadding, xsPadding, xxsPadding };
+export { Popover_module_default as default, j2Popover, mdPadding, nonePadding, popoverHeader, scrollable, smPadding, smallPadding, xlPadding, xsPadding, xxsPadding };
 
 //# sourceMappingURL=Popover.module.css.js.map

package/dist/src/components/popover/Popover.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.css.js","names":[],"sources":["../../../../src/components/popover/Popover.module.css"],"sourcesContent":[".j2Popover {\n  :global(.ant-popover-container) {\n    padding: var(--j2-padding-lg);\n  }\n\n  &.smallPadding,\n  &.smPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-sm);\n  }\n\n  &.xxsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xxs);\n  }\n\n  &.xsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xs);\n  }\n\n  &.mdPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-md);\n  }\n\n  &.xlPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xl);\n  }\n\n  :global(.ant-popover-title) {\n    font-size: var(--j2-font-size-heading-4);\n    font-weight: var(--j2-font-weight-strong);\n    line-height: var(--j2-line-height-heading-4);\n  }\n}\n\n.popoverHeader {\n  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  font-weight: bold;\n}\n\n.scrollable {\n  :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  :global(.ant-popover-title) {\n    top: 0;\n    z-index: 10;\n    position: sticky;\n    margin-bottom: 0;\n    background: white;\n    padding: var(--j2-padding-sm);\n    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n    font-size: var(--j2-font-size);\n    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  }\n\n  :global(.ant-popover-content) {\n    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)\n      var(--j2-padding-sm);\n    overflow: auto;\n    max-height: 295px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.css.js","names":[],"sources":["../../../../src/components/popover/Popover.module.css"],"sourcesContent":[".j2Popover {\n  :global(.ant-popover-container) {\n    padding: var(--j2-padding-lg);\n  }\n\n  &.smallPadding,\n  &.smPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-sm);\n  }\n\n  &.nonePadding :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  &.xxsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xxs);\n  }\n\n  &.xsPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xs);\n  }\n\n  &.mdPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-md);\n  }\n\n  &.xlPadding :global(.ant-popover-container) {\n    padding: var(--j2-padding-xl);\n  }\n\n  :global(.ant-popover-title) {\n    font-size: var(--j2-font-size-heading-4);\n    font-weight: var(--j2-font-weight-strong);\n    line-height: var(--j2-line-height-heading-4);\n  }\n}\n\n.popoverHeader {\n  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n  border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  font-weight: bold;\n}\n\n.scrollable {\n  :global(.ant-popover-container) {\n    padding: 0;\n  }\n\n  :global(.ant-popover-title) {\n    top: 0;\n    z-index: 10;\n    position: sticky;\n    margin-bottom: 0;\n    background: white;\n    padding: var(--j2-padding-sm);\n    box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);\n    font-size: var(--j2-font-size);\n    border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;\n  }\n\n  :global(.ant-popover-content) {\n    padding: var(--j2-padding-sm) var(--j2-padding-sm) var(--j2-padding-sm)\n      var(--j2-padding-sm);\n    overflow: auto;\n    max-height: 295px;\n  }\n}\n"],"mappings":""}

package/dist/src/components/select/SummarizedSelect.cjs

@@ -32,7 +32,9 @@ var filterOptions = (options, searchValue) => {
 };
 function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading, multiple, value, onChange, options, renderLabel, rootClassName, popupClassName, variant, trigger = "select", defaultOpen = false, ...props }) {
 	const isHeadline = variant === "headlined";
-	const antVariant = isHeadline ? "borderless" : variant;
+	const isField = variant === "field";
+	const antVariant = isHeadline ? "borderless" : isField ? "outlined" : variant;
+	const isChip = !isField && variant !== "underlined" && !isHeadline;
 	const [searchValue, setSearchValue] = (0, react.useState)("");
 	const [focusTrigger, setFocusTrigger] = (0, react.useState)(defaultOpen ? 1 : 0);
 	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
@@ -61,7 +63,10 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 		if (focusTrigger > 0) requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				setTimeout(() => {
-					inputRef.current?.focus({ cursor: "end" });
+					inputRef.current?.focus({
+						cursor: "end",
+						preventScroll: true
+					});
 				}, 100);
 			});
 		});
@@ -149,7 +154,6 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 				className: "mb-2 px-2 pb-2 border-b -mx-1 mt-1",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
 					ref: inputRef,
-					autoFocus: true,
 					placeholder: searchPlaceholder || "Search...",
 					value: searchValue,
 					onChange: (e) => {
@@ -221,7 +225,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 			role: "option",
 			"aria-selected": isSelected,
 			onClick: () => handleOptionClick(optionValue),
-			className: (0, classnames.default)("px-3 py-1.5 rounded cursor-pointer text-sm", isSelected ? "bg-[var(--j2-color-primary)] text-white hover:bg-[var(--j2-color-primary)]" : "hover:bg-[var(--j2-color-bg-hover)]"),
+			className: (0, classnames.default)("px-3 py-1.5 rounded cursor-pointer text-sm", isSelected ? "bg-[var(--j2-color-primary-bg-hover)] font-semibold text-[var(--j2-color-primary)] hover:bg-[var(--j2-color-primary-bg-hover)]" : "hover:bg-[var(--j2-color-bg-hover)]"),
 			children: hasLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -246,7 +250,6 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 					className: "pb-2 border-b border-j2-border-secondary",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Input, {
 						ref: inputRef,
-						autoFocus: true,
 						placeholder: searchPlaceholder || "Search...",
 						value: searchValue,
 						onChange: (e) => {
@@ -311,13 +314,13 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 	if (trigger === "dropdown") {
 		const hasSelection = multiple ? value.length > 0 : Boolean(value);
 		const triggerContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "inline-flex items-center gap-1",
+			className: "inline-flex items-center gap-1.5",
 			children: [hasSelection ? displayText : formControlPlaceholder ?? "Select", loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Spin, {
 				indicator: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.LoadingOutlined, { spin: true }),
 				size: "small",
 				"data-testid": "loading-spinner"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.CaretDownIcon, {
-				weight: "regular",
+				weight: "duotone",
 				"data-testid": "caret-down"
 			})]
 		});
@@ -329,7 +332,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 			popupRender: dropdownPopupRender,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Typography.Link, {
 				disabled: props.disabled,
-				className: (0, classnames.default)("inline-flex", rootClassName),
+				className: (0, classnames.default)("inline-flex", require_SummarizedSelect_module.default.dropdownTrigger, rootClassName),
 				children: triggerContent
 			})
 		});
@@ -347,7 +350,7 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Select, {
 		open: isOpen,
 		showSearch: false,
-		style: { width: measuredWidth },
+		style: { width: isField ? "100%" : measuredWidth },
 		suffixIcon: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(antd.Spin, {
 			indicator: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ant_design_icons.LoadingOutlined, { spin: true }),
 			size: "small",
@@ -374,9 +377,10 @@ function SummarizedSelect({ searchPlaceholder, formControlPlaceholder, loading,
 		onOpenChange: handleOpenChange,
 		classNames: {
 			root: (0, classnames.default)(rootClassName, require_SummarizedSelect_module.default.summarizedSelect, {
-				[require_SummarizedSelect_module.default.hemisphericSelect]: variant !== "underlined" && variant !== "headlined",
-				[require_SummarizedSelect_module.default.isActive]: multiple && value.length > 0 && variant !== "underlined" && variant !== "headlined",
-				[require_SummarizedSelect_module.default.headlinedSelect]: isHeadline
+				[require_SummarizedSelect_module.default.hemisphericSelect]: isChip,
+				[require_SummarizedSelect_module.default.isActive]: isChip && multiple && value.length > 0,
+				[require_SummarizedSelect_module.default.headlinedSelect]: isHeadline,
+				[require_SummarizedSelect_module.default.fieldSelect]: isField
 			}),
 			popup: { root: popupClassName }
 		},