@tedi-design-system/react 18.1.0-rc.2 → 18.1.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.0-rc.2",
+  "version": "18.1.0-rc.20",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/anchor/anchor.d.ts

@@ -18,6 +18,7 @@ export type AnchorComponent = <C extends React.ElementType = 'a'>(props: AnchorP
  * Inherits all props from the component passed into `as`. If `as` is omitted, then the default is native `<a>` tag
  *
  * To allow Customized Anchor usage as direct children of Header you need to add displayName to it. <a href="/docs/components-layout-header-header-overview--header-overview#settings">See more.</a>
+ * @deprecated Use `Link` from `@tedi-design-system/react/tedi` instead.
  */
 export declare const Anchor: AnchorComponent;
 export default Anchor;

package/src/community/components/button/button.d.ts

@@ -19,6 +19,7 @@ export type ButtonProps<C extends React.ElementType = 'button'> = ButtonContentP
 export type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C>) => React.ReactElement | null;
 /**
  * Renders a `<button>` tag and has all of its props plus our own defined props. For more info about usage of buttons see [Button](/docs/documentation-buttons-buttons--buttons) & [ButtonGroups](/docs/documentation-buttons-buttongroups--buttongroups) documentation.
+ * @deprecated Use `Button` from `@tedi-design-system/react/tedi` instead.
  */
 export declare const Button: ButtonComponent;
 export default Button;

package/src/community/components/card/card-content/card-content.d.ts

@@ -37,6 +37,9 @@ export interface CardContentProps extends BreakpointSupport<CardContentBreakpoin
      */
     children?: React.ReactNode;
 }
+/**
+ * @deprecated Use `CardContent` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardContent: {
     (props: CardContentProps): JSX.Element;
     displayName: string;

package/src/community/components/card/card-header/card-header.d.ts

@@ -38,6 +38,9 @@ export type CardHeaderProps = BreakpointSupport<CardHeaderBreakpointProps> & {
 export interface CardHeaderAsButton extends Partial<React.ButtonHTMLAttributes<HTMLButtonElement>> {
     role: 'button';
 }
+/**
+ * @deprecated Use `CardHeader` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardHeader: {
     (props: CardHeaderProps): JSX.Element;
     displayName: string;

package/src/community/components/card/card-notification/card-notification.d.ts

@@ -1,5 +1,8 @@
 import { AlertProps } from '../../../../tedi/components/notifications/alert/alert';
 import { CardContentProps } from '../card-content/card-content';
 export type CardNotificationProps = AlertProps & Pick<CardContentProps, 'padding'>;
+/**
+ * @deprecated Use `CardNotification` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardNotification: (props: CardNotificationProps) => JSX.Element;
 export default CardNotification;

package/src/community/components/card/card.d.ts

@@ -36,5 +36,8 @@ export interface CardProps extends BreakpointSupport<CardBreakpointProps> {
      */
     children?: React.ReactElement<CardContentProps | CardHeaderProps> | React.ReactElement<CardContentProps | CardHeaderProps>[] | React.ReactNode;
 }
+/**
+ * @deprecated Use `Card` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export default Card;

package/src/community/components/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),K=require("../../../../external/classnames/index.cjs.js"),d=require("react"),T=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),H=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),$=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),_=c=>{const{getLabel:v}=H.useLabels(),{button:F,items:u,onItemClick:l,closeMenuOnClick:h=!0,...q}=c,{initialFocus:j=-1,modal:f=!1,...p}=c.focusManager??{},{visuallyHiddenDismiss:M=f?v("close"):!1}=p??{},R=o.useFloatingNodeId(),g=d.useRef([]),[b,i]=d.useState(!1),[x,y]=d.useState(null),{x:C,y:N,strategy:O,refs:w,placement:P,context:r}=o.useFloating({placement:"bottom-start",nodeId:R,open:b,onOpenChange:i,middleware:[D.flip(),D.shift()],whileElementsMounted:$.autoUpdate}),S=u.findIndex(e=>e.isActive),{getReferenceProps:L,getFloatingProps:U,getItemProps:A}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:x,selectedIndex:S,onNavigate:y,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),E=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:j,visuallyHiddenDismiss:M,modal:f,...p,children:s.jsx("div",{...U({ref:w.setFloating,style:{position:O,left:C??0,top:N??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&i(!1)}}),"data-placement":P,children:u.map((t,n)=>B(t,n))})});return b?e:null},k=e=>K.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),I=(e,t,n)=>{var m;l==null||l(e,t,n),(m=e==null?void 0:e.onClick)==null||m.call(e,n),h&&i(!1)},B=(e,t)=>s.jsx("button",{...A({disabled:e.isDisabled,tabIndex:x===t?0:-1,role:"option",className:k(e),onClick:n=>I(e,t,n),onKeyDown(n){n.key==="Enter"&&I(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(T.Button,{"data-name":"dropdown",...q,...F,...L({ref:w.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:E()})]})};exports.Dropdown=_;exports.default=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),B=require("../../../../external/classnames/index.cjs.js"),c=require("react"),K=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),T=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),H=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),$=d=>{const{getLabel:F}=T.useLabels(),{button:_,items:u,onItemClick:l,closeMenuOnClick:h=!0,...q}=d,{initialFocus:v=-1,modal:f=!1,...p}=d.focusManager??{},{visuallyHiddenDismiss:j=f?F("close"):!1}=p??{},R=o.useFloatingNodeId(),g=c.useRef([]),[b,i]=c.useState(!1),[x,M]=c.useState(null),{x:y,y:C,strategy:N,refs:w,placement:O,context:r}=o.useFloating({placement:"bottom-start",nodeId:R,open:b,onOpenChange:i,middleware:[D.flip(),D.shift()],whileElementsMounted:H.autoUpdate}),P=u.findIndex(e=>e.isActive),{getReferenceProps:S,getFloatingProps:L,getItemProps:U}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:x,selectedIndex:P,onNavigate:M,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),A=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:v,visuallyHiddenDismiss:j,modal:f,...p,children:s.jsx("div",{...L({ref:w.setFloating,style:{position:N,left:y??0,top:C??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&i(!1)}}),"data-placement":O,children:u.map((t,n)=>k(t,n))})});return b?e:null},E=e=>B.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),I=(e,t,n)=>{var m;l==null||l(e,t,n),(m=e==null?void 0:e.onClick)==null||m.call(e,n),h&&i(!1)},k=(e,t)=>s.jsx("button",{...U({disabled:e.isDisabled,tabIndex:x===t?0:-1,role:"option",className:E(e),onClick:n=>I(e,t,n),onKeyDown(n){n.key==="Enter"&&I(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(K.Button,{"data-name":"dropdown",...q,..._,...S({ref:w.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:A()})]})};exports.Dropdown=$;

package/src/community/components/dropdown/dropdown.d.ts

@@ -42,5 +42,8 @@ export type DropdownProps = {
      */
     focusManager?: Omit<React.ComponentProps<typeof FloatingFocusManager>, 'context' | 'children'>;
 };
+/**
+ * @deprecated Use `Dropdown` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/src/community/components/dropdown/dropdown.es.js

@@ -7,15 +7,15 @@ import r from "./dropdown.module.scss.es.js";
 import { useLabels as Y } from "../../../tedi/providers/label-provider/use-labels.es.js";
 import { autoUpdate as Z } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
 import { flip as $, shift as ee } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const ce = (d) => {
-  const { getLabel: x } = Y(), { button: D, items: c, onItemClick: a, closeMenuOnClick: F = !0, ...h } = d, { initialFocus: v = -1, modal: p = !1, ...f } = d.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, R = H(), u = i.useRef([]), [m, l] = i.useState(!1), [g, M] = i.useState(null), { x: N, y, strategy: C, refs: I, placement: O, context: n } = T({
+const de = (c) => {
+  const { getLabel: x } = Y(), { button: D, items: d, onItemClick: a, closeMenuOnClick: F = !0, ...h } = c, { initialFocus: v = -1, modal: p = !1, ...f } = c.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, R = H(), u = i.useRef([]), [m, l] = i.useState(!1), [g, M] = i.useState(null), { x: N, y, strategy: C, refs: I, placement: O, context: n } = T({
     placement: "bottom-start",
     nodeId: R,
     open: m,
     onOpenChange: l,
     middleware: [$(), ee()],
     whileElementsMounted: Z
-  }), P = c.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
+  }), P = d.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
     q(n),
     z(n, {
       listRef: u,
@@ -51,7 +51,7 @@ const ce = (d) => {
               }
             }),
             "data-placement": O,
-            children: c.map((o, t) => k(o, t))
+            children: d.map((o, t) => k(o, t))
           }
         )
       }
@@ -100,6 +100,5 @@ const ce = (d) => {
   ] });
 };
 export {
-  ce as Dropdown,
-  ce as default
+  de as Dropdown
 };

package/src/community/components/form/choice-group/choice-group.d.ts

@@ -78,5 +78,8 @@ export interface ChoiceGroupProps extends FormLabelProps {
         indented?: boolean;
     } & Partial<Omit<CheckProps, 'indeterminate' | 'checked' | 'onChange' | 'defaultChecked' | 'label'>>;
 }
+/**
+ * @deprecated Use `ChoiceGroup` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ChoiceGroup: (props: ChoiceGroupProps) => React.ReactElement;
 export default ChoiceGroup;

package/src/community/components/form/file-upload/file-upload.d.ts

@@ -12,6 +12,9 @@ export interface RejectedFile {
     type: FileRejectionType;
     file: File;
 }
+/**
+ * @deprecated Use FileUpload from `@tedi-design-system/react/tedi` instead.
+ */
 export interface FileUploadProps extends FormLabelProps {
     /**
      * Additional classes.
@@ -65,5 +68,8 @@ export interface FileUploadProps extends FormLabelProps {
      */
     maxSize?: number;
 }
+/**
+ * @deprecated Use `FileUpload` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const FileUpload: (props: FileUploadProps) => JSX.Element;
 export default FileUpload;

package/src/community/components/form/radio/radio.d.ts

@@ -1,4 +1,7 @@
 import { ChoiceInputProps } from '../choice-input.types';
 export type RadioProps = ChoiceInputProps;
+/**
+ * @deprecated Use `Radio` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Radio: (props: RadioProps) => JSX.Element;
 export default Radio;

package/src/community/components/form/select/select.d.ts

@@ -233,5 +233,8 @@ export interface IGroupedOptions<CustomOption = unknown> extends GroupBase<Custo
     backgroundColor?: TColorsBackground;
 }
 export type TSelectValue<CustomData = unknown> = ISelectOption<CustomData> | ReadonlyArray<ISelectOption<CustomData>> | null;
+/**
+ * @deprecated Use `Select` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectInstance<ISelectOption<unknown>, boolean, IGroupedOptions<ISelectOption<unknown>>>>>;
 export default Select;

package/src/community/components/form/toggle/toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),$=require("../../../../tedi/components/base/icon/icon.cjs.js"),w=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),j=require("../../button/button.cjs.js"),e=require("./toggle.module.scss.cjs.js"),c=i.forwardRef((r,C)=>{const{ariaLabel:N,className:q,checked:n,defaultChecked:y,onChange:a,size:u=r.icon?"large":"medium",color:v="default",type:g,icon:S,disabled:f=!1,isLoading:d=!1,extraContent:m,label:_,...l}=r,[h,T]=i.useState(y||!1),o=i.useMemo(()=>a&&typeof n<"u"?n:h,[a,h,n]),M=k.default(e.default.toggle,e.default[`toggle--${u}`],e.default[`toggle--${v}`],{[e.default["toggle--active"]]:o,[e.default["toggle--disabled"]]:f,[e.default[`toggle--${g}`]]:g},q),b=()=>{if(d)return;const s=!o;typeof n>"u"&&T(s),a==null||a(s)},p={noStyle:!0,type:"button","aria-label":N,"aria-pressed":o,disabled:f,"aria-disabled":d,...l,onClick:b};return t.jsxs("div",{className:e.default["toggle-wrapper"],children:[t.jsx(j.Button,{...p,onClick:s=>{var x;(x=l==null?void 0:l.onClick)==null||x.call(l,s),b()},ref:C,"data-name":"toggle",className:M,children:t.jsx("span",{className:e.default.toggle__dot,children:d?t.jsx(w.Spinner,{size:u==="large"?16:10,className:k.default(e.default.toggle__icon,e.default.toggle__spinner)}):S?t.jsx($.Icon,{className:e.default.toggle__icon,name:o?"lock_open_right":"lock",size:16}):null})}),_&&t.jsx(j.Button,{...p,className:e.default.toggle__label,"aria-hidden":!0,tabIndex:-1,children:_}),m&&t.jsx("div",{className:e.default["toggle__extra-content"],children:m})]})});c.displayName="Toggle";exports.Toggle=c;exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),w=require("../../../../tedi/components/base/icon/icon.cjs.js"),z=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),k=require("../../button/button.cjs.js"),e=require("./toggle.module.scss.cjs.js"),j=i.forwardRef((c,C)=>{const{ariaLabel:N,className:y,checked:n,defaultChecked:q,onChange:a,size:r=c.icon?"large":"medium",color:S="default",type:g,icon:T,disabled:u=!1,isLoading:d=!1,extraContent:f,label:m,...l}=c,[_,v]=i.useState(q||!1),o=i.useMemo(()=>a&&typeof n<"u"?n:_,[a,_,n]),$=x.default(e.default.toggle,e.default[`toggle--${r}`],e.default[`toggle--${S}`],{[e.default["toggle--active"]]:o,[e.default["toggle--disabled"]]:u,[e.default[`toggle--${g}`]]:g},y),h=()=>{if(d)return;const s=!o;typeof n>"u"&&v(s),a==null||a(s)},b={noStyle:!0,type:"button","aria-label":N,"aria-pressed":o,disabled:u,"aria-disabled":d,...l,onClick:h};return t.jsxs("div",{className:e.default["toggle-wrapper"],children:[t.jsx(k.Button,{...b,onClick:s=>{var p;(p=l==null?void 0:l.onClick)==null||p.call(l,s),h()},ref:C,"data-name":"toggle",className:$,children:t.jsx("span",{className:e.default.toggle__dot,children:d?t.jsx(z.Spinner,{size:r==="large"?16:10,className:x.default(e.default.toggle__icon,e.default.toggle__spinner)}):T?t.jsx(w.Icon,{className:e.default.toggle__icon,name:o?"lock_open_right":"lock",size:16}):null})}),m&&t.jsx(k.Button,{...b,className:e.default.toggle__label,"aria-hidden":!0,tabIndex:-1,children:m}),f&&t.jsx("div",{className:e.default["toggle__extra-content"],children:f})]})});j.displayName="Toggle";exports.Toggle=j;

package/src/community/components/form/toggle/toggle.d.ts

@@ -62,5 +62,8 @@ export interface ToggleProps {
      */
     isLoading?: boolean;
 }
+/**
+ * @deprecated Use `Toggle` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export default Toggle;

package/src/community/components/form/toggle/toggle.es.js

@@ -9,9 +9,9 @@ const L = $((r, C) => {
   const {
     ariaLabel: y,
     className: x,
-    checked: l,
+    checked: a,
     defaultChecked: v,
-    onChange: a,
+    onChange: l,
     size: c = r.icon ? "large" : "medium",
     color: w = "default",
     type: g,
@@ -21,7 +21,7 @@ const L = $((r, C) => {
     extraContent: m,
     label: f,
     ...o
-  } = r, [p, I] = b.useState(v || !1), n = b.useMemo(() => a && typeof l < "u" ? l : p, [a, p, l]), S = k(
+  } = r, [p, I] = b.useState(v || !1), n = b.useMemo(() => l && typeof a < "u" ? a : p, [l, p, a]), S = k(
     e.toggle,
     e[`toggle--${c}`],
     e[`toggle--${w}`],
@@ -35,7 +35,7 @@ const L = $((r, C) => {
     if (i)
       return;
     const s = !n;
-    typeof l > "u" && I(s), a == null || a(s);
+    typeof a > "u" && I(s), l == null || l(s);
   }, _ = {
     noStyle: !0,
     type: "button",
@@ -73,6 +73,5 @@ const L = $((r, C) => {
 });
 L.displayName = "Toggle";
 export {
-  L as Toggle,
-  L as default
+  L as Toggle
 };

package/src/community/components/layout/header/components/header-language/header-language.d.ts

@@ -13,5 +13,8 @@ export interface HeaderLanguageProps {
      */
     languages?: Language[];
 }
+/**
+ * @deprecated Use `HeaderLanguage` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const HeaderLanguage: React.FC<HeaderLanguageProps>;
 export default HeaderLanguage;

package/src/community/components/layout/header/components/header-role/header-role.d.ts

@@ -25,5 +25,8 @@ export interface HeaderRoleProps {
      */
     renderModal?: boolean;
 }
+/**
+ * @deprecated Use `HeaderRole` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const HeaderRole: React.FC<HeaderRoleProps>;
 export default HeaderRole;

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @deprecated Use `SidenavToggle` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const SidenavToggle: () => import("react/jsx-runtime").JSX.Element | null;
 export default SidenavToggle;

package/src/community/components/layout/header/header/header.d.ts

@@ -49,5 +49,8 @@ export interface HeaderProps<H extends React.ElementType> {
      */
     notification?: HeaderNotificationProps;
 }
+/**
+ * @deprecated Use `Header` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Header: <H extends React.ElementType = "a">(props: HeaderProps<H>) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/src/community/components/layout/sidenav/sidenav.d.ts

@@ -62,5 +62,8 @@ export type SideNavItem<C extends React.ElementType = 'a'> = AnchorProps<C> & {
      */
     subItems?: SideNavItem<C>[];
 };
+/**
+ * @deprecated Use `SideNav` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const SideNav: <C extends React.ElementType = "a">(props: SideNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 export default SideNav;

package/src/community/components/map-components/base-map-selection/base-map-option.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),I=require("../../../../tedi/components/base/icon/icon.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),S=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),s=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),d=b=>{const{title:l,content:x,selected:c,onSelect:n,type:u="selection",className:h,id:j,multiple:T,disabled:o,tooltipText:p,tooltipType:f="info"}=b,a=r.useRef(null),_=S.useElementSize(a),[y,g]=r.useState(!1);r.useEffect(()=>{const i=a.current;i&&g(i.scrollWidth>i.clientWidth)},[_,l]);const q=()=>{o||n==null||n()},v=i=>{o||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),n==null||n())},M=N.default(t.default["tedi-base-map-selection__wrapper"],c&&t.default["tedi-base-map-selection--selected"],u&&t.default[`tedi-base-map-selection--${u}`],T&&t.default["tedi-base-map-selection--multiple"],o&&t.default["tedi-base-map-selection--disabled"],h),m=e.jsx("div",{ref:a,tabIndex:-1,className:t.default["tedi-base-map-selection__title"],children:l}),E=y?e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:m}),e.jsx(s.Tooltip.Content,{children:l})]}):m;return e.jsxs("div",{role:"button",tabIndex:o?-1:0,"aria-pressed":!!c,"aria-disabled":o||void 0,onClick:q,onKeyDown:v,className:M,id:j,children:[e.jsx("div",{"aria-hidden":!0,className:t.default["tedi-base-map-selection__content"],children:x}),p&&e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:e.jsx("span",{tabIndex:-1,className:t.default["tedi-base-map-selection__info"],children:e.jsx(I.Icon,{background:"brand-secondary",name:f==="error"?"error":"info",size:16,color:f==="error"?"danger":"brand"})})}),e.jsx(s.Tooltip.Content,{children:p})]}),E]})};d.displayName="BaseMapOption";exports.BaseMapOption=d;exports.default=d;

package/src/community/components/map-components/base-map-selection/base-map-option.d.ts

@@ -0,0 +1,64 @@
+import { JSX } from 'react';
+export type BaseMapOptionType = 'button' | 'historical' | 'selection';
+export type BaseMapOptionTooltipType = 'info' | 'error';
+export interface BaseMapOptionProps {
+    /**
+     * The title displayed within the option.
+     */
+    title: string;
+    /**
+     * The main content of the option, typically a thumbnail. Can be any valid React node.
+     */
+    content: React.ReactNode;
+    /**
+     * Indicates whether the option is currently selected.
+     * Used to apply specific visual styles.
+     */
+    selected?: boolean;
+    /**
+     * Callback triggered when the option is clicked
+     * or activated via keyboard (Enter or Space).
+     */
+    onSelect?: () => void;
+    /**
+     * The type of the option, which controls styling.
+     * - `'selection'`: thumbnail with the title rendered below (default)
+     * - `'button'`: square thumbnail with the title overlaid
+     * - `'historical'`: styled for historical context
+     * @default 'selection'
+     */
+    type?: BaseMapOptionType;
+    /**
+     * Optional custom class name to apply additional styles.
+     */
+    className?: string;
+    /**
+     * HTML `id` attribute to identify the element.
+     */
+    id: string;
+    /**
+     * When `true`, renders a "stacked" visual indicating multiple maps.
+     */
+    multiple?: boolean;
+    /**
+     * Applies disabled style.
+     */
+    disabled?: boolean;
+    /**
+     * Text shown in a tooltip. When set, an info icon is rendered in the middle of
+     * the option and reveals this text on hover.
+     */
+    tooltipText?: string;
+    /**
+     * Visual style of the info icon shown when `tooltipText` is set.
+     * - `'info'`: neutral informational icon (default)
+     * - `'error'`: error/danger styled icon
+     * @default 'info'
+     */
+    tooltipType?: BaseMapOptionTooltipType;
+}
+export declare const BaseMapOption: {
+    (props: BaseMapOptionProps): JSX.Element;
+    displayName: string;
+};
+export default BaseMapOption;

package/src/community/components/map-components/base-map-selection/base-map-option.es.js

@@ -0,0 +1,75 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import k from "../../../../../external/classnames/index.es.js";
+import { useRef as C, useState as w, useEffect as z } from "react";
+import { Icon as B } from "../../../../tedi/components/base/icon/icon.es.js";
+import t from "./base-map-selection.module.scss.es.js";
+import { useElementSize as D } from "../../../../tedi/helpers/hooks/use-element-size.es.js";
+import { Tooltip as s } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+const M = (b) => {
+  const {
+    title: r,
+    content: u,
+    selected: d,
+    onSelect: n,
+    type: c = "selection",
+    className: h,
+    id: y,
+    multiple: _,
+    disabled: o,
+    tooltipText: m,
+    tooltipType: p = "info"
+  } = b, a = C(null), x = D(a), [N, T] = w(!1);
+  z(() => {
+    const i = a.current;
+    i && T(i.scrollWidth > i.clientWidth);
+  }, [x, r]);
+  const g = () => {
+    o || n == null || n();
+  }, v = (i) => {
+    o || (i.key === "Enter" || i.key === " ") && (i.preventDefault(), n == null || n());
+  }, E = k(
+    t["tedi-base-map-selection__wrapper"],
+    d && t["tedi-base-map-selection--selected"],
+    c && t[`tedi-base-map-selection--${c}`],
+    _ && t["tedi-base-map-selection--multiple"],
+    o && t["tedi-base-map-selection--disabled"],
+    h
+  ), f = /* @__PURE__ */ e("div", { ref: a, tabIndex: -1, className: t["tedi-base-map-selection__title"], children: r }), I = N ? /* @__PURE__ */ l(s, { children: [
+    /* @__PURE__ */ e(s.Trigger, { children: f }),
+    /* @__PURE__ */ e(s.Content, { children: r })
+  ] }) : f;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      role: "button",
+      tabIndex: o ? -1 : 0,
+      "aria-pressed": !!d,
+      "aria-disabled": o || void 0,
+      onClick: g,
+      onKeyDown: v,
+      className: E,
+      id: y,
+      children: [
+        /* @__PURE__ */ e("div", { "aria-hidden": !0, className: t["tedi-base-map-selection__content"], children: u }),
+        m && /* @__PURE__ */ l(s, { children: [
+          /* @__PURE__ */ e(s.Trigger, { children: /* @__PURE__ */ e("span", { tabIndex: -1, className: t["tedi-base-map-selection__info"], children: /* @__PURE__ */ e(
+            B,
+            {
+              background: "brand-secondary",
+              name: p === "error" ? "error" : "info",
+              size: 16,
+              color: p === "error" ? "danger" : "brand"
+            }
+          ) }) }),
+          /* @__PURE__ */ e(s.Content, { children: m })
+        ] }),
+        I
+      ]
+    }
+  );
+};
+M.displayName = "BaseMapOption";
+export {
+  M as BaseMapOption,
+  M as default
+};

package/src/community/components/map-components/base-map-selection/base-map-selection.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),e=require("./base-map-selection.module.scss.cjs.js"),f=n=>{const{title:i,content:c,selected:o,onSelect:t,type:s="button",className:d,id:u,multiple:r}=n,p=a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),t==null||t())},m=b.default(e.default["tedi-base-map-selection__wrapper"],o&&e.default["tedi-base-map-selection--selected"],s&&e.default[`tedi-base-map-selection--${s}`],r&&e.default["tedi-base-map-selection--multiple"],d);return l.jsxs("div",{role:"button",tabIndex:0,onClick:t,onKeyDown:p,className:m,id:u,children:[l.jsx("div",{className:e.default["tedi-base-map-selection__content"],children:c}),l.jsx("div",{className:e.default["tedi-base-map-selection__title"],children:i})]})};exports.BaseMapSelection=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),B=require("../../../../tedi/components/buttons/button/button.cjs.js"),T=require("../../../../tedi/components/form/field/field.cjs.js"),O=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),C=require("../../../../tedi/components/form/slider/slider.cjs.js"),f=require("./base-map-option.cjs.js"),n=require("./base-map-selection.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),L=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),P=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),c=a=>{const t=Number(a);return Number.isNaN(t)?0:Math.min(100,Math.max(0,t))};function o(a){const{title:t,content:x,children:h,multiple:y=!1,showTransparency:j=!1,transparency:d,defaultTransparency:_,onTransparencyChange:s,transparencyLabel:r="",id:i}=a,p=d!==void 0,[v,g]=S.useState(()=>c(_??0)),u=c(p?d:v),m=M=>{const b=c(M);p||g(b),s==null||s(b)},q=N.default(n.default["tedi-base-map-selection__wrapper"],n.default["tedi-base-map-selection__trigger"],n.default["tedi-base-map-selection--button"],y&&n.default["tedi-base-map-selection--multiple"]);return e.jsxs(l.Popover,{placement:"top-end",children:[e.jsx(l.Popover.Trigger,{children:e.jsxs(B.Button,{noStyle:!0,id:i,className:q,children:[e.jsx("div",{className:n.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:x}),e.jsx("div",{className:n.default["tedi-base-map-selection__title"],children:t})]})}),e.jsxs(l.Popover.Content,{width:"medium",children:[e.jsx("div",{className:n.default["tedi-base-map-selection__options"],children:h}),j&&e.jsx("div",{className:n.default["tedi-base-map-selection__transparency"],children:e.jsx(C.Slider,{label:r,"aria-label":r||"Transparency",min:0,max:100,value:u,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:n.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(O.InputGroupBase,{id:`${i}-transparency`,label:r||"Transparency",hideLabel:!0,children:[e.jsx(L.Input,{children:e.jsx(T.Field,{type:"number",id:`${i}-transparency`,value:String(u),onChange:m})}),e.jsx(P.Suffix,{children:"%"})]})})})})]})]})}o.Option=f.BaseMapOption;o.displayName="BaseMapSelection";exports.BaseMapOption=f.BaseMapOption;exports.BaseMapSelection=o;

package/src/community/components/map-components/base-map-selection/base-map-selection.d.ts

@@ -1,44 +1,59 @@
 import { JSX } from 'react';
-type BaseMapSelectionType = 'button' | 'historical' | 'selection';
+import { default as BaseMapOption } from './base-map-option';
 export interface BaseMapSelectionProps {
     /**
-     * The title displayed within the component.
+     * Title of the trigger button and used as its accessible label.
      */
     title: string;
     /**
-     * The main content of the selection card. Can be any valid React node.
+     * Visual content (thumbnail) of the currently active base map, shown on the trigger button.
      */
     content: React.ReactNode;
     /**
-     * Indicates whether the current item is selected.
-     * Used to apply specific visual styles.
+     * Selectable base map options rendered inside the popover, typically `BaseMapSelection.Option` elements.
      */
-    selected?: boolean;
+    children: React.ReactNode;
     /**
-     * Callback function triggered when the selection is clicked
-     * or activated via keyboard (Enter or Space).
+     * Renders a "stacked" trigger, indicating that multiple base maps are available.
+     * @default false
      */
-    onSelect?: () => void;
+    multiple?: boolean;
     /**
-     * The type of the selection, which controls styling.
-     * - `'button'`: default interactive selection
-     * - `'historical'`: styled for historical context
-     * - `'selection'`: styled for multi-selection context
+     * When `true`, renders a transparency slider at the bottom of the popover.
+     * @default false
      */
-    type: BaseMapSelectionType;
+    showTransparency?: boolean;
     /**
-     * Optional custom class name to apply additional styles.
+     * Controlled transparency value (0-100). Use together with `onTransparencyChange`.
+     * Values outside the range are clamped. Omit for uncontrolled usage.
      */
-    className?: string;
+    transparency?: number;
     /**
-     * Optional HTML `id` attribute to identify the element.
+     * Initial transparency value (0-100) for uncontrolled usage. Ignored when `transparency` is provided.
+     * @default 0
      */
-    id?: string;
+    defaultTransparency?: number;
     /**
-     * When `true`, indicates that multiple selections are allowed.
-     * Affects the visual style.
+     * Callback fired when the transparency value changes. The reported value is always clamped to 0-100.
      */
-    multiple?: boolean;
+    onTransparencyChange?: (value: number) => void;
+    /**
+     * Label for the transparency slider.
+     */
+    transparencyLabel?: string;
+    /**
+     * HTML `id` attribute applied to the trigger button.
+     */
+    id: string;
+}
+export declare function BaseMapSelection(props: BaseMapSelectionProps): JSX.Element;
+export declare namespace BaseMapSelection {
+    var Option: {
+        (props: import("./base-map-option").BaseMapOptionProps): JSX.Element;
+        displayName: string;
+    };
+    var displayName: string;
 }
-export declare const BaseMapSelection: (props: BaseMapSelectionProps) => JSX.Element;
+export type { BaseMapOptionProps, BaseMapOptionTooltipType, BaseMapOptionType } from './base-map-option';
+export { BaseMapOption };
 export default BaseMapSelection;