@zeniai/web-components 3.16.66 → 3.16.68

package/dist/TimeRangeSwitcher-sgttOkg0.js

@@ -0,0 +1,265 @@
+import { j as t, A, k as z, bz as G, aY as K } from "./vendor-.pnpm-DtFedGku.js";
+import * as x from "react";
+import { createRef as V, useRef as T, useState as I, useEffect as y, useLayoutEffect as Y } from "react";
+import g from "@emotion/styled";
+import q from "react-dom";
+import { S as c, G as J } from "./index-SJFqjz6R.js";
+import { c as Q } from "./CollapsableReportTable-CPTMCFQg.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(K)`
+  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 q.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 = V(), 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]), Y(() => {
+    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(
+      G,
+      {
+        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/TimeframeSwitcher-D9mqnrRn.cjs

@@ -0,0 +1,31 @@
+"use strict";const o=require("./vendor-.pnpm-CT-Z_-kn.cjs"),a=require("@emotion/styled"),t=require("./index-BbWHLDfl.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/TimeframeSwitcher-DN42Tc1m.js

@@ -0,0 +1,103 @@
+import { j as o } from "./vendor-.pnpm-DtFedGku.js";
+import c from "@emotion/styled";
+import { S as t, G as u, a as g } from "./index-SJFqjz6R.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/TimeframeSwitcherWithToggle-BF9UOv7c.cjs

@@ -0,0 +1,31 @@
+"use strict";const i=require("./vendor-.pnpm-CT-Z_-kn.cjs"),r=require("@emotion/styled"),n=require("./index-BbWHLDfl.cjs"),d=require("./TimeframeSwitcher-D9mqnrRn.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-D0ocvjrA.js

@@ -0,0 +1,157 @@
+import { j as i, a_ as w } from "./vendor-.pnpm-DtFedGku.js";
+import r from "@emotion/styled";
+import { u as n, R as s, G as u } from "./index-SJFqjz6R.js";
+import { T as l } from "./TimeframeSwitcher-DN42Tc1m.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
+};