@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["formatAdminURL","React","useEffect","useRef","useState","Account","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Link","Localizer","useNav","NavToggler","RenderCustomComponent","StepNav","baseClass","AppHeader","CustomAvatar","t","locale","Actions","navOpen","setNavOpen","config","admin","routes","account","accountRoute","localization","adminRoute","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","ref","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction","href","path","prefetch","CustomComponent","Fallback"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Link } from '../Link/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n}\nexport function AppHeader({ CustomAvatar }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute },\n      },\n      localization,\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\n            )}\n            <Link\n              aria-label={t('authentication:account')}\n              className={`${baseClass}__account`}\n              href={formatAdminURL({ adminRoute, path: accountRoute })}\n              prefetch={false}\n              tabIndex={0}\n            >\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </Link>\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","ChevronIcon","LanguageIcon","SidebarIcon","useActions","useConfig","useLocale","useTranslation","Button","Localizer","useNav","NavToggler","StepNav","UserMenu","baseClass","AppHeader","CustomAvatar","settingsItems","t","locale","Actions","navOpen","setNavOpen","config","localization","customControlsRef","isScrollable","setIsScrollable","checkIsScrollable","el","current","scrollable","scrollWidth","clientWidth","window","addEventListener","removeEventListener","ActionComponents","Object","values","_jsx","className","filter","Boolean","join","_jsxs","tabIndex","buttonStyle","icon","onClick","type","ref","map","Action","i","length","renderButton","active","onKeyDown","ariaProps","extraButtonProps","style","padding","size","iconPosition","selected","code","direction"],"sources":["../../../src/elements/AppHeader/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { SidebarIcon } from '../../icons/Sidebar/index.js'\nimport { useActions } from '../../providers/Actions/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Localizer } from '../Localizer/index.js'\nimport { useNav } from '../Nav/context.js'\nimport { NavToggler } from '../Nav/NavToggler/index.js'\nimport { StepNav } from '../StepNav/index.js'\nimport { UserMenu } from '../UserMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'app-header'\n\ntype Props = {\n  CustomAvatar?: React.ReactNode\n  settingsItems?: React.ReactNode[]\n}\nexport function AppHeader({ CustomAvatar, settingsItems }: Props) {\n  const { t } = useTranslation()\n  const locale = useLocale()\n\n  const { Actions } = useActions()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const customControlsRef = useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = useState(false)\n\n  useEffect(() => {\n    const checkIsScrollable = () => {\n      const el = customControlsRef.current\n      if (el) {\n        const scrollable = el.scrollWidth > el.clientWidth\n        setIsScrollable(scrollable)\n      }\n    }\n\n    checkIsScrollable()\n    window.addEventListener('resize', checkIsScrollable)\n\n    return () => {\n      window.removeEventListener('resize', checkIsScrollable)\n    }\n  }, [Actions])\n\n  const ActionComponents = Actions ? Object.values(Actions) : []\n\n  return (\n    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__content`}>\n        <div className={`${baseClass}__wrapper`}>\n          <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />\n          <div className={`${baseClass}__controls-wrapper`}>\n            <div className={`${baseClass}__step-nav-wrapper`}>\n              <Button\n                aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__sidebar-toggle`}\n                icon={<SidebarIcon />}\n                onClick={() => setNavOpen(!navOpen)}\n                type=\"button\"\n              />\n              <div className={`${baseClass}__step-nav-wrapper`}>\n                <StepNav className={`${baseClass}__step-nav`} />\n              </div>\n            </div>\n            <div className={`${baseClass}__actions-wrapper`}>\n              <div className={`${baseClass}__actions`} ref={customControlsRef}>\n                {ActionComponents.map((Action, i) => (\n                  <div\n                    className={\n                      isScrollable && i === ActionComponents.length - 1\n                        ? `${baseClass}__last-action`\n                        : ''\n                    }\n                    key={i}\n                  >\n                    {Action}\n                  </div>\n                ))}\n              </div>\n              {isScrollable && <div className={`${baseClass}__gradient-placeholder`} />}\n            </div>\n            {localization && (\n              <Localizer\n                className={`${baseClass}__localizer`}\n                renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n                  <Button\n                    aria-label={t('general:locale')}\n                    buttonStyle=\"secondary\"\n                    extraButtonProps={{ onKeyDown, style: { padding: '0 var(--spacer-1) 0 0' } }}\n                    icon={<LanguageIcon size={24} />}\n                    iconPosition=\"left\"\n                    onClick={onClick}\n                    selected={active}\n                    {...ariaProps}\n                  >\n                    <div className=\"localizer__button-content\">\n                      {locale.code}\n                      <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                    </div>\n                  </Button>\n                )}\n              />\n            )}\n            <UserMenu CustomAvatar={CustomAvatar} settingsItems={settingsItems} />\n          </div>\n        </div>\n      </div>\n    </header>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Button/index.css

@@ -156,6 +156,14 @@
     border-color: var(--color-border-selected-strong);
   }
 
+  /* Selected state - pill buttons */
+  .btn.btn--style-pill.btn--selected,
+  .btn.btn--style-pill.btn--selected:hover,
+  .btn.btn--style-pill.btn--selected:active {
+    background-color: var(--color-bg-selected);
+    color: var(--color-text-selected);
+  }
+
   /* Icon */
 
   .btn__icon {

package/dist/elements/Chip/index.css

@@ -10,7 +10,7 @@
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
-    color: var(--text-default);
+    color: var(--color-text);
     background-color: var(--color-bg);
     user-select: none;
 

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,aAAa,CAAA;AA4CpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsH/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKvC,OAAO,aAAa,CAAA;AA4CpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyI/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/CodeEditor/CodeEditor.js

@@ -146,6 +146,22 @@ const CodeEditor = props => {
     },
     onMount: (editor, monaco) => {
       rest.onMount?.(editor, monaco);
+      const domNode = editor.getDomNode();
+      if (domNode?.closest("[contenteditable=\"true\"]")) {
+        editor.updateOptions({
+          editContext: false
+        });
+        const clipboardEvents = ["copy", "cut", "paste"];
+        const stopPropagation = _temp;
+        for (const eventName of clipboardEvents) {
+          domNode.addEventListener(eventName, stopPropagation);
+        }
+        editor.onDidDispose(() => {
+          for (const eventName_0 of clipboardEvents) {
+            domNode.removeEventListener(eventName_0, stopPropagation);
+          }
+        });
+      }
       const model = editor.getModel();
       if (model) {
         model.updateOptions({
@@ -160,4 +176,7 @@ const CodeEditor = props => {
 };
 // eslint-disable-next-line no-restricted-exports
 export default CodeEditor;
+function _temp(event) {
+  event.stopPropagation();
+}
 //# sourceMappingURL=CodeEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","names":["c","_c","EditorImport","React","useState","useTheme","ShimmerEffect","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","definePayloadThemes","monaco","editor","defineTheme","base","colors","inherit","rules","foreground","token","CodeEditor","props","$","className","maxHeight","minHeight","t0","options","readOnly","recalculatedHeightAt","value","rest","undefined","prevCalculatedHeightAt","useRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","t1","defaultLanguage","t2","t3","filter","Boolean","classes","join","t4","t5","current","Math","max","split","length","useEffect","_jsx","beforeMount","height","min","loading","detectIndentation","onChange","value_0","ev","onMount","model","getModel","updateOptions","getValue"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport type { Monaco } from '@monaco-editor/react'\n\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 { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.css'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\n\nfunction definePayloadThemes(monaco: Monaco) {\n  monaco.editor.defineTheme('payload-light', {\n    base: 'vs',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#0000004d', // black at 30% opacity\n      'editorLineNumber.foreground': '#0000004d', // black at 30% opacity\n    },\n    inherit: true,\n    rules: [\n      { foreground: 'cb0b96', token: 'keyword' },\n      { foreground: '005cc5', token: 'identifier' },\n      { foreground: '093077', token: 'type.identifier' },\n      { foreground: '093077', token: 'delimiter' },\n      { foreground: '093077', token: 'delimiter.bracket' },\n      { foreground: 'c53e0d', token: 'string' },\n      { foreground: '093077', token: 'number' },\n      { foreground: '6a737d', token: 'comment' },\n    ],\n  })\n  monaco.editor.defineTheme('payload-dark', {\n    base: 'vs-dark',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n      'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n    },\n    inherit: true,\n    rules: [],\n  })\n}\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight = 48,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11\n  const EDITOR_BORDER = 2 // 1px top + 1px bottom border\n  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(minHeight)\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  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(\n              minHeight,\n              value.split('\\n').length * LINE_HEIGHT +\n                EDITOR_BORDER +\n                paddingFromProps +\n                CSS_CONTAINER_PADDING,\n            )\n          : minHeight,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, minHeight, paddingFromProps, recalculatedHeightAt])\n\n  return (\n    <Editor\n      beforeMount={definePayloadThemes}\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={minHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'payload-dark' : 'payload-light'}\n      value={value}\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      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(\n                minHeight,\n                value.split('\\n').length * LINE_HEIGHT +\n                  EDITOR_BORDER +\n                  paddingFromProps +\n                  CSS_CONTAINER_PADDING,\n              )\n            : minHeight,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(\n            minHeight,\n            editor.getValue().split('\\n').length * LINE_HEIGHT +\n              EDITOR_BORDER +\n              paddingFromProps +\n              CSS_CONTAINER_PADDING,\n          ),\n        )\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","defaultGlobalEditorOptions","defaultOptions","Editor","default","baseClass","definePayloadThemes","monaco","editor","defineTheme","base","colors","inherit","rules","foreground","token","CodeEditor","props","$","className","maxHeight","minHeight","t0","options","readOnly","recalculatedHeightAt","value","rest","undefined","prevCalculatedHeightAt","useRef","insertSpaces","tabSize","trimAutoWhitespace","globalEditorOptions","paddingFromProps","padding","top","bottom","dynamicHeight","setDynamicHeight","theme","t1","defaultLanguage","t2","t3","filter","Boolean","classes","join","t4","t5","current","Math","max","split","length","useEffect","_jsx","beforeMount","height","min","loading","detectIndentation","onChange","value_0","ev","onMount","domNode","getDomNode","closest","updateOptions","editContext","clipboardEvents","stopPropagation","_temp","eventName","addEventListener","onDidDispose","eventName_0","removeEventListener","model","getModel","getValue","event"],"sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client'\nimport type { Monaco } from '@monaco-editor/react'\n\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 { defaultGlobalEditorOptions, defaultOptions } from './constants.js'\nimport './index.css'\n\nconst Editor = 'default' in EditorImport ? EditorImport.default : EditorImport\n\nconst baseClass = 'code-editor'\n\nfunction definePayloadThemes(monaco: Monaco) {\n  monaco.editor.defineTheme('payload-light', {\n    base: 'vs',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#0000004d', // black at 30% opacity\n      'editorLineNumber.foreground': '#0000004d', // black at 30% opacity\n    },\n    inherit: true,\n    rules: [\n      { foreground: 'cb0b96', token: 'keyword' },\n      { foreground: '005cc5', token: 'identifier' },\n      { foreground: '093077', token: 'type.identifier' },\n      { foreground: '093077', token: 'delimiter' },\n      { foreground: '093077', token: 'delimiter.bracket' },\n      { foreground: 'c53e0d', token: 'string' },\n      { foreground: '093077', token: 'number' },\n      { foreground: '6a737d', token: 'comment' },\n    ],\n  })\n  monaco.editor.defineTheme('payload-dark', {\n    base: 'vs-dark',\n    colors: {\n      'editor.background': '#00000000',\n      'editor.lineHighlightBackground': '#00000000',\n      'editor.lineHighlightBorder': '#00000000',\n      'editorGutter.background': '#00000000',\n      'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n      'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity\n    },\n    inherit: true,\n    rules: [],\n  })\n}\n\nconst CodeEditor: React.FC<Props> = (props) => {\n  const {\n    className,\n    maxHeight,\n    minHeight = 48,\n    options,\n    readOnly,\n    recalculatedHeightAt,\n    value,\n    ...rest\n  } = props\n  const LINE_HEIGHT = 16 // Monaco editor line height at fontSize 11\n  const EDITOR_BORDER = 2 // 1px top + 1px bottom border\n  const CSS_CONTAINER_PADDING = 16 // 8px top + 8px bottom from CSS\n  const prevCalculatedHeightAt = React.useRef<number | undefined>(recalculatedHeightAt)\n\n  // Extract per-model settings to avoid global conflicts\n  const { insertSpaces, tabSize, trimAutoWhitespace, ...globalEditorOptions } = options || {}\n  const paddingFromProps = options?.padding\n    ? (options.padding.top || 0) + (options.padding?.bottom || 0)\n    : 0\n\n  const [dynamicHeight, setDynamicHeight] = useState(minHeight)\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  React.useEffect(() => {\n    if (recalculatedHeightAt && recalculatedHeightAt > prevCalculatedHeightAt.current) {\n      setDynamicHeight(\n        value\n          ? Math.max(\n              minHeight,\n              value.split('\\n').length * LINE_HEIGHT +\n                EDITOR_BORDER +\n                paddingFromProps +\n                CSS_CONTAINER_PADDING,\n            )\n          : minHeight,\n      )\n      prevCalculatedHeightAt.current = recalculatedHeightAt\n    }\n  }, [value, minHeight, paddingFromProps, recalculatedHeightAt])\n\n  return (\n    <Editor\n      beforeMount={definePayloadThemes}\n      className={classes}\n      height={maxHeight ? Math.min(dynamicHeight, maxHeight) : dynamicHeight}\n      loading={<ShimmerEffect height={minHeight} />}\n      options={{\n        ...defaultGlobalEditorOptions,\n        ...globalEditorOptions,\n        readOnly: Boolean(readOnly),\n        /**\n         * onMount the model will set:\n         * - insertSpaces\n         * - tabSize\n         * - trimAutoWhitespace\n         */\n        detectIndentation: false,\n        insertSpaces: undefined,\n        tabSize: undefined,\n        trimAutoWhitespace: undefined,\n      }}\n      theme={theme === 'dark' ? 'payload-dark' : 'payload-light'}\n      value={value}\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      onChange={(value, ev) => {\n        rest.onChange?.(value, ev)\n        setDynamicHeight(\n          value\n            ? Math.max(\n                minHeight,\n                value.split('\\n').length * LINE_HEIGHT +\n                  EDITOR_BORDER +\n                  paddingFromProps +\n                  CSS_CONTAINER_PADDING,\n              )\n            : minHeight,\n        )\n      }}\n      onMount={(editor, monaco) => {\n        rest.onMount?.(editor, monaco)\n\n        // Required to prevent copy/cut/paste from being hijacked by Lexical rich text editor\n        const domNode = editor.getDomNode()\n        if (domNode?.closest('[contenteditable=\"true\"]')) {\n          editor.updateOptions({ editContext: false })\n\n          const clipboardEvents = ['copy', 'cut', 'paste']\n          const stopPropagation = (event: Event) => {\n            event.stopPropagation()\n          }\n          for (const eventName of clipboardEvents) {\n            domNode.addEventListener(eventName, stopPropagation)\n          }\n          editor.onDidDispose(() => {\n            for (const eventName of clipboardEvents) {\n              domNode.removeEventListener(eventName, stopPropagation)\n            }\n          })\n        }\n\n        // Set per-model options to avoid global conflicts\n        const model = editor.getModel()\n        if (model) {\n          model.updateOptions({\n            insertSpaces: insertSpaces ?? defaultOptions.insertSpaces,\n            tabSize: tabSize ?? defaultOptions.tabSize,\n            trimAutoWhitespace: trimAutoWhitespace ?? defaultOptions.trimAutoWhitespace,\n          })\n        }\n\n        setDynamicHeight(\n          Math.max(\n            minHeight,\n            editor.getValue().split('\\n').length * LINE_HEIGHT +\n              EDITOR_BORDER +\n              paddingFromProps +\n              CSS_CONTAINER_PADDING,\n          ),\n        )\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/Combobox/index.css

@@ -13,9 +13,9 @@
   .combobox__search-wrapper {
     display: none;
     padding-top: var(--popup-padding);
-    padding-bottom: calc(var(--base) * 0.5);
-    border-bottom: 1px solid var(--border-default);
-    margin-bottom: calc(var(--base) * 0.5);
+    padding-bottom: var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    margin-bottom: var(--spacer-2);
   }
 
   .combobox__search-wrapper--no-results {
@@ -25,22 +25,22 @@
 
   .combobox__search-input {
     width: 100%;
-    background: var(--bg-default-secondary);
-    color: var(--text-default);
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
     border: none;
     border-radius: var(--button-radius);
-    padding: calc(var(--base) * 0.25) calc(var(--base) * 0.5);
+    padding: var(--spacer-1) var(--spacer-2);
     outline: none;
     box-shadow: none;
   }
 
   .combobox__search-input::placeholder {
-    color: var(--text-default-tertiary);
+    color: var(--color-text-tertiary);
   }
 
   .combobox__search-input:focus,
   .combobox__search-input:focus-visible {
-    background: var(--bg-default-secondary-hover);
+    background: var(--color-bg-secondary-hover);
     outline: none;
     border: none;
     box-shadow: none;
@@ -48,5 +48,6 @@
 
   .combobox__entry {
     cursor: pointer;
+    display: flex;
   }
 }

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

@@ -14,6 +14,8 @@ export type ComboboxEntry = {
  * @experimental
  */
 export type ComboboxProps = {
+    /** Accessible label for the list of entries */
+    'aria-label'?: string;
     entries: ComboboxEntry[];
     /** Minimum number of entries required to show search */
     minEntriesForSearch?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoG5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuG5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -13,6 +13,7 @@ const baseClass = 'combobox';
  */
 export const Combobox = props => {
   const {
+    'aria-label': ariaLabel,
     entries,
     minEntriesForSearch = 8,
     onSelect,
@@ -68,27 +69,31 @@ export const Combobox = props => {
           value: searchValue
         })
       }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-        children: filteredEntries.map((entry_0, index) => {
-          const handleClick = () => {
-            if (onSelect) {
-              onSelect(entry_0);
-            }
-            close();
-          };
-          return /*#__PURE__*/_jsx("div", {
-            className: `${baseClass}__entry`,
-            "data-popup-prevent-close": true,
-            onClick: handleClick,
-            onKeyDown: e_0 => {
-              if (e_0.key === 'Enter' || e_0.key === ' ') {
-                e_0.preventDefault();
-                handleClick();
+        children: /*#__PURE__*/_jsx("div", {
+          "aria-label": ariaLabel,
+          role: "menu",
+          children: filteredEntries.map((entry_0, index) => {
+            const handleClick = () => {
+              if (onSelect) {
+                onSelect(entry_0);
               }
-            },
-            role: "menuitem",
-            tabIndex: 0,
-            children: entry_0.Component
-          }, `${entry_0.name}-${index}`);
+              close();
+            };
+            return /*#__PURE__*/_jsx("div", {
+              className: `${baseClass}__entry`,
+              "data-popup-prevent-close": true,
+              onClick: handleClick,
+              onKeyDown: e_0 => {
+                if (e_0.key === 'Enter' || e_0.key === ' ') {
+                  e_0.preventDefault();
+                  handleClick();
+                }
+              },
+              role: "menuitem",
+              tabIndex: 0,
+              children: entry_0.Component
+            }, `${entry_0.name}-${index}`);
+          })
         })
       })]
     })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","map","index","handleClick","onClick","onKeyDown","key","preventDefault","role","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            {filteredEntries.map((entry, index) => {\n              const handleClick = () => {\n                if (onSelect) {\n                  onSelect(entry)\n                }\n                close()\n              }\n\n              return (\n                <div\n                  className={`${baseClass}__entry`}\n                  data-popup-prevent-close\n                  key={`${entry.name}-${index}`}\n                  onClick={handleClick}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      handleClick()\n                    }\n                  }}\n                  role=\"menuitem\"\n                  tabIndex={0}\n                >\n                  {entry.Component}\n                </div>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIjD,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAuBlB;;;;;;AAMA,OAAO,MAAMC,QAAA,GAAqCC,KAAA;EAChD,MAAM;IACJC,OAAO;IACPC,mBAAA,GAAsB,CAAC;IACvBC,QAAQ;IACRC,aAAa;IACbC,YAAY;IACZC,iBAAA,GAAoB,WAAW;IAC/B,GAAGC;EAAA,CACJ,GAAGP,KAAA;EACJ,MAAM,CAACQ,WAAA,EAAaC,cAAA,CAAe,GAAGd,QAAA,CAAS;EAC/C,MAAMe,SAAA,GAAYhB,MAAA,CAAO;EACzB,MAAMiB,cAAA,GAAiBjB,MAAA,CAAyB;EAEhD,MAAMkB,eAAA,GAAkBnB,OAAA,CAAQ;IAC9B,IAAI,CAACe,WAAA,EAAa;MAChB,OAAOP,OAAA;IACT;IACA,MAAMY,MAAA,GAASL,WAAA,CAAYM,WAAW;IACtC,OAAOb,OAAA,CAAQc,MAAM,CAAEC,KAAA,IAAUA,KAAA,CAAMC,IAAI,CAACH,WAAW,GAAGI,QAAQ,CAACL,MAAA;EACrE,GAAG,CAACZ,OAAA,EAASO,WAAA,CAAY;EAEzB,MAAMW,UAAA,GAAalB,OAAA,CAAQmB,MAAM,IAAIlB,mBAAA;EACrC,MAAMmB,UAAA,GAAaT,eAAA,CAAgBQ,MAAM,GAAG;EAE5C,MAAME,gBAAA,GAAmB9B,KAAA,CAAM+B,WAAW,CACvCC,MAAA;IACCd,SAAA,CAAUe,OAAO,GAAGD,MAAA;IACpB,IAAIA,MAAA,IAAUL,UAAA,EAAY;MACxBO,UAAA,CAAW;QACTf,cAAA,CAAec,OAAO,EAAEE,KAAA;MAC1B,GAAG;IACL;IACAtB,YAAA,GAAemB,MAAA;EACjB,GACA,CAACL,UAAA,EAAYd,YAAA,CAAa;EAG5B,MAAMuB,iBAAA,GAAoBpC,KAAA,CAAM+B,WAAW,CAAC;IAC1Cb,SAAA,CAAUe,OAAO,GAAG;IACpBhB,cAAA,CAAe;IACfL,aAAA;EACF,GAAG,CAACA,aAAA,CAAc;EAElB,oBACEyB,IAAA,CAACjC,KAAA;IACE,GAAGW,UAAU;IACduB,SAAA,EAAW,GAAGhC,SAAA,IAAaS,UAAA,CAAWuB,SAAS,IAAI,IAAI;IACvD1B,aAAA,EAAewB,iBAAA;IACfvB,YAAA,EAAciB,gBAAA;IACdS,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBC,KAAA,CAAC;MAAIH,SAAA,EAAW,GAAGhC,SAAA,WAAoB;iBACpCqB,UAAA,iBACCU,IAAA,CAAC;QACCC,SAAA,EAAW,GAAGhC,SAAA,mBAA4B,CAACuB,UAAA,GAAa,IAAIvB,SAAA,8BAAuC,GAAG,IAAI;kBAE1G,aAAA+B,IAAA,CAAC;UACC,cAAYvB,iBAAA;UACZwB,SAAA,EAAW,GAAGhC,SAAA,gBAAyB;UACvCoC,QAAA,EAAWC,CAAA,IAAM1B,cAAA,CAAe0B,CAAA,CAAEC,MAAM,CAACC,KAAK;UAC9CC,WAAA,EAAahC,iBAAA;UACbiC,GAAA,EAAK5B,cAAA;UACL6B,IAAA,EAAK;UACLH,KAAA,EAAO7B;;uBAIbqB,IAAA,CAAChC,SAAA,CAAU4C,WAAW;kBACnB7B,eAAA,CAAgB8B,GAAG,CAAC,CAAC1B,OAAA,EAAO2B,KAAA;UAC3B,MAAMC,WAAA,GAAcA,CAAA;YAClB,IAAIzC,QAAA,EAAU;cACZA,QAAA,CAASa,OAAA;YACX;YACAgB,KAAA;UACF;UAEA,oBACEH,IAAA,CAAC;YACCC,SAAA,EAAW,GAAGhC,SAAA,SAAkB;YAChC,0BAAwB;YAExB+C,OAAA,EAASD,WAAA;YACTE,SAAA,EAAYX,GAAA;cACV,IAAIA,GAAA,CAAEY,GAAG,KAAK,WAAWZ,GAAA,CAAEY,GAAG,KAAK,KAAK;gBACtCZ,GAAA,CAAEa,cAAc;gBAChBJ,WAAA;cACF;YACF;YACAK,IAAA,EAAK;YACLC,QAAA,EAAU;sBAETlC,OAAA,CAAMmC;aAXF,GAAGnC,OAAA,CAAMC,IAAI,IAAI0B,KAAA,EAAO;QAcnC;;;;AAMZ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","ariaLabel","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","role","map","index","handleClick","onClick","onKeyDown","key","preventDefault","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  /** Accessible label for the list of entries */\n  'aria-label'?: string\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    'aria-label': ariaLabel,\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            <div aria-label={ariaLabel} role=\"menu\">\n              {filteredEntries.map((entry, index) => {\n                const handleClick = () => {\n                  if (onSelect) {\n                    onSelect(entry)\n                  }\n                  close()\n                }\n\n                return (\n                  <div\n                    className={`${baseClass}__entry`}\n                    data-popup-prevent-close\n                    key={`${entry.name}-${index}`}\n                    onClick={handleClick}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleClick()\n                      }\n                    }}\n                    role=\"menuitem\"\n                    tabIndex={0}\n                  >\n                    {entry.Component}\n                  </div>\n                )\n              })}\n            </div>\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ConfirmationModal/index.css

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .confirmation-modal__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import './index.css';
 export type OnCancel = () => void;
 export type ConfirmationModalProps = {
     body: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAQ1C,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAsF9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA2B9D"}

package/dist/elements/ConfirmationModal/index.js

@@ -1,15 +1,10 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import { XIcon } from '../../icons/X/index.js';
-import { useTranslation } from '../../providers/Translation/index.js';
-import { Button } from '../Button/index.js';
-import { drawerZBase, useDrawerDepth } from '../Drawer/index.js';
-import { AlertModal, useModal } from '../Modal/index.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { DialogBody, DialogCancel, DialogConfirm, DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js';
+import './index.css';
 export function ConfirmationModal(props) {
-  const $ = _c(23);
   const {
     body,
     cancelLabel,
@@ -18,114 +13,32 @@ export function ConfirmationModal(props) {
     confirmLabel,
     heading,
     modalSlug,
-    onCancel: onCancelFromProps,
-    onConfirm: onConfirmFromProps
+    onCancel,
+    onConfirm
   } = props;
-  const editDepth = useDrawerDepth();
-  const [confirming, setConfirming] = React.useState(false);
-  const {
-    closeModal,
-    isModalOpen
-  } = useModal();
-  const {
-    t
-  } = useTranslation();
-  let t0;
-  if ($[0] !== closeModal || $[1] !== confirming || $[2] !== modalSlug || $[3] !== onConfirmFromProps) {
-    t0 = async () => {
-      if (!confirming) {
-        setConfirming(true);
-        if (typeof onConfirmFromProps === "function") {
-          await onConfirmFromProps();
-        }
-        setConfirming(false);
-        closeModal(modalSlug);
-      }
-    };
-    $[0] = closeModal;
-    $[1] = confirming;
-    $[2] = modalSlug;
-    $[3] = onConfirmFromProps;
-    $[4] = t0;
-  } else {
-    t0 = $[4];
-  }
-  const onConfirm = t0;
-  let t1;
-  if ($[5] !== closeModal || $[6] !== confirming || $[7] !== modalSlug || $[8] !== onCancelFromProps) {
-    t1 = () => {
-      if (!confirming) {
-        closeModal(modalSlug);
-        if (typeof onCancelFromProps === "function") {
-          onCancelFromProps();
-        }
-      }
-    };
-    $[5] = closeModal;
-    $[6] = confirming;
-    $[7] = modalSlug;
-    $[8] = onCancelFromProps;
-    $[9] = t1;
-  } else {
-    t1 = $[9];
-  }
-  const onCancel = t1;
-  if (!isModalOpen(modalSlug)) {
-    return null;
-  }
-  let t2;
-  if ($[10] !== body || $[11] !== cancelLabel || $[12] !== className || $[13] !== confirmLabel || $[14] !== confirming || $[15] !== confirmingLabel || $[16] !== editDepth || $[17] !== heading || $[18] !== modalSlug || $[19] !== onCancel || $[20] !== onConfirm || $[21] !== t) {
-    t2 = _jsx(AlertModal, {
-      actions: _jsxs(_Fragment, {
-        children: [_jsx(Button, {
-          buttonStyle: "secondary",
-          disabled: confirming,
-          id: "confirm-cancel",
-          onClick: onCancel,
-          size: "medium",
-          type: "button",
-          children: cancelLabel || t("general:cancel")
-        }), _jsx(Button, {
-          id: "confirm-action",
-          onClick: onConfirm,
-          size: "medium",
-          children: confirming ? confirmingLabel || `${t("general:loading")}...` : confirmLabel || t("general:confirm")
-        })]
-      }),
-      className,
-      compact: true,
-      headerActions: _jsx(Button, {
-        "aria-label": t("general:close"),
-        buttonStyle: "ghost",
-        disabled: confirming,
-        icon: _jsx(XIcon, {
-          size: 24
-        }),
+  return /*#__PURE__*/_jsxs(DialogModal, {
+    className: className,
+    slug: modalSlug,
+    children: [/*#__PURE__*/_jsx(DialogHeader, {
+      showClose: true,
+      title: heading
+    }), /*#__PURE__*/_jsx(DialogBody, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: "confirmation-modal__body",
+        children: typeof body === 'string' ? /*#__PURE__*/_jsx("p", {
+          children: body
+        }) : body
+      })
+    }), /*#__PURE__*/_jsxs(DialogFooter, {
+      children: [/*#__PURE__*/_jsx(DialogCancel, {
+        label: cancelLabel,
         onClick: onCancel
-      }),
-      slug: modalSlug,
-      title: heading,
-      zIndex: drawerZBase + editDepth + 1,
-      children: typeof body === "string" ? _jsx("p", {
-        children: body
-      }) : body
-    });
-    $[10] = body;
-    $[11] = cancelLabel;
-    $[12] = className;
-    $[13] = confirmLabel;
-    $[14] = confirming;
-    $[15] = confirmingLabel;
-    $[16] = editDepth;
-    $[17] = heading;
-    $[18] = modalSlug;
-    $[19] = onCancel;
-    $[20] = onConfirm;
-    $[21] = t;
-    $[22] = t2;
-  } else {
-    t2 = $[22];
-  }
-  return t2;
+      }), /*#__PURE__*/_jsx(DialogConfirm, {
+        label: confirmLabel,
+        loadingLabel: confirmingLabel,
+        onClick: onConfirm
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","XIcon","useTranslation","Button","drawerZBase","useDrawerDepth","AlertModal","useModal","ConfirmationModal","props","$","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onCancelFromProps","onConfirm","onConfirmFromProps","editDepth","confirming","setConfirming","useState","closeModal","isModalOpen","t","t0","t1","t2","_jsx","actions","_jsxs","_Fragment","children","buttonStyle","disabled","id","onClick","size","type","icon","title","zIndex"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase, useDrawerDepth } from '../Drawer/index.js'\nimport { AlertModal, useModal } from '../Modal/index.js'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel: onCancelFromProps,\n    onConfirm: onConfirmFromProps,\n  } = props\n\n  const editDepth = useDrawerDepth()\n\n  const [confirming, setConfirming] = React.useState(false)\n\n  const { closeModal, isModalOpen } = useModal()\n  const { t } = useTranslation()\n\n  const onConfirm = useCallback(async () => {\n    if (!confirming) {\n      setConfirming(true)\n\n      if (typeof onConfirmFromProps === 'function') {\n        await onConfirmFromProps()\n      }\n\n      setConfirming(false)\n      closeModal(modalSlug)\n    }\n  }, [confirming, onConfirmFromProps, closeModal, modalSlug])\n\n  const onCancel = useCallback(() => {\n    if (!confirming) {\n      closeModal(modalSlug)\n\n      if (typeof onCancelFromProps === 'function') {\n        onCancelFromProps()\n      }\n    }\n  }, [confirming, onCancelFromProps, closeModal, modalSlug])\n\n  if (!isModalOpen(modalSlug)) {\n    return null\n  }\n\n  return (\n    <AlertModal\n      actions={\n        <>\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={confirming}\n            id=\"confirm-cancel\"\n            onClick={onCancel}\n            size=\"medium\"\n            type=\"button\"\n          >\n            {cancelLabel || t('general:cancel')}\n          </Button>\n          <Button id=\"confirm-action\" onClick={onConfirm} size=\"medium\">\n            {confirming\n              ? confirmingLabel || `${t('general:loading')}...`\n              : confirmLabel || t('general:confirm')}\n          </Button>\n        </>\n      }\n      className={className}\n      compact\n      headerActions={\n        <Button\n          aria-label={t('general:close')}\n          buttonStyle=\"ghost\"\n          disabled={confirming}\n          icon={<XIcon size={24} />}\n          onClick={onCancel}\n        />\n      }\n      slug={modalSlug}\n      title={heading}\n      zIndex={drawerZBase + editDepth + 1}\n    >\n      {typeof body === 'string' ? <p>{body}</p> : body}\n    </AlertModal>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAEnC,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,EAAEC,cAAc,QAAQ;AAC5C,SAASC,UAAU,EAAEC,QAAQ,QAAQ;AAgBrC,OAAO,SAAAC,kBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EACL;IAAAa,IAAA;IAAAC,WAAA;IAAAC,SAAA;IAAAC,eAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC,iBAAA;IAAAC,SAAA,EAAAC;EAAA,IAUIZ,KAAA;EAEJ,MAAAa,SAAA,GAAkBjB,cAAA;EAElB,OAAAkB,UAAA,EAAAC,aAAA,IAAoCzB,KAAA,CAAA0B,QAAA,MAAe;EAEnD;IAAAC,UAAA;IAAAC;EAAA,IAAoCpB,QAAA;EACpC;IAAAqB;EAAA,IAAc1B,cAAA;EAAA,IAAA2B,EAAA;EAAA,IAAAnB,CAAA,QAAAgB,UAAA,IAAAhB,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAW,kBAAA;IAEgBQ,EAAA,SAAAA,CAAA;MAAA,KACvBN,UAAA;QACHC,aAAA,KAAc;QAAA,IAEV,OAAOH,kBAAA,KAAuB;UAAA,MAC1BA,kBAAA;QAAA;QAGRG,aAAA,MAAc;QACdE,UAAA,CAAWT,SAAA;MAAA;IAAA;IAEfP,CAAA,MAAAgB,UAAA;IAAAhB,CAAA,MAAAa,UAAA;IAAAb,CAAA,MAAAO,SAAA;IAAAP,CAAA,MAAAW,kBAAA;IAAAX,CAAA,MAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EAXA,MAAAU,SAAA,GAAkBS,EAWwC;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAgB,UAAA,IAAAhB,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAS,iBAAA;IAE7BW,EAAA,GAAAA,CAAA;MAAA,KACtBP,UAAA;QACHG,UAAA,CAAWT,SAAA;QAAA,IAEP,OAAOE,iBAAA,KAAsB;UAC/BA,iBAAA;QAAA;MAAA;IAAA;IAGNT,CAAA,MAAAgB,UAAA;IAAAhB,CAAA,MAAAa,UAAA;IAAAb,CAAA,MAAAO,SAAA;IAAAP,CAAA,MAAAS,iBAAA;IAAAT,CAAA,MAAAoB,EAAA;EAAA;IAAAA,EAAA,GAAApB,CAAA;EAAA;EARA,MAAAQ,QAAA,GAAiBY,EAQwC;EAAA,KAEpDH,WAAA,CAAYV,SAAA;IAAA;EAAA;EAAA,IAAAc,EAAA;EAAA,IAAArB,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAE,WAAA,IAAAF,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAK,YAAA,IAAAL,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAI,eAAA,IAAAJ,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAM,OAAA,IAAAN,CAAA,SAAAO,SAAA,IAAAP,CAAA,SAAAQ,QAAA,IAAAR,CAAA,SAAAU,SAAA,IAAAV,CAAA,SAAAkB,CAAA;IAKfG,EAAA,GAAAC,IAAA,CAAA1B,UAAA;MAAA2B,OAAA,EAEIC,KAAA,CAAAC,SAAA;QAAAC,QAAA,GACEJ,IAAA,CAAA7B,MAAA;UAAAkC,WAAA,EACc;UAAAC,QAAA,EACFf,UAAA;UAAAgB,EAAA,EACP;UAAAC,OAAA,EACMtB,QAAA;UAAAuB,IAAA,EACJ;UAAAC,IAAA,EACA;UAAAN,QAAA,EAEJxB,WAAA,IAAegB,CAAA,CAAE;QAAA,C,GAEpBI,IAAA,CAAA7B,MAAA;UAAAoC,EAAA,EAAW;UAAAC,OAAA,EAA0BpB,SAAA;UAAAqB,IAAA,EAAgB;UAAAL,QAAA,EAClDb,UAAA,GACGT,eAAA,IAAmB,GAAGc,CAAA,CAAE,uBAAuB,GAC/Cb,YAAA,IAAgBa,CAAA,CAAE;QAAA,C;;;;qBAO1BI,IAAA,CAAA7B,MAAA;QAAA,cACcyB,CAAA,CAAE;QAAAS,WAAA,EACF;QAAAC,QAAA,EACFf,UAAA;QAAAoB,IAAA,EACJX,IAAA,CAAA/B,KAAA;UAAAwC,IAAA;QAAA,C;iBACGvB;MAAA,C;YAGPD,SAAA;MAAA2B,KAAA,EACC5B,OAAA;MAAA6B,MAAA,EACCzC,WAAA,GAAckB,SAAA,IAAY;MAAAc,QAAA,EAEjC,OAAOzB,IAAA,KAAS,WAAWqB,IAAA,CAAC;QAAAI,QAAA,EAAGzB;MAAA,C,IAAYA;IAAA,C;;;;;;;;;;;;;;;;;SAnC9CoB,E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","DialogBody","DialogCancel","DialogConfirm","DialogFooter","DialogHeader","DialogModal","ConfirmationModal","props","body","cancelLabel","className","confirmingLabel","confirmLabel","heading","modalSlug","onCancel","onConfirm","_jsxs","slug","_jsx","showClose","title","label","onClick","loadingLabel"],"sources":["../../../src/elements/ConfirmationModal/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport {\n  DialogBody,\n  DialogCancel,\n  DialogConfirm,\n  DialogFooter,\n  DialogHeader,\n  DialogModal,\n} from '../Dialog/index.js'\nimport './index.css'\n\nexport type OnCancel = () => void\n\nexport type ConfirmationModalProps = {\n  body: React.ReactNode\n  cancelLabel?: string\n  className?: string\n  confirmingLabel?: string\n  confirmLabel?: string\n  heading: React.ReactNode\n  modalSlug: string\n  onCancel?: OnCancel\n  onConfirm: () => Promise<void> | void\n}\n\nexport function ConfirmationModal(props: ConfirmationModalProps) {\n  const {\n    body,\n    cancelLabel,\n    className,\n    confirmingLabel,\n    confirmLabel,\n    heading,\n    modalSlug,\n    onCancel,\n    onConfirm,\n  } = props\n\n  return (\n    <DialogModal className={className} slug={modalSlug}>\n      <DialogHeader showClose title={heading} />\n      <DialogBody>\n        <div className=\"confirmation-modal__body\">\n          {typeof body === 'string' ? <p>{body}</p> : body}\n        </div>\n      </DialogBody>\n      <DialogFooter>\n        <DialogCancel label={cancelLabel} onClick={onCancel} />\n        <DialogConfirm label={confirmLabel} loadingLabel={confirmingLabel} onClick={onConfirm} />\n      </DialogFooter>\n    </DialogModal>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SACEC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,WAAW,QACN;AACP,OAAO;AAgBP,OAAO,SAASC,kBAAkBC,KAA6B;EAC7D,MAAM;IACJC,IAAI;IACJC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC;EAAS,CACV,GAAGT,KAAA;EAEJ,oBACEU,KAAA,CAACZ,WAAA;IAAYK,SAAA,EAAWA,SAAA;IAAWQ,IAAA,EAAMJ,SAAA;4BACvCK,IAAA,CAACf,YAAA;MAAagB,SAAS;MAACC,KAAA,EAAOR;qBAC/BM,IAAA,CAACnB,UAAA;gBACC,aAAAmB,IAAA,CAAC;QAAIT,SAAA,EAAU;kBACZ,OAAOF,IAAA,KAAS,wBAAWW,IAAA,CAAC;oBAAGX;aAAYA;;qBAGhDS,KAAA,CAACd,YAAA;8BACCgB,IAAA,CAAClB,YAAA;QAAaqB,KAAA,EAAOb,WAAA;QAAac,OAAA,EAASR;uBAC3CI,IAAA,CAACjB,aAAA;QAAcoB,KAAA,EAAOV,YAAA;QAAcY,YAAA,EAAcb,eAAA;QAAiBY,OAAA,EAASP;;;;AAIpF","ignoreList":[]}

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;AAOzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyH/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;AAOzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,aAAa,CAAA;AAIpB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2H/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/DatePicker/DatePicker.js

@@ -84,12 +84,14 @@ const DatePicker = props => {
     nextMonthButtonLabel: _jsx(ChevronIcon, {
       direction: "right"
     }),
+    nextYearButtonLabel: "\u203A",
     onChange,
     placeholderText,
     popperPlacement: "bottom-start",
     previousMonthButtonLabel: _jsx(ChevronIcon, {
       direction: "left"
     }),
+    previousYearButtonLabel: "\u2039",
     selected: value && new Date(value),
     shouldCloseOnSelect: false,
     showMonthYearPicker: pickerAppearance === "monthOnly",
@@ -143,8 +145,8 @@ const DatePicker = props => {
       children: [_jsx(ReactDatePicker, {
         ...dateTimePickerProps,
         dropdownMode: "select",
-        showMonthDropdown: true,
-        showYearDropdown: true
+        showMonthDropdown: pickerAppearance !== "monthOnly",
+        showYearDropdown: pickerAppearance !== "monthOnly"
       }), _jsx(CalendarIcon, {})]
     })
   });