@tedi-design-system/react 18.1.0-rc.1 → 18.1.0-rc.11

package/package.json

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

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;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-map-selection__title":"tedi-map-selection__title-20651d60","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-base-map-selection__wrapper":"tedi-base-map-selection__wrapper-aae7464f","tedi-base-map-selection--disabled":"tedi-base-map-selection--disabled-a957b2c8","tedi-base-map-selection__content":"tedi-base-map-selection__content-3145448d","tedi-base-map-selection__info":"tedi-base-map-selection__info-a5674a2d","tedi-base-map-selection__options":"tedi-base-map-selection__options-dce549ce","tedi-base-map-selection__transparency":"tedi-base-map-selection__transparency-d4be551d","tedi-base-map-selection__transparency-field":"tedi-base-map-selection__transparency-field-d8b5a065","tedi-base-map-selection--historical":"tedi-base-map-selection--historical-159d3def","tedi-base-map-selection__title":"tedi-base-map-selection__title-d46b74ec","tedi-base-map-selection--selected":"tedi-base-map-selection--selected-914a0483","tedi-base-map-selection--button":"tedi-base-map-selection--button-0e9e36f4","tedi-base-map-selection--selection":"tedi-base-map-selection--selection-910cae90","tedi-base-map-selection--multiple":"tedi-base-map-selection--multiple-58cb365c"};exports.default=e;

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

@@ -1,9 +1,13 @@
 const e = {
   "tedi-base-map-selection__wrapper": "tedi-base-map-selection__wrapper-aae7464f",
+  "tedi-base-map-selection--disabled": "tedi-base-map-selection--disabled-a957b2c8",
   "tedi-base-map-selection__content": "tedi-base-map-selection__content-3145448d",
+  "tedi-base-map-selection__info": "tedi-base-map-selection__info-a5674a2d",
+  "tedi-base-map-selection__options": "tedi-base-map-selection__options-dce549ce",
+  "tedi-base-map-selection__transparency": "tedi-base-map-selection__transparency-d4be551d",
+  "tedi-base-map-selection__transparency-field": "tedi-base-map-selection__transparency-field-d8b5a065",
   "tedi-base-map-selection--historical": "tedi-base-map-selection--historical-159d3def",
   "tedi-base-map-selection__title": "tedi-base-map-selection__title-d46b74ec",
-  "tedi-map-selection__title": "tedi-map-selection__title-20651d60",
   "tedi-base-map-selection--selected": "tedi-base-map-selection--selected-914a0483",
   "tedi-base-map-selection--button": "tedi-base-map-selection--button-0e9e36f4",
   "tedi-base-map-selection--selection": "tedi-base-map-selection--selection-910cae90",

package/src/community/components/map-components/button-group/button-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-edc8779d","tedi-button-group--horizontal":"tedi-button-group--horizontal-fb80a2c6","tedi-button-group__item":"tedi-button-group__item-da4d0318","tedi-button-group__suffix":"tedi-button-group__suffix-e19ecebe","tedi-button-group__prefix":"tedi-button-group__prefix-c267ac4b","tedi-button-group--vertical":"tedi-button-group--vertical-eef4c53c","tedi-button-group--stretch":"tedi-button-group--stretch-b9680682"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-edc8779d","tedi-button-group--horizontal":"tedi-button-group--horizontal-fb80a2c6","tedi-button-group__item":"tedi-button-group__item-da4d0318","tedi-button-group__suffix":"tedi-button-group__suffix-e19ecebe","tedi-button-group__prefix":"tedi-button-group__prefix-c267ac4b","tedi-button-group--vertical":"tedi-button-group--vertical-eef4c53c","tedi-button-group__item--active":"tedi-button-group__item--active-d02494ae","tedi-button-group--stretch":"tedi-button-group--stretch-b9680682"};exports.default=t;

package/src/community/components/map-components/button-group/button-group.module.scss.es.js

@@ -5,6 +5,7 @@ const t = {
   "tedi-button-group__suffix": "tedi-button-group__suffix-e19ecebe",
   "tedi-button-group__prefix": "tedi-button-group__prefix-c267ac4b",
   "tedi-button-group--vertical": "tedi-button-group--vertical-eef4c53c",
+  "tedi-button-group__item--active": "tedi-button-group__item--active-d02494ae",
   "tedi-button-group--stretch": "tedi-button-group--stretch-b9680682"
 };
 export {

package/src/community/components/map-components/map-button/map-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),T=require("../../../../tedi/components/base/icon/icon.cjs.js"),_=require("../../../../tedi/components/buttons/button/button.cjs.js"),l=require("../map-dropdown/map-dropdown.cjs.js"),e=require("./map-button.module.scss.cjs.js"),r=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),m=b=>{const{size:n="default",icon:a,selected:f=!1,className:h,children:d,hideLabel:c=!1,tooltipContent:u=d,dropdownItems:o,...x}=b,[j,g]=C.useState(!1),q=f||j,w=p.default(e.default["tedi-map-button"],e.default[`tedi-map-button--${n}`],q&&e.default["tedi-map-button--selected"],o&&e.default["tedi-map-button--dropdown"],h),D=t.jsxs(t.Fragment,{children:[a&&t.jsx(T.Icon,{name:a,className:e.default["tedi-map-button__icon"],size:n==="small"?24:18}),!c&&t.jsx("div",{className:p.default(e.default["tedi-map-button__text"]),children:d})]}),s=t.jsx(_.Button,{noStyle:!0,className:w,size:n,...x,children:D}),M=c&&u?t.jsxs(r.Tooltip,{placement:"right",children:[t.jsx(r.Tooltip.Trigger,{children:s}),t.jsx(r.Tooltip.Content,{children:u})]}):s;return o?t.jsxs(l.MapDropdown,{onOpenChange:g,placement:"right-start",children:[t.jsx(l.MapDropdown.Trigger,{children:s}),t.jsx(l.MapDropdown.Content,{items:o.map(i=>({children:i.children,onClick:i.onClick,isDisabled:i.isDisabled}))})]}):M};exports.MapButton=m;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),B=require("react"),S=require("../../../../tedi/components/base/icon/icon.cjs.js"),N=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),O=require("../../../../tedi/components/buttons/button/button.cjs.js"),d=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),b=f=>{const{size:n="default",icon:r,selected:h=!1,className:x,children:u,hideLabel:c=!1,tooltipContent:p=u,dropdownItems:o,isActive:j,isHovered:g,underline:q,isLoading:i,..._}=f,[w,D]=B.useState(!1),M=h||w,v=m.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],M&&t.default["tedi-map-button--selected"],o&&t.default["tedi-map-button--dropdown"],j&&t.default["tedi-map-button--is-active"],g&&t.default["tedi-map-button--is-hovered"],q&&t.default["tedi-map-button--underline"],i&&t.default["tedi-map-button--loading"],x),C=e.jsxs(e.Fragment,{children:[i?e.jsx(N.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):r&&e.jsx(S.Icon,{name:r,className:t.default["tedi-map-button__icon"],size:n==="small"?24:18}),!c&&e.jsx("div",{className:m.default(t.default["tedi-map-button__text"]),children:u})]}),s=e.jsx(O.Button,{noStyle:!0,isLoading:i,className:v,size:n,..._,children:C}),T=c&&p?e.jsxs(l.Tooltip,{placement:"right",children:[e.jsx(l.Tooltip.Trigger,{children:s}),e.jsx(l.Tooltip.Content,{children:p})]}):s;return o?e.jsxs(d.MapDropdown,{onOpenChange:D,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:s}),e.jsx(d.MapDropdown.Content,{items:o.map(a=>({children:a.children,onClick:a.onClick,isDisabled:a.isDisabled}))})]}):T};exports.MapButton=b;exports.default=b;

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

@@ -1,7 +1,12 @@
 import { JSX } from 'react';
 import { ButtonProps } from '../../../../tedi';
 import { MapDropdownItem } from '../map-dropdown/map-dropdown';
-export interface MapButtonProps extends Omit<ButtonProps, 'size'> {
+/**
+ * Button props that don't apply to MapButton because it renders `<Button noStyle>` with its own
+ * fixed styling. Omitted so the public API only advertises props that actually work here.
+ */
+type OmittedButtonProps = 'size' | 'icon' | 'iconLeft' | 'iconRight' | 'visualType' | 'color' | 'fullWidth' | 'showTooltip' | 'noStyle' | 'renderWrapperElement';
+export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
     /**
      * Size of the button. Can be:
      * - `'default'` – standard size.
@@ -9,8 +14,8 @@ export interface MapButtonProps extends Omit<ButtonProps, 'size'> {
      */
     size?: 'default' | 'small';
     /**
-     * Name of the icon to display inside the button (e.g., Material Symbols name).
-     * If set, the icon appears alongside or instead of the label.
+     * Name of the icon to display above the label (e.g., Material Symbols name).
+     * Replaced by a spinner while `isLoading` is `true`.
      */
     icon?: string;
     /**

package/src/community/components/map-components/map-button/map-button.es.js

@@ -1,38 +1,47 @@
-import { jsxs as s, Fragment as T, jsx as t } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import { useState as _ } from "react";
-import { Icon as I } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Button as M } from "../../../../tedi/components/buttons/button/button.es.js";
+import { jsxs as a, Fragment as z, jsx as e } from "react/jsx-runtime";
+import b from "../../../../../external/classnames/index.es.js";
+import { useState as I } from "react";
+import { Icon as M } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Spinner as O } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
+import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
 import { MapDropdown as l } from "../map-dropdown/map-dropdown.es.js";
-import e from "./map-button.module.scss.es.js";
-import { Tooltip as a } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const F = (h) => {
+import t from "./map-button.module.scss.es.js";
+import { Tooltip as m } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+const q = (h) => {
   const {
     size: o = "default",
-    icon: m,
+    icon: d,
     selected: f = !1,
-    className: b,
-    children: c,
-    hideLabel: d = !1,
-    tooltipContent: p = c,
+    className: g,
+    children: p,
+    hideLabel: c = !1,
+    tooltipContent: u = p,
     dropdownItems: n,
-    ...g
-  } = h, [C, w] = _(!1), D = f || C, N = u(
-    e["tedi-map-button"],
-    e[`tedi-map-button--${o}`],
-    D && e["tedi-map-button--selected"],
-    n && e["tedi-map-button--dropdown"],
-    b
-  ), x = /* @__PURE__ */ s(T, { children: [
-    m && /* @__PURE__ */ t(I, { name: m, className: e["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
-    !d && /* @__PURE__ */ t("div", { className: u(e["tedi-map-button__text"]), children: c })
-  ] }), i = /* @__PURE__ */ t(M, { noStyle: !0, className: N, size: o, ...g, children: x }), B = d && p ? /* @__PURE__ */ s(a, { placement: "right", children: [
-    /* @__PURE__ */ t(a.Trigger, { children: i }),
-    /* @__PURE__ */ t(a.Content, { children: p })
-  ] }) : i;
-  return n ? /* @__PURE__ */ s(l, { onOpenChange: w, placement: "right-start", children: [
-    /* @__PURE__ */ t(l.Trigger, { children: i }),
-    /* @__PURE__ */ t(
+    isActive: C,
+    isHovered: N,
+    underline: _,
+    isLoading: i,
+    ...v
+  } = h, [w, D] = I(!1), x = f || w, B = b(
+    t["tedi-map-button"],
+    t[`tedi-map-button--${o}`],
+    x && t["tedi-map-button--selected"],
+    n && t["tedi-map-button--dropdown"],
+    C && t["tedi-map-button--is-active"],
+    N && t["tedi-map-button--is-hovered"],
+    _ && t["tedi-map-button--underline"],
+    i && t["tedi-map-button--loading"],
+    g
+  ), S = /* @__PURE__ */ a(z, { children: [
+    i ? /* @__PURE__ */ e(O, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : d && /* @__PURE__ */ e(M, { name: d, className: t["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
+    !c && /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: p })
+  ] }), s = /* @__PURE__ */ e(j, { noStyle: !0, isLoading: i, className: B, size: o, ...v, children: S }), T = c && u ? /* @__PURE__ */ a(m, { placement: "right", children: [
+    /* @__PURE__ */ e(m.Trigger, { children: s }),
+    /* @__PURE__ */ e(m.Content, { children: u })
+  ] }) : s;
+  return n ? /* @__PURE__ */ a(l, { onOpenChange: D, placement: "right-start", children: [
+    /* @__PURE__ */ e(l.Trigger, { children: s }),
+    /* @__PURE__ */ e(
       l.Content,
       {
         items: n.map((r) => ({
@@ -42,9 +51,9 @@ const F = (h) => {
         }))
       }
     )
-  ] }) : B;
+  ] }) : T;
 };
 export {
-  F as MapButton,
-  F as default
+  q as MapButton,
+  q as default
 };

package/src/community/components/map-components/map-button/map-button.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-map-button":"tedi-map-button-ff336c6a","tedi-map-button__icon":"tedi-map-button__icon-f9ff78eb","tedi-map-button__text":"tedi-map-button__text-7f6a075e","tedi-map-button--default":"tedi-map-button--default-e1b335b5","tedi-map-button--small":"tedi-map-button--small-75882e8f","tedi-map-button--selected":"tedi-map-button--selected-9473bbd6","tedi-map-button--dropdown":"tedi-map-button--dropdown-ca6f4f3b"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-map-button":"tedi-map-button-ff336c6a","tedi-map-button--is-hovered":"tedi-map-button--is-hovered-25c99939","tedi-map-button--is-active":"tedi-map-button--is-active-f0beea2f","tedi-map-button__icon":"tedi-map-button__icon-f9ff78eb","tedi-map-button__text":"tedi-map-button__text-7f6a075e","tedi-map-button--default":"tedi-map-button--default-e1b335b5","tedi-map-button--small":"tedi-map-button--small-75882e8f","tedi-map-button--selected":"tedi-map-button--selected-9473bbd6","tedi-map-button--underline":"tedi-map-button--underline-20dd4ffc","tedi-map-button--dropdown":"tedi-map-button--dropdown-ca6f4f3b"};exports.default=t;

package/src/community/components/map-components/map-button/map-button.module.scss.es.js

@@ -1,10 +1,13 @@
 const t = {
   "tedi-map-button": "tedi-map-button-ff336c6a",
+  "tedi-map-button--is-hovered": "tedi-map-button--is-hovered-25c99939",
+  "tedi-map-button--is-active": "tedi-map-button--is-active-f0beea2f",
   "tedi-map-button__icon": "tedi-map-button__icon-f9ff78eb",
   "tedi-map-button__text": "tedi-map-button__text-7f6a075e",
   "tedi-map-button--default": "tedi-map-button--default-e1b335b5",
   "tedi-map-button--small": "tedi-map-button--small-75882e8f",
   "tedi-map-button--selected": "tedi-map-button--selected-9473bbd6",
+  "tedi-map-button--underline": "tedi-map-button--underline-20dd4ffc",
   "tedi-map-button--dropdown": "tedi-map-button--dropdown-ca6f4f3b"
 };
 export {

package/src/community/components/map-components/split-pane/split-pane.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),P=require("../../../../../external/classnames/index.cjs.js"),p=require("react"),I=require("../../../../tedi/components/base/icon/icon.cjs.js"),K=require("../../../../tedi/components/buttons/button/button.cjs.js"),s=require("./split-pane.module.scss.cjs.js"),O=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),B=20,F=80,M=2,S=(c,a,d)=>Math.max(a,Math.min(d,c)),U=(c,a)=>c?a==="first"?"right":"left":a==="first"?"bottom":"top",A=({direction:c,side:a})=>{const d=U(c==="horizontal",a);return i.jsx("div",{"data-testid":"active-pane-ring","aria-hidden":!0,className:P.default(s.default["tedi-split-pane__ring"],s.default[`tedi-split-pane__ring--omit-${d}`])})},T=c=>{const{first:a,second:d,direction:m,highlightedSide:E,onClose:y,initialRatio:b=50,minRatio:f=B,maxRatio:h=F,onRatioChange:x}=c,{getLabel:g}=O.useLabels(),[v,N]=p.useState(()=>S(b,f,h)),_=p.useRef(v),R=p.useRef(null),r=p.useRef(null),l=m==="horizontal",w=e=>{const o=S(e,f,h);_.current=o,N(o)},L=(e,o)=>{if(!R.current)return;const n=R.current.getBoundingClientRect(),t=l?n.width:n.height;if(t<=0)return;const u=l?(e-n.left)/t*100:(o-n.top)/t*100;w(u)},j=()=>{x==null||x(_.current)},D=()=>{const e=t=>L(t.clientX,t.clientY),o=t=>{const u=t.touches[0];u&&L(u.clientX,u.clientY)},n=()=>{var t;(t=r.current)==null||t.call(r),j()};r.current=()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",n),r.current=null},document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),document.addEventListener("touchmove",o),document.addEventListener("touchend",n)};p.useEffect(()=>()=>{var e;(e=r.current)==null||e.call(r)},[]);const q=e=>{e.preventDefault(),D()},z=()=>{D()},k=e=>{const o=l?"ArrowLeft":"ArrowUp",n=l?"ArrowRight":"ArrowDown";let t=null;e.key===o?t=_.current-M:e.key===n?t=_.current+M:e.key==="Home"?t=f:e.key==="End"&&(t=h),t!==null&&(e.preventDefault(),w(t),j())};return i.jsxs("div",{ref:R,"data-testid":"split-pane",className:P.default(s.default["tedi-split-pane"],s.default[`tedi-split-pane--${m}`]),children:[i.jsxs("div",{"data-testid":"split-pane-first",className:s.default["tedi-split-pane__pane"],style:{flexGrow:v},children:[a,E==="first"&&i.jsx(A,{direction:m,side:"first"})]}),i.jsxs("div",{role:"separator",tabIndex:0,"aria-orientation":l?"vertical":"horizontal","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":Math.round(v),"aria-label":g("splitPaneResize"),"data-testid":"split-pane-divider",className:s.default["tedi-split-pane__divider"],onMouseDown:q,onTouchStart:z,onKeyDown:k,children:[i.jsx("span",{"data-testid":"split-pane-handle","aria-hidden":!0,className:s.default["tedi-split-pane__handle"],children:i.jsx(I.Icon,{name:l?"code":"unfold_more",size:18})}),y&&i.jsx("div",{className:s.default["tedi-split-pane__close"],children:i.jsx(K.Button,{"data-testid":"split-pane-close",visualType:"secondary",icon:"close",onClick:y,onMouseDown:e=>e.stopPropagation(),children:g("close")})})]}),i.jsxs("div",{"data-testid":"split-pane-second",className:s.default["tedi-split-pane__pane"],style:{flexGrow:100-v},children:[d,E==="second"&&i.jsx(A,{direction:m,side:"second"})]})]})};T.displayName="SplitPane";exports.SplitPane=T;

package/src/community/components/map-components/split-pane/split-pane.d.ts

@@ -0,0 +1,37 @@
+import { JSX, ReactNode } from 'react';
+type PaneSide = 'first' | 'second';
+type SplitPaneDirection = 'horizontal' | 'vertical';
+export interface SplitPaneProps {
+    /** Content of the first (left in horizontal, top in vertical) pane. */
+    first: ReactNode;
+    /** Content of the second (right in horizontal, bottom in vertical) pane. */
+    second: ReactNode;
+    /** Layout axis: `horizontal` places panes side by side, `vertical` stacks them. */
+    direction: SplitPaneDirection;
+    /** Draws an accent ring around the given pane to mark it as active. */
+    highlightedSide?: PaneSide;
+    /** When provided, renders a close button on the divider. */
+    onClose?: () => void;
+    /**
+     * Initial size of the first pane as a percentage of the container, clamped to `minRatio`–`maxRatio`.
+     * @default 50
+     */
+    initialRatio?: number;
+    /**
+     * Minimum size of the first pane, as a percentage of the container.
+     * @default 20
+     */
+    minRatio?: number;
+    /**
+     * Maximum size of the first pane, as a percentage of the container.
+     * @default 80
+     */
+    maxRatio?: number;
+    /** Called with the final ratio (%) when a drag or keyboard adjustment event ends. */
+    onRatioChange?: (ratio: number) => void;
+}
+export declare const SplitPane: {
+    (props: SplitPaneProps): JSX.Element;
+    displayName: string;
+};
+export default SplitPane;