@tedi-design-system/react 14.0.0-rc.1

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface CarouselProps {
+    /**
+     * Number of items visible at once in the carousel viewport.
+     * Determines the width of each item and how many are shown side by side.
+     */
+    itemCountShown: number;
+    /**
+     * React children elements to be rendered inside the carousel.
+     * Typically a list of identical or similar components like cards or items.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional class name to apply custom styling to the outermost carousel wrapper.
+     */
+    className?: string;
+}
+export declare const Carousel: (props: CarouselProps) => JSX.Element;
+export default Carousel;

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

@@ -0,0 +1,41 @@
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import N, { useState as x } from "react";
+import { FloatingButton as n } from "../../../../tedi/components/buttons/floating-button/floating-button.es.js";
+import e from "./carousel.module.scss.es.js";
+const $ = (d) => {
+  const { itemCountShown: l, children: m, className: u } = d, [t, o] = x(0), r = N.Children.toArray(m), i = r.length, _ = () => {
+    t + l < i && o((s) => s + 1);
+  }, p = () => {
+    t > 0 && o((s) => s - 1);
+  }, h = `translateX(-${100 / l * t}%)`;
+  return /* @__PURE__ */ f("div", { className: `${e["tedi-carousel__wrapper"]} ${u ?? ""}`, children: [
+    /* @__PURE__ */ a(
+      n,
+      {
+        className: c(e["tedi-carousel__navigation-button"], e["tedi-carousel__prev"]),
+        onClick: p,
+        visualType: "secondary",
+        disabled: t === 0,
+        icon: "west",
+        children: "Prev"
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: e["tedi-carousel__viewport"], children: /* @__PURE__ */ a("div", { className: e["tedi-carousel__carousel-track"], style: { transform: h }, children: r.map((s, v) => /* @__PURE__ */ a("div", { className: e["tedi-carousel__item"], style: { flex: `0 0 ${100 / l}%` }, children: s }, v)) }) }),
+    /* @__PURE__ */ a(
+      n,
+      {
+        className: c(e["tedi-carousel__navigation-button"], e["tedi-carousel__next"]),
+        onClick: _,
+        visualType: "secondary",
+        disabled: t + l >= i,
+        icon: "east",
+        children: "Next"
+      }
+    )
+  ] });
+};
+export {
+  $ as Carousel,
+  $ as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-carousel__wrapper":"tedi-carousel__wrapper-9e7cafd8","tedi-carousel__navigation-button":"tedi-carousel__navigation-button-2a377f85","tedi-carousel__prev":"tedi-carousel__prev-c7fec9e1","tedi-carousel__next":"tedi-carousel__next-7468527a","tedi-carousel__viewport":"tedi-carousel__viewport-cdcb226d","tedi-carousel__carousel-track":"tedi-carousel__carousel-track-50494510","tedi-carousel__item":"tedi-carousel__item-6b98e123"};exports.default=e;

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

@@ -0,0 +1,12 @@
+const e = {
+  "tedi-carousel__wrapper": "tedi-carousel__wrapper-9e7cafd8",
+  "tedi-carousel__navigation-button": "tedi-carousel__navigation-button-2a377f85",
+  "tedi-carousel__prev": "tedi-carousel__prev-c7fec9e1",
+  "tedi-carousel__next": "tedi-carousel__next-7468527a",
+  "tedi-carousel__viewport": "tedi-carousel__viewport-cdcb226d",
+  "tedi-carousel__carousel-track": "tedi-carousel__carousel-track-50494510",
+  "tedi-carousel__item": "tedi-carousel__item-6b98e123"
+};
+export {
+  e as default
+};

package/src/community/components/map-components/color-and-icon-picker/color-and-icon-picker.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),n=require("../../../../tedi/components/base/icon/icon.cjs.js"),h=require("../../../../tedi/components/content/label/label.cjs.js"),w=require("../../../../tedi/components/buttons/button/button.cjs.js"),s=require("../map-dropdown/map-dropdown.cjs.js"),a=require("./color-and-icon-picker.module.scss.cjs.js"),v=f=>{const{options:r,selectedValue:o,onSelect:t,type:c,label:m,name:i,layout:u="row",showLabels:_=!1,showInline:p=!1}=f,k=r.find(e=>e.value===o)||r[0],x=e=>l.jsx("div",{className:d.default(a.default["tedi-color-and-icon-picker__visual--selected"],{[a.default["tedi-color-and-icon-picker__visual--none"]]:e.value==="none"}),style:c==="color"?{backgroundColor:e.color}:{},children:c==="icon"&&e.icon&&l.jsx(n.Icon,{name:e.icon})}),j=e=>l.jsx("div",{className:a.default["tedi-color-and-icon-picker__dropdown-item"],role:"option","aria-selected":e.value===o,children:l.jsx(l.Fragment,{children:_?l.jsxs("div",{className:a.default["tedi-color-and-icon-picker__dropdown-item"],children:[c==="icon"&&e.icon&&l.jsx(n.Icon,{name:e.icon,className:a.default["tedi-visual-option__icon"]}),e.label??e.value]}):l.jsx("div",{className:d.default(a.default["tedi-color-and-icon-picker__visual"],{[a.default["tedi-color-and-icon-picker__visual--active"]]:e.value===o,[a.default["tedi-color-and-icon-picker__visual--none"]]:e.value==="none",[a.default[`tedi-color-and-icon-picker__visual--${c}`]]:c}),style:e.value!=="none"&&c==="color"?{backgroundColor:e.color}:{},children:c==="icon"&&e.icon&&l.jsx(n.Icon,{name:e.icon,color:"secondary"})})})}),b=r.map(e=>({children:j(e),onClick:()=>t(e.value),isActive:e.value===o}));return l.jsxs(l.Fragment,{children:[l.jsx(h.Label,{htmlFor:i,...m}),p?l.jsx("div",{className:d.default(a.default["tedi-color-and-icon-picker__wrapper"],a.default["tedi-color-and-icon-picker__inline"],a.default[`tedi-color-and-icon-picker__layout--${u}`]),role:"listbox","aria-labelledby":i,children:r.map(e=>l.jsx("button",{type:"button",className:d.default(a.default["tedi-color-and-icon-picker__visual"],{[a.default["tedi-color-and-icon-picker__visual--active"]]:e.value===o,[a.default["tedi-color-and-icon-picker__visual--none"]]:e.value==="none",[a.default[`tedi-color-and-icon-picker__visual--${c}`]]:c}),style:e.value!=="none"&&c==="color"?{backgroundColor:e.color}:{},onClick:()=>t(e.value),"aria-selected":e.value===o,role:"option",children:c==="icon"&&e.icon&&l.jsx(n.Icon,{name:e.icon,className:a.default["tedi-visual-option__icon"]})},e.value))}):l.jsxs(s.MapDropdown,{className:_?"":a.default["tedi-color-and-icon-picker__wrapper"],layout:u,children:[l.jsx(s.MapDropdown.Trigger,{children:l.jsxs(w.Button,{className:a.default["tedi-color-and-icon-picker"],"aria-haspopup":"listbox","aria-expanded":"false",noStyle:!0,children:[x(k),l.jsx(n.Icon,{name:"arrow_drop_down"})]})}),l.jsx(s.MapDropdown.Content,{items:b})]}),i&&l.jsx("input",{type:"hidden",name:i,value:o})]})};exports.ColorAndIconPicker=v;exports.default=v;

package/src/community/components/map-components/color-and-icon-picker/color-and-icon-picker.d.ts

@@ -0,0 +1,60 @@
+import { LabelProps } from '../../../../tedi';
+interface VisualOption {
+    /**
+     * Unique identifier for the option. Used as the value submitted in forms and selected tracking.
+     */
+    value: string;
+    /**
+     * Optional human-readable label for the option.
+     */
+    label?: string;
+    /**
+     * Optional color value (hex, rgb, etc.), used only when type is `'color'`.
+     */
+    color?: string;
+    /**
+     * Optional icon name (from icon system), used only when type is `'icon'`.
+     */
+    icon?: string;
+}
+export interface ColorAndIconPickerProps {
+    /**
+     * Array of visual options to display in the selector.
+     * Each option may include a value, label, color (for color type), or icon (for icon type).
+     */
+    options: VisualOption[];
+    /**
+     * Currently selected option's value.
+     * This value is matched against the `options` array to determine which option is active.
+     */
+    selectedValue: string;
+    /**
+     * Callback function that is triggered when an option is selected.
+     * Receives the selected option's value as a parameter.
+     */
+    onSelect: (value: string) => void;
+    /**
+     * Type of visual representation to render.
+     * Can be either `'color'` (displays color swatches) or `'icon'` (displays icons).
+     */
+    type: 'color' | 'icon';
+    /**
+     * Optional custom class name to apply to the root element for additional styling.
+     */
+    className?: string;
+    /**
+     * Optional props passed to the label component.
+     * Includes common label options like `children`, `required`, or `bold`.
+     */
+    label?: LabelProps;
+    /**
+     * Name for the hidden input field, used for form submission.
+     * Also used to associate the label with the component.
+     */
+    name: string;
+    layout?: 'row' | 'column';
+    showLabels?: boolean;
+    showInline?: boolean;
+}
+export declare const ColorAndIconPicker: (props: ColorAndIconPickerProps) => JSX.Element;
+export default ColorAndIconPicker;

package/src/community/components/map-components/color-and-icon-picker/color-and-icon-picker.es.js

@@ -0,0 +1,107 @@
+import { jsxs as d, Fragment as v, jsx as o } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { Icon as i } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Label as N } from "../../../../tedi/components/content/label/label.es.js";
+import { Button as C } from "../../../../tedi/components/buttons/button/button.es.js";
+import { MapDropdown as t } from "../map-dropdown/map-dropdown.es.js";
+import c from "./color-and-icon-picker.module.scss.es.js";
+const A = (p) => {
+  const {
+    options: r,
+    selectedValue: a,
+    onSelect: u,
+    type: l,
+    label: k,
+    name: n,
+    layout: m = "row",
+    showLabels: _ = !1,
+    showInline: h = !1
+  } = p, b = r.find((e) => e.value === a) || r[0], f = (e) => /* @__PURE__ */ o(
+    "div",
+    {
+      className: s(c["tedi-color-and-icon-picker__visual--selected"], {
+        [c["tedi-color-and-icon-picker__visual--none"]]: e.value === "none"
+      }),
+      style: l === "color" ? { backgroundColor: e.color } : {},
+      children: l === "icon" && e.icon && /* @__PURE__ */ o(i, { name: e.icon })
+    }
+  ), w = (e) => /* @__PURE__ */ o(
+    "div",
+    {
+      className: c["tedi-color-and-icon-picker__dropdown-item"],
+      role: "option",
+      "aria-selected": e.value === a,
+      children: /* @__PURE__ */ o(v, { children: _ ? /* @__PURE__ */ d("div", { className: c["tedi-color-and-icon-picker__dropdown-item"], children: [
+        l === "icon" && e.icon && /* @__PURE__ */ o(i, { name: e.icon, className: c["tedi-visual-option__icon"] }),
+        e.label ?? e.value
+      ] }) : /* @__PURE__ */ o(
+        "div",
+        {
+          className: s(c["tedi-color-and-icon-picker__visual"], {
+            [c["tedi-color-and-icon-picker__visual--active"]]: e.value === a,
+            [c["tedi-color-and-icon-picker__visual--none"]]: e.value === "none",
+            [c[`tedi-color-and-icon-picker__visual--${l}`]]: l
+          }),
+          style: e.value !== "none" && l === "color" ? { backgroundColor: e.color } : {},
+          children: l === "icon" && e.icon && /* @__PURE__ */ o(i, { name: e.icon, color: "secondary" })
+        }
+      ) })
+    }
+  ), y = r.map((e) => ({
+    children: w(e),
+    onClick: () => u(e.value),
+    isActive: e.value === a
+  }));
+  return /* @__PURE__ */ d(v, { children: [
+    /* @__PURE__ */ o(N, { htmlFor: n, ...k }),
+    h ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: s(
+          c["tedi-color-and-icon-picker__wrapper"],
+          c["tedi-color-and-icon-picker__inline"],
+          c[`tedi-color-and-icon-picker__layout--${m}`]
+        ),
+        role: "listbox",
+        "aria-labelledby": n,
+        children: r.map((e) => /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            className: s(c["tedi-color-and-icon-picker__visual"], {
+              [c["tedi-color-and-icon-picker__visual--active"]]: e.value === a,
+              [c["tedi-color-and-icon-picker__visual--none"]]: e.value === "none",
+              [c[`tedi-color-and-icon-picker__visual--${l}`]]: l
+            }),
+            style: e.value !== "none" && l === "color" ? { backgroundColor: e.color } : {},
+            onClick: () => u(e.value),
+            "aria-selected": e.value === a,
+            role: "option",
+            children: l === "icon" && e.icon && /* @__PURE__ */ o(i, { name: e.icon, className: c["tedi-visual-option__icon"] })
+          },
+          e.value
+        ))
+      }
+    ) : /* @__PURE__ */ d(t, { className: _ ? "" : c["tedi-color-and-icon-picker__wrapper"], layout: m, children: [
+      /* @__PURE__ */ o(t.Trigger, { children: /* @__PURE__ */ d(
+        C,
+        {
+          className: c["tedi-color-and-icon-picker"],
+          "aria-haspopup": "listbox",
+          "aria-expanded": "false",
+          noStyle: !0,
+          children: [
+            f(b),
+            /* @__PURE__ */ o(i, { name: "arrow_drop_down" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(t.Content, { items: y })
+    ] }),
+    n && /* @__PURE__ */ o("input", { type: "hidden", name: n, value: a })
+  ] });
+};
+export {
+  A as ColorAndIconPicker,
+  A as default
+};

package/src/community/components/map-components/color-and-icon-picker/color-and-icon-picker.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-color-and-icon-picker":"tedi-color-and-icon-picker-b8362396","tedi-color-and-icon-picker__items":"tedi-color-and-icon-picker__items-b5ae3bc9","tedi-color-and-icon-picker__wrapper":"tedi-color-and-icon-picker__wrapper-c9b18cda","tedi-color-and-icon-picker__inline":"tedi-color-and-icon-picker__inline-99f63b11","tedi-visual-option__icon":"tedi-visual-option__icon-ff8fa384","tedi-color-and-icon-picker__dropdown-item":"tedi-color-and-icon-picker__dropdown-item-50e2443a","tedi-color-and-icon-picker__visual":"tedi-color-and-icon-picker__visual-2a81eeae","tedi-color-and-icon-picker__visual--icon":"tedi-color-and-icon-picker__visual--icon-9c28cc34","tedi-color-and-icon-picker__visual--color":"tedi-color-and-icon-picker__visual--color-e386b18f","tedi-color-and-icon-picker__visual--selected":"tedi-color-and-icon-picker__visual--selected-8607d458","tedi-color-and-icon-picker__visual--none":"tedi-color-and-icon-picker__visual--none-a1d3ad07","tedi-color-and-icon-picker__visual--active":"tedi-color-and-icon-picker__visual--active-b753ddbc"};exports.default=i;

package/src/community/components/map-components/color-and-icon-picker/color-and-icon-picker.module.scss.es.js

@@ -0,0 +1,17 @@
+const i = {
+  "tedi-color-and-icon-picker": "tedi-color-and-icon-picker-b8362396",
+  "tedi-color-and-icon-picker__items": "tedi-color-and-icon-picker__items-b5ae3bc9",
+  "tedi-color-and-icon-picker__wrapper": "tedi-color-and-icon-picker__wrapper-c9b18cda",
+  "tedi-color-and-icon-picker__inline": "tedi-color-and-icon-picker__inline-99f63b11",
+  "tedi-visual-option__icon": "tedi-visual-option__icon-ff8fa384",
+  "tedi-color-and-icon-picker__dropdown-item": "tedi-color-and-icon-picker__dropdown-item-50e2443a",
+  "tedi-color-and-icon-picker__visual": "tedi-color-and-icon-picker__visual-2a81eeae",
+  "tedi-color-and-icon-picker__visual--icon": "tedi-color-and-icon-picker__visual--icon-9c28cc34",
+  "tedi-color-and-icon-picker__visual--color": "tedi-color-and-icon-picker__visual--color-e386b18f",
+  "tedi-color-and-icon-picker__visual--selected": "tedi-color-and-icon-picker__visual--selected-8607d458",
+  "tedi-color-and-icon-picker__visual--none": "tedi-color-and-icon-picker__visual--none-a1d3ad07",
+  "tedi-color-and-icon-picker__visual--active": "tedi-color-and-icon-picker__visual--active-b753ddbc"
+};
+export {
+  i as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),$=require("../../../../tedi/components/base/icon/icon.cjs.js"),k=require("../../../../tedi/components/buttons/button/button.cjs.js"),t=require("./comparison.module.scss.cjs.js"),v=require("../../../../tedi/helpers/hooks/use-breakpoint.cjs.js"),C=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),g=y=>{const{left:x,right:M,primary:h,width:a,height:l,position:p="relative",onClose:m}=y,d=_.useRef(null),b=v.useBreakpoint(),[i,j]=_.useState(50),s=v.isBreakpointBelow(b,"md"),{getLabel:w}=C.useLabels(),c=(e,o)=>{if(!d.current)return;const r=d.current.getBoundingClientRect(),B=s?(o-r.top)/r.height*100:(e-r.left)/r.width*100;j(Math.max(0,Math.min(B,100)))},q=e=>{e.buttons===1&&c(e.clientX,e.clientY)},N=e=>{c(e.clientX,e.clientY)},P=e=>{const o=e.touches[0];o&&c(o.clientX,o.clientY)},S=e=>{const o=e.touches[0];o&&c(o.clientX,o.clientY)},f=s?`inset(0 0 ${100-i}% 0)`:`inset(0 ${100-i}% 0 0)`;return n.jsxs("div",{className:u.default(t.default["tedi-comparison__wrapper"],t.default[`tedi-comparison__wrapper--${p}`]),ref:d,onMouseMove:q,onMouseDown:N,onTouchMove:P,onTouchStart:S,style:{width:typeof a=="number"?`${a}px`:a??"100%",height:typeof l=="number"?`${l}px`:l??"100%",position:p,overflow:"hidden",touchAction:"none"},children:[n.jsx("div",{className:u.default(t.default["tedi-comparison__layer"],{[t.default["tedi-comparison__primary"]]:h==="right"}),children:M}),n.jsx("div",{className:u.default(t.default["tedi-comparison__layer"],{[t.default["tedi-comparison__primary"]]:h==="left"}),style:{clipPath:f,WebkitClipPath:f},children:x}),n.jsxs("div",{className:t.default["tedi-comparison__drag-indicator"],style:{left:s?void 0:`${i}%`,top:s?`${i}%`:void 0},children:[n.jsx("div",{className:t.default["tedi-comparison__drag-line"]}),n.jsx("div",{className:t.default["tedi-comparison__drag-handle"],children:n.jsx($.Icon,{name:"code",size:18,className:t.default["tedi-comparison__drag-handle__icon"]})}),m&&n.jsx(k.Button,{visualType:"secondary",className:t.default["tedi-comparison__close-button"],onClick:m,icon:"close",children:w("close")})]})]})};exports.Comparison=g;exports.default=g;

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

@@ -0,0 +1,40 @@
+import React, { JSX } from 'react';
+export interface ComparisonProps {
+    /**
+     * React node rendered on the left side of the comparison view.
+     */
+    left: React.ReactNode;
+    /**
+     * React node rendered on the right side of the comparison view.
+     */
+    right: React.ReactNode;
+    /**
+     * Which side is treated as the primary content.
+     * This may influence styling or overlay behavior.
+     * Defaults to 'left' if not specified.
+     */
+    primary?: 'left' | 'right';
+    /**
+     * Width of the comparison container.
+     * Accepts string (e.g., "100%", "400px") or number (pixels).
+     */
+    width?: string | number;
+    /**
+     * Height of the comparison container.
+     * Accepts string or number, similar to width.
+     */
+    height?: string | number;
+    /**
+     * CSS position property for the container.
+     * Determines how the component is positioned in the layout.
+     * Defaults to 'relative'.
+     */
+    position?: 'relative' | 'absolute' | 'fixed' | 'static';
+    /**
+     * Optional close handler. When provided, a close button is displayed,
+     * and the handler is called when the button is clicked.
+     */
+    onClose?: () => void;
+}
+export declare const Comparison: (props: ComparisonProps) => JSX.Element;
+export default Comparison;

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

@@ -0,0 +1,95 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import m from "../../../../../external/classnames/index.es.js";
+import { useRef as S, useState as k } from "react";
+import { Icon as C } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Button as T } from "../../../../tedi/components/buttons/button/button.es.js";
+import t from "./comparison.module.scss.es.js";
+import { useBreakpoint as X, isBreakpointBelow as Y } from "../../../../tedi/helpers/hooks/use-breakpoint.es.js";
+import { useLabels as R } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+const E = (v) => {
+  const { left: y, right: g, primary: p, width: a, height: l, position: h = "relative", onClose: u } = v, d = S(null), M = X(), [n, w] = k(50), r = Y(M, "md"), { getLabel: N } = R(), c = (e, o) => {
+    if (!d.current) return;
+    const s = d.current.getBoundingClientRect(), B = r ? (o - s.top) / s.height * 100 : (e - s.left) / s.width * 100;
+    w(Math.max(0, Math.min(B, 100)));
+  }, b = (e) => {
+    e.buttons === 1 && c(e.clientX, e.clientY);
+  }, P = (e) => {
+    c(e.clientX, e.clientY);
+  }, $ = (e) => {
+    const o = e.touches[0];
+    o && c(o.clientX, o.clientY);
+  }, x = (e) => {
+    const o = e.touches[0];
+    o && c(o.clientX, o.clientY);
+  }, _ = r ? `inset(0 0 ${100 - n}% 0)` : `inset(0 ${100 - n}% 0 0)`;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: m(t["tedi-comparison__wrapper"], t[`tedi-comparison__wrapper--${h}`]),
+      ref: d,
+      onMouseMove: b,
+      onMouseDown: P,
+      onTouchMove: $,
+      onTouchStart: x,
+      style: {
+        width: typeof a == "number" ? `${a}px` : a ?? "100%",
+        height: typeof l == "number" ? `${l}px` : l ?? "100%",
+        position: h,
+        overflow: "hidden",
+        touchAction: "none"
+      },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: m(t["tedi-comparison__layer"], {
+              [t["tedi-comparison__primary"]]: p === "right"
+            }),
+            children: g
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: m(t["tedi-comparison__layer"], {
+              [t["tedi-comparison__primary"]]: p === "left"
+            }),
+            style: {
+              clipPath: _,
+              WebkitClipPath: _
+            },
+            children: y
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: t["tedi-comparison__drag-indicator"],
+            style: {
+              left: r ? void 0 : `${n}%`,
+              top: r ? `${n}%` : void 0
+            },
+            children: [
+              /* @__PURE__ */ i("div", { className: t["tedi-comparison__drag-line"] }),
+              /* @__PURE__ */ i("div", { className: t["tedi-comparison__drag-handle"], children: /* @__PURE__ */ i(C, { name: "code", size: 18, className: t["tedi-comparison__drag-handle__icon"] }) }),
+              u && /* @__PURE__ */ i(
+                T,
+                {
+                  visualType: "secondary",
+                  className: t["tedi-comparison__close-button"],
+                  onClick: u,
+                  icon: "close",
+                  children: N("close")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as Comparison,
+  E as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-comparison__wrapper":"tedi-comparison__wrapper-0f1063b1","tedi-comparison__wrapper--relative":"tedi-comparison__wrapper--relative-a969c016","tedi-comparison__wrapper--absolute":"tedi-comparison__wrapper--absolute-a5871022","tedi-comparison__wrapper--fixed":"tedi-comparison__wrapper--fixed-f41d7388","tedi-comparison__wrapper--static":"tedi-comparison__wrapper--static-bcee804f","tedi-comparison__layer":"tedi-comparison__layer-bf5bc81e","tedi-comparison__drag-indicator":"tedi-comparison__drag-indicator-9ee73d38","tedi-comparison__primary":"tedi-comparison__primary-a8d49f7f","tedi-comparison__drag-line":"tedi-comparison__drag-line-b8da7127","tedi-comparison__drag-handle":"tedi-comparison__drag-handle-fae92e8b","tedi-comparison__drag-handle__icon":"tedi-comparison__drag-handle__icon-b363ee52","tedi-comparison__close-button":"tedi-comparison__close-button-911beac0"};exports.default=e;

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

@@ -0,0 +1,17 @@
+const a = {
+  "tedi-comparison__wrapper": "tedi-comparison__wrapper-0f1063b1",
+  "tedi-comparison__wrapper--relative": "tedi-comparison__wrapper--relative-a969c016",
+  "tedi-comparison__wrapper--absolute": "tedi-comparison__wrapper--absolute-a5871022",
+  "tedi-comparison__wrapper--fixed": "tedi-comparison__wrapper--fixed-f41d7388",
+  "tedi-comparison__wrapper--static": "tedi-comparison__wrapper--static-bcee804f",
+  "tedi-comparison__layer": "tedi-comparison__layer-bf5bc81e",
+  "tedi-comparison__drag-indicator": "tedi-comparison__drag-indicator-9ee73d38",
+  "tedi-comparison__primary": "tedi-comparison__primary-a8d49f7f",
+  "tedi-comparison__drag-line": "tedi-comparison__drag-line-b8da7127",
+  "tedi-comparison__drag-handle": "tedi-comparison__drag-handle-fae92e8b",
+  "tedi-comparison__drag-handle__icon": "tedi-comparison__drag-handle__icon-b363ee52",
+  "tedi-comparison__close-button": "tedi-comparison__close-button-911beac0"
+};
+export {
+  a as default
+};

package/src/community/components/map-components/directions/direction-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("../../../../../external/@dnd-kit/sortable/dist/sortable.esm.cjs.js"),j=require("../../../../../external/@dnd-kit/utilities/dist/utilities.esm.cjs.js"),x=require("../../../../tedi/components/base/icon/icon.cjs.js"),q=require("../../../../tedi/components/buttons/closing-button/closing-button.cjs.js"),t=require("./directions.module.scss.cjs.js"),N=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),s=r=>{const{id:o,children:n,onDelete:i,isDragging:a=!1,showAboveIndicator:d=!1,showBelowIndicator:c=!1}=r,{getLabel:l}=N.useLabels(),{attributes:u,listeners:m,setNodeRef:_,transform:f,transition:g}=v.useSortable({id:o}),b={transform:j.CSS.Transform.toString(f),transition:g};return e.jsxs("div",{ref:_,className:`${t.default["tedi-directions__item"]} ${a?t.default["tedi-directions__item--dragging"]:""}`,style:b,children:[e.jsxs("div",{className:t.default["tedi-directions__content"],children:[d&&e.jsx("div",{className:t.default["tedi-directions__drop-indicator"]}),n,e.jsx("div",{className:t.default["tedi-directions__drag-icon"],...u,...m,children:e.jsx(x.Icon,{name:"drag_indicator",size:12,background:"brand-secondary"})}),c&&e.jsx("div",{className:t.default["tedi-directions__drop-indicator"]})]}),i&&e.jsx(q.ClosingButton,{className:t.default["tedi-directions__remove"],onClick:i,"aria-label":l("remove")})]})};exports.DirectionItem=s;exports.default=s;

package/src/community/components/map-components/directions/direction-item.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'react';
+export type DirectionItemProps = {
+    /**
+     * Unique identifier for the direction item, used by the drag-and-drop system.
+     */
+    id: string;
+    /**
+     * Callback triggered when the item's remove (delete) button is clicked.
+     */
+    onDelete?: () => void;
+    /**
+     * Children nodes to be rendered inside the item.
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates whether the item is currently being dragged.
+     */
+    isDragging?: boolean;
+    /**
+     * If true, show a visual indicator above the item during drag operations.
+     */
+    showAboveIndicator?: boolean;
+    /**
+     * If true, show a visual indicator below the item during drag operations.
+     */
+    showBelowIndicator?: boolean;
+};
+export declare const DirectionItem: (props: DirectionItemProps) => JSX.Element;
+export default DirectionItem;

package/src/community/components/map-components/directions/direction-item.es.js

@@ -0,0 +1,41 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { useSortable as v } from "../../../../../external/@dnd-kit/sortable/dist/sortable.esm.es.js";
+import { CSS as u } from "../../../../../external/@dnd-kit/utilities/dist/utilities.esm.es.js";
+import { Icon as N } from "../../../../tedi/components/base/icon/icon.es.js";
+import { ClosingButton as h } from "../../../../tedi/components/buttons/closing-button/closing-button.es.js";
+import e from "./directions.module.scss.es.js";
+import { useLabels as I } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+const k = (o) => {
+  const { id: s, children: n, onDelete: r, isDragging: a = !1, showAboveIndicator: d = !1, showBelowIndicator: c = !1 } = o, { getLabel: m } = I(), { attributes: l, listeners: f, setNodeRef: _, transform: g, transition: p } = v({ id: s }), b = {
+    transform: u.Transform.toString(g),
+    transition: p
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: _,
+      className: `${e["tedi-directions__item"]} ${a ? e["tedi-directions__item--dragging"] : ""}`,
+      style: b,
+      children: [
+        /* @__PURE__ */ t("div", { className: e["tedi-directions__content"], children: [
+          d && /* @__PURE__ */ i("div", { className: e["tedi-directions__drop-indicator"] }),
+          n,
+          /* @__PURE__ */ i("div", { className: e["tedi-directions__drag-icon"], ...l, ...f, children: /* @__PURE__ */ i(N, { name: "drag_indicator", size: 12, background: "brand-secondary" }) }),
+          c && /* @__PURE__ */ i("div", { className: e["tedi-directions__drop-indicator"] })
+        ] }),
+        r && /* @__PURE__ */ i(
+          h,
+          {
+            className: e["tedi-directions__remove"],
+            onClick: r,
+            "aria-label": m("remove")
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  k as DirectionItem,
+  k as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("../../../../../external/@dnd-kit/core/dist/core.esm.cjs.js"),x=require("../../../../../external/@dnd-kit/sortable/dist/sortable.esm.cjs.js"),r=require("react"),N=require("../../../../tedi/components/buttons/button/button.cjs.js"),f=require("./direction-item.cjs.js"),a=require("./directions.module.scss.cjs.js"),g=({children:h,onChange:u})=>{const j=d.useSensors(d.useSensor(d.PointerSensor)),[m,p]=r.useState(null),[_,v]=r.useState(null),n=r.Children.toArray(h).filter(e=>r.isValidElement(e)&&e.type===f.DirectionItem).map(e=>({id:e.props.id,element:e.props.children})),b=e=>{p(e.active.id)},w=e=>{var t;v(((t=e.over)==null?void 0:t.id)||null)},y=e=>{const{active:t,over:i}=e;if(p(null),v(null),i&&t.id!==i.id){const c=n.findIndex(o=>o.id===t.id),l=n.findIndex(o=>o.id===i.id),D=x.arrayMove(n,c,l);u(D)}},C=e=>{const t=n.filter(i=>i.id!==e);u(t)},q=()=>{n.length===2&&u([n[1],n[0]])};return s.jsx(d.DndContext,{sensors:j,collisionDetection:d.closestCenter,onDragStart:b,onDragEnd:y,onDragOver:w,onDragCancel:()=>{p(null),v(null)},children:s.jsx(x.SortableContext,{items:n.map(e=>e.id),strategy:x.verticalListSortingStrategy,children:s.jsxs("div",{className:a.default["tedi-directions"],children:[s.jsx("div",{className:a.default["tedi-directions__items"],children:r.Children.map(h,e=>{if(!r.isValidElement(e)||e.type!==f.DirectionItem)return e;const t=e.props,i=_===t.id&&m!==t.id,c=n.findIndex(I=>I.id===m),l=n.findIndex(I=>I.id===_),D=i&&c>l,o=i&&c<l;return s.jsx("div",{className:a.default["tedi-directions__item-wrapper"],children:r.cloneElement(e,{onDelete:()=>C(t.id),isDragging:m===t.id,showAboveIndicator:D,showBelowIndicator:o})},t.id)})}),n.length===2&&s.jsx("div",{className:a.default["tedi-directions__swap-container"],children:s.jsx(N.Button,{visualType:"neutral",onClick:q,icon:"swap_vert","aria-label":"Vaheta asukohad",className:a.default["tedi-directions__swap-button"],children:"Vaheta asukohad"})})]})})})};g.displayName="Directions";const S=Object.assign(g,{Item:f.DirectionItem});exports.Directions=S;exports.DirectionsComponent=g;exports.default=S;

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

@@ -0,0 +1,27 @@
+import { JSX, ReactNode } from 'react';
+import { DirectionItemProps } from './direction-item';
+export type DirectionsProps = {
+    /**
+     * Children DirectionItem components to render and manage.
+     */
+    children: ReactNode;
+    /**
+     * Callback fired when the list of direction items changes
+     * (e.g., due to adding, deleting, or reordering items).
+     */
+    onChange: (items: {
+        id: string;
+        element: ReactNode;
+    }[]) => void;
+};
+export declare const DirectionsComponent: {
+    ({ children, onChange }: DirectionsProps): JSX.Element;
+    displayName: string;
+};
+export declare const Directions: {
+    ({ children, onChange }: DirectionsProps): JSX.Element;
+    displayName: string;
+} & {
+    Item: (props: DirectionItemProps) => JSX.Element;
+};
+export default Directions;

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

@@ -0,0 +1,75 @@
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
+import { useSensors as E, useSensor as j, DndContext as k, closestCenter as A, PointerSensor as V } from "../../../../../external/@dnd-kit/core/dist/core.esm.es.js";
+import { SortableContext as B, verticalListSortingStrategy as P, arrayMove as L } from "../../../../../external/@dnd-kit/sortable/dist/sortable.esm.es.js";
+import g, { Children as h, isValidElement as x, cloneElement as M } from "react";
+import { Button as R } from "../../../../tedi/components/buttons/button/button.es.js";
+import { DirectionItem as f } from "./direction-item.es.js";
+import s from "./directions.module.scss.es.js";
+const S = ({ children: D, onChange: c }) => {
+  const _ = E(j(V)), [l, m] = g.useState(null), [I, p] = g.useState(null), n = h.toArray(D).filter((e) => x(e) && e.type === f).map((e) => ({
+    id: e.props.id,
+    element: e.props.children
+  })), w = (e) => {
+    m(e.active.id);
+  }, y = (e) => {
+    var t;
+    p(((t = e.over) == null ? void 0 : t.id) || null);
+  }, C = (e) => {
+    const { active: t, over: i } = e;
+    if (m(null), p(null), i && t.id !== i.id) {
+      const d = n.findIndex((r) => r.id === t.id), a = n.findIndex((r) => r.id === i.id), u = L(n, d, a);
+      c(u);
+    }
+  }, N = (e) => {
+    const t = n.filter((i) => i.id !== e);
+    c(t);
+  }, b = () => {
+    n.length === 2 && c([n[1], n[0]]);
+  };
+  return /* @__PURE__ */ o(
+    k,
+    {
+      sensors: _,
+      collisionDetection: A,
+      onDragStart: w,
+      onDragEnd: C,
+      onDragOver: y,
+      onDragCancel: () => {
+        m(null), p(null);
+      },
+      children: /* @__PURE__ */ o(B, { items: n.map((e) => e.id), strategy: P, children: /* @__PURE__ */ O("div", { className: s["tedi-directions"], children: [
+        /* @__PURE__ */ o("div", { className: s["tedi-directions__items"], children: h.map(D, (e) => {
+          if (!x(e) || e.type !== f)
+            return e;
+          const t = e.props, i = I === t.id && l !== t.id, d = n.findIndex((v) => v.id === l), a = n.findIndex((v) => v.id === I), u = i && d > a, r = i && d < a;
+          return /* @__PURE__ */ o("div", { className: s["tedi-directions__item-wrapper"], children: M(e, {
+            onDelete: () => N(t.id),
+            isDragging: l === t.id,
+            showAboveIndicator: u,
+            showBelowIndicator: r
+          }) }, t.id);
+        }) }),
+        n.length === 2 && /* @__PURE__ */ o("div", { className: s["tedi-directions__swap-container"], children: /* @__PURE__ */ o(
+          R,
+          {
+            visualType: "neutral",
+            onClick: b,
+            icon: "swap_vert",
+            "aria-label": "Vaheta asukohad",
+            className: s["tedi-directions__swap-button"],
+            children: "Vaheta asukohad"
+          }
+        ) })
+      ] }) })
+    }
+  );
+};
+S.displayName = "Directions";
+const K = Object.assign(S, {
+  Item: f
+});
+export {
+  K as Directions,
+  S as DirectionsComponent,
+  K as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-directions__item":"tedi-directions__item-01a3f552","tedi-directions__remove":"tedi-directions__remove-69455d3f","tedi-directions__item--dragging":"tedi-directions__item--dragging-aa5a708f","tedi-directions__content":"tedi-directions__content-d5ddb002","tedi-directions__drag-icon":"tedi-directions__drag-icon-bc898cc5","tedi-directions__items":"tedi-directions__items-df89cc27","tedi-directions__item-wrapper":"tedi-directions__item-wrapper-b5bb1490","tedi-directions__drop-indicator":"tedi-directions__drop-indicator-ffc3269e","tedi-directions":"tedi-directions-82587a57"};exports.default=i;