@zeniai/web-components 3.16.99 → 3.17.1

package/dist/TimeRangeSwitcher-Cc17kflM.js

@@ -0,0 +1,265 @@
+import { j as t, A, k as z, aF as K, as as V } from "./vendor-.pnpm-B2klaOGU.js";
+import * as x from "react";
+import { createRef as q, useRef as T, useState as I, useEffect as y, useLayoutEffect as G } from "react";
+import g from "@emotion/styled";
+import Y from "react-dom";
+import { S as c, F as J } from "./index-DOPIZEh4.js";
+import { c as Q } from "./CollapsableReportTable-DRtxT8wE.js";
+const U = (e) => /* @__PURE__ */ x.createElement("svg", { width: 12, height: 40, viewBox: "0 0 12 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.createElement("path", { d: "M12 40H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h8v40z" }), /* @__PURE__ */ x.createElement("path", { d: "M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z", fill: "currentColor" })), X = (e) => /* @__PURE__ */ x.createElement("svg", { width: 12, height: 40, viewBox: "0 0 12 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.createElement("path", { d: "M0 0h8a4 4 0 0 1 4 4v32a4 4 0 0 1-4 4H0V0z" }), /* @__PURE__ */ x.createElement("path", { d: "M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z", fill: "currentColor" })), p = 40, d = 90, Z = g.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: ${p}px;
+  box-sizing: content-box;
+  width: 100%;
+  border-top: 1px solid ${(e) => e.theme.colors.grey3};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, ee = g.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${d}px;
+  height: ${p}px;
+  max-height: ${p}px;
+  color: ${(e) => e.isEnabled && e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.isEnabled ? e.theme.colors.primary : e.theme.colors.hero};
+  }
+  cursor: ${(e) => e.isEnabled ? "pointer" : "default"};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.background : "transparent"};
+`, te = g(V)`
+  display: flex;
+  position: relative;
+  scrollbar-width: none;
+`, ne = g(J)``, re = g.div`
+  top: ${c.sp0};
+  left: ${c.sp0};
+  width: calc(${(e) => d * e.numberOfTicksSelected}px);
+  position: absolute;
+  height: ${p}px;
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  .slider-icon {
+    fill: ${(e) => e.theme.colors.grey1};
+  }
+  border-radius: ${c.sp2};
+  border-left: ${c.sp0};
+  border-right: ${c.sp0};
+  &:hover {
+    border: 1px solid ${(e) => e.theme.colors.primary};
+    border-radius: ${c.sp2};
+    border-left: ${c.sp0};
+    border-right: ${c.sp0};
+    .slider-icon {
+      fill: ${(e) => e.theme.colors.primary};
+    }
+  }
+  line-height: ${c.sp0};
+  pointer-events: none;
+  box-sizing: border-box;
+`, oe = g.div`
+  float: left;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${(e) => e.theme.colors.grey5};
+`, le = g.div`
+  float: right;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${(e) => e.theme.colors.grey5};
+`;
+function R({ iconPosition: e }) {
+  switch (e) {
+    case "left":
+      return /* @__PURE__ */ t.jsx(U, { className: "slider-icon", fill: "currentColor" });
+    case "right":
+      return /* @__PURE__ */ t.jsx(X, { className: "slider-icon", fill: "currentColor" });
+    default:
+      throw Error("Invalid iconPosition");
+  }
+}
+function ie(e) {
+  return Y.createPortal(e.children, e.parentNode);
+}
+function se({
+  enabled: e,
+  firstMonthOfFY: s,
+  timeframe: o,
+  tick: n,
+  tickIndex: u,
+  isSelected: i,
+  onClick: h
+}) {
+  return /* @__PURE__ */ t.jsx(
+    ee,
+    {
+      isEnabled: e,
+      isSelected: i,
+      onClick: () => {
+        h(n, u, o);
+      },
+      children: /* @__PURE__ */ t.jsx(ne, { children: Q(s, n, o) })
+    }
+  );
+}
+function ce(e, s, o, n, u) {
+  const i = s - e, h = Math.floor(e / d) + Math.round(i / d), $ = h + o.length - n.length, m = h + o.length, S = u - m;
+  return {
+    selectedTicks: {
+      fromStart: {
+        startIndex: h,
+        length: o.length
+      },
+      fromEnd: {
+        offsetFromEnd: S,
+        length: o.length
+      }
+    },
+    highlightedOfSelectedTicks: {
+      startIndex: $,
+      length: n.length
+    }
+  };
+}
+function ae(e) {
+  return e.startIndex != null;
+}
+function k(e, s) {
+  let o = { startIndex: 0, length: 0 };
+  if (ae(e))
+    o = e;
+  else {
+    const n = e.length;
+    o = {
+      startIndex: s.length - e.offsetFromEnd - n + 1,
+      length: e.length
+    };
+  }
+  return o;
+}
+function de({
+  width: e,
+  firstMonthOfFY: s,
+  timeframe: o,
+  timeframeTicks: n,
+  isEnabled: u,
+  selection: i,
+  onClick: h,
+  onSelectionChanged: $
+}) {
+  const m = q(), S = T(null), [C, M] = I(!1), [l, L] = I(
+    k(i.selectedTicks, n)
+  ), v = T(l.startIndex);
+  y(() => {
+    v.current = l.startIndex;
+  });
+  const [b, O] = I(i.highlightedOfSelectedTicks), P = (l.startIndex + l.length > n.length ? Math.max(n.length - l.length, 0) : l.startIndex) * d, [w, F] = I({
+    x: P,
+    y: 0
+  });
+  y(() => {
+    M(!0);
+  }, []), y(() => {
+    const r = k(
+      i.selectedTicks,
+      n
+    );
+    if (!z(l, r)) {
+      L(r);
+      const a = r.startIndex * d;
+      F({
+        x: a,
+        y: 0
+      });
+    }
+    z(b, i.highlightedOfSelectedTicks) || O(i.highlightedOfSelectedTicks);
+  }, [l, b, i, n]), G(() => {
+    const { startIndex: r, length: a } = l;
+    m.current?.scrollToItem(
+      v.current <= r ? r + a - 1 : r
+    );
+  }, [m, l]);
+  const N = u !== !1, D = (r, a, f) => {
+    h?.(f, r);
+  }, H = (r, a) => {
+    const f = ce(
+      w.x,
+      a.x,
+      l,
+      b,
+      n.length
+    );
+    $?.(
+      f.selectedTicks,
+      f.highlightedOfSelectedTicks,
+      o,
+      n
+    );
+  }, _ = ({ index: r, style: a }) => {
+    const f = n[r], { startIndex: j, length: W } = b, B = r >= j && r < j + W;
+    return /* @__PURE__ */ t.jsx("div", { style: { ...a }, children: /* @__PURE__ */ t.jsx(
+      se,
+      {
+        enabled: N,
+        firstMonthOfFY: s,
+        timeframe: o,
+        tick: f,
+        tickIndex: r,
+        isSelected: B,
+        onClick: D
+      },
+      r
+    ) });
+  }, E = document.getElementsByClassName("date-range-list")[0];
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      te,
+      {
+        ref: m,
+        height: p,
+        width: e,
+        itemCount: n.length,
+        itemSize: d,
+        layout: "horizontal",
+        className: "date-range-list",
+        style: { overflowY: "hidden" },
+        children: _
+      }
+    ),
+    C === !0 && E != null ? /* @__PURE__ */ t.jsx(ie, { parentNode: E, children: /* @__PURE__ */ t.jsx(
+      K,
+      {
+        axis: "x",
+        defaultPosition: { x: 0, y: 0 },
+        position: w,
+        bounds: {
+          left: 0,
+          right: (n.length - l.length) * d
+        },
+        grid: [1, 0],
+        scale: 1,
+        onStop: H,
+        nodeRef: S,
+        children: /* @__PURE__ */ t.jsxs(
+          re,
+          {
+            numberOfTicksSelected: l.length,
+            ref: S,
+            children: [
+              /* @__PURE__ */ t.jsx(oe, { children: /* @__PURE__ */ t.jsx(R, { iconPosition: "left" }) }),
+              /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(R, { iconPosition: "right" }) })
+            ]
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+function pe(e) {
+  return /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(A, { children: ({ width: s }) => /* @__PURE__ */ t.jsx(de, { ...e, width: s }) }) });
+}
+export {
+  pe as T,
+  p as a
+};

package/dist/TimeRangeSwitcher-D3ScfGZA.cjs

@@ -0,0 +1,64 @@
+"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),l=require("react"),x=require("@emotion/styled"),N=require("react-dom"),a=require("./index-oPmOjv0R.cjs"),F=require("./CollapsableReportTable-CjsHH_xx.cjs");function W(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return s.default=e,Object.freeze(s)}const p=W(l),B=e=>p.createElement("svg",{width:12,height:40,viewBox:"0 0 12 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},p.createElement("path",{d:"M12 40H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h8v40z"}),p.createElement("path",{d:"M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z",fill:"currentColor"})),K=e=>p.createElement("svg",{width:12,height:40,viewBox:"0 0 12 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},p.createElement("path",{d:"M0 0h8a4 4 0 0 1 4 4v32a4 4 0 0 1-4 4H0V0z"}),p.createElement("path",{d:"M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z",fill:"currentColor"})),f=40,h=90,G=x.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: ${f}px;
+  box-sizing: content-box;
+  width: 100%;
+  border-top: 1px solid ${e=>e.theme.colors.grey3};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+`,V=x.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${h}px;
+  height: ${f}px;
+  max-height: ${f}px;
+  color: ${e=>e.isEnabled&&e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.isEnabled?e.theme.colors.primary:e.theme.colors.hero};
+  }
+  cursor: ${e=>e.isEnabled?"pointer":"default"};
+  background-color: ${e=>e.isSelected?e.theme.colors.background:"transparent"};
+`,A=x(t.FixedSizeList)`
+  display: flex;
+  position: relative;
+  scrollbar-width: none;
+`,Y=x(a.SmallRegular)``,J=x.div`
+  top: ${a.Space.sp0};
+  left: ${a.Space.sp0};
+  width: calc(${e=>h*e.numberOfTicksSelected}px);
+  position: absolute;
+  height: ${f}px;
+  border: 1px solid ${e=>e.theme.colors.grey1};
+  .slider-icon {
+    fill: ${e=>e.theme.colors.grey1};
+  }
+  border-radius: ${a.Space.sp2};
+  border-left: ${a.Space.sp0};
+  border-right: ${a.Space.sp0};
+  &:hover {
+    border: 1px solid ${e=>e.theme.colors.primary};
+    border-radius: ${a.Space.sp2};
+    border-left: ${a.Space.sp0};
+    border-right: ${a.Space.sp0};
+    .slider-icon {
+      fill: ${e=>e.theme.colors.primary};
+    }
+  }
+  line-height: ${a.Space.sp0};
+  pointer-events: none;
+  box-sizing: border-box;
+`,Q=x.div`
+  float: left;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${e=>e.theme.colors.grey5};
+`,U=x.div`
+  float: right;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${e=>e.theme.colors.grey5};
+`;function v({iconPosition:e}){switch(e){case"left":return t.jsxRuntimeExports.jsx(B,{className:"slider-icon",fill:"currentColor"});case"right":return t.jsxRuntimeExports.jsx(K,{className:"slider-icon",fill:"currentColor"});default:throw Error("Invalid iconPosition")}}function X(e){return N.createPortal(e.children,e.parentNode)}function Z({enabled:e,firstMonthOfFY:s,timeframe:r,tick:n,tickIndex:m,isSelected:c,onClick:u}){return t.jsxRuntimeExports.jsx(V,{isEnabled:e,isSelected:c,onClick:()=>{u(n,m,r)},children:t.jsxRuntimeExports.jsx(Y,{children:F.getTimeframeTickLabel(s,n,r)})})}function ee(e,s,r,n,m){const c=s-e,u=Math.floor(e/h)+Math.round(c/h),b=u+r.length-n.length,S=u+r.length,E=m-S;return{selectedTicks:{fromStart:{startIndex:u,length:r.length},fromEnd:{offsetFromEnd:E,length:r.length}},highlightedOfSelectedTicks:{startIndex:b,length:n.length}}}function te(e){return e.startIndex!=null}function w(e,s){let r={startIndex:0,length:0};if(te(e))r=e;else{const n=e.length;r={startIndex:s.length-e.offsetFromEnd-n+1,length:e.length}}return r}function ne({width:e,firstMonthOfFY:s,timeframe:r,timeframeTicks:n,isEnabled:m,selection:c,onClick:u,onSelectionChanged:b}){const S=l.createRef(),E=l.useRef(null),[T,z]=l.useState(!1),[i,C]=l.useState(w(c.selectedTicks,n)),R=l.useRef(i.startIndex);l.useEffect(()=>{R.current=i.startIndex});const[j,O]=l.useState(c.highlightedOfSelectedTicks),k=(i.startIndex+i.length>n.length?Math.max(n.length-i.length,0):i.startIndex)*h,[I,M]=l.useState({x:k,y:0});l.useEffect(()=>{z(!0)},[]),l.useEffect(()=>{const o=w(c.selectedTicks,n);if(!t.isEqual(i,o)){C(o);const d=o.startIndex*h;M({x:d,y:0})}t.isEqual(j,c.highlightedOfSelectedTicks)||O(c.highlightedOfSelectedTicks)},[i,j,c,n]),l.useLayoutEffect(()=>{const{startIndex:o,length:d}=i;S.current?.scrollToItem(R.current<=o?o+d-1:o)},[S,i]);const P=m!==!1,L=(o,d,g)=>{u?.(g,o)},_=(o,d)=>{const g=ee(I.x,d.x,i,j,n.length);b?.(g.selectedTicks,g.highlightedOfSelectedTicks,r,n)},q=({index:o,style:d})=>{const g=n[o],{startIndex:$,length:D}=j,H=o>=$&&o<$+D;return t.jsxRuntimeExports.jsx("div",{style:{...d},children:t.jsxRuntimeExports.jsx(Z,{enabled:P,firstMonthOfFY:s,timeframe:r,tick:g,tickIndex:o,isSelected:H,onClick:L},o)})},y=document.getElementsByClassName("date-range-list")[0];return t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(A,{ref:S,height:f,width:e,itemCount:n.length,itemSize:h,layout:"horizontal",className:"date-range-list",style:{overflowY:"hidden"},children:q}),T===!0&&y!=null?t.jsxRuntimeExports.jsx(X,{parentNode:y,children:t.jsxRuntimeExports.jsx(t.Draggable,{axis:"x",defaultPosition:{x:0,y:0},position:I,bounds:{left:0,right:(n.length-i.length)*h},grid:[1,0],scale:1,onStop:_,nodeRef:E,children:t.jsxRuntimeExports.jsxs(J,{numberOfTicksSelected:i.length,ref:E,children:[t.jsxRuntimeExports.jsx(Q,{children:t.jsxRuntimeExports.jsx(v,{iconPosition:"left"})}),t.jsxRuntimeExports.jsx(U,{children:t.jsxRuntimeExports.jsx(v,{iconPosition:"right"})})]})})}):null]})}function re(e){return t.jsxRuntimeExports.jsx(G,{children:t.jsxRuntimeExports.jsx(t.AutoSizer,{children:({width:s})=>t.jsxRuntimeExports.jsx(ne,{...e,width:s})})})}exports.TICK_HEIGHT=f;exports.TimeRangeSwitcher=re;

package/dist/TimeframeSwitcher-Cqw_X0jJ.js

@@ -0,0 +1,103 @@
+import { j as o } from "./vendor-.pnpm-B2klaOGU.js";
+import c from "@emotion/styled";
+import { S as t, F as u, a as g } from "./index-DOPIZEh4.js";
+const S = c.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.background};
+  padding: ${t.sp1};
+  border-radius: 10px;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+`, p = c.div`
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+  }
+  cursor: ${(e) => e.isSelected ? "default" : "pointer"};
+  border-radius: ${t.sp2};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.grey5 : e.theme.colors.background};
+  box-shadow: ${(e) => e.isSelected ? `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}` : null};
+`, f = c(u)`
+  padding: ${t.sp2} ${t.sp3} ${t.sp2} ${t.sp3};
+`, x = c.div`
+  width: 1px;
+  height: ${t.sp3};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.background : e.theme.colors.grey2};
+`, _ = c.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+function w({
+  timeframe: e,
+  isSelected: l,
+  onClick: n
+}) {
+  const i = (r) => {
+    switch (r) {
+      case "month":
+      case "quarter":
+      case "year":
+      case "this_week_to_date":
+      case "last_week":
+      case "this_month_to_date":
+      case "last_month":
+      case "last_3_months":
+      case "last_6_months":
+      case "last_12_months":
+      case "this_year_to_date":
+      case "last_year":
+        return g.getLocalizedStrings().timeframeSwitcherLabels[r];
+      default:
+        return console.warn("Unsupported timeframe"), "";
+    }
+  };
+  return /* @__PURE__ */ o.jsx(
+    p,
+    {
+      onClick: () => {
+        l === !1 && n(e);
+      },
+      isSelected: l,
+      children: /* @__PURE__ */ o.jsx(f, { children: i(e) })
+    }
+  );
+}
+function b({
+  timeframes: e,
+  selectedTimeframe: l,
+  onTimeframeSelectionChanged: n
+}) {
+  const i = (s) => {
+    n?.(s);
+  }, r = e.findIndex(
+    (s) => s === l
+  );
+  return /* @__PURE__ */ o.jsx(S, { children: e.map((s, a) => {
+    const h = e.length > 1 && a < e.length - 1, d = a === r, m = a === r - 1;
+    return /* @__PURE__ */ o.jsxs(_, { children: [
+      /* @__PURE__ */ o.jsx(
+        w,
+        {
+          timeframe: s,
+          isSelected: d,
+          onClick: i
+        },
+        a
+      ),
+      h ? /* @__PURE__ */ o.jsx(
+        x,
+        {
+          isSelected: d || m
+        }
+      ) : null
+    ] }, a);
+  }) });
+}
+export {
+  b as T
+};

package/dist/TimeframeSwitcher-DJksLlgM.cjs

@@ -0,0 +1,31 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),t=require("./index-oPmOjv0R.cjs"),u=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.background};
+  padding: ${t.Space.sp1};
+  border-radius: 10px;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+`,p=a.div`
+  color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+  }
+  cursor: ${e=>e.isSelected?"default":"pointer"};
+  border-radius: ${t.Space.sp2};
+  background-color: ${e=>e.isSelected?e.theme.colors.grey5:e.theme.colors.background};
+  box-shadow: ${e=>e.isSelected?`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`:null};
+`,S=a(t.SmallRegular)`
+  padding: ${t.Space.sp2} ${t.Space.sp3} ${t.Space.sp2} ${t.Space.sp3};
+`,x=a.div`
+  width: 1px;
+  height: ${t.Space.sp3};
+  background-color: ${e=>e.isSelected?e.theme.colors.background:e.theme.colors.grey2};
+`,g=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;function _({timeframe:e,isSelected:n,onClick:i}){const l=r=>{switch(r){case"month":case"quarter":case"year":case"this_week_to_date":case"last_week":case"this_month_to_date":case"last_month":case"last_3_months":case"last_6_months":case"last_12_months":case"this_year_to_date":case"last_year":return t.appLocale.getLocalizedStrings().timeframeSwitcherLabels[r];default:return console.warn("Unsupported timeframe"),""}};return o.jsxRuntimeExports.jsx(p,{onClick:()=>{n===!1&&i(e)},isSelected:n,children:o.jsxRuntimeExports.jsx(S,{children:l(e)})})}function w({timeframes:e,selectedTimeframe:n,onTimeframeSelectionChanged:i}){const l=s=>{i?.(s)},r=e.findIndex(s=>s===n);return o.jsxRuntimeExports.jsx(u,{children:e.map((s,c)=>{const m=e.length>1&&c<e.length-1,d=c===r,h=c===r-1;return o.jsxRuntimeExports.jsxs(g,{children:[o.jsxRuntimeExports.jsx(_,{timeframe:s,isSelected:d,onClick:l},c),m?o.jsxRuntimeExports.jsx(x,{isSelected:d||h}):null]},c)})})}exports.TimeframeSwitcher=w;

package/dist/TimeframeSwitcherWithToggle-DwmZoYmN.cjs

@@ -0,0 +1,31 @@
+"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),r=require("@emotion/styled"),d=require("./TimeframeSwitcher-DJksLlgM.cjs"),n=require("./index-oPmOjv0R.cjs"),s="ZeniSwitch",t={root:`${s}-root`,switchBase:`${s}-switchBase`,track:`${s}-track`,thumb:`${s}-thumb`},h=({className:e,...o})=>i.jsxRuntimeExports.jsx(i.Switch,{...o,className:e,classes:{...t}}),g=r(h)(({theme:e})=>({[`& .${t.switchBase}`]:{color:e.colors.grey2,margin:0,padding:0,transform:"translateX(6px)"},[`& .${t.track}`]:{backgroundColor:e.colors.grey3,opacity:1},[`& .${t.switchBase}.Mui-checked`]:{color:e.colors.primary},[`& .${t.root}.${t.switchBase}.Mui-checked + .${t.track}`]:{backgroundColor:e.colors.grey1},[`&.${t.root}`]:{width:52,height:20,padding:"5px 10px"},[`& .${t.switchBase}.Mui-checked`]:{color:e.colors.grey5,transform:"translateX(28px)"},[`& .${t.switchBase}.Mui-checked .${t.thumb}`]:{backgroundColor:e.colors.primary},[`& .${t.switchBase}.Mui-checked .${t.thumb}:before`]:{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13"><path fill="${encodeURIComponent(e.colors.grey5)}" d="M10.738 2L4.5075 8.4035L1.2615 5.0685L0 6.3655L4.5075 11L12 3.297L10.738 2Z" /></svg>')`},[`& .${t.switchBase}.Mui-checked + .${t.track}`]:{opacity:1,backgroundColor:e.colors.grey1},[`& .${t.switchBase}.Mui-disabled + .${t.track}`]:{opacity:.7},[`& .${t.thumb}`]:{backgroundColor:e.colors.grey2,width:20,height:20,boxShadow:"none","&:before":{content:"''",position:"absolute",width:"100%",height:"100%",left:0,top:0,backgroundRepeat:"no-repeat",backgroundPosition:"center"}},[`& .${t.track}`]:{opacity:1,backgroundColor:e.colors.grey3,borderRadius:10}})),w=e=>i.jsxRuntimeExports.jsx(g,{...e}),a={timeframePaddingLeft:new n.ResponsiveSized(0,0,125),timeframePaddingBottom:new n.ResponsiveSized(8,8,0)},f=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,p=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`,m=r.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  padding-left: ${e=>a.timeframePaddingLeft.valuePx(e.windowSize)};
+  padding-bottom: ${e=>a.timeframePaddingBottom.valuePx(e.windowSize)};
+`,j=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`,S=r.div`
+  display: flex;
+  width: 125px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`,R=r(n.SmallRegular)`
+  color: ${e=>e.isOn?e.theme.colors.primary:e.theme.colors.hero};
+  opacity: ${e=>e.isDisabled?.5:1};
+`,l=({label:e,isOn:o,isToggleDisabled:c,onValueChanged:x})=>i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(R,{isOn:o,isDisabled:c===!0,children:e}),i.jsxRuntimeExports.jsx(w,{checked:o,edge:"end",disabled:c===!0,disableRipple:c===!0,onChange:u=>{x(u.target.checked)}})]}),y=e=>{const o=n.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(f,{children:[i.jsxRuntimeExports.jsx(m,{windowSize:o,children:i.jsxRuntimeExports.jsx(d.TimeframeSwitcher,{timeframes:e.timeframe.allowedTimeframes,selectedTimeframe:e.timeframe.selectedTimeframe,onTimeframeSelectionChanged:e.timeframe.onTimeframeSelectionChanged})}),i.jsxRuntimeExports.jsx(j,{children:i.jsxRuntimeExports.jsx(l,{...e.toggle})})]})},$=e=>{const o=n.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(p,{children:[i.jsxRuntimeExports.jsx(m,{windowSize:o,children:i.jsxRuntimeExports.jsx(d.TimeframeSwitcher,{timeframes:e.timeframe.allowedTimeframes,selectedTimeframe:e.timeframe.selectedTimeframe,onTimeframeSelectionChanged:e.timeframe.onTimeframeSelectionChanged})}),i.jsxRuntimeExports.jsx(S,{children:i.jsxRuntimeExports.jsx(l,{...e.toggle})})]})};function b(e){const o=n.useWindowSizeContext();return o==="small"||o==="medium-compact"?i.jsxRuntimeExports.jsx(y,{...e}):i.jsxRuntimeExports.jsx($,{...e})}exports.TimeframeSwitcherWithToggle=b;

package/dist/TimeframeSwitcherWithToggle-hlsXnl9i.js

@@ -0,0 +1,157 @@
+import { j as i, at as w } from "./vendor-.pnpm-B2klaOGU.js";
+import r from "@emotion/styled";
+import { T as l } from "./TimeframeSwitcher-Cqw_X0jJ.js";
+import { u as n, R as s, F as u } from "./index-DOPIZEh4.js";
+const a = "ZeniSwitch", t = {
+  root: `${a}-root`,
+  switchBase: `${a}-switchBase`,
+  track: `${a}-track`,
+  thumb: `${a}-thumb`
+}, x = ({ className: e, ...o }) => /* @__PURE__ */ i.jsx(w, { ...o, className: e, classes: { ...t } }), y = r(x)(({ theme: e }) => ({
+  [`& .${t.switchBase}`]: {
+    color: e.colors.grey2,
+    margin: 0,
+    padding: 0,
+    transform: "translateX(6px)"
+  },
+  [`& .${t.track}`]: {
+    backgroundColor: e.colors.grey3,
+    opacity: 1
+  },
+  [`& .${t.switchBase}.Mui-checked`]: {
+    color: e.colors.primary
+  },
+  [`& .${t.root}.${t.switchBase}.Mui-checked + .${t.track}`]: {
+    backgroundColor: e.colors.grey1
+  },
+  [`&.${t.root}`]: {
+    width: 52,
+    height: 20,
+    padding: "5px 10px"
+  },
+  [`& .${t.switchBase}.Mui-checked`]: {
+    color: e.colors.grey5,
+    transform: "translateX(28px)"
+  },
+  [`& .${t.switchBase}.Mui-checked .${t.thumb}`]: {
+    backgroundColor: e.colors.primary
+  },
+  [`& .${t.switchBase}.Mui-checked .${t.thumb}:before`]: {
+    backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13"><path fill="${encodeURIComponent(
+      e.colors.grey5
+    )}" d="M10.738 2L4.5075 8.4035L1.2615 5.0685L0 6.3655L4.5075 11L12 3.297L10.738 2Z" /></svg>')`
+  },
+  [`& .${t.switchBase}.Mui-checked + .${t.track}`]: {
+    opacity: 1,
+    backgroundColor: e.colors.grey1
+  },
+  [`& .${t.switchBase}.Mui-disabled + .${t.track}`]: {
+    opacity: 0.7
+  },
+  [`& .${t.thumb}`]: {
+    backgroundColor: e.colors.grey2,
+    width: 20,
+    height: 20,
+    boxShadow: "none",
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center"
+    }
+  },
+  [`& .${t.track}`]: {
+    opacity: 1,
+    backgroundColor: e.colors.grey3,
+    borderRadius: 10
+  }
+})), $ = (e) => /* @__PURE__ */ i.jsx(y, { ...e }), d = {
+  timeframePaddingLeft: new s(0, 0, 125),
+  timeframePaddingBottom: new s(8, 8, 0)
+}, b = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, k = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`, m = r.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  padding-left: ${(e) => d.timeframePaddingLeft.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => d.timeframePaddingBottom.valuePx(e.windowSize)};
+`, S = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`, p = r.div`
+  display: flex;
+  width: 125px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`, T = r(u)`
+  color: ${(e) => e.isOn ? e.theme.colors.primary : e.theme.colors.hero};
+  opacity: ${(e) => e.isDisabled ? 0.5 : 1};
+`, h = ({
+  label: e,
+  isOn: o,
+  isToggleDisabled: c,
+  onValueChanged: g
+}) => /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+  /* @__PURE__ */ i.jsx(T, { isOn: o, isDisabled: c === !0, children: e }),
+  /* @__PURE__ */ i.jsx(
+    $,
+    {
+      checked: o,
+      edge: "end",
+      disabled: c === !0,
+      disableRipple: c === !0,
+      onChange: (f) => {
+        g(f.target.checked);
+      }
+    }
+  )
+] }), j = (e) => {
+  const o = n();
+  return /* @__PURE__ */ i.jsxs(b, { children: [
+    /* @__PURE__ */ i.jsx(m, { windowSize: o, children: /* @__PURE__ */ i.jsx(
+      l,
+      {
+        timeframes: e.timeframe.allowedTimeframes,
+        selectedTimeframe: e.timeframe.selectedTimeframe,
+        onTimeframeSelectionChanged: e.timeframe.onTimeframeSelectionChanged
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(S, { children: /* @__PURE__ */ i.jsx(h, { ...e.toggle }) })
+  ] });
+}, C = (e) => {
+  const o = n();
+  return /* @__PURE__ */ i.jsxs(k, { children: [
+    /* @__PURE__ */ i.jsx(m, { windowSize: o, children: /* @__PURE__ */ i.jsx(
+      l,
+      {
+        timeframes: e.timeframe.allowedTimeframes,
+        selectedTimeframe: e.timeframe.selectedTimeframe,
+        onTimeframeSelectionChanged: e.timeframe.onTimeframeSelectionChanged
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(p, { children: /* @__PURE__ */ i.jsx(h, { ...e.toggle }) })
+  ] });
+};
+function M(e) {
+  const o = n();
+  return o === "small" || o === "medium-compact" ? /* @__PURE__ */ i.jsx(j, { ...e }) : /* @__PURE__ */ i.jsx(C, { ...e });
+}
+export {
+  M as T
+};