@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/elements/CodeEditor/CodeEditor.js

@@ -10,14 +10,16 @@ import './index.scss';
 const Editor = EditorImport.default || EditorImport;
 const baseClass = 'code-editor';
 const CodeEditor = props => {
-  const $ = _c(20);
+  const $ = _c(22);
   let rest;
   let readOnly;
   let className;
   let options;
+  let maxHeight;
   if ($[0] !== props) {
     ({
       className,
+      maxHeight,
       options,
       readOnly,
       ...rest
@@ -27,11 +29,13 @@ const CodeEditor = props => {
     $[2] = readOnly;
     $[3] = className;
     $[4] = options;
+    $[5] = maxHeight;
   } else {
     rest = $[1];
     readOnly = $[2];
     className = $[3];
     options = $[4];
+    maxHeight = $[5];
   }
   const [dynamicHeight, setDynamicHeight] = useState(20);
   const {
@@ -40,39 +44,39 @@ const CodeEditor = props => {
   const t0 = rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : "";
   const t1 = readOnly && "read-only";
   let t2;
-  if ($[5] !== className || $[6] !== t0 || $[7] !== t1) {
+  if ($[6] !== className || $[7] !== t0 || $[8] !== t1) {
     t2 = [baseClass, className, t0, t1].filter(Boolean);
-    $[5] = className;
-    $[6] = t0;
-    $[7] = t1;
-    $[8] = t2;
+    $[6] = className;
+    $[7] = t0;
+    $[8] = t1;
+    $[9] = t2;
   } else {
-    t2 = $[8];
+    t2 = $[9];
   }
   const classes = t2.join(" ");
   let t3;
-  if ($[9] !== dynamicHeight || $[10] !== readOnly || $[11] !== options || $[12] !== theme || $[13] !== rest || $[14] !== classes) {
+  if ($[10] !== dynamicHeight || $[11] !== readOnly || $[12] !== options || $[13] !== theme || $[14] !== maxHeight || $[15] !== rest || $[16] !== classes) {
     let t4;
-    if ($[16] !== rest.onChange) {
+    if ($[18] !== rest.onChange) {
       t4 = (value, ev) => {
         rest.onChange?.(value, ev);
-        setDynamicHeight(value.split("\n").length * 18 + 2);
+        setDynamicHeight(Math.max(56, value.split("\n").length * 18 + 2));
       };
-      $[16] = rest.onChange;
-      $[17] = t4;
+      $[18] = rest.onChange;
+      $[19] = t4;
     } else {
-      t4 = $[17];
+      t4 = $[19];
     }
     let t5;
-    if ($[18] !== rest.onMount) {
+    if ($[20] !== rest.onMount) {
       t5 = (editor, monaco) => {
         rest.onMount?.(editor, monaco);
-        setDynamicHeight(editor.getValue().split("\n").length * 18 + 2);
+        setDynamicHeight(Math.max(56, editor.getValue().split("\n").length * 18 + 2));
       };
-      $[18] = rest.onMount;
-      $[19] = t5;
+      $[20] = rest.onMount;
+      $[21] = t5;
     } else {
-      t5 = $[19];
+      t5 = $[21];
     }
     t3 = _jsx(Editor, {
       className: classes,
@@ -97,19 +101,20 @@ const CodeEditor = props => {
       },
       theme: theme === "dark" ? "vs-dark" : "vs",
       ...rest,
-      height: dynamicHeight,
+      height: maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight,
       onChange: t4,
       onMount: t5
     });
-    $[9] = dynamicHeight;
-    $[10] = readOnly;
-    $[11] = options;
-    $[12] = theme;
-    $[13] = rest;
-    $[14] = classes;
-    $[15] = t3;
+    $[10] = dynamicHeight;
+    $[11] = readOnly;
+    $[12] = options;
+    $[13] = theme;
+    $[14] = maxHeight;
+    $[15] = rest;
+    $[16] = classes;
+    $[17] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[17];
   }
   return t3;
 };

package/dist/elements/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","$","rest","readOnly","className","options","dynamicHeight","setDynamicHeight","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","t4","onChange","value","ev","split","length","t5","onMount","editor","monaco","getValue","_jsx","loading","height","scrollbar","alwaysConsumeMouseWheel","scrollBeyondLastLine","tabSize","wordWrap"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, options, readOnly, ...rest } = props\n  const [dynamicHeight, setDynamicHeight] = useState(20)\n  const { theme } = useTheme()\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      loading={<ShimmerEffect height={dynamicHeight} />}\n      options={{\n        detectIndentation: true,\n        hideCursorInOverviewRuler: true,\n        minimap: {\n          enabled: false,\n        },\n        overviewRulerBorder: false,\n        readOnly: Boolean(readOnly),\n        scrollbar: {\n          alwaysConsumeMouseWheel: false,\n        },\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      height={dynamicHeight}\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(value.split('\\n').length * 18 + 2)\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n        setDynamicHeight(editor.getValue().split('\\n').length * 18 + 2)\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","Editor","default","baseClass","CodeEditor","props","$","rest","readOnly","className","options","maxHeight","dynamicHeight","setDynamicHeight","theme","t0","defaultLanguage","t1","t2","filter","Boolean","classes","join","t3","t4","onChange","value","ev","Math","max","split","length","t5","onMount","editor","monaco","getValue","_jsx","loading","height","scrollbar","alwaysConsumeMouseWheel","scrollBeyondLastLine","tabSize","wordWrap","min"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport EditorImport from '@monaco-editor/react'\nimport React, { useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { useTheme } from '../../providers/Theme/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport './index.scss'\n\nconst Editor = (EditorImport.default || EditorImport) as unknown as typeof EditorImport.default\n\nconst baseClass = 'code-editor'\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const { className, maxHeight, options, readOnly, ...rest } = props\n  const [dynamicHeight, setDynamicHeight] = useState(20)\n  const { theme } = useTheme()\n\n  const MIN_HEIGHT = 56 // equivalent to 3 lines\n\n  const classes = [\n    baseClass,\n    className,\n    rest?.defaultLanguage ? `language--${rest.defaultLanguage}` : '',\n    readOnly && 'read-only',\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <Editor\n      className={classes}\n      loading={<ShimmerEffect height={dynamicHeight} />}\n      options={{\n        detectIndentation: true,\n        hideCursorInOverviewRuler: true,\n        minimap: {\n          enabled: false,\n        },\n        overviewRulerBorder: false,\n        readOnly: Boolean(readOnly),\n        scrollbar: {\n          alwaysConsumeMouseWheel: false,\n        },\n        scrollBeyondLastLine: false,\n        tabSize: 2,\n        wordWrap: 'on',\n        ...options,\n      }}\n      theme={theme === 'dark' ? 'vs-dark' : 'vs'}\n      {...rest}\n      // Since we are not building an IDE and the container\n      // can already have scrolling, we want the height of the\n      // editor to fit its content.\n      // See: https://github.com/microsoft/monaco-editor/discussions/3677\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(Math.max(MIN_HEIGHT, value.split('\\n').length * 18 + 2))\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n        setDynamicHeight(Math.max(MIN_HEIGHT, editor.getValue().split('\\n').length * 18 + 2))\n      }}\n    />\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default CodeEditor\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CodeEditor/index.scss

@@ -1,21 +1,23 @@
 @import '../../scss/styles';
 
-.code-editor {
-  direction: ltr;
-  @include formInput;
-  height: auto;
-  padding: 0;
+@layer payload-default {
+  .code-editor {
+    direction: ltr;
+    @include formInput;
+    height: auto;
+    padding: 0;
 
-  .monaco-editor {
-    .view-overlays .current-line {
-      max-width: calc(100% - 14px);
-      border-width: 0px;
-    }
-
-    &:focus-within {
+    .monaco-editor {
       .view-overlays .current-line {
-        border-right: 0;
-        border-width: 1px;
+        max-width: calc(100% - 14px);
+        border-width: 0px;
+      }
+
+      &:focus-within {
+        .view-overlays .current-line {
+          border-right: 0;
+          border-width: 1px;
+        }
       }
     }
   }

package/dist/elements/CodeEditor/types.d.ts

@@ -1,5 +1,6 @@
 import type { EditorProps } from '@monaco-editor/react';
 export type Props = {
+    maxHeight?: number;
     readOnly?: boolean;
 } & EditorProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/CodeEditor/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,WAAW,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,WAAW,CAAA"}

package/dist/elements/CodeEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = {\n  readOnly?: boolean\n} & EditorProps\n"],"mappings":"AAEA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/CodeEditor/types.ts"],"sourcesContent":["import type { EditorProps } from '@monaco-editor/react'\n\nexport type Props = {\n  maxHeight?: number\n  readOnly?: boolean\n} & EditorProps\n"],"mappings":"AAEA","ignoreList":[]}

package/dist/elements/Collapsible/index.scss

@@ -1,158 +1,160 @@
 @import '../../scss/styles.scss';
 
-.collapsible {
-  --toggle-pad-h: #{base(0.75)};
-  --toggle-pad-v: #{base(0.6)};
-
-  border-radius: $style-radius-m;
-
-  &__toggle-wrap {
-    position: relative;
-    padding: base(0.4) base(0.4) base(0.4) base(0.8);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--theme-elevation-50);
-    line-height: base(1.2);
-    gap: base(0.2);
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-
-    &:hover {
-      background: var(--theme-elevation-100);
-    }
+@layer payload-default {
+  .collapsible {
+    --toggle-pad-h: #{base(0.75)};
+    --toggle-pad-v: #{base(0.6)};
+
+    border-radius: $style-radius-m;
+
+    &__toggle-wrap {
+      position: relative;
+      padding: base(0.4) base(0.4) base(0.4) base(0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--theme-elevation-50);
+      line-height: base(1.2);
+      gap: base(0.2);
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
+      width: 100%;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
 
-    &:has(.collapsible__drag) {
-      padding-inline-start: base(0.4);
+      &:has(.collapsible__drag) {
+        padding-inline-start: base(0.4);
+      }
     }
-  }
 
-  &__drag {
-    display: flex;
-    opacity: 0.5;
-    top: var(--toggle-pad-v);
-    width: base(1.2);
-    height: base(1.2);
-    padding: base(0.1);
+    &__drag {
+      display: flex;
+      opacity: 0.5;
+      top: var(--toggle-pad-v);
+      width: base(1.2);
+      height: base(1.2);
+      padding: base(0.1);
+
+      icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
 
-    icon {
+    &__toggle {
+      @extend %btn-reset;
+      @extend %body;
+      text-align: left;
+      cursor: pointer;
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
       width: 100%;
       height: 100%;
-    }
-  }
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
 
-  &__toggle {
-    @extend %btn-reset;
-    @extend %body;
-    text-align: left;
-    cursor: pointer;
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-    height: 100%;
-    color: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    span {
-      user-select: none;
+      span {
+        user-select: none;
+      }
     }
-  }
 
-  &--style-default {
-    border: 1px solid var(--theme-elevation-200);
-    &:hover {
-      border: 1px solid var(--theme-elevation-300);
-    }
+    &--style-default {
+      border: 1px solid var(--theme-elevation-200);
+      &:hover {
+        border: 1px solid var(--theme-elevation-300);
+      }
 
-    > .collapsible__toggle-wrap {
-      .row-label {
-        color: var(--theme-text);
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-text);
+        }
       }
     }
-  }
 
-  &--style-error {
-    border: 1px solid var(--theme-error-400);
-    > .collapsible__toggle-wrap {
-      background-color: var(--theme-error-100);
+    &--style-error {
+      border: 1px solid var(--theme-error-400);
+      > .collapsible__toggle-wrap {
+        background-color: var(--theme-error-100);
 
-      &:hover {
-        background: var(--theme-error-150);
-      }
+        &:hover {
+          background: var(--theme-error-150);
+        }
 
-      .row-label {
-        color: var(--theme-error-950);
+        .row-label {
+          color: var(--theme-error-950);
+        }
       }
     }
-  }
 
-  &__header-wrap {
-    top: 0;
-    right: base(3);
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    width: 100%;
-    overflow: hidden;
-    max-width: 100%;
-  }
+    &__header-wrap {
+      top: 0;
+      right: base(3);
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      overflow: hidden;
+      max-width: 100%;
+    }
 
-  &__header-wrap--has-drag-handle {
-    left: base(1);
-  }
+    &__header-wrap--has-drag-handle {
+      left: base(1);
+    }
 
-  &--collapsed {
-    .collapsible__toggle-wrap {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle-wrap {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
-  }
 
-  &__actions-wrap {
-    pointer-events: none;
-    display: flex;
-    gap: base(0.2);
-    margin-inline-end: base(0.2);
-  }
+    &__actions-wrap {
+      pointer-events: none;
+      display: flex;
+      gap: base(0.2);
+      margin-inline-end: base(0.2);
+    }
 
-  &__actions {
-    pointer-events: all;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
+    &__actions {
+      pointer-events: all;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
 
-    &.icon {
-      padding: base(0.1);
+      &.icon {
+        padding: base(0.1);
+      }
     }
-  }
 
-  &__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
+    &__indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
 
-    &.icon {
-      padding: base(0.1);
+      &.icon {
+        padding: base(0.1);
+      }
     }
-  }
-
-  &__content {
-    background-color: var(--theme-elevation-0);
-    border-bottom-left-radius: $style-radius-m;
-    border-bottom-right-radius: $style-radius-m;
-    padding: var(--base);
-  }
 
-  @include small-break {
     &__content {
-      padding: var(--gutter-h);
+      background-color: var(--theme-elevation-0);
+      border-bottom-left-radius: $style-radius-m;
+      border-bottom-right-radius: $style-radius-m;
+      padding: var(--base);
+    }
+
+    @include small-break {
+      &__content {
+        padding: var(--gutter-h);
+      }
     }
   }
 }

package/dist/elements/ColumnSelector/index.scss

@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.column-selector {
-  display: flex;
-  flex-wrap: wrap;
-  background: var(--theme-elevation-50);
-  padding: base(1) base(1) base(0.5);
-
-  &__column {
-    margin-right: base(0.5);
-    margin-bottom: base(0.5);
-    background-color: transparent;
-    box-shadow: 0 0 0 1px var(--theme-elevation-150);
-
-    &.column-selector__column {
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
+@layer payload-default {
+  .column-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--theme-elevation-50);
+    padding: base(1) base(1) base(0.5);
+
+    &__column {
+      margin-right: base(0.5);
+      margin-bottom: base(0.5);
+      background-color: transparent;
+      box-shadow: 0 0 0 1px var(--theme-elevation-150);
+
+      &.column-selector__column {
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
       }
-    }
-
-    &.column-selector__column--active {
-      background-color: var(--theme-elevation-0);
-      box-shadow:
-        0 0px 1px 1px var(--theme-elevation-150),
-        0 2px 4px -2px rgba(0, 0, 0, 0.1);
 
-      &:hover {
+      &.column-selector__column--active {
         background-color: var(--theme-elevation-0);
         box-shadow:
-          0 0px 1px 1px var(--theme-elevation-250),
-          0 3px 4px -1px rgba(0, 0, 0, 0.1);
+          0 0px 1px 1px var(--theme-elevation-150),
+          0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+        &:hover {
+          background-color: var(--theme-elevation-0);
+          box-shadow:
+            0 0px 1px 1px var(--theme-elevation-250),
+            0 3px 4px -1px rgba(0, 0, 0, 0.1);
+        }
       }
     }
-  }
 
-  // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
-  .pill__icon {
-    padding: 0;
-  }
+    // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
+    .pill__icon {
+      padding: 0;
+    }
 
-  @include small-break {
-    padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    @include small-break {
+      padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    }
   }
 }

package/dist/elements/CopyToClipboard/index.scss

@@ -1,26 +1,28 @@
 @import '../../scss/styles.scss';
 
-.copy-to-clipboard {
-  @extend %btn-reset;
-  position: relative;
-  cursor: pointer;
-  vertical-align: middle;
-  border-radius: 100%;
+@layer payload-default {
+  .copy-to-clipboard {
+    @extend %btn-reset;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+    border-radius: 100%;
 
-  textarea {
-    position: absolute;
-    opacity: 0;
-    z-index: -1;
-    height: 0px;
-    width: 0px;
-  }
+    textarea {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0px;
+      width: 0px;
+    }
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
+    &:focus,
+    &:active {
+      outline: none;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }

package/dist/elements/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
 import type { Props } from './types.js';
+import './library.scss';
 import './index.scss';
 declare const DatePicker: React.FC<Props>;
 export default DatePicker;

package/dist/elements/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,4CAA4C,CAAA;AAEnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2G/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,gBAAgB,CAAA;AACvB,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2G/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/DatePicker/DatePicker.js

@@ -5,11 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker';
 const ReactDatePicker = ReactDatePickerDefaultImport.default || ReactDatePickerDefaultImport;
-import 'react-datepicker/dist/react-datepicker.css';
 import { CalendarIcon } from '../../icons/Calendar/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormattedLocale } from './getFormattedLocale.js';
+import './library.scss';
 import './index.scss';
 const baseClass = 'date-time-picker';
 const DatePicker = props => {