@j2-health/design-system 0.3.2 → 0.4.0

package/dist/src/components/inputnumber/InputNumber.d.ts

@@ -1,9 +1,10 @@
-import { InputNumberProps } from 'formik-antd';
-type Props = Expand<InputNumberProps> & {
+import { InputNumberProps } from 'antd';
+import { FormikFieldProps } from '../form/FormikField.js';
+type Props = Expand<InputNumberProps & FormikFieldProps> & {
     name: string;
     max?: number;
     min?: number;
     step?: number;
 };
-export declare const InputNumber: ({ size, step, name, max, min, ...props }: Props) => import("react").JSX.Element;
+export declare const InputNumber: ({ size, step, name, max, min, validate, fast, onChange, onBlur, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/src/components/inputnumber/InputNumber.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { InputNumber as InputNumber$1 } from "formik-antd";
+import { InputNumber as InputNumber$1 } from "antd";
+import { FormikField } from "../form/FormikField.js";
 import cx from "classnames";
 import styles from "./InputNumber.module.css.js";
 import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
@@ -9,12 +10,17 @@ const InputNumber = ({
   name,
   max,
   min,
+  validate,
+  fast,
+  onChange,
+  onBlur,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormikField, { name, validate, fast, children: ({ field, form }) => /* @__PURE__ */ jsx(
     InputNumber$1,
     {
       name,
+      id: name,
       max,
       min,
       step,
@@ -22,9 +28,18 @@ const InputNumber = ({
       upHandler: /* @__PURE__ */ jsx(CaretUpIcon, { weight: "bold", size: 12 }),
       downHandler: /* @__PURE__ */ jsx(CaretDownIcon, { weight: "bold", size: 12 }),
       size,
-      ...props
+      ...props,
+      value: field.value,
+      onChange: (value) => {
+        void form.setFieldValue(name, value);
+        onChange == null ? void 0 : onChange(value);
+      },
+      onBlur: (event) => {
+        field.onBlur(event);
+        onBlur == null ? void 0 : onBlur(event);
+      }
     }
-  );
+  ) });
 };
 export {
   InputNumber

package/dist/src/components/inputnumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as FormikInputNumber, InputNumberProps } from 'formik-antd'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  ...props\n}: Props) => {\n  return (\n    <FormikInputNumber\n      name={name}\n      max={max}\n      min={min}\n      step={step}\n      className={cx(styles.j2InputNumber, props.className)}\n      upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n      downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n      size={size}\n      {...props}\n    />\n  )\n}\n"],"names":["FormikInputNumber"],"mappings":";;;;;AAWO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAW,oBAAC,aAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAa,oBAAC,eAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"InputNumber.js","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as AntdInputNumber, type InputNumberProps } from 'antd'\nimport { FormikField, type FormikFieldProps } from '../form/FormikField'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps & FormikFieldProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  validate,\n  fast,\n  onChange,\n  onBlur,\n  ...props\n}: Props) => {\n  return (\n    <FormikField name={name} validate={validate} fast={fast}>\n      {({ field, form }) => (\n        <AntdInputNumber\n          name={name}\n          id={name}\n          max={max}\n          min={min}\n          step={step}\n          className={cx(styles.j2InputNumber, props.className)}\n          upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n          downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n          size={size}\n          {...props}\n          value={field.value}\n          onChange={(value) => {\n            void form.setFieldValue(name, value)\n            onChange?.(value)\n          }}\n          onBlur={(event) => {\n            field.onBlur(event)\n            onBlur?.(event)\n          }}\n        />\n      )}\n    </FormikField>\n  )\n}\n"],"names":["AntdInputNumber"],"mappings":";;;;;;AAYO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE,oBAAC,eAAY,MAAY,UAAoB,MAC1C,UAAA,CAAC,EAAE,OAAO,KAAA,MACT;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAW,oBAAC,aAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAa,oBAAC,eAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,MACJ,OAAO,MAAM;AAAA,MACb,UAAU,CAAC,UAAU;AACnB,aAAK,KAAK,cAAc,MAAM,KAAK;AACnC,6CAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,cAAM,OAAO,KAAK;AAClB,yCAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/src/components/inputnumber/InputNumber.module.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const j2InputNumber = "_j2InputNumber_1jmfn_1";
+const j2InputNumber = "_j2InputNumber_1t2hv_1";
 const styles = {
   j2InputNumber
 };

package/dist/src/components/inputnumber/InputNumber.module.css.js

@@ -1,4 +1,4 @@
-const j2InputNumber = "_j2InputNumber_1jmfn_1";
+const j2InputNumber = "_j2InputNumber_1t2hv_1";
 const styles = {
   j2InputNumber
 };

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

@@ -18,7 +18,6 @@ const Modal = ({
     {
       title,
       className: cx("j2-modal"),
-      maskClosable: true,
       centered: true,
       closeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { size: 22, weight: "regular" }),
       onCancel,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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      maskClosable={true}\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"],"names":["jsx","AntdModal","XIcon"],"mappings":";;;;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,cAAc;AAAA,MACd,UAAQ;AAAA,MACR,WAAWD,2BAAAA,IAACE,aAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Modal.cjs","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"],"names":["jsx","AntdModal","XIcon"],"mappings":";;;;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,UAAQ;AAAA,MACR,WAAWD,2BAAAA,IAACE,aAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

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

@@ -16,7 +16,6 @@ const Modal = ({
     {
       title,
       className: cx("j2-modal"),
-      maskClosable: true,
       centered: true,
       closeIcon: /* @__PURE__ */ jsx(XIcon, { size: 22, weight: "regular" }),
       onCancel,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","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      maskClosable={true}\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"],"names":["AntdModal"],"mappings":";;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,cAAc;AAAA,MACd,UAAQ;AAAA,MACR,WAAW,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA,oBAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Modal.js","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"],"names":["AntdModal"],"mappings":";;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,UAAQ;AAAA,MACR,WAAW,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA,oBAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/src/components/notification/Notification.module.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const messageOnly = "_messageOnly_1pxqk_14";
+const messageOnly = "_messageOnly_a124a_14";
 const s = {
   messageOnly
 };

package/dist/src/components/notification/Notification.module.css.js

@@ -1,4 +1,4 @@
-const messageOnly = "_messageOnly_1pxqk_14";
+const messageOnly = "_messageOnly_a124a_14";
 const s = {
   messageOnly
 };

package/dist/src/components/notification/useNotification.cjs

@@ -34,12 +34,15 @@ const getIcon = (type) => {
 const useNotification = () => {
   const [api, contextHolder] = antd.notification.useNotification();
   const openNotification = (type, config) => {
+    const { message, title, btn, actions, ...restConfig } = config;
     api[type]({
       icon: getIcon(type),
-      ...config,
+      ...restConfig,
+      title: title ?? message,
+      actions: actions ?? btn,
       closeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { color: "var(--j2-color-icon)", size: 22, weight: "regular" }),
       className: cx({
-        [Notification_module.default.messageOnly]: config.message && !config.description
+        [Notification_module.default.messageOnly]: (title ?? message) && !config.description
       })
     });
   };

package/dist/src/components/notification/useNotification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNotification.cjs","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    api[type]({\n      icon: getIcon(type),\n      ...config,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: config.message && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":["XCircleIcon","jsx","CheckCircleIcon","InfoIcon","WarningCircleIcon","notification","XIcon","s"],"mappings":";;;;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,4CACGA,mBAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACEC,2BAAAA;AAAAA,QAACC,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,4CACGC,gBAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACEF,2BAAAA;AAAAA,QAACG,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAIC,KAAAA,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,0CACGC,MAAAA,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAACC,oBAAAA,QAAE,WAAW,GAAG,OAAO,WAAW,CAAC,OAAO;AAAA,MAAA,CAC5C;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;;"}
+{"version":3,"file":"useNotification.cjs","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    const { message, title, btn, actions, ...restConfig } = config\n    api[type]({\n      icon: getIcon(type),\n      ...restConfig,\n      title: title ?? message,\n      actions: actions ?? btn,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: (title ?? message) && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":["XCircleIcon","jsx","CheckCircleIcon","InfoIcon","WarningCircleIcon","notification","XIcon","s"],"mappings":";;;;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,4CACGA,mBAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACEC,2BAAAA;AAAAA,QAACC,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,4CACGC,gBAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACEF,2BAAAA;AAAAA,QAACG,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAIC,KAAAA,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,UAAM,EAAE,SAAS,OAAO,KAAK,SAAS,GAAG,eAAe;AACxD,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,OAAO,SAAS;AAAA,MAChB,SAAS,WAAW;AAAA,MACpB,0CACGC,MAAAA,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAACC,oBAAAA,QAAE,WAAW,IAAI,SAAS,YAAY,CAAC,OAAO;AAAA,MAAA,CAChD;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;;"}

package/dist/src/components/notification/useNotification.js

@@ -32,12 +32,15 @@ const getIcon = (type) => {
 const useNotification = () => {
   const [api, contextHolder] = notification.useNotification();
   const openNotification = (type, config) => {
+    const { message, title, btn, actions, ...restConfig } = config;
     api[type]({
       icon: getIcon(type),
-      ...config,
+      ...restConfig,
+      title: title ?? message,
+      actions: actions ?? btn,
       closeIcon: /* @__PURE__ */ jsx(XIcon, { color: "var(--j2-color-icon)", size: 22, weight: "regular" }),
       className: cx({
-        [s.messageOnly]: config.message && !config.description
+        [s.messageOnly]: (title ?? message) && !config.description
       })
     });
   };

package/dist/src/components/notification/useNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNotification.js","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    api[type]({\n      icon: getIcon(type),\n      ...config,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: config.message && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,iCACG,aAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,iCACG,UAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAI,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,+BACG,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAAC,EAAE,WAAW,GAAG,OAAO,WAAW,CAAC,OAAO;AAAA,MAAA,CAC5C;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;"}
+{"version":3,"file":"useNotification.js","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    const { message, title, btn, actions, ...restConfig } = config\n    api[type]({\n      icon: getIcon(type),\n      ...restConfig,\n      title: title ?? message,\n      actions: actions ?? btn,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: (title ?? message) && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,iCACG,aAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,iCACG,UAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAI,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,UAAM,EAAE,SAAS,OAAO,KAAK,SAAS,GAAG,eAAe;AACxD,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,OAAO,SAAS;AAAA,MAChB,SAAS,WAAW;AAAA,MACpB,+BACG,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAAC,EAAE,WAAW,IAAI,SAAS,YAAY,CAAC,OAAO;AAAA,MAAA,CAChD;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;"}

package/dist/src/components/pagination/Pagination.cjs

@@ -47,6 +47,8 @@ const withDesignSystemPaginationOverrides = (pagination, { paginationTextLabels
   return {
     ...pagination,
     locale: { ...getPaginationLocale(small), ...pagination.locale },
+    // Keep antd in charge of visibility (including Table's filtered total).
+    // showSizeChanger's SelectProps alternative would force it visible.
     selectComponentClass: paginationSelectComponentClass,
     itemRender: buildItemRender({
       paginationTextLabels,

package/dist/src/components/pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Select,\n  SelectProps,\n  Button,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["jsx","Button","jsxs","s","CaretLeftIcon","CaretRightIcon","DotsThreeIcon","CaretDoubleLeftIcon","CaretDoubleRightIcon","Select","CaretDownIcon","AntdPagination"],"mappings":";;;;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEAA,2BAAAA;AAAAA,EAACC,KAAAA;AAAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEAD,2BAAAA,IAAC,KAAA,EAAE,WAAU,4BACX,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAASG,kBAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAASG,kBAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACEH,2BAAAA,IAAC,OACE,UAAA,uBACG,aACA,iBAAiBA,2BAAAA,IAACI,MAAAA,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACEJ,2BAAAA,IAAC,OACE,UAAA,uBACG,SACA,iBAAiBA,2BAAAA,IAACK,MAAAA,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAeL,+BAACM,MAAAA,eAAA,CAAA,CAAc,GAAIN,2BAAAA,IAACO,MAAAA,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,qCACJD,MAAAA,eAAA,EAAc;AAAA,qCACdE,MAAAA,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtCR,2BAAAA,IAACS,KAAAA,QAAA,EAAQ,GAAG,aAAa,YAAYT,2BAAAA,IAACU,qBAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA,IACvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAOV,+BAACW,KAAAA,YAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;;;"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Button,\n  Select,\n  SelectProps,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    // Keep antd in charge of visibility (including Table's filtered total).\n    // showSizeChanger's SelectProps alternative would force it visible.\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["jsx","Button","jsxs","s","CaretLeftIcon","CaretRightIcon","DotsThreeIcon","CaretDoubleLeftIcon","CaretDoubleRightIcon","Select","CaretDownIcon","AntdPagination"],"mappings":";;;;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEAA,2BAAAA;AAAAA,EAACC,KAAAA;AAAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEAD,2BAAAA,IAAC,KAAA,EAAE,WAAU,4BACX,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAASG,kBAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAASG,kBAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACEH,2BAAAA,IAAC,OACE,UAAA,uBACG,aACA,iBAAiBA,2BAAAA,IAACI,MAAAA,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACEJ,2BAAAA,IAAC,OACE,UAAA,uBACG,SACA,iBAAiBA,2BAAAA,IAACK,MAAAA,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAeL,+BAACM,MAAAA,eAAA,CAAA,CAAc,GAAIN,2BAAAA,IAACO,MAAAA,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,qCACJD,MAAAA,eAAA,EAAc;AAAA,qCACdE,MAAAA,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtCR,2BAAAA,IAACS,KAAAA,QAAA,EAAQ,GAAG,aAAa,YAAYT,2BAAAA,IAACU,qBAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA;AAAA;AAAA,IAGvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAOV,+BAACW,KAAAA,YAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;;;"}

package/dist/src/components/pagination/Pagination.js

@@ -45,6 +45,8 @@ const withDesignSystemPaginationOverrides = (pagination, { paginationTextLabels
   return {
     ...pagination,
     locale: { ...getPaginationLocale(small), ...pagination.locale },
+    // Keep antd in charge of visibility (including Table's filtered total).
+    // showSizeChanger's SelectProps alternative would force it visible.
     selectComponentClass: paginationSelectComponentClass,
     itemRender: buildItemRender({
       paginationTextLabels,

package/dist/src/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Select,\n  SelectProps,\n  Button,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["AntdPagination"],"mappings":";;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEA,oBAAC,KAAA,EAAE,WAAU,4BACX,UAAA,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAAS,EAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACA,oBAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAAS,EAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,aACA,iBAAiB,oBAAC,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,SACA,iBAAiB,oBAAC,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAe,oBAAC,eAAA,CAAA,CAAc,GAAI,oBAAC,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,0BACJ,eAAA,EAAc;AAAA,0BACd,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtC,oBAAC,QAAA,EAAQ,GAAG,aAAa,YAAY,oBAAC,eAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA,IACvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAO,oBAACA,cAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Button,\n  Select,\n  SelectProps,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    // Keep antd in charge of visibility (including Table's filtered total).\n    // showSizeChanger's SelectProps alternative would force it visible.\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["AntdPagination"],"mappings":";;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEA,oBAAC,KAAA,EAAE,WAAU,4BACX,UAAA,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAAS,EAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACA,oBAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAAS,EAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,aACA,iBAAiB,oBAAC,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,SACA,iBAAiB,oBAAC,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAe,oBAAC,eAAA,CAAA,CAAc,GAAI,oBAAC,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,0BACJ,eAAA,EAAc;AAAA,0BACd,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtC,oBAAC,QAAA,EAAQ,GAAG,aAAa,YAAY,oBAAC,eAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA;AAAA;AAAA,IAGvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAO,oBAACA,cAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;"}

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

@@ -13,12 +13,14 @@ const Popover = ({
   smallPadding = false,
   paddingSize,
   arrow = false,
+  rootClassName,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     antd.Popover,
     {
-      overlayClassName: cx(
+      rootClassName: cx(
+        rootClassName,
         Popover_module.default.j2Popover,
         scrollable && Popover_module.default.scrollable,
         smallPadding && Popover_module.default.smallPadding,

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","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  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      overlayClassName={cx(\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"],"names":["jsx","AntdPopover","styles"],"mappings":";;;;;;AAeA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,MAAoB;AAClB,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,kBAAkB;AAAA,QAChBC,eAAAA,QAAO;AAAA,QACP,cAAcA,eAAAA,QAAO;AAAA,QACrB,gBAAgBA,eAAAA,QAAO;AAAA,QACvB,eAAeA,eAAAA,QAAO,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,MAE9C,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,gBAAgB;AACnB,gDAAQ,OAAA,EAAK,UAAA,OAAO,WAAW,aAAa,YAAY,SAAQ;AAAA,QAClE;AAEA,eAAO,OAAO,WAAW,aAAa,QAAA,IAAY;AAAA,MACpD;AAAA,MAEA,UAAAF,2BAAAA,IAAC,SAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;;"}
+{"version":3,"file":"Popover.cjs","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"],"names":["jsx","AntdPopover","styles"],"mappings":";;;;;;AAeA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,eAAe;AAAA,QACb;AAAA,QACAC,eAAAA,QAAO;AAAA,QACP,cAAcA,eAAAA,QAAO;AAAA,QACrB,gBAAgBA,eAAAA,QAAO;AAAA,QACvB,eAAeA,eAAAA,QAAO,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,MAE9C,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,gBAAgB;AACnB,gDAAQ,OAAA,EAAK,UAAA,OAAO,WAAW,aAAa,YAAY,SAAQ;AAAA,QAClE;AAEA,eAAO,OAAO,WAAW,aAAa,QAAA,IAAY;AAAA,MACpD;AAAA,MAEA,UAAAF,2BAAAA,IAAC,SAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;;"}

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

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

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

@@ -11,12 +11,14 @@ const Popover = ({
   smallPadding = false,
   paddingSize,
   arrow = false,
+  rootClassName,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
     Popover$1,
     {
-      overlayClassName: cx(
+      rootClassName: cx(
+        rootClassName,
         styles.j2Popover,
         scrollable && styles.scrollable,
         smallPadding && styles.smallPadding,

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","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  ...props\n}: PopoverProps) => {\n  return (\n    <AntdPopover\n      overlayClassName={cx(\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"],"names":["AntdPopover"],"mappings":";;;;AAeA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,MAAoB;AAClB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,kBAAkB;AAAA,QAChB,OAAO;AAAA,QACP,cAAc,OAAO;AAAA,QACrB,gBAAgB,OAAO;AAAA,QACvB,eAAe,OAAO,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,MAE9C,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,gBAAgB;AACnB,qCAAQ,OAAA,EAAK,UAAA,OAAO,WAAW,aAAa,YAAY,SAAQ;AAAA,QAClE;AAEA,eAAO,OAAO,WAAW,aAAa,QAAA,IAAY;AAAA,MACpD;AAAA,MAEA,UAAA,oBAAC,SAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;"}
+{"version":3,"file":"Popover.js","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"],"names":["AntdPopover"],"mappings":";;;;AAeA,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,eAAe;AAAA,QACb;AAAA,QACA,OAAO;AAAA,QACP,cAAc,OAAO;AAAA,QACrB,gBAAgB,OAAO;AAAA,QACvB,eAAe,OAAO,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,MAE9C,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,gBAAgB;AACnB,qCAAQ,OAAA,EAAK,UAAA,OAAO,WAAW,aAAa,YAAY,SAAQ;AAAA,QAClE;AAEA,eAAO,OAAO,WAAW,aAAa,QAAA,IAAY;AAAA,MACpD;AAAA,MAEA,UAAA,oBAAC,SAAK,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGrB;"}

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const j2Popover = "_j2Popover_1egkj_1";
-const smallPadding = "_smallPadding_1egkj_6";
-const smPadding = "_smPadding_1egkj_7";
-const xxsPadding = "_xxsPadding_1egkj_11";
-const xsPadding = "_xsPadding_1egkj_15";
-const mdPadding = "_mdPadding_1egkj_19";
-const xlPadding = "_xlPadding_1egkj_23";
-const popoverHeader = "_popoverHeader_1egkj_34";
-const scrollable = "_scrollable_1egkj_40";
+const j2Popover = "_j2Popover_wjtre_1";
+const smallPadding = "_smallPadding_wjtre_6";
+const smPadding = "_smPadding_wjtre_7";
+const xxsPadding = "_xxsPadding_wjtre_11";
+const xsPadding = "_xsPadding_wjtre_15";
+const mdPadding = "_mdPadding_wjtre_19";
+const xlPadding = "_xlPadding_wjtre_23";
+const popoverHeader = "_popoverHeader_wjtre_34";
+const scrollable = "_scrollable_wjtre_40";
 const styles = {
   j2Popover,
   smallPadding,

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

@@ -1,12 +1,12 @@
-const j2Popover = "_j2Popover_1egkj_1";
-const smallPadding = "_smallPadding_1egkj_6";
-const smPadding = "_smPadding_1egkj_7";
-const xxsPadding = "_xxsPadding_1egkj_11";
-const xsPadding = "_xsPadding_1egkj_15";
-const mdPadding = "_mdPadding_1egkj_19";
-const xlPadding = "_xlPadding_1egkj_23";
-const popoverHeader = "_popoverHeader_1egkj_34";
-const scrollable = "_scrollable_1egkj_40";
+const j2Popover = "_j2Popover_wjtre_1";
+const smallPadding = "_smallPadding_wjtre_6";
+const smPadding = "_smPadding_wjtre_7";
+const xxsPadding = "_xxsPadding_wjtre_11";
+const xsPadding = "_xsPadding_wjtre_15";
+const mdPadding = "_mdPadding_wjtre_19";
+const xlPadding = "_xlPadding_wjtre_23";
+const popoverHeader = "_popoverHeader_wjtre_34";
+const scrollable = "_scrollable_wjtre_40";
 const styles = {
   j2Popover,
   smallPadding,

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const formikAntd = require("formik-antd");
 const antd = require("antd");
 const Icon = require("@ant-design/icons");
 const react = require("@phosphor-icons/react");
 const React = require("react");
-const formik = require("formik");
+const FormikField = require("../form/FormikField.cjs");
 const isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
 const flattenOptions = (opts) => {
   if (!opts) return [];
@@ -14,20 +13,25 @@ const flattenOptions = (opts) => {
     (o) => isGroupOption(o) ? flattenOptions(o.options) : [o]
   );
 };
-const Select = (props) => {
+const Select = (props) => /* @__PURE__ */ jsxRuntime.jsx(FormikField.FormikField, { name: props.name, children: ({ field, form }) => /* @__PURE__ */ jsxRuntime.jsx(SelectControl, { props, field, form }) });
+const SelectControl = ({
+  props,
+  field,
+  form
+}) => {
   var _a;
   const [isFocused, setIsFocused] = React.useState(false);
   const [isSearching, setIsSearching] = React.useState(false);
-  const [field, , helpers] = formik.useField(props.name);
+  const helpers = form.getFieldHelpers(props.name);
   const isMultiple = props.mode === "multiple";
+  const isSearchable = props.mode === "tags" || (props.showSearch ?? isMultiple);
   const hasOptions = (((_a = props.options) == null ? void 0 : _a.length) ?? 0) > 0;
   const currentValue = Array.isArray(field.value) ? field.value : [];
   const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
   const handleSearch = (value) => {
     setIsSearching(value.length > 0);
-    if (props.onSearch) {
-      props.onSearch(value);
-    }
+    const onSearch = typeof props.showSearch === "object" ? props.showSearch.onSearch ?? props.onSearch : props.onSearch;
+    onSearch == null ? void 0 : onSearch(value);
   };
   const handleToggleAll = () => {
     var _a2, _b;
@@ -76,7 +80,7 @@ const Select = (props) => {
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    formikAntd.Select,
+    antd.Select,
     {
       suffixIcon: props.loading ? /* @__PURE__ */ jsxRuntime.jsx(
         antd.Spin,
@@ -85,19 +89,31 @@ const Select = (props) => {
           size: "small",
           "data-testid": "loading-spinner"
         }
-      ) : props.showSearch && isFocused ? /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
+      ) : isSearchable && isFocused ? /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
       ...props,
+      id: props.id ?? props.name,
+      value: field.value === "" || field.value === null ? void 0 : field.value,
+      onChange: (value, option) => {
+        var _a2;
+        void helpers.setValue(value);
+        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value, option);
+      },
       popupRender: dropdownRender,
       removeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 12 }),
       allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircleIcon, { size: 14 }) } : false,
-      showSearch: props.showSearch,
-      onSearch: handleSearch,
-      onFocus: () => {
+      showSearch: typeof props.showSearch === "object" ? { ...props.showSearch, onSearch: handleSearch } : props.showSearch,
+      onSearch: isSearchable ? handleSearch : void 0,
+      onFocus: (event) => {
+        var _a2;
         setIsFocused(true);
+        (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, event);
       },
-      onBlur: () => {
+      onBlur: (event) => {
+        var _a2;
+        void helpers.setTouched(true);
         setIsFocused(false);
         setIsSearching(false);
+        (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, event);
       },
       size: props.size || "large"
     }

package/dist/src/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect } from 'formik-antd'\nimport { Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport { useField } from 'formik'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const [field, , helpers] = useField(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    if (props.onSearch) {\n      props.onSearch(value)\n    }\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : props.showSearch && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={props.showSearch}\n      onSearch={handleSearch}\n      onFocus={() => {\n        setIsFocused(true)\n      }}\n      onBlur={() => {\n        setIsFocused(false)\n        setIsSearching(false)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["useState","useField","_a","jsxs","jsx","Spin","LoadingOutlined","Fragment","AntDSelect","MagnifyingGlassIcon","CaretDownIcon","XCircleIcon"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect, Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport type { FieldProps } from 'formik'\nimport { FormikField } from '../form/FormikField'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => (\n  <FormikField name={props.name}>\n    {({ field, form }) => (\n      <SelectControl props={props} field={field} form={form} />\n    )}\n  </FormikField>\n)\n\nconst SelectControl = ({\n  props,\n  field,\n  form,\n}: { props: SelectProps } & Pick<FieldProps, 'field' | 'form'>) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const helpers = form.getFieldHelpers(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const isSearchable = props.mode === 'tags' || (props.showSearch ?? isMultiple)\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    const onSearch =\n      typeof props.showSearch === 'object'\n        ? (props.showSearch.onSearch ?? props.onSearch)\n        : props.onSearch\n    onSearch?.(value)\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : isSearchable && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      id={props.id ?? props.name}\n      value={\n        field.value === '' || field.value === null ? undefined : field.value\n      }\n      onChange={(value, option) => {\n        void helpers.setValue(value)\n        props.onChange?.(value, option)\n      }}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={\n        typeof props.showSearch === 'object'\n          ? { ...props.showSearch, onSearch: handleSearch }\n          : props.showSearch\n      }\n      onSearch={isSearchable ? handleSearch : undefined}\n      onFocus={(event) => {\n        setIsFocused(true)\n        props.onFocus?.(event)\n      }}\n      onBlur={(event) => {\n        void helpers.setTouched(true)\n        setIsFocused(false)\n        setIsSearching(false)\n        props.onBlur?.(event)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["FormikField","jsx","useState","_a","jsxs","Spin","LoadingOutlined","Fragment","AntDSelect","MagnifyingGlassIcon","CaretDownIcon","XCircleIcon"],"mappings":"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"}