laif-ds 0.2.49 → 0.2.51

package/dist/components/ui/tabs.js

@@ -1,68 +1,77 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
-import { Root as o, Content as i, List as r, Trigger as a } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { Root as o, Content as r, List as i, Trigger as c } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { designTokens as a } from "../../lib/design-tokens.js";
 import { cn as n } from "../../lib/utils.js";
 function u({
-  className: e,
-  ...t
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
     o,
     {
       "data-slot": "tabs",
-      className: n("flex flex-col gap-2", e),
-      ...t
+      className: n("flex flex-col gap-2", t),
+      ...e
     }
   );
 }
-function f({
-  className: e,
-  ...t
+function p({
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    r,
+    i,
     {
       "data-slot": "tabs-list",
       className: n(
-        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        e
+        "bg-d-secondary text-d-secondary-foreground inline-flex h-9 w-fit items-center justify-center p-[3px]",
+        a.radius.lg,
+        t
       ),
-      ...t
+      ...e
     }
   );
 }
 function b({
-  className: e,
-  ...t
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    a,
+    c,
     {
       "data-slot": "tabs-trigger",
       className: n(
-        "data-[state=active]:bg-d-background focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:outline-d-ring text-d-foreground d-border inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        e
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border-transparent px-2 py-1 whitespace-nowrap transition-[color,box-shadow]",
+        a.text.base,
+        a.radius.default,
+        a.focusRing,
+        a.interaction.disabled,
+        // Active state
+        "data-[state=active]:bg-d-background data-[state=active]:text-d-foreground data-[state=active]:shadow-sm",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        t
       ),
-      ...t
+      ...e
     }
   );
 }
-function g({
-  className: e,
-  ...t
+function m({
+  className: t,
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    i,
+    r,
     {
       "data-slot": "tabs-content",
-      className: n("flex-1 outline-none", e),
-      ...t
+      className: n("flex-1 outline-none", t),
+      ...e
     }
   );
 }
 export {
   u as Tabs,
-  g as TabsContent,
-  f as TabsList,
+  m as TabsContent,
+  p as TabsList,
   b as TabsTrigger
 };

package/dist/components/ui/textarea.js

@@ -1,28 +1,37 @@
 "use client";
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { Label as c } from "./label.js";
-import { cn as d } from "../../lib/utils.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Label as m } from "./label.js";
+import { designTokens as t } from "../../lib/design-tokens.js";
+import { cn as s } from "../../lib/utils.js";
 function b({
-  wrpClassName: i,
-  className: o,
+  wrpClassName: o,
+  className: a,
   label: e,
-  labelClassName: a,
-  id: s,
-  ...n
+  labelClassName: n,
+  id: d,
+  ...l
 }) {
-  const r = s || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
-  return /* @__PURE__ */ l("div", { className: d("space-y-1.5", i), children: [
-    e && /* @__PURE__ */ t(c, { htmlFor: r, className: a, children: e }),
-    /* @__PURE__ */ t(
+  const i = d || (e ? `textarea-${Math.random().toString(36).substring(2, 9)}` : void 0);
+  return /* @__PURE__ */ c("div", { className: s("space-y-1.5", o), children: [
+    e && /* @__PURE__ */ r(m, { htmlFor: i, className: n, children: e }),
+    /* @__PURE__ */ r(
       "textarea",
       {
-        id: r,
+        id: i,
         "data-slot": "textarea",
-        className: d(
-          "border-d-border/50 placeholder:text-d-muted-foreground focus-visible:border-d-ring focus-visible:ring-d-ring/50 aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive bg-d-input flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          o
+        className: s(
+          t.input.base,
+          t.radius.default,
+          t.text.base,
+          t.text.placeholder,
+          t.interaction.disabled,
+          "flex field-sizing-content min-h-16 w-full px-3 py-2 shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+          // Focus states
+          "focus-visible:ring-d-ring/50 focus-visible:border-d-ring focus-visible:ring-[3px]",
+          t.input.invalid,
+          a
         ),
-        ...n
+        ...l
       }
     )
   ] });

package/dist/index.d.ts

@@ -184,7 +184,7 @@ declare interface AppFormProps {
     showSubmitButton?: boolean;
 }
 
-export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, createTaskLabel, }: AppKanbanConfig<T>): JSX.Element;
+export declare function AppKanban<T = any>({ columns, initialTasks, onTaskMove, onTaskEdit, onTaskCreate, taskActions, renderTaskContent, className, allowTaskCreate, }: AppKanbanConfig<T>): JSX.Element;
 
 export declare type AppKanbanColumn = {
     id: string;
@@ -1421,7 +1421,7 @@ export declare interface DataTableState {
     computedSorting?: DataTableSorting;
 }
 
-export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, buttonVariant, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ value, onChange, placeholder, dateFormat, className, disabled, size, firstDate, lastDate, availableDates, locale, initialCalendarMonth, customCalendarProps, }: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps {
     value?: Date;

package/dist/lib/design-tokens.js

@@ -0,0 +1,43 @@
+"use client";
+const e = {
+  // Interaction states
+  focusRing: "focus-visible:ring-d-ring/50 focus-visible:ring-[3px] focus-visible:border-d-ring outline-none transition-all duration-200",
+  // Base shapes
+  radius: {
+    default: "rounded-md",
+    sm: "rounded-sm",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  },
+  // Input & Button heights/paddings
+  sizes: {
+    default: "h-9 px-3 py-2",
+    sm: "h-8 px-2.5 py-1.5 text-xs",
+    lg: "h-10 px-4 py-2 text-base",
+    icon: {
+      default: "size-9"
+    }
+  },
+  // Text styles for inputs/buttons
+  text: {
+    base: "text-sm font-medium whitespace-nowrap",
+    placeholder: "placeholder:text-d-muted-foreground"
+  },
+  // Common interactive behaviors
+  interaction: {
+    active: "active:scale-[0.98] active:shadow-sm transform-gpu",
+    disabled: "disabled:cursor-not-allowed disabled:opacity-50"
+  },
+  // Input specific
+  input: {
+    base: "flex w-full border border-d-border/50 bg-d-input transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium",
+    invalid: "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive"
+  },
+  // Badge specific
+  badge: {
+    base: "inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1"
+  }
+};
+export {
+  e as designTokens
+};

package/dist/node_modules/eventemitter3/index2.js

@@ -1,5 +1,5 @@
 "use client";
-import { __module as x } from "../../_virtual/index6.js";
+import { __module as x } from "../../_virtual/index7.js";
 var w;
 function O() {
   return w ? x.exports : (w = 1, (function(d) {

package/dist/node_modules/hast-util-to-jsx-runtime/lib/index.js

@@ -3,7 +3,7 @@ import { stringify as w } from "../../comma-separated-tokens/index.js";
 import { ok as u } from "../../devlop/lib/default.js";
 import { svg as m, html as C } from "../../property-information/index.js";
 import { stringify as N } from "../../space-separated-tokens/index.js";
-import S from "../../../_virtual/index4.js";
+import S from "../../../_virtual/index5.js";
 import { whitespace as j } from "../../hast-util-whitespace/lib/index.js";
 import { name as x } from "../../estree-util-is-identifier-name/lib/index.js";
 import { VFileMessage as h } from "../../vfile-message/lib/index.js";

package/dist/node_modules/style-to-object/cjs/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { __exports as r } from "../../../_virtual/index7.js";
+import { __exports as r } from "../../../_virtual/index6.js";
 import { __require as c } from "../../inline-style-parser/index.js";
 var f;
 function j() {

package/dist/node_modules/unified/lib/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { bail as P } from "../../bail/index.js";
-import y from "../../../_virtual/index5.js";
+import y from "../../../_virtual/index4.js";
 import z from "../../is-plain-obj/index.js";
 import { CallableInstance as C } from "./callable-instance.js";
 import { trough as A } from "../../trough/lib/index.js";

package/dist/styles.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./laif-styles.css";@import "./css-for-template.css";@custom-variant dark (&:is(.dark *));.dark,:root{--d-radius:6px;--d-background:var(--colors--surface--background);--d-foreground:var(--colors--text--body-primary);--d-card:var(--colors--surface--primary);--d-card-foreground:var(--colors--text--body-primary);--d-popover:var(--colors--surface--primary);--d-popover-foreground:var(--colors--text--body-primary);--d-primary:var(--colors--surface--accent-primary);--d-primary-foreground:var(--colors--text--on-accent);--d-secondary:var(--colors--surface--secondary);--d-secondary-foreground:var(--colors--text--body-primary);--d-muted:var(--colors--surface--secondary);--d-muted-foreground:var(--colors--text--body-secondary);--d-accent:var(--colors--surface--tertiary);--d-accent-foreground:var(--colors--text--body-primary);--d-destructive:var(--colors--surface--danger);--d-destructive-foreground:var(--colors--text--on-danger);--d-warning:var(--colors--text--warning);--d-warning-background:var(--colors--surface--warning);--d-warning-foreground:var(--colors--text--on-warning);--d-success:var(--colors--text--success);--d-success-background:var(--colors--surface--success);--d-success-foreground:var(--colors--text--on-success);--d-border:var(--colors--border--subtle);--d-input:var(--colors--surface--primary);--d-ring:var(--colors--border--subtle);--d-chart-1:var(--colors--surface--accent-primary);--d-chart-2:var(--colors--surface--success);--d-chart-3:var(--colors--surface--warning);--d-chart-4:var(--colors--text--warning);--d-chart-5:var(--colors--surface--danger);--d-sidebar:var(--colors--surface--background);--d-sidebar-foreground:var(--colors--text--body-primary);--d-sidebar-primary:var(--colors--surface--accent-primary);--d-sidebar-primary-foreground:var(--colors--text--on-accent);--d-sidebar-accent:color-mix(in srgb,var(--colors--surface--tertiary) 40%,#0000);--d-sidebar-accent-foreground:var(--colors--text--body-primary);--d-sidebar-border:var(--colors--border--subtle);--d-sidebar-ring:var(--colors--surface--accent-primary)}.tangerine{--d-background:oklch(0.26 0.03 262.67);--d-foreground:oklch(0.92 0 0);--d-card:oklch(0.31 0.03 268.64);--d-card-foreground:oklch(0.92 0 0);--d-popover:oklch(0.29 0.02 268.4);--d-popover-foreground:oklch(0.92 0 0);--d-primary:oklch(0.64 0.17 36.44);--d-primary-foreground:oklch(1 0 0);--d-secondary:oklch(0.31 0.03 266.71);--d-secondary-foreground:oklch(0.92 0 0);--d-muted:oklch(0.31 0.03 266.71);--d-muted-foreground:oklch(0.72 0 0);--d-accent:oklch(0.34 0.06 267.59);--d-accent-foreground:oklch(0.88 0.06 254.13);--d-destructive:oklch(0.64 0.21 25.33);--d-destructive-foreground:oklch(1 0 0);--d-warning:#fee6b7;--d-warning-foreground:#8f6113;--d-success:#b9f3d1;--d-success-foreground:#479766;--d-border:oklch(0.38 0.03 269.73);--d-input:oklch(0.38 0.03 269.73);--d-ring:oklch(0.64 0.17 36.44);--d-chart-1:oklch(0.72 0.06 248.68);--d-chart-2:oklch(0.77 0.09 34.19);--d-chart-3:oklch(0.58 0.08 254.16);--d-chart-4:oklch(0.5 0.08 259.49);--d-chart-5:oklch(0.42 0.1 264.03);--d-sidebar:oklch(0.31 0.03 267.74);--d-sidebar-foreground:oklch(0.92 0 0);--d-sidebar-primary:oklch(0.64 0.17 36.44);--d-sidebar-primary-foreground:oklch(1 0 0);--d-sidebar-accent:oklch(0.34 0.06 267.59);--d-sidebar-accent-foreground:oklch(0.88 0.06 254.13);--d-sidebar-border:oklch(0.38 0.03 269.73);--d-sidebar-ring:oklch(0.64 0.17 36.44);--d-font-sans:Inter,sans-serif;--d-font-serif:Source Serif 4,serif;--d-font-mono:JetBrains Mono,monospace;--d-radius:0.75rem;--d-shadow-2xs:0px 1px 3px 0px #0000000d;--d-shadow-xs:0px 1px 3px 0px #0000000d;--d-shadow-sm:0px 1px 3px 0px #0000001a,0px 1px 2px -1px #0000001a;--d-shadow:0px 1px 3px 0px #0000001a,0px 1px 2px -1px #0000001a;--d-shadow-md:0px 1px 3px 0px #0000001a,0px 2px 4px -1px #0000001a;--d-shadow-lg:0px 1px 3px 0px #0000001a,0px 4px 6px -1px #0000001a;--d-shadow-xl:0px 1px 3px 0px #0000001a,0px 8px 10px -1px #0000001a;--d-shadow-2xl:0px 1px 3px 0px #00000040}.claymorphism{--d-background:#1e1b18;--d-foreground:#e2e8f0;--d-card:#2c2825;--d-card-foreground:#e2e8f0;--d-popover:#2c2825;--d-popover-foreground:#e2e8f0;--d-primary:#818cf8;--d-primary-foreground:#1e1b18;--d-secondary:#3a3633;--d-secondary-foreground:#d1d5db;--d-muted:#2c2825;--d-muted-foreground:#9ca3af;--d-accent:#484441;--d-accent-foreground:#d1d5db;--d-destructive:#ef4444;--d-destructive-foreground:#1e1b18;--d-warning:#fee6b7;--d-warning-foreground:#8f6113;--d-success:#b9f3d1;--d-success-foreground:#479766;--d-border:#3a3633;--d-input:#3a3633;--d-ring:#818cf8;--d-chart-1:#818cf8;--d-chart-2:#6366f1;--d-chart-3:#4f46e5;--d-chart-4:#4338ca;--d-chart-5:#3730a3;--d-sidebar:#3a3633;--d-sidebar-foreground:#e2e8f0;--d-sidebar-primary:#818cf8;--d-sidebar-primary-foreground:#1e1b18;--d-sidebar-accent:#484441;--d-sidebar-accent-foreground:#d1d5db;--d-sidebar-border:#3a3633;--d-sidebar-ring:#818cf8;--d-font-sans:Plus Jakarta Sans,sans-serif;--d-font-serif:Lora,serif;--d-font-mono:Roboto Mono,monospace;--d-radius:1.25rem;--d-shadow-2xs:2px 2px 10px 4px #00000017;--d-shadow-xs:2px 2px 10px 4px #00000017;--d-shadow-sm:2px 2px 10px 4px #0000002e,2px 1px 2px 3px #0000002e;--d-shadow:2px 2px 10px 4px #0000002e,2px 1px 2px 3px #0000002e;--d-shadow-md:2px 2px 10px 4px #0000002e,2px 2px 4px 3px #0000002e;--d-shadow-lg:2px 2px 10px 4px #0000002e,2px 4px 6px 3px #0000002e;--d-shadow-xl:2px 2px 10px 4px #0000002e,2px 8px 10px 3px #0000002e;--d-shadow-2xl:2px 2px 10px 4px #00000073}
+@import "tailwindcss";@import "tw-animate-css";@import "./laif-styles.css";@import "./css-for-template.css";.dark,:root{--d-radius:6px;--d-background:var(--colors--surface--background);--d-foreground:var(--colors--text--body-primary);--d-card:var(--colors--surface--primary);--d-card-foreground:var(--colors--text--body-primary);--d-popover:var(--colors--surface--primary);--d-popover-foreground:var(--colors--text--body-primary);--d-primary:var(--colors--surface--accent-primary);--d-primary-foreground:var(--colors--text--on-accent);--d-secondary:var(--colors--surface--secondary);--d-secondary-foreground:var(--colors--text--body-primary);--d-muted:var(--colors--surface--secondary);--d-muted-foreground:var(--colors--text--body-secondary);--d-accent:var(--colors--surface--tertiary);--d-accent-foreground:var(--colors--text--body-primary);--d-destructive:var(--colors--surface--danger);--d-destructive-foreground:var(--colors--text--on-danger);--d-warning:var(--colors--text--warning);--d-warning-background:var(--colors--surface--warning);--d-warning-foreground:var(--colors--text--on-warning);--d-success:var(--colors--text--success);--d-success-background:var(--colors--surface--success);--d-success-foreground:var(--colors--text--on-success);--d-border:var(--colors--border--subtle);--d-input:var(--colors--surface--primary);--d-ring:var(--colors--border--subtle);--d-chart-1:var(--colors--surface--accent-primary);--d-chart-2:var(--colors--surface--success);--d-chart-3:var(--colors--surface--warning);--d-chart-4:var(--colors--text--warning);--d-chart-5:var(--colors--surface--danger);--d-sidebar:var(--colors--surface--background);--d-sidebar-foreground:var(--colors--text--body-primary);--d-sidebar-primary:var(--colors--surface--accent-primary);--d-sidebar-primary-foreground:var(--colors--text--on-accent);--d-sidebar-accent:color-mix(in srgb,var(--colors--surface--tertiary) 40%,#0000);--d-sidebar-accent-foreground:var(--colors--text--body-primary);--d-sidebar-border:var(--colors--border--subtle);--d-sidebar-ring:var(--colors--surface--accent-primary)}.tangerine{--d-background:oklch(0.26 0.03 262.67);--d-foreground:oklch(0.92 0 0);--d-card:oklch(0.31 0.03 268.64);--d-card-foreground:oklch(0.92 0 0);--d-popover:oklch(0.29 0.02 268.4);--d-popover-foreground:oklch(0.92 0 0);--d-primary:oklch(0.64 0.17 36.44);--d-primary-foreground:oklch(1 0 0);--d-secondary:oklch(0.31 0.03 266.71);--d-secondary-foreground:oklch(0.92 0 0);--d-muted:oklch(0.31 0.03 266.71);--d-muted-foreground:oklch(0.72 0 0);--d-accent:oklch(0.34 0.06 267.59);--d-accent-foreground:oklch(0.88 0.06 254.13);--d-destructive:oklch(0.64 0.21 25.33);--d-destructive-foreground:oklch(1 0 0);--d-warning:#fee6b7;--d-warning-foreground:#8f6113;--d-success:#b9f3d1;--d-success-foreground:#479766;--d-border:oklch(0.38 0.03 269.73);--d-input:oklch(0.38 0.03 269.73);--d-ring:oklch(0.64 0.17 36.44);--d-chart-1:oklch(0.72 0.06 248.68);--d-chart-2:oklch(0.77 0.09 34.19);--d-chart-3:oklch(0.58 0.08 254.16);--d-chart-4:oklch(0.5 0.08 259.49);--d-chart-5:oklch(0.42 0.1 264.03);--d-sidebar:oklch(0.31 0.03 267.74);--d-sidebar-foreground:oklch(0.92 0 0);--d-sidebar-primary:oklch(0.64 0.17 36.44);--d-sidebar-primary-foreground:oklch(1 0 0);--d-sidebar-accent:oklch(0.34 0.06 267.59);--d-sidebar-accent-foreground:oklch(0.88 0.06 254.13);--d-sidebar-border:oklch(0.38 0.03 269.73);--d-sidebar-ring:oklch(0.64 0.17 36.44);--d-font-sans:Inter,sans-serif;--d-font-serif:Source Serif 4,serif;--d-font-mono:JetBrains Mono,monospace;--d-radius:0.75rem;--d-shadow-2xs:0px 1px 3px 0px #0000000d;--d-shadow-xs:0px 1px 3px 0px #0000000d;--d-shadow-sm:0px 1px 3px 0px #0000001a,0px 1px 2px -1px #0000001a;--d-shadow:0px 1px 3px 0px #0000001a,0px 1px 2px -1px #0000001a;--d-shadow-md:0px 1px 3px 0px #0000001a,0px 2px 4px -1px #0000001a;--d-shadow-lg:0px 1px 3px 0px #0000001a,0px 4px 6px -1px #0000001a;--d-shadow-xl:0px 1px 3px 0px #0000001a,0px 8px 10px -1px #0000001a;--d-shadow-2xl:0px 1px 3px 0px #00000040}.claymorphism{--d-background:#1e1b18;--d-foreground:#e2e8f0;--d-card:#2c2825;--d-card-foreground:#e2e8f0;--d-popover:#2c2825;--d-popover-foreground:#e2e8f0;--d-primary:#818cf8;--d-primary-foreground:#1e1b18;--d-secondary:#3a3633;--d-secondary-foreground:#d1d5db;--d-muted:#2c2825;--d-muted-foreground:#9ca3af;--d-accent:#484441;--d-accent-foreground:#d1d5db;--d-destructive:#ef4444;--d-destructive-foreground:#1e1b18;--d-warning:#fee6b7;--d-warning-foreground:#8f6113;--d-success:#b9f3d1;--d-success-foreground:#479766;--d-border:#3a3633;--d-input:#3a3633;--d-ring:#818cf8;--d-chart-1:#818cf8;--d-chart-2:#6366f1;--d-chart-3:#4f46e5;--d-chart-4:#4338ca;--d-chart-5:#3730a3;--d-sidebar:#3a3633;--d-sidebar-foreground:#e2e8f0;--d-sidebar-primary:#818cf8;--d-sidebar-primary-foreground:#1e1b18;--d-sidebar-accent:#484441;--d-sidebar-accent-foreground:#d1d5db;--d-sidebar-border:#3a3633;--d-sidebar-ring:#818cf8;--d-font-sans:Plus Jakarta Sans,sans-serif;--d-font-serif:Lora,serif;--d-font-mono:Roboto Mono,monospace;--d-radius:1.25rem;--d-shadow-2xs:2px 2px 10px 4px #00000017;--d-shadow-xs:2px 2px 10px 4px #00000017;--d-shadow-sm:2px 2px 10px 4px #0000002e,2px 1px 2px 3px #0000002e;--d-shadow:2px 2px 10px 4px #0000002e,2px 1px 2px 3px #0000002e;--d-shadow-md:2px 2px 10px 4px #0000002e,2px 2px 4px 3px #0000002e;--d-shadow-lg:2px 2px 10px 4px #0000002e,2px 4px 6px 3px #0000002e;--d-shadow-xl:2px 2px 10px 4px #0000002e,2px 8px 10px 3px #0000002e;--d-shadow-2xl:2px 2px 10px 4px #00000073}