@krizaka/ui 3.34.0 → 3.36.0

package/dist/dashboard-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dashboard-layout/dashboard-layout.tsx"],"sourcesContent":["// Server-safe. A dashboard, read from the products' home screens (Orochia's creator studio, Orazaka's console for\n// Eric): the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone,\n// two from `sm`, four from `xl`; a widget spans 1, 2, 3 columns or the full row, and keeps its order everywhere.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const dashboardLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg sm:text-[1.75rem]\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    toolbar: \"flex flex-wrap items-center gap-2\",\n    grid: \"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\",\n    widget: \"flex min-w-0 flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4 sm:p-5\",\n    widgetHead: \"flex items-start justify-between gap-3\",\n    widgetTitle: \"text-sm font-semibold text-fg\",\n    widgetDescription: \"mt-0.5 text-xs text-fg-secondary\",\n    widgetBody: \"min-w-0 flex-1\",\n  },\n  variants: {\n    span: {\n      1: { widget: \"\" },\n      2: { widget: \"sm:col-span-2\" },\n      3: { widget: \"sm:col-span-2 xl:col-span-3\" },\n      full: { widget: \"sm:col-span-2 xl:col-span-4\" },\n    },\n  },\n  defaultVariants: { span: 1 },\n});\nconst s = dashboardLayout();\n\nexport type DashboardLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title: `Good morning, Eric`. */\n  title: React.ReactNode;\n  /** A mono line above it (the workspace, the date). */\n  eyebrow?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The screen's actions (a primary Button, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). */\n  toolbar?: React.ReactNode;\n  /**\n   * The heading's level: `h1` when the dashboard is the screen, `h2` inside an AppShell whose header holds the h1.\n   * @default \"h1\"\n   */\n  headingAs?: \"h1\" | \"h2\";\n  /** The widgets (`Widget`), in reading order. */\n  children: React.ReactNode;\n};\n\n/** A dashboard screen: heading, actions, filters, then the grid of widgets. */\nexport function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H = \"h1\", className, children, ...props }: DashboardLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.head()}>\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <H className={s.title()}>{title}</H>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {toolbar && <div className={s.toolbar()}>{toolbar}</div>}\n      <div className={s.grid()}>{children}</div>\n    </div>\n  );\n}\n\nexport type WidgetProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The widget's title: it names the region. */\n  title: React.ReactNode;\n  /** One line under the title (the period, the source). */\n  description?: React.ReactNode;\n  /** An action on the right of the title (`See all`). */\n  action?: React.ReactNode;\n  /**\n   * The columns it takes: 1, 2, 3 or the full row (from `sm`; one column on a phone).\n   * @default 1\n   */\n  span?: 1 | 2 | 3 | \"full\";\n  /**\n   * The title's level: one under the dashboard's heading — `2` under an `h1`, `3` inside an AppShell (`headingAs=\"h2\"`).\n   * @default 2\n   */\n  level?: 2 | 3;\n  /** The content: a Stat, a chart of @krizaka/charts, a DataTable, a list. */\n  children: React.ReactNode;\n};\n\n/** A widget of the dashboard: a titled region on a card. */\nexport function Widget({ title, description, action, span = 1, level = 2, className, children, id, ...props }: WidgetProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  const sv = dashboardLayout({ span });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section className={sv.widget({ className })} aria-labelledby={titleId} id={id} {...props}>\n      <div className={s.widgetHead()}>\n        <div className=\"min-w-0\">\n          <H id={titleId} className={s.widgetTitle()}>\n            {title}\n          </H>\n          {description && <p className={s.widgetDescription()}>{description}</p>}\n        </div>\n        {action}\n      </div>\n      <div className={s.widgetBody()}>{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAwDX,SACc,KADd;AAtDD,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAG,EAAE,QAAQ,GAAG;AAAA,MAChB,GAAG,EAAE,QAAQ,gBAAgB;AAAA,MAC7B,GAAG,EAAE,QAAQ,8BAA8B;AAAA,MAC3C,MAAM,EAAE,QAAQ,8BAA8B;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,EAAE;AAC7B,CAAC;AACD,IAAM,IAAI,gBAAgB;AAuBnB,SAAS,gBAAgB,EAAE,OAAO,SAAS,aAAa,SAAS,SAAS,WAAW,IAAI,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AAC3J,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,yBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,oBAAC,KAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,SAC9D;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAClD,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,KACtC;AAEJ;AAwBO,SAAS,OAAO,EAAE,OAAO,aAAa,QAAQ,OAAO,GAAG,QAAQ,GAAG,WAAW,UAAU,IAAI,GAAG,MAAM,GAAgB;AAC1H,QAAM,IAAI,UAAU,IAAI,OAAO;AAC/B,QAAM,KAAK,gBAAgB,EAAE,KAAK,CAAC;AACnC,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,WAAW,GAAG,OAAO,EAAE,UAAU,CAAC,GAAG,mBAAiB,SAAS,IAAS,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,WAAW,GAC3B;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,KAAE,IAAI,SAAS,WAAW,EAAE,YAAY,GACtC,iBACH;AAAA,QACC,eAAe,oBAAC,OAAE,WAAW,EAAE,kBAAkB,GAAI,uBAAY;AAAA,SACpE;AAAA,MACC;AAAA,OACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,UAAS;AAAA,KAC5C;AAEJ;","names":[]}
+{"version":3,"sources":["../src/dashboard-layout/dashboard-layout.tsx"],"sourcesContent":["// Server-safe. A dashboard, read from the products' home screens (Orochia's creator studio, Orazaka's console for\n// Eric): the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone,\n// two from `sm`, four from `xl`; a widget spans 1, 2, 3 columns or the full row, and keeps its order everywhere.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const dashboardLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    head: \"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\",\n    text: \"flex min-w-0 flex-col gap-1\",\n    eyebrow: \"font-mono text-[11px] font-semibold text-fg-accent\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg sm:text-[1.75rem]\",\n    description: \"max-w-2xl text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    toolbar: \"flex flex-wrap items-center gap-2\",\n    grid: \"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\",\n    widget: \"flex min-w-0 flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4 sm:p-5\",\n    widgetHead: \"flex items-start justify-between gap-3\",\n    widgetTitle: \"text-sm font-semibold text-fg\",\n    widgetDescription: \"mt-0.5 text-xs text-fg-secondary\",\n    widgetBody: \"min-w-0 flex-1\",\n  },\n  variants: {\n    span: {\n      1: { widget: \"\" },\n      2: { widget: \"sm:col-span-2\" },\n      3: { widget: \"sm:col-span-2 xl:col-span-3\" },\n      full: { widget: \"sm:col-span-2 xl:col-span-4\" },\n    },\n  },\n  defaultVariants: { span: 1 },\n});\nconst s = dashboardLayout();\n\nexport type DashboardLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The screen's title: `Good morning, Eric`. */\n  title: React.ReactNode;\n  /** A mono line above it (the workspace, the date). */\n  eyebrow?: React.ReactNode;\n  /** One sentence under it. */\n  description?: React.ReactNode;\n  /** The screen's actions (a primary Button, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the heading: the period, the filters (Segmented tabs, a DateRangePicker, a FilterBar). */\n  toolbar?: React.ReactNode;\n  /**\n   * The heading's level: `h1` when the dashboard is the screen, `h2` inside an AppShell whose header holds the h1.\n   * @default \"h1\"\n   */\n  headingAs?: \"h1\" | \"h2\";\n  /** The widgets (`Widget`), in reading order. */\n  children: React.ReactNode;\n};\n\n/** A dashboard screen: heading, actions, filters, then the grid of widgets. */\nexport function DashboardLayout({ title, eyebrow, description, actions, toolbar, headingAs: H = \"h1\", className, children, ...props }: DashboardLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.head()}>\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <H className={s.title()}>{title}</H>\n          {description && <p className={s.description()}>{description}</p>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {toolbar && <div className={s.toolbar()}>{toolbar}</div>}\n      <div className={s.grid()}>{children}</div>\n    </div>\n  );\n}\n\nexport type WidgetProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The widget's title: it names the region. */\n  title: React.ReactNode;\n  /** One line under the title (the period, the source). */\n  description?: React.ReactNode;\n  /** An action on the right of the title (`See all`). */\n  action?: React.ReactNode;\n  /**\n   * The columns it takes: 1, 2, 3 or the full row (from `sm`; one column on a phone).\n   * @default 1\n   */\n  span?: 1 | 2 | 3 | \"full\";\n  /**\n   * The title's level: one under the dashboard's heading — `2` under an `h1`, `3` inside an AppShell (`headingAs=\"h2\"`).\n   * @default 2\n   */\n  level?: 2 | 3;\n  /** The content: a Stat, a chart of @krizaka/charts, a DataTable, a list. */\n  children: React.ReactNode;\n};\n\n/** A widget of the dashboard: a titled region on a card. */\nexport function Widget({ title, description, action, span = 1, level = 2, className, children, id, ...props }: WidgetProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  const sv = dashboardLayout({ span });\n  const auto = React.useId();\n  const titleId = `${id ?? auto}-title`;\n  return (\n    <section className={sv.widget({ className })} aria-labelledby={titleId} id={id} {...props}>\n      <div className={s.widgetHead()}>\n        <div className=\"min-w-0\">\n          <H id={titleId} className={s.widgetTitle()}>\n            {title}\n          </H>\n          {description && <p className={s.widgetDescription()}>{description}</p>}\n        </div>\n        {action}\n      </div>\n      <div className={s.widgetBody()}>{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AAGA,YAAY,WAAW;AACvB,SAAS,UAAU;AAwDX,SACc,KADd;AAtDD,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAG,EAAE,QAAQ,GAAG;AAAA,MAChB,GAAG,EAAE,QAAQ,gBAAgB;AAAA,MAC7B,GAAG,EAAE,QAAQ,8BAA8B;AAAA,MAC3C,MAAM,EAAE,QAAQ,8BAA8B;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,EAAE;AAC7B,CAAC;AACD,IAAM,IAAI,gBAAgB;AAuBnB,SAAS,gBAAgB,EAAE,OAAO,SAAS,aAAa,SAAS,SAAS,WAAW,IAAI,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AAC3J,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,yBAAC,SAAI,WAAW,EAAE,KAAK,GACrB;AAAA,2BAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,oBAAC,KAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,QAC/B,eAAe,oBAAC,OAAE,WAAW,EAAE,YAAY,GAAI,uBAAY;AAAA,SAC9D;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAClD,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,KACtC;AAEJ;AAwBO,SAAS,OAAO,EAAE,OAAO,aAAa,QAAQ,OAAO,GAAG,QAAQ,GAAG,WAAW,UAAU,IAAI,GAAG,MAAM,GAAgB;AAC1H,QAAM,IAAI,UAAU,IAAI,OAAO;AAC/B,QAAM,KAAK,gBAAgB,EAAE,KAAK,CAAC;AACnC,QAAM,OAAa,YAAM;AACzB,QAAM,UAAU,GAAG,MAAM,IAAI;AAC7B,SACE,qBAAC,aAAQ,WAAW,GAAG,OAAO,EAAE,UAAU,CAAC,GAAG,mBAAiB,SAAS,IAAS,GAAG,OAClF;AAAA,yBAAC,SAAI,WAAW,EAAE,WAAW,GAC3B;AAAA,2BAAC,SAAI,WAAU,WACb;AAAA,4BAAC,KAAE,IAAI,SAAS,WAAW,EAAE,YAAY,GACtC,iBACH;AAAA,QACC,eAAe,oBAAC,OAAE,WAAW,EAAE,kBAAkB,GAAI,uBAAY;AAAA,SACpE;AAAA,MACC;AAAA,OACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,WAAW,GAAI,UAAS;AAAA,KAC5C;AAEJ;","names":[]}

package/dist/data-table.js

@@ -9,17 +9,17 @@ import {
   dataTableCsv,
   dataTableLabels,
   useDataTable
-} from "./chunk-KIBICUZK.js";
-import "./chunk-7Z4KHPFC.js";
+} from "./chunk-K2ZYB4HP.js";
+import "./chunk-YGIN2YIY.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-2PNLHZLT.js";
+import "./chunk-YOTQD7JD.js";
 import "./chunk-7UCPGXKN.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import "./chunk-NSLXEDIS.js";
-import "./chunk-REPTKUJ6.js";
+import "./chunk-7NRSPHAF.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";

package/dist/date-picker.js

@@ -257,7 +257,7 @@ var calendar = tv({
     month: "kz-month flex flex-col gap-2",
     monthTitle: "px-1 text-xs font-semibold capitalize text-fg-secondary",
     grid: "border-separate border-spacing-y-1",
-    weekday: "h-7 w-10 pb-1 text-center text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
+    weekday: "h-7 w-10 pb-1 text-center text-[11px] font-semibold text-fg-secondary",
     cell: "p-0 text-center data-[band]:bg-accent-soft data-[band=start]:rounded-l-xl data-[band=end]:rounded-r-xl data-[band=solo]:rounded-xl data-[band=preview]:bg-surface-3",
     day: "relative h-10 w-10 rounded-xl text-sm tabular-nums text-fg transition-[background-color,box-shadow,transform] duration-150 hover:bg-surface-3 active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:z-10 focus-visible:outline-hidden focus-visible:focus-ring data-[outside]:text-fg-secondary data-[outside]:font-normal data-[weekend]:not-data-[selected]:text-fg-secondary data-[today]:font-bold data-[today]:not-data-[selected]:text-fg-accent data-[in-range]:hover:bg-accent/15 data-[selected]:bg-accent data-[selected]:bg-fill-shade data-[selected]:font-semibold data-[selected]:text-on-accent data-[selected]:shadow-glow data-[selected]:inset-shadow-edge-fill data-[selected]:hover:bg-accent disabled:cursor-not-allowed disabled:text-fg-muted disabled:line-through disabled:opacity-50 disabled:hover:bg-transparent",
     // Today: the node under the number (the marks' diamond), on-accent when today is the chosen day.
@@ -920,7 +920,7 @@ var dayStrip = tv({
     nav: "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35",
     track: "-mx-1 flex snap-x snap-mandatory gap-2 overflow-x-auto overflow-y-hidden scroll-smooth px-1 py-1.5 [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
     day: "relative flex h-[4.5rem] w-14 shrink-0 snap-start flex-col items-center justify-center gap-0.5 rounded-2xl border border-border-default bg-surface-2 bg-sheen text-fg inset-shadow-edge transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:text-fg-muted disabled:shadow-none",
-    weekday: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary group-aria-checked:text-on-accent group-disabled:text-fg-muted",
+    weekday: "text-[11px] font-semibold text-fg-secondary group-aria-checked:text-on-accent group-disabled:text-fg-muted",
     number: "text-lg font-semibold tabular-nums leading-none",
     // Today: the node of the marks above the number; a marked day: a dot under it.
     node: "absolute top-1.5 h-1 w-1 rotate-45 rounded-[1px] bg-accent group-aria-checked:bg-on-accent",
@@ -1027,7 +1027,7 @@ var timePicker = tv({
     slots: "grid grid-cols-[repeat(auto-fill,minmax(5.5rem,1fr))] gap-2",
     slot: "h-11 rounded-xl border border-border-default bg-surface-2 bg-sheen px-3 text-sm font-semibold tabular-nums text-fg inset-shadow-edge transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:font-normal disabled:text-fg-muted disabled:line-through disabled:shadow-none",
     group: "flex flex-col gap-2",
-    heading: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary"
+    heading: "text-[11px] font-semibold text-fg-secondary"
   }
 });
 var timePickerLabels = { hours: "Hours", minutes: "Minutes", period: "AM/PM" };