@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0-canary.ff8c8fd

package/dist/elements/Collapsible/provider.js

@@ -1,33 +1,37 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext } from 'react';
-const Context = /*#__PURE__*/ createContext({
-    isCollapsed: undefined,
-    isVisible: undefined,
-    isWithinCollapsible: undefined,
-    toggle: ()=>{}
+const Context = /*#__PURE__*/createContext({
+  isCollapsed: undefined,
+  isVisible: undefined,
+  isWithinCollapsible: undefined,
+  toggle: () => {}
 });
-export const CollapsibleProvider = ({ children, isCollapsed, isWithinCollapsible = true, toggle })=>{
-    const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible();
-    const contextValue = React.useMemo(()=>{
-        return {
-            isCollapsed,
-            isVisible: isVisible && !parentIsCollapsed,
-            isWithinCollapsible,
-            toggle
-        };
-    }, [
-        isCollapsed,
-        isWithinCollapsible,
-        toggle,
-        parentIsCollapsed,
-        isVisible
-    ]);
-    return /*#__PURE__*/ _jsx(Context.Provider, {
-        value: contextValue,
-        children: children
-    });
+export const CollapsibleProvider = ({
+  children,
+  isCollapsed,
+  isWithinCollapsible = true,
+  toggle
+}) => {
+  const {
+    isCollapsed: parentIsCollapsed,
+    isVisible
+  } = useCollapsible();
+  const contextValue = React.useMemo(() => {
+    return {
+      isCollapsed,
+      isVisible: isVisible && !parentIsCollapsed,
+      isWithinCollapsible,
+      toggle
+    };
+  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+export const useCollapsible = () => {
+  return useContext(Context);
 };
-export const useCollapsible = ()=>useContext(Context);
-
 //# sourceMappingURL=provider.js.map

package/dist/elements/Collapsible/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context.Provider value={contextValue}>{children}</Context.Provider>\n}\n\nexport const useCollapsible = (): ContextType => useContext(Context)\n"],"names":["React","createContext","useContext","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","Provider","value"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AASxD,MAAMC,wBAAUF,cAAc;IAC5BG,aAAaC;IACbC,WAAWD;IACXE,qBAAqBF;IACrBG,QAAQ,KAAO;AACjB;AAEA,OAAO,MAAMC,sBAKR,CAAC,EAAEC,QAAQ,EAAEN,WAAW,EAAEG,sBAAsB,IAAI,EAAEC,MAAM,EAAE;IACjE,MAAM,EAAEJ,aAAaO,iBAAiB,EAAEL,SAAS,EAAE,GAAGM;IAEtD,MAAMC,eAAeb,MAAMc,OAAO,CAAC;QACjC,OAAO;YACLV;YACAE,WAAWA,aAAa,CAACK;YACzBJ;YACAC;QACF;IACF,GAAG;QAACJ;QAAaG;QAAqBC;QAAQG;QAAmBL;KAAU;IAE3E,qBAAO,KAACH,QAAQY,QAAQ;QAACC,OAAOH;kBAAeH;;AACjD,EAAC;AAED,OAAO,MAAME,iBAAiB,IAAmBV,WAAWC,SAAQ"}
+{"version":3,"file":"provider.js","names":["React","createContext","useContext","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","Provider","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context.Provider value={contextValue}>{children}</Context.Provider>\n}\n\nexport const useCollapsible = (): ContextType => useContext(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,UAAU,QAAQ;AASjD,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA,CAAQa,QAAQ;IAACC,KAAA,EAAOJ,YAAA;cAAeH;;AACjD;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA;EAAA,OAAmBV,UAAA,CAAAC,OAAW;AAAA","ignoreList":[]}

package/dist/elements/ColumnSelector/index.d.ts

@@ -2,7 +2,7 @@ import type { SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export type Props = {
-    collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
 };
 export declare const ColumnSelector: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/ColumnSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAUpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAClD,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAUpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useId } from 'react';
 import { PlusIcon } from '../../icons/Plus/index.js';
@@ -9,49 +11,100 @@ import { Pill } from '../Pill/index.js';
 import { useTableColumns } from '../TableColumns/index.js';
 import './index.scss';
 const baseClass = 'column-selector';
-const filterColumnFields = (fields)=>{
-    return fields.filter((field)=>{
-        return !field.admin?.disableListColumn;
-    });
+const filterColumnFields = fields => {
+  return fields.filter(field => {
+    return !field.cellProps?.field?.admin?.disableListColumn;
+  });
 };
-export const ColumnSelector = ({ collectionSlug })=>{
-    const { columns, moveColumn, toggleColumn } = useTableColumns();
-    const uuid = useId();
-    const editDepth = useEditDepth();
-    if (!columns) {
-        return null;
-    }
+export const ColumnSelector = t0 => {
+  const $ = _c(14);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    columns,
+    moveColumn,
+    toggleColumn
+  } = useTableColumns();
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  if (!columns) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== columns || $[1] !== moveColumn || $[2] !== toggleColumn || $[3] !== collectionSlug || $[4] !== editDepth || $[5] !== uuid) {
     const filteredColumns = filterColumnFields(columns);
-    return /*#__PURE__*/ _jsx(DraggableSortable, {
-        className: baseClass,
-        ids: filteredColumns.map((col)=>col?.accessor),
-        onDragEnd: ({ moveFromIndex, moveToIndex })=>{
-            moveColumn({
-                fromIndex: moveFromIndex,
-                toIndex: moveToIndex
-            });
-        },
-        children: filteredColumns.map((col, i)=>{
-            if (!col) return null;
-            const { Label, accessor, active } = col;
-            if (col.accessor === '_select') return null;
-            return /*#__PURE__*/ _jsx(Pill, {
-                alignIcon: "left",
-                "aria-checked": active,
-                className: [
-                    `${baseClass}__column`,
-                    active && `${baseClass}__column--active`
-                ].filter(Boolean).join(' '),
-                draggable: true,
-                icon: active ? /*#__PURE__*/ _jsx(XIcon, {}) : /*#__PURE__*/ _jsx(PlusIcon, {}),
-                id: accessor,
-                onClick: ()=>{
-                    toggleColumn(accessor);
-                },
-                children: Label
-            }, `${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`);
-        })
+    let t2;
+    if ($[7] !== moveColumn) {
+      t2 = t3 => {
+        const {
+          moveFromIndex,
+          moveToIndex
+        } = t3;
+        moveColumn({
+          fromIndex: moveFromIndex,
+          toIndex: moveToIndex
+        });
+      };
+      $[7] = moveColumn;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== toggleColumn || $[10] !== collectionSlug || $[11] !== editDepth || $[12] !== uuid) {
+      t3 = (col_0, i) => {
+        if (!col_0) {
+          return null;
+        }
+        const {
+          Label,
+          accessor,
+          active
+        } = col_0;
+        if (col_0.accessor === "_select") {
+          return null;
+        }
+        return _jsx(Pill, {
+          alignIcon: "left",
+          "aria-checked": active,
+          className: [`${baseClass}__column`, active && `${baseClass}__column--active`].filter(Boolean).join(" "),
+          draggable: true,
+          icon: active ? _jsx(XIcon, {}) : _jsx(PlusIcon, {}),
+          id: accessor,
+          onClick: () => {
+            toggleColumn(accessor);
+          },
+          children: Label
+        }, `${collectionSlug}-${col_0.cellProps?.field && "name" in col_0.cellProps.field ? col_0.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ""}${uuid}`);
+      };
+      $[9] = toggleColumn;
+      $[10] = collectionSlug;
+      $[11] = editDepth;
+      $[12] = uuid;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t1 = _jsx(DraggableSortable, {
+      className: baseClass,
+      ids: filteredColumns.map(_temp),
+      onDragEnd: t2,
+      children: filteredColumns.map(t3)
     });
+    $[0] = columns;
+    $[1] = moveColumn;
+    $[2] = toggleColumn;
+    $[3] = collectionSlug;
+    $[4] = editDepth;
+    $[5] = uuid;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
+function _temp(col) {
+  return col?.accessor;
+}
 //# sourceMappingURL=index.js.map

package/dist/elements/ColumnSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst filterColumnFields = (fields: Column[]): Column[] => {\n  return fields.filter((field) => {\n    return !field.admin?.disableListColumn\n  })\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  const filteredColumns = filterColumnFields(columns)\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        if (!col) return null\n\n        const { Label, accessor, active } = col\n\n        if (col.accessor === '_select') return null\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"names":["React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","admin","disableListColumn","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","className","ids","map","col","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","Label","active","alignIcon","aria-checked","Boolean","join","draggable","icon","id","onClick","name"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,KAAK,QAAQ,QAAO;AAIpC,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,KAAK,QAAQ,yBAAwB;AAC9C,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,MAAMC,qBAAqB,CAACC;IAC1B,OAAOA,OAAOC,MAAM,CAAC,CAACC;QACpB,OAAO,CAACA,MAAMC,KAAK,EAAEC;IACvB;AACF;AAEA,OAAO,MAAMC,iBAAkC,CAAC,EAAEC,cAAc,EAAE;IAChE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGZ;IAE9C,MAAMa,OAAOnB;IACb,MAAMoB,YAAYjB;IAElB,IAAI,CAACa,SAAS;QACZ,OAAO;IACT;IAEA,MAAMK,kBAAkBb,mBAAmBQ;IAE3C,qBACE,KAACZ;QACCkB,WAAWf;QACXgB,KAAKF,gBAAgBG,GAAG,CAAC,CAACC,MAAQA,KAAKC;QACvCC,WAAW,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;YACxCZ,WAAW;gBACTa,WAAWF;gBACXG,SAASF;YACX;QACF;kBAECR,gBAAgBG,GAAG,CAAC,CAACC,KAAKO;YACzB,IAAI,CAACP,KAAK,OAAO;YAEjB,MAAM,EAAEQ,KAAK,EAAEP,QAAQ,EAAEQ,MAAM,EAAE,GAAGT;YAEpC,IAAIA,IAAIC,QAAQ,KAAK,WAAW,OAAO;YAEvC,qBACE,KAACrB;gBACC8B,WAAU;gBACVC,gBAAcF;gBACdZ,WAAW;oBAAC,CAAC,EAAEf,UAAU,QAAQ,CAAC;oBAAE2B,UAAU,CAAC,EAAE3B,UAAU,gBAAgB,CAAC;iBAAC,CAC1EG,MAAM,CAAC2B,SACPC,IAAI,CAAC;gBACRC,SAAS;gBACTC,MAAMN,uBAAS,KAAChC,2BAAW,KAACD;gBAC5BwC,IAAIf;gBAEJgB,SAAS;oBACPxB,aAAaQ;gBACf;0BAECO;eALI,CAAC,EAAElB,eAAe,CAAC,EAAEU,IAAIkB,IAAI,IAAIX,EAAE,EAAEZ,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,GAAG,EAAED,KAAK,CAAC;QAQ1F;;AAGN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","cellProps","admin","disableListColumn","ColumnSelector","t0","$","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","t1","filteredColumns","t2","t3","moveFromIndex","moveToIndex","fromIndex","toIndex","col_0","i","col","Label","accessor","active","_jsx","alignIcon","className","Boolean","join","draggable","icon","id","onClick","children","name","ids","map","_temp","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst filterColumnFields = (fields: Column[]): Column[] => {\n  return fields.filter((field) => {\n    return !field.cellProps?.field?.admin?.disableListColumn\n  })\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  const filteredColumns = filterColumnFields(columns)\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        if (!col) return null\n\n        const { Label, accessor, active } = col\n\n        if (col.accessor === '_select') return null\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${col.cellProps?.field && 'name' in col.cellProps.field ? col.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAI7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,YAAY,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,MAAMC,kBAAA,GAAsBC,MAAA;EAC1B,OAAOA,MAAA,CAAOC,MAAM,CAAEC,KAAA;IACpB,OAAO,CAACA,KAAA,CAAMC,SAAS,EAAED,KAAA,EAAOE,KAAA,EAAOC,iBAAA;EACzC;AACF;AAEA,OAAO,MAAMC,cAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAoB;EAAA,IAAAF,EAAkB;EAChE;IAAAG,OAAA;IAAAC,UAAA;IAAAC;EAAA,IAA8Cf,eAAA;EAE9C,MAAAgB,IAAA,GAAatB,KAAA;EACb,MAAAuB,SAAA,GAAkBpB,YAAA;EAAA,KAEbgB,OAAA;IAAA;EAAA;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAK,IAAA;IAIL,MAAAG,eAAA,GAAwBjB,kBAAA,CAAmBW,OAAA;IAAA,IAAAO,EAAA;IAAA,IAAAT,CAAA,QAAAG,UAAA;MAM5BM,EAAA,GAAAC,EAAA;QAAC;UAAAC,aAAA;UAAAC;QAAA,IAAAF,EAA8B;QACxCP,UAAA;UAAAU,SAAA,EACaF,aAAA;UAAAG,OAAA,EACFF;QAAA,CACX;MAAA;MACFZ,CAAA,MAAAG,UAAA;MAAAH,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IAAA,IAAAU,EAAA;IAAA,IAAAV,CAAA,QAAAI,YAAA,IAAAJ,CAAA,SAAAC,cAAA,IAAAD,CAAA,SAAAM,SAAA,IAAAN,CAAA,SAAAK,IAAA;MAEqBK,EAAA,GAAAA,CAAAK,KAAA,EAAAC,CAAA;QAAA,KACdC,KAAA;UAAA;QAAA;QAEL;UAAAC,KAAA;UAAAC,QAAA;UAAAC;QAAA,IAAoCH,KAAA;QAAA,IAEhCA,KAAA,CAAAE,QAAA,KAAiB;UAAA;QAAA;QAAA,OAGnBE,IAAA,CAAAjC,IAAA;UAAAkC,SAAA,EACY;UAAA,gBACIF,MAAA;UAAAG,SAAA,EACH,CAAC,GAAAjC,SAAA,UAAsB,EAAE8B,MAAA,IAAU,GAAA9B,SAAA,kBAA8B,EAAAG,MAAA,CAAA+B,OAClE,EAAAC,IAAA,CACF;UAAAC,SAAA;UAAAC,IAAA,EAEFP,MAAA,GAASC,IAAA,CAAApC,KAAA,IAAC,IAAWoC,IAAA,CAAArC,QAAA,IAAC;UAAA4C,EAAA,EACxBT,QAAA;UAAAU,OAAA,EAAAA,CAAA;YAGFzB,YAAA,CAAae,QAAA;UAAA;UAAAW,QAAA,EAGdZ;QAAA,GALI,GAAGjB,cAAA,IAAkBgB,KAAA,CAAAtB,SAAA,EAAAD,KAAA,IAAwB,UAAUuB,KAAA,CAAAtB,SAAA,CAAAD,KAAmB,GAAGuB,KAAA,CAAAtB,SAAA,EAAAD,KAAA,EAAAqC,IAAA,GAA6Bf,CAAA,GAAIV,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;MAAA;MAQnKL,CAAA,MAAAI,YAAA;MAAAJ,CAAA,OAAAC,cAAA;MAAAD,CAAA,OAAAM,SAAA;MAAAN,CAAA,OAAAK,IAAA;MAAAL,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAnCFO,EAAA,GAAAc,IAAA,CAAAlC,iBAAA;MAAAoC,SAAA,EAAAjC,SAAA;MAAA0C,GAAA,EAEOxB,eAAA,CAAAyB,GAAA,CAAAC,KAAkC;MAAAC,SAAA,EAC5B1B,EAKX;MAAAqB,QAAA,EAECtB,eAAA,CAAAyB,GAAA,CAAoBvB,EAyBrB;IAAA,C;;;;;;;;;;;SAnCFH,E;CAsCJ;AAnD+C,SAAA2B,MAAAjB,GAAA;EAAA,OAePA,GAAA,EAAAE,QAAA;AAAA","ignoreList":[]}

package/dist/elements/CopyToClipboard/index.js

@@ -1,4 +1,5 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from 'react';
 import { CopyIcon } from '../../icons/Copy/index.js';
@@ -6,51 +7,49 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import './index.scss';
 const baseClass = 'copy-to-clipboard';
-export const CopyToClipboard = ({ defaultMessage, successMessage, value })=>{
-    const ref = useRef(null);
-    const [copied, setCopied] = useState(false);
-    const [hovered, setHovered] = useState(false);
-    const { t } = useTranslation();
-    if (value) {
-        return /*#__PURE__*/ _jsxs("button", {
-            className: baseClass,
-            onClick: ()=>{
-                if (ref && ref.current) {
-                    ref.current.select();
-                    ref.current.setSelectionRange(0, value.length + 1);
-                    document.execCommand('copy');
-                    setCopied(true);
-                }
-            },
-            onMouseEnter: ()=>{
-                setHovered(true);
-                setCopied(false);
-            },
-            onMouseLeave: ()=>{
-                setHovered(false);
-                setCopied(false);
-            },
-            type: "button",
-            children: [
-                /*#__PURE__*/ _jsx(CopyIcon, {}),
-                /*#__PURE__*/ _jsxs(Tooltip, {
-                    delay: copied ? 0 : undefined,
-                    show: hovered || copied,
-                    children: [
-                        copied && (successMessage ?? t('general:copied')),
-                        !copied && (defaultMessage ?? t('general:copy'))
-                    ]
-                }),
-                /*#__PURE__*/ _jsx("textarea", {
-                    readOnly: true,
-                    ref: ref,
-                    tabIndex: -1,
-                    value: value
-                })
-            ]
-        });
-    }
-    return null;
+export const CopyToClipboard = ({
+  defaultMessage,
+  successMessage,
+  value
+}) => {
+  const ref = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  if (value) {
+    return /*#__PURE__*/_jsxs("button", {
+      className: baseClass,
+      onClick: () => {
+        if (ref && ref.current) {
+          ref.current.select();
+          ref.current.setSelectionRange(0, value.length + 1);
+          document.execCommand('copy');
+          setCopied(true);
+        }
+      },
+      onMouseEnter: () => {
+        setHovered(true);
+        setCopied(false);
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        setCopied(false);
+      },
+      type: "button",
+      children: [/*#__PURE__*/_jsx(CopyIcon, {}), /*#__PURE__*/_jsxs(Tooltip, {
+        delay: copied ? 0 : undefined,
+        show: hovered || copied,
+        children: [copied && (successMessage ?? t('general:copied')), !copied && (defaultMessage ?? t('general:copy'))]
+      }), /*#__PURE__*/_jsx("textarea", {
+        readOnly: true,
+        ref: ref,
+        tabIndex: -1,
+        value: value
+      })]
+    });
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/CopyToClipboard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef, useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n  const ref = useRef(null)\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={() => {\n          if (ref && ref.current) {\n            ref.current.select()\n            ref.current.setSelectionRange(0, value.length + 1)\n            document.execCommand('copy')\n            setCopied(true)\n          }\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        <CopyIcon />\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n        <textarea readOnly ref={ref} tabIndex={-1} value={value} />\n      </button>\n    )\n  }\n\n  return null\n}\n"],"names":["React","useRef","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","defaultMessage","successMessage","value","ref","copied","setCopied","hovered","setHovered","t","button","className","onClick","current","select","setSelectionRange","length","document","execCommand","onMouseEnter","onMouseLeave","type","delay","undefined","show","textarea","readOnly","tabIndex"],"mappings":"AAAA;;AACA,OAAOA,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE/C,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,OAAO,QAAQ,sBAAqB;AAC7C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAQlB,OAAO,MAAMC,kBAAmC,CAAC,EAAEC,cAAc,EAAEC,cAAc,EAAEC,KAAK,EAAE;IACxF,MAAMC,MAAMV,OAAO;IACnB,MAAM,CAACW,QAAQC,UAAU,GAAGX,SAAS;IACrC,MAAM,CAACY,SAASC,WAAW,GAAGb,SAAS;IACvC,MAAM,EAAEc,CAAC,EAAE,GAAGZ;IAEd,IAAIM,OAAO;QACT,qBACE,MAACO;YACCC,WAAWZ;YACXa,SAAS;gBACP,IAAIR,OAAOA,IAAIS,OAAO,EAAE;oBACtBT,IAAIS,OAAO,CAACC,MAAM;oBAClBV,IAAIS,OAAO,CAACE,iBAAiB,CAAC,GAAGZ,MAAMa,MAAM,GAAG;oBAChDC,SAASC,WAAW,CAAC;oBACrBZ,UAAU;gBACZ;YACF;YACAa,cAAc;gBACZX,WAAW;gBACXF,UAAU;YACZ;YACAc,cAAc;gBACZZ,WAAW;gBACXF,UAAU;YACZ;YACAe,MAAK;;8BAEL,KAACzB;8BACD,MAACE;oBAAQwB,OAAOjB,SAAS,IAAIkB;oBAAWC,MAAMjB,WAAWF;;wBACtDA,UAAWH,CAAAA,kBAAkBO,EAAE,iBAAgB;wBAC/C,CAACJ,UAAWJ,CAAAA,kBAAkBQ,EAAE,eAAc;;;8BAEjD,KAACgB;oBAASC,QAAQ;oBAACtB,KAAKA;oBAAKuB,UAAU,CAAC;oBAAGxB,OAAOA;;;;IAGxD;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"index.js","names":["React","useRef","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","defaultMessage","successMessage","value","ref","copied","setCopied","hovered","setHovered","t","_jsxs","className","onClick","current","select","setSelectionRange","length","document","execCommand","onMouseEnter","onMouseLeave","type","_jsx","delay","undefined","show","readOnly","tabIndex"],"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef, useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n  const ref = useRef(null)\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={() => {\n          if (ref && ref.current) {\n            ref.current.select()\n            ref.current.setSelectionRange(0, value.length + 1)\n            document.execCommand('copy')\n            setCopied(true)\n          }\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        <CopyIcon />\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n        <textarea readOnly ref={ref} tabIndex={-1} value={value} />\n      </button>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,MAAM,EAAEC,QAAQ,QAAQ;AAExC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,eAAA,GAAmCA,CAAC;EAAEC,cAAc;EAAEC,cAAc;EAAEC;AAAK,CAAE;EACxF,MAAMC,GAAA,GAAMV,MAAA,CAAO;EACnB,MAAM,CAACW,MAAA,EAAQC,SAAA,CAAU,GAAGX,QAAA,CAAS;EACrC,MAAM,CAACY,OAAA,EAASC,UAAA,CAAW,GAAGb,QAAA,CAAS;EACvC,MAAM;IAAEc;EAAC,CAAE,GAAGZ,cAAA;EAEd,IAAIM,KAAA,EAAO;IACT,oBACEO,KAAA,CAAC;MACCC,SAAA,EAAWZ,SAAA;MACXa,OAAA,EAASA,CAAA;QACP,IAAIR,GAAA,IAAOA,GAAA,CAAIS,OAAO,EAAE;UACtBT,GAAA,CAAIS,OAAO,CAACC,MAAM;UAClBV,GAAA,CAAIS,OAAO,CAACE,iBAAiB,CAAC,GAAGZ,KAAA,CAAMa,MAAM,GAAG;UAChDC,QAAA,CAASC,WAAW,CAAC;UACrBZ,SAAA,CAAU;QACZ;MACF;MACAa,YAAA,EAAcA,CAAA;QACZX,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAc,YAAA,EAAcA,CAAA;QACZZ,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAe,IAAA,EAAK;8BAELC,IAAA,CAAC1B,QAAA,O,aACDc,KAAA,CAACZ,OAAA;QAAQyB,KAAA,EAAOlB,MAAA,GAAS,IAAImB,SAAA;QAAWC,IAAA,EAAMlB,OAAA,IAAWF,MAAA;mBACtDA,MAAA,KAAWH,cAAA,IAAkBO,CAAA,CAAE,iBAAgB,GAC/C,CAACJ,MAAA,KAAWJ,cAAA,IAAkBQ,CAAA,CAAE,eAAc;uBAEjDa,IAAA,CAAC;QAASI,QAAQ;QAACtB,GAAA,EAAKA,GAAA;QAAKuB,QAAA,EAAU,CAAC;QAAGxB,KAAA,EAAOA;;;EAGxD;EAEA,OAAO;AACT","ignoreList":[]}

package/dist/elements/DatePicker/DatePicker.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker';
@@ -10,90 +12,139 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormattedLocale } from './getFormattedLocale.js';
 import './index.scss';
 const baseClass = 'date-time-picker';
-const DatePicker = (props)=>{
-    const { displayFormat: customDisplayFormat, maxDate, maxTime, minDate, minTime, monthsToShow = 1, onChange: onChangeFromProps, overrides, pickerAppearance = 'default', placeholder: placeholderText, readOnly, timeFormat = 'h:mm aa', timeIntervals = 30, value } = props;
-    // Use the user's AdminUI language preference for the locale
-    const { i18n } = useTranslation();
-    const datepickerLocale = getFormattedLocale(i18n.language);
-    try {
-        registerLocale(datepickerLocale, i18n.dateFNS);
-    } catch (e) {
-        console.warn(`Could not find DatePicker locale for ${i18n.language}`);
-    }
-    let dateFormat = customDisplayFormat;
-    if (!customDisplayFormat) {
-        // when no displayFormat is provided, determine format based on the picker appearance
-        if (pickerAppearance === 'default') dateFormat = 'MM/dd/yyyy';
-        else if (pickerAppearance === 'dayAndTime') dateFormat = 'MMM d, yyy h:mm a';
-        else if (pickerAppearance === 'timeOnly') dateFormat = 'h:mm a';
-        else if (pickerAppearance === 'dayOnly') dateFormat = 'MMM dd';
-        else if (pickerAppearance === 'monthOnly') dateFormat = 'MMMM';
-    }
-    const onChange = (incomingDate)=>{
-        const newDate = incomingDate;
-        if (newDate instanceof Date && [
-            'dayOnly',
-            'default',
-            'monthOnly'
-        ].includes(pickerAppearance)) {
-            const tzOffset = incomingDate.getTimezoneOffset() / 60;
-            newDate.setHours(12 - tzOffset, 0);
+const DatePicker = props => {
+  const $ = _c(7);
+  const {
+    displayFormat: customDisplayFormat,
+    maxDate,
+    maxTime,
+    minDate,
+    minTime,
+    monthsToShow: t0,
+    onChange: onChangeFromProps,
+    overrides,
+    pickerAppearance: t1,
+    placeholder: placeholderText,
+    readOnly,
+    timeFormat: t2,
+    timeIntervals: t3,
+    value
+  } = props;
+  const monthsToShow = t0 === undefined ? 1 : t0;
+  const pickerAppearance = t1 === undefined ? "default" : t1;
+  const timeFormat = t2 === undefined ? "h:mm aa" : t2;
+  const timeIntervals = t3 === undefined ? 30 : t3;
+  const {
+    i18n
+  } = useTranslation();
+  const datepickerLocale = getFormattedLocale(i18n.language);
+  ;
+  try {
+    registerLocale(datepickerLocale, i18n.dateFNS);
+  } catch (t4) {
+    console.warn(`Could not find DatePicker locale for ${i18n.language}`);
+  }
+  let dateFormat = customDisplayFormat;
+  if (!customDisplayFormat) {
+    if (pickerAppearance === "default") {
+      dateFormat = "MM/dd/yyyy";
+    } else {
+      if (pickerAppearance === "dayAndTime") {
+        dateFormat = "MMM d, yyy h:mm a";
+      } else {
+        if (pickerAppearance === "timeOnly") {
+          dateFormat = "h:mm a";
+        } else {
+          if (pickerAppearance === "dayOnly") {
+            dateFormat = "MMM dd";
+          } else {
+            if (pickerAppearance === "monthOnly") {
+              dateFormat = "MMMM";
+            }
+          }
         }
-        if (typeof onChangeFromProps === 'function') onChangeFromProps(newDate);
-    };
-    const dateTimePickerProps = {
-        customInputRef: 'ref',
-        dateFormat,
-        disabled: readOnly,
-        maxDate,
-        maxTime,
-        minDate,
-        minTime,
-        monthsShown: Math.min(2, monthsToShow),
-        onChange,
-        placeholderText,
-        popperPlacement: 'bottom-start',
-        selected: value && new Date(value),
-        showMonthYearPicker: pickerAppearance === 'monthOnly',
-        showPopperArrow: false,
-        showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
-        timeFormat,
-        timeIntervals,
-        ...overrides
+      }
+    }
+  }
+  let t5;
+  if ($[0] !== pickerAppearance || $[1] !== onChangeFromProps) {
+    t5 = incomingDate => {
+      const newDate = incomingDate;
+      if (newDate instanceof Date && ["dayOnly", "default", "monthOnly"].includes(pickerAppearance)) {
+        const tzOffset = incomingDate.getTimezoneOffset() / 60;
+        newDate.setHours(12 - tzOffset, 0);
+      }
+      if (typeof onChangeFromProps === "function") {
+        onChangeFromProps(newDate);
+      }
     };
-    const classes = [
-        baseClass,
-        `${baseClass}__appearance--${pickerAppearance}`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__icon-wrap`,
-                children: [
-                    dateTimePickerProps.selected && /*#__PURE__*/ _jsx("button", {
-                        className: `${baseClass}__clear-button`,
-                        onClick: ()=>onChange(null),
-                        type: "button",
-                        children: /*#__PURE__*/ _jsx(XIcon, {})
-                    }),
-                    /*#__PURE__*/ _jsx(CalendarIcon, {})
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__input-wrapper`,
-                children: /*#__PURE__*/ _jsx(ReactDatePicker, {
-                    ...dateTimePickerProps,
-                    dropdownMode: "select",
-                    locale: datepickerLocale,
-                    showMonthDropdown: true,
-                    showYearDropdown: true
-                })
-            })
-        ]
-    });
+    $[0] = pickerAppearance;
+    $[1] = onChangeFromProps;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const onChange = t5;
+  let t6;
+  if ($[3] !== value) {
+    t6 = value && new Date(value);
+    $[3] = value;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  const dateTimePickerProps = {
+    customInputRef: "ref",
+    dateFormat,
+    disabled: readOnly,
+    maxDate,
+    maxTime,
+    minDate,
+    minTime,
+    monthsShown: Math.min(2, monthsToShow),
+    onChange,
+    placeholderText,
+    popperPlacement: "bottom-start",
+    selected: t6,
+    showMonthYearPicker: pickerAppearance === "monthOnly",
+    showPopperArrow: false,
+    showTimeSelect: pickerAppearance === "dayAndTime" || pickerAppearance === "timeOnly",
+    timeFormat,
+    timeIntervals,
+    ...overrides
+  };
+  const t7 = `${baseClass}__appearance--${pickerAppearance}`;
+  let t8;
+  if ($[5] !== t7) {
+    t8 = [baseClass, t7].filter(Boolean);
+    $[5] = t7;
+    $[6] = t8;
+  } else {
+    t8 = $[6];
+  }
+  const classes = t8.join(" ");
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsxs("div", {
+      className: `${baseClass}__icon-wrap`,
+      children: [dateTimePickerProps.selected && _jsx("button", {
+        className: `${baseClass}__clear-button`,
+        onClick: () => onChange(null),
+        type: "button",
+        children: _jsx(XIcon, {})
+      }), _jsx(CalendarIcon, {})]
+    }), _jsx("div", {
+      className: `${baseClass}__input-wrapper`,
+      children: _jsx(ReactDatePicker, {
+        ...dateTimePickerProps,
+        dropdownMode: "select",
+        locale: datepickerLocale,
+        showMonthDropdown: true,
+        showYearDropdown: true
+      })
+    })]
+  });
 };
 // eslint-disable-next-line no-restricted-exports
 export default DatePicker;
-
 //# sourceMappingURL=DatePicker.js.map