@mdigital_ui/ui 0.2.3 → 0.2.4

package/dist/index.js

@@ -1,12 +1,12 @@
 export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
-export { Transfer } from './chunk-BH4DXQC4.js';
+export { Transfer } from './chunk-FCMVKFVV.js';
 export { tree_select_default as TreeSelect } from './chunk-ASW7TEAN.js';
 export { tree_default as Tree } from './chunk-SAVE5ACL.js';
 export { upload_default as Upload } from './chunk-I5ANSIDK.js';
 export { slider_default as Slider } from './chunk-NNSS366W.js';
 export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
 export { switch_default as Switch } from './chunk-YZ6V6BQ7.js';
-export { table_default as Table } from './chunk-77DW6PAW.js';
+export { table_default as Table } from './chunk-ZNJ7M5QK.js';
 export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
 export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
 export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
@@ -27,22 +27,22 @@ export { notification_default as Notification } from './chunk-YZVSDRJD.js';
 export { pagination_default as Pagination } from './chunk-FGWSUPVW.js';
 export { descriptions_default as Descriptions } from './chunk-S5XJXU52.js';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-AWPKZYHT.js';
-export { empty_default as Empty } from './chunk-ROR4E6IE.js';
-export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
 export { grid_default as Grid } from './chunk-7PKVBUGL.js';
 export { image_default as Image } from './chunk-XMAH5PDW.js';
+export { empty_default as Empty } from './chunk-ROR4E6IE.js';
+export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
 export { input_default as Input } from './chunk-XMKNYG7I.js';
 export { cascader_default as Cascader } from './chunk-G6TAVRTJ.js';
 export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
-export { checkbox_default as Checkbox } from './chunk-4XXDRVFM.js';
+export { checkbox_default as Checkbox } from './chunk-OALOWWO7.js';
 export { checkbox_group_default as CheckboxGroup } from './chunk-RPAQAZTI.js';
 export { clipboard_default as Clipboard } from './chunk-RMGIO27V.js';
 export { collapse_default as Collapse } from './chunk-SOV4PE3P.js';
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-4P5EMRFI.js';
-export { modal_default as Modal } from './chunk-5VCGW53O.js';
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-LEKLQR4I.js';
+export { modal_default as Modal } from './chunk-Y5A26EGR.js';
 export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-QPJL66S7.js';
-export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
-export { badge_default as Badge } from './chunk-FTJOSVTY.js';
+export { accordion_default as Accordion } from './chunk-2EKAF6EJ.js';
+export { badge_default as Badge } from './chunk-BFO3ARVJ.js';
 export { breadcrumbs_default as Breadcrumbs } from './chunk-HUVXKOJC.js';
 export { dropdown_default as Dropdown } from './chunk-KNQ7UQ2W.js';
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-3PFA3YG6.js';
@@ -50,8 +50,141 @@ export { button_default as Button } from './chunk-KTAIRCOL.js';
 export { spinner_default as Spinner } from './chunk-J3G5WWGR.js';
 export { buttonColors, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, textColorVariants } from './chunk-5UEWVFF6.js';
 export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
-export { card_default as Card } from './chunk-XOBGEMQY.js';
+export { card_default as Card } from './chunk-OOS3B7YZ.js';
+import { cn } from './chunk-YNNAOXU5.js';
 export { cn, getValidationStatus, iconSizes } from './chunk-YNNAOXU5.js';
 export { carousel_default as Carousel } from './chunk-C3MX5EXL.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var dividerVariants = cva("", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    },
+    color: {
+      default: "border-border",
+      primary: "border-primary",
+      secondary: "border-secondary",
+      accent: "border-accent",
+      success: "border-success",
+      error: "border-error",
+      warning: "border-warning",
+      info: "border-info"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    color: "default"
+  }
+});
+var textAlignClasses = {
+  left: {
+    before: "w-[var(--divider-left-before-width)]",
+    after: "w-[var(--divider-left-after-width)]"
+  },
+  center: {
+    before: "w-[var(--divider-center-before-width)]",
+    after: "w-[var(--divider-center-after-width)]"
+  },
+  right: {
+    before: "w-[var(--divider-right-before-width)]",
+    after: "w-[var(--divider-right-after-width)]"
+  }
+};
+var Divider = React.memo(
+  ({
+    orientation = "horizontal",
+    variant = "solid",
+    color = "default",
+    children,
+    textAlign = "center",
+    spacing,
+    className,
+    ...props
+  }) => {
+    const hasText = Boolean(children);
+    if (orientation === "horizontal") {
+      if (hasText) {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "horizontal",
+            className: cn(
+              "flex items-center gap-[var(--divider-gap)] text-sm text-text-secondary",
+              className
+            ),
+            style: spacing ? { margin: spacing } : void 0,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "border-t",
+                    dividerVariants({ variant, color }),
+                    textAlignClasses[textAlign].before
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap flex-shrink-0", children }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "border-t",
+                    dividerVariants({ variant, color }),
+                    textAlignClasses[textAlign].after
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "hr",
+        {
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: cn(
+            "border-t",
+            dividerVariants({ orientation, variant, color }),
+            className
+          ),
+          style: spacing ? { margin: spacing } : void 0,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn(
+          "inline-block w-px border-l self-stretch",
+          dividerVariants({ variant, color }),
+          className
+        ),
+        style: spacing ? { margin: spacing } : void 0,
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+var divider_default = Divider;
+
+export { divider_default as Divider };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../src/divider/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { DividerProps } from './types'\n\n/**\n * Class variance authority configuration for the Divider component\n * Defines style variants for orientation, line style, color, and text alignment\n */\nconst dividerVariants = cva('', {\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'h-full',\n    },\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n    },\n    color: {\n      default: 'border-border',\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      accent: 'border-accent',\n      success: 'border-success',\n      error: 'border-error',\n      warning: 'border-warning',\n      info: 'border-info',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    color: 'default',\n  },\n})\n\n/**\n * Text alignment styles for the label within the divider\n * Defines the width distribution of divider lines before and after the label\n * Uses design tokens for customizability\n */\nconst textAlignClasses = {\n  left: {\n    before: 'w-[var(--divider-left-before-width)]',\n    after: 'w-[var(--divider-left-after-width)]',\n  },\n  center: {\n    before: 'w-[var(--divider-center-before-width)]',\n    after: 'w-[var(--divider-center-after-width)]',\n  },\n  right: {\n    before: 'w-[var(--divider-right-before-width)]',\n    after: 'w-[var(--divider-right-after-width)]',\n  },\n}\n\n/**\n * Divider Component\n *\n * A visual separator that can be used to divide content sections.\n * Supports horizontal and vertical orientations, different line styles,\n * color variants, and optional label text.\n *\n * @component\n * @example\n * // Basic horizontal divider\n * <Divider />\n *\n * @example\n * // Divider with text label\n * <Divider>Section Title</Divider>\n *\n * @example\n * // Colored divider\n * <Divider color=\"primary\" />\n *\n * @example\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n *\n * @example\n * // Dashed divider with left-aligned text\n * <Divider variant=\"dashed\" textAlign=\"left\" color=\"accent\">\n *   Options\n * </Divider>\n *\n * @param {DividerProps} props - Component props\n * @returns {JSX.Element} Rendered divider component\n */\nconst Divider = React.memo<DividerProps>(\n  ({\n    orientation = 'horizontal',\n    variant = 'solid',\n    color = 'default',\n    children,\n    textAlign = 'center',\n    spacing,\n    className,\n    ...props\n  }) => {\n    const hasText = Boolean(children)\n\n    /**\n     * Render horizontal divider\n     * Supports optional text label with configurable alignment\n     */\n    if (orientation === 'horizontal') {\n      if (hasText) {\n        return (\n          <div\n            role=\"separator\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'flex items-center gap-[var(--divider-gap)] text-sm text-text-secondary',\n              className,\n            )}\n            style={spacing ? { margin: spacing } : undefined}\n            {...props}\n          >\n            <div\n              className={cn(\n                'border-t',\n                dividerVariants({ variant, color }),\n                textAlignClasses[textAlign].before,\n              )}\n            />\n            <span className=\"whitespace-nowrap flex-shrink-0\">{children}</span>\n            <div\n              className={cn(\n                'border-t',\n                dividerVariants({ variant, color }),\n                textAlignClasses[textAlign].after,\n              )}\n            />\n          </div>\n        )\n      }\n\n      return (\n        <hr\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className={cn(\n            'border-t',\n            dividerVariants({ orientation, variant, color }),\n            className,\n          )}\n          style={spacing ? { margin: spacing } : undefined}\n          {...props}\n        />\n      )\n    }\n\n    /**\n     * Render vertical divider\n     * Text labels are not supported in vertical orientation\n     */\n\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          'inline-block w-px border-l self-stretch',\n          dividerVariants({ variant, color }),\n          className,\n        )}\n        style={spacing ? { margin: spacing } : undefined}\n        {...props}\n      />\n    )\n  },\n)\n\nDivider.displayName = 'Divider'\n\nexport type * from './types'\nexport default Divider\n"]}

package/dist/modal/index.js

@@ -1,4 +1,4 @@
-export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modal_default as default } from '../chunk-5VCGW53O.js';
+export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modal_default as default } from '../chunk-Y5A26EGR.js';
 import '../chunk-YNNAOXU5.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles/base.css

@@ -57,13 +57,24 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-6xl: 3.75rem;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --tracking-tighter: -0.05em;
     --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
     --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -147,6 +158,7 @@
     --input-padding-x-md: 0.875rem;
     --input-padding-x-lg: 1.125rem;
     --textarea-min-height: 5rem;
+    --textarea-padding-xs: 0.5rem;
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
@@ -171,6 +183,8 @@
     --switch-height-md: 1.25rem;
     --switch-height-lg: 1.5rem;
     --label-font-size-xs: 0.75rem;
+    --label-font-size-sm: 0.875rem;
+    --label-font-size-base: 1rem;
     --label-font-size-lg: 1.125rem;
     --spacing-0: 0px;
     --spacing-1: 0.25rem;
@@ -179,6 +193,8 @@
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
     --spacing-12: 3rem;
     --radius-none: 0px;
     --radius-full: 9999px;
@@ -511,6 +527,9 @@
   .my-2 {
     margin-block: 0.5rem;
   }
+  .my-4 {
+    margin-block: 1rem;
+  }
   .-mt-8 {
     margin-top: calc(2rem * -1);
   }
@@ -580,6 +599,9 @@
   .mb-6 {
     margin-bottom: 1.5rem;
   }
+  .mb-\[var\(--card-header-gap\)\] {
+    margin-bottom: var(--card-header-gap);
+  }
   .ml-0 {
     margin-left: 0px;
   }
@@ -1015,9 +1037,18 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[5\%\] {
+    width: 5%;
+  }
+  .w-\[50\%\] {
+    width: 50%;
+  }
   .w-\[70\%\] {
     width: 70%;
   }
+  .w-\[95\%\] {
+    width: 95%;
+  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -1048,6 +1079,24 @@
   .w-\[var\(--checkbox-size-xs\)\] {
     width: var(--checkbox-size-xs);
   }
+  .w-\[var\(--divider-center-after-width\)\] {
+    width: var(--divider-center-after-width);
+  }
+  .w-\[var\(--divider-center-before-width\)\] {
+    width: var(--divider-center-before-width);
+  }
+  .w-\[var\(--divider-left-after-width\)\] {
+    width: var(--divider-left-after-width);
+  }
+  .w-\[var\(--divider-left-before-width\)\] {
+    width: var(--divider-left-before-width);
+  }
+  .w-\[var\(--divider-right-after-width\)\] {
+    width: var(--divider-right-after-width);
+  }
+  .w-\[var\(--divider-right-before-width\)\] {
+    width: var(--divider-right-before-width);
+  }
   .w-\[var\(--radix-popover-trigger-width\)\] {
     width: var(--radix-popover-trigger-width);
   }
@@ -1072,6 +1121,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1093,6 +1145,18 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-\[var\(--modal-max-width-lg\)\] {
+    max-width: var(--modal-max-width-lg);
+  }
+  .max-w-\[var\(--modal-max-width-md\)\] {
+    max-width: var(--modal-max-width-md);
+  }
+  .max-w-\[var\(--modal-max-width-sm\)\] {
+    max-width: var(--modal-max-width-sm);
+  }
+  .max-w-\[var\(--modal-max-width-xs\)\] {
+    max-width: var(--modal-max-width-xs);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1343,6 +1407,24 @@
   .gap-32 {
     gap: calc(var(--spacing) * 32);
   }
+  .gap-\[var\(--card-header-gap\)\] {
+    gap: var(--card-header-gap);
+  }
+  .gap-\[var\(--divider-gap\)\] {
+    gap: var(--divider-gap);
+  }
+  .gap-\[var\(--modal-gap-lg\)\] {
+    gap: var(--modal-gap-lg);
+  }
+  .gap-\[var\(--modal-gap-md\)\] {
+    gap: var(--modal-gap-md);
+  }
+  .gap-\[var\(--modal-gap-sm\)\] {
+    gap: var(--modal-gap-sm);
+  }
+  .gap-\[var\(--modal-gap-xs\)\] {
+    gap: var(--modal-gap-xs);
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1430,6 +1512,9 @@
   .self-end {
     align-self: flex-end;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1441,6 +1526,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -1530,6 +1618,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1542,10 +1634,18 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .\!border-error {
     border-color: var(--color-error) !important;
   }
@@ -2495,6 +2595,27 @@
   .p-8 {
     padding: 2rem;
   }
+  .p-\[var\(--card-content-padding\)\] {
+    padding: var(--card-content-padding);
+  }
+  .p-\[var\(--card-footer-padding\)\] {
+    padding: var(--card-footer-padding);
+  }
+  .p-\[var\(--card-padding\)\] {
+    padding: var(--card-padding);
+  }
+  .p-\[var\(--modal-padding-lg\)\] {
+    padding: var(--modal-padding-lg);
+  }
+  .p-\[var\(--modal-padding-md\)\] {
+    padding: var(--modal-padding-md);
+  }
+  .p-\[var\(--modal-padding-sm\)\] {
+    padding: var(--modal-padding-sm);
+  }
+  .p-\[var\(--modal-padding-xs\)\] {
+    padding: var(--modal-padding-xs);
+  }
   .p-\[var\(--textarea-padding-lg\)\] {
     padding: var(--textarea-padding-lg);
   }
@@ -2540,6 +2661,30 @@
   .px-10 {
     padding-inline: 2.5rem;
   }
+  .px-\[var\(--accordion-padding-x-lg\)\] {
+    padding-inline: var(--accordion-padding-x-lg);
+  }
+  .px-\[var\(--accordion-padding-x-md\)\] {
+    padding-inline: var(--accordion-padding-x-md);
+  }
+  .px-\[var\(--accordion-padding-x-sm\)\] {
+    padding-inline: var(--accordion-padding-x-sm);
+  }
+  .px-\[var\(--accordion-padding-x-xs\)\] {
+    padding-inline: var(--accordion-padding-x-xs);
+  }
+  .px-\[var\(--badge-padding-x-lg\)\] {
+    padding-inline: var(--badge-padding-x-lg);
+  }
+  .px-\[var\(--badge-padding-x-md\)\] {
+    padding-inline: var(--badge-padding-x-md);
+  }
+  .px-\[var\(--badge-padding-x-sm\)\] {
+    padding-inline: var(--badge-padding-x-sm);
+  }
+  .px-\[var\(--badge-padding-x-xs\)\] {
+    padding-inline: var(--badge-padding-x-xs);
+  }
   .px-\[var\(--button-padding-x-lg\)\] {
     padding-inline: var(--button-padding-x-lg);
   }
@@ -2612,6 +2757,30 @@
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .py-\[var\(--accordion-padding-y-lg\)\] {
+    padding-block: var(--accordion-padding-y-lg);
+  }
+  .py-\[var\(--accordion-padding-y-md\)\] {
+    padding-block: var(--accordion-padding-y-md);
+  }
+  .py-\[var\(--accordion-padding-y-sm\)\] {
+    padding-block: var(--accordion-padding-y-sm);
+  }
+  .py-\[var\(--accordion-padding-y-xs\)\] {
+    padding-block: var(--accordion-padding-y-xs);
+  }
+  .py-\[var\(--badge-padding-y-lg\)\] {
+    padding-block: var(--badge-padding-y-lg);
+  }
+  .py-\[var\(--badge-padding-y-md\)\] {
+    padding-block: var(--badge-padding-y-md);
+  }
+  .py-\[var\(--badge-padding-y-sm\)\] {
+    padding-block: var(--badge-padding-y-sm);
+  }
+  .py-\[var\(--badge-padding-y-xs\)\] {
+    padding-block: var(--badge-padding-y-xs);
+  }
   .pt-0 {
     padding-top: 0px;
   }
@@ -2675,9 +2844,6 @@
   .pb-2 {
     padding-bottom: 0.5rem;
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .pb-3 {
     padding-bottom: 0.75rem;
   }
@@ -2690,6 +2856,21 @@
   .pb-8 {
     padding-bottom: 2rem;
   }
+  .pb-\[var\(--accordion-padding-y-lg\)\] {
+    padding-bottom: var(--accordion-padding-y-lg);
+  }
+  .pb-\[var\(--accordion-padding-y-md\)\] {
+    padding-bottom: var(--accordion-padding-y-md);
+  }
+  .pb-\[var\(--accordion-padding-y-sm\)\] {
+    padding-bottom: var(--accordion-padding-y-sm);
+  }
+  .pb-\[var\(--accordion-padding-y-xs\)\] {
+    padding-bottom: var(--accordion-padding-y-xs);
+  }
+  .pl-3 {
+    padding-left: 0.75rem;
+  }
   .pl-8 {
     padding-left: 2rem;
   }
@@ -2783,6 +2964,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-\[var\(--card-title-weight\)\] {
+    --tw-font-weight: var(--card-title-weight);
+    font-weight: var(--card-title-weight);
+  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
@@ -2813,6 +2998,27 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--badge-font-size-lg\)\] {
+    color: var(--badge-font-size-lg);
+  }
+  .text-\[var\(--badge-font-size-md\)\] {
+    color: var(--badge-font-size-md);
+  }
+  .text-\[var\(--badge-font-size-sm\)\] {
+    color: var(--badge-font-size-sm);
+  }
+  .text-\[var\(--badge-font-size-xs\)\] {
+    color: var(--badge-font-size-xs);
+  }
+  .text-\[var\(--card-description-size\)\] {
+    color: var(--card-description-size);
+  }
+  .text-\[var\(--card-title-size\)\] {
+    color: var(--card-title-size);
+  }
+  .text-\[var\(--text-base\)\] {
+    color: var(--text-base);
+  }
   .text-accent {
     color: var(--color-accent);
   }
@@ -4068,6 +4274,26 @@
       color: var(--color-primary);
     }
   }
+  .sm\:max-w-\[var\(--modal-max-width-lg\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-lg);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-md\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-md);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-sm\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-sm);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-xs\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-xs);
+    }
+  }
   .sm\:max-w-lg {
     @media (width >= 40rem) {
       max-width: var(--container-lg);