@delightui/components 0.1.140 → 0.1.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/cjs/components/atoms/Text/Text.types.d.ts +28 -23
  2. package/dist/cjs/components/atoms/Tooltip/Tooltip.constants.d.ts +24 -0
  3. package/dist/cjs/components/atoms/Tooltip/Tooltip.d.ts +1 -1
  4. package/dist/cjs/components/atoms/Tooltip/Tooltip.presenter.d.ts +24 -0
  5. package/dist/cjs/components/molecules/Nav/NavLink/NavLink.types.d.ts +1 -0
  6. package/dist/cjs/components/molecules/Select/Select.presenter.d.ts +1 -0
  7. package/dist/cjs/components/organisms/Dropzone/Dropzone.presenter.d.ts +2 -0
  8. package/dist/cjs/components/organisms/Dropzone/Dropzone.types.d.ts +7 -3
  9. package/dist/cjs/components/organisms/Form/UpdatedFormExample.d.ts +1 -1
  10. package/dist/cjs/lib/utils.d.ts +15 -0
  11. package/dist/cjs/library.css +173 -17
  12. package/dist/cjs/library.js +3 -3
  13. package/dist/cjs/library.js.map +1 -1
  14. package/dist/esm/components/atoms/Text/Text.types.d.ts +28 -23
  15. package/dist/esm/components/atoms/Tooltip/Tooltip.constants.d.ts +24 -0
  16. package/dist/esm/components/atoms/Tooltip/Tooltip.d.ts +1 -1
  17. package/dist/esm/components/atoms/Tooltip/Tooltip.presenter.d.ts +24 -0
  18. package/dist/esm/components/molecules/Nav/NavLink/NavLink.types.d.ts +1 -0
  19. package/dist/esm/components/molecules/Select/Select.presenter.d.ts +1 -0
  20. package/dist/esm/components/organisms/Dropzone/Dropzone.presenter.d.ts +2 -0
  21. package/dist/esm/components/organisms/Dropzone/Dropzone.types.d.ts +7 -3
  22. package/dist/esm/components/organisms/Form/UpdatedFormExample.d.ts +1 -1
  23. package/dist/esm/lib/utils.d.ts +15 -0
  24. package/dist/esm/library.css +173 -17
  25. package/dist/esm/library.js +3 -3
  26. package/dist/esm/library.js.map +1 -1
  27. package/dist/index.d.ts +36 -27
  28. package/package.json +1 -1
@@ -15,11 +15,10 @@ export type TextDecorationEnum = 'None' | 'Underline' | 'Strikethrough';
15
15
  * Enum for text transformations.
16
16
  */
17
17
  export type TextTransformEnum = typeof transforms[number];
18
- export interface TextProps {
19
- /**
20
- * Additional class for styling.
21
- */
22
- className?: string;
18
+ /**
19
+ * Props used to handle text style.
20
+ */
21
+ export type TextStylingProps = {
23
22
  /**
24
23
  * Type of the text.
25
24
  * @default 'BodyMedium'
@@ -30,20 +29,6 @@ export interface TextProps {
30
29
  * @default 'Regular'
31
30
  */
32
31
  weight?: TextWeightEnum;
33
- /**
34
- * The content to be displayed as text.
35
- */
36
- children?: React.ReactNode;
37
- /**
38
- * Flag to prevent text from wrapping.
39
- * @default false
40
- */
41
- noWrap?: boolean;
42
- /**
43
- * Flag to handle how white space inside an element is handled.
44
- * @default false
45
- */
46
- whiteSpaceNoWrap?: boolean;
47
32
  /**
48
33
  * Flag to italicize the text.
49
34
  * @default false
@@ -59,13 +44,33 @@ export interface TextProps {
59
44
  * @default false
60
45
  */
61
46
  ellipsis?: boolean;
47
+ /**
48
+ * Modify the element type used for rendering
49
+ */
50
+ as?: React.ElementType<any, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
51
+ };
52
+ export interface TextProps extends TextStylingProps {
53
+ /**
54
+ * Additional class for styling.
55
+ */
56
+ className?: string;
57
+ /**
58
+ * The content to be displayed as text.
59
+ */
60
+ children?: React.ReactNode;
61
+ /**
62
+ * Flag to prevent text from wrapping.
63
+ * @default false
64
+ */
65
+ noWrap?: boolean;
66
+ /**
67
+ * Flag to handle how white space inside an element is handled.
68
+ * @default false
69
+ */
70
+ whiteSpaceNoWrap?: boolean;
62
71
  /**
63
72
  * Transform style for the text.
64
73
  * @default 'None'
65
74
  */
66
75
  transform?: TextTransformEnum;
67
- /**
68
- * Modify the element type used for rendering
69
- */
70
- as?: React.ElementType<any, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'>;
71
76
  }
@@ -0,0 +1,24 @@
1
+ import { TooltipDirectionEnum } from './Tooltip.types';
2
+ export declare const TOOLTIP_ARROW_CONSTANTS: {
3
+ readonly WIDTH: 28;
4
+ readonly HEIGHT: 8;
5
+ readonly OFFSET: 12;
6
+ };
7
+ export declare const ARROW_DIMENSIONS_MAP: Record<TooltipDirectionEnum, {
8
+ width: number;
9
+ height: number;
10
+ }>;
11
+ export declare const TOOLTIP_VARIANT_MAP: {
12
+ readonly 'Top-Center': "center-top";
13
+ readonly 'Top-Start': "start-top";
14
+ readonly 'Top-End': "end-top";
15
+ readonly 'Bottom-Center': "center-bottom";
16
+ readonly 'Bottom-Start': "start-bottom";
17
+ readonly 'Bottom-End': "end-bottom";
18
+ readonly 'Left-Center': "center-left";
19
+ readonly 'Left-Start': "start-left";
20
+ readonly 'Left-End': "end-left";
21
+ readonly 'Right-Center': "center-right";
22
+ readonly 'Right-Start': "start-right";
23
+ readonly 'Right-End': "end-right";
24
+ };
@@ -1,3 +1,3 @@
1
1
  import { TooltipProps } from './Tooltip.types';
2
- declare const Tooltip: ({ children, direction, alignment, action, style, isVisible, target, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default Tooltip;
@@ -0,0 +1,24 @@
1
+ import { CSSProperties } from 'react';
2
+ import { TooltipProps } from './Tooltip.types';
3
+ declare const usePresenter: (props: TooltipProps) => {
4
+ direction: import("./Tooltip.types").TooltipDirectionEnum;
5
+ action: import("./Tooltip.types").TooltipActionType;
6
+ target: import("react").ReactNode;
7
+ position: {
8
+ top: number;
9
+ left: number;
10
+ };
11
+ showTooltip: () => void;
12
+ hideTooltip: () => void;
13
+ toggleTooltip: () => void;
14
+ targetRef: import("react").RefObject<HTMLDivElement>;
15
+ tooltipRef: import("react").RefObject<HTMLDivElement>;
16
+ wrapperRef: import("react").RefObject<HTMLDivElement>;
17
+ variantProps: {
18
+ 'component-variant': string;
19
+ };
20
+ arrowStyle: CSSProperties;
21
+ style: import("./Tooltip.types").TooltipStyleEnum;
22
+ visible: boolean;
23
+ };
24
+ export default usePresenter;
@@ -1,6 +1,7 @@
1
1
  import { LinkProps as RouteLinkProps } from 'react-router-dom';
2
2
  import { ButtonProps, ButtonTypeEnum } from '../../../atoms/Button/Button.types';
3
3
  export type NavLinkTypeEnum = 'Fill' | 'Underline';
4
+ export type NavLinkSizeEnum = 'Small' | 'Medium' | 'Large';
4
5
  export type NavLinkProps = Omit<RouteLinkProps, 'to'> & Pick<ButtonProps, 'appearance' | 'size' | 'style' | 'leadingIcon' | 'trailingIcon'> & {
5
6
  /**
6
7
  * The destination URL or path for the navigation link.
@@ -289,5 +289,6 @@ declare const usePresenter: (props: SelectProps) => {
289
289
  onOptionsOpen: () => void;
290
290
  onOptionsClose: () => void;
291
291
  displayValue: string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | undefined;
292
+ multiple: boolean | undefined;
292
293
  };
293
294
  export default usePresenter;
@@ -10,11 +10,13 @@ declare const usePresenter: (props: DropzoneProps) => {
10
10
  empty: import("react").ReactNode;
11
11
  loading: import("react").ReactNode;
12
12
  uploaded: import("react").ReactNode;
13
+ drag: import("react").ReactNode;
13
14
  status: DropzoneStatus;
14
15
  accept: {
15
16
  [key: string]: readonly string[];
16
17
  } | undefined;
17
18
  resetFiles: () => void;
18
19
  id: string | undefined;
20
+ isDragActive: boolean;
19
21
  };
20
22
  export default usePresenter;
@@ -16,17 +16,21 @@ export type DropzoneStatus = 'Empty' | 'Loading' | 'Uploaded';
16
16
  export type DropzoneProps = ControlledFormComponentProps<File[]> & {
17
17
  className?: string;
18
18
  /**
19
- * The empty state of the dropzone.
19
+ * the view when no file is selected.
20
20
  */
21
21
  empty?: React.ReactNode;
22
22
  /**
23
- * The loading state of the dropzone.
23
+ * the view when files are validating or processed.
24
24
  */
25
25
  loading?: React.ReactNode;
26
26
  /**
27
- * The uploaded state of the dropzone.
27
+ * the view when files are accepted.
28
28
  */
29
29
  uploaded?: React.ReactNode;
30
+ /**
31
+ * the view when the files are being dragged over dropzone.
32
+ */
33
+ drag?: React.ReactNode;
30
34
  /**
31
35
  * The accepted file types based on mime type.
32
36
  * @example
@@ -8,7 +8,7 @@ export type ProfileFormValues = {
8
8
  interests: boolean;
9
9
  skillLevel: number;
10
10
  experienceRange: [number, number];
11
- favoriteFramework: string;
11
+ favoriteFramework: string[];
12
12
  skills: string[];
13
13
  birthdate: string | Date;
14
14
  availableForWork: boolean;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Prefixes all keys of an object type with a given string while preserving camelCase.
3
+ * The original key name is capitalized before being appended to the prefix.
4
+ *
5
+ * @typeParam T - Object type whose keys will be prefixed.
6
+ * @typeParam Prefix - String prefix to add to each key.
7
+ *
8
+ * @example
9
+ * type Original = { type: boolean; weight: number };
10
+ * type WithText = PrefixKeys<Original, 'text'>;
11
+ * // Result: { textType: boolean; textWeight: number }
12
+ */
13
+ export type PrefixKeys<T, Prefix extends string> = {
14
+ [K in keyof T as `${Prefix}${Capitalize<Extract<K, string>>}`]: T[K];
15
+ };
@@ -4052,8 +4052,29 @@ span.flatpickr-weekday {
4052
4052
  height: 32px;
4053
4053
  }
4054
4054
  .Dropzone-module_dropzone__4uDyI {
4055
+ position: relative;
4055
4056
  width: var(--dropzone-width);
4056
4057
  }
4058
+ .Dropzone-module_dropzone__4uDyI .Dropzone-module_dropzoneOverlay__mdm27 {
4059
+ position: absolute;
4060
+ top: 0;
4061
+ right: 0;
4062
+ bottom: 0;
4063
+ left: 0;
4064
+ pointer-events: none;
4065
+ opacity: 0;
4066
+ transform: scale(0.98);
4067
+ transition: opacity 120ms ease, transform 120ms ease;
4068
+ display: flex;
4069
+ align-items: center;
4070
+ justify-content: center;
4071
+ height: 100%;
4072
+ width: 100%;
4073
+ }
4074
+ .Dropzone-module_dropzone__4uDyI .Dropzone-module_dropzoneOverlay__mdm27.Dropzone-module_visible__7SBj1 {
4075
+ opacity: 0.5;
4076
+ transform: scale(1);
4077
+ }
4057
4078
  .DropzoneContent-module_dropzoneContent__UjfAn {
4058
4079
  width: 100%;
4059
4080
  border-width: 1px;
@@ -22033,7 +22054,7 @@ span.flatpickr-weekday {
22033
22054
  --draggable-item-paragraph-spacing: 0px;
22034
22055
  --draggable-item-paragraph-indent: 0px
22035
22056
  }
22036
- [data-theme='dark'] [component-variant^="nav-link-"], [data-theme='light'] [component-variant^="nav-link-"] {
22057
+ [data-theme='custom'] [component-variant^="nav-link-"], [data-theme='dark'] [component-variant^="nav-link-"], [data-theme='light'] [component-variant^="nav-link-"] {
22037
22058
  --nav-link-opacity: 1;
22038
22059
  --nav-link-height: auto;
22039
22060
  --nav-link-min-height: auto;
@@ -22072,7 +22093,69 @@ span.flatpickr-weekday {
22072
22093
  --nav-link-paragraph-spacing: ;
22073
22094
  --nav-link-paragraph-indent:
22074
22095
  }
22075
- [data-theme='dark'] [component-variant="nav-link-fill"], [data-theme='light'] [component-variant="nav-link-fill"] {
22096
+ [data-theme='custom'] [component-variant="nav-link-small-fill"], [data-theme='dark'] [component-variant="nav-link-small-fill"], [data-theme='light'] [component-variant="nav-link-small-fill"] {
22097
+ --nav-link-color: var(--interactive-surface-primary-hover);
22098
+ --nav-link-padding-left: var(--spacing-space-2);
22099
+ --nav-link-padding-right: var(--spacing-space-2);
22100
+ --nav-link-font-family: var(--font-family-body);
22101
+ --nav-link-font-size: var(--font-size-body-small);
22102
+ --nav-link-font-weight: var(--font-weight-medium);
22103
+ --nav-link-line-height: var(--line-height-body-small);
22104
+ --nav-link-paragraph-spacing: 0px;
22105
+ --nav-link-paragraph-indent: 0px
22106
+ }
22107
+ [data-theme='custom'] [component-variant="nav-link-small-fill"]:hover:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-fill"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-fill"]:hover:not(:disabled):not([disabled]) {
22108
+ --nav-link-color: var(--text-primary);
22109
+ --nav-link-padding-left: var(--spacing-space-2);
22110
+ --nav-link-padding-right: var(--spacing-space-2);
22111
+ --nav-link-font-family: var(--font-family-body);
22112
+ --nav-link-font-size: var(--font-size-body-small);
22113
+ --nav-link-font-weight: var(--font-weight-medium);
22114
+ --nav-link-line-height: var(--line-height-body-small);
22115
+ --nav-link-paragraph-spacing: 0px;
22116
+ --nav-link-paragraph-indent: 0px
22117
+ }
22118
+ [data-theme='custom'] [component-variant="nav-link-small-fill"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-fill"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-fill"][active]:not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-small-fill"]:active:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-fill"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-fill"]:active:not(:disabled):not([disabled]) {
22119
+ --nav-link-color: var(--text-primary);
22120
+ --nav-link-padding-left: var(--spacing-space-2);
22121
+ --nav-link-padding-right: var(--spacing-space-2);
22122
+ --nav-link-font-family: var(--font-family-body);
22123
+ --nav-link-font-size: var(--font-size-body-small);
22124
+ --nav-link-font-weight: var(--font-weight-medium);
22125
+ --nav-link-line-height: var(--line-height-body-small);
22126
+ --nav-link-paragraph-spacing: 0px;
22127
+ --nav-link-paragraph-indent: 0px
22128
+ }
22129
+ [data-theme='custom'] [component-variant="nav-link-small-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-small-fill"]:focus-visible:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-fill"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-fill"]:focus-visible:not(:disabled):not([disabled]) {
22130
+ --nav-link-color: var(--text-primary);
22131
+ --nav-link-outline-color: var(--border-border-grey-1);
22132
+ --nav-link-outline-width: 1px;
22133
+ --nav-link-padding-left: var(--spacing-space-2);
22134
+ --nav-link-padding-right: var(--spacing-space-2);
22135
+ --nav-link-font-family: var(--font-family-body);
22136
+ --nav-link-font-size: var(--font-size-body-small);
22137
+ --nav-link-font-weight: var(--font-weight-medium);
22138
+ --nav-link-line-height: var(--line-height-body-small);
22139
+ --nav-link-paragraph-spacing: 0px;
22140
+ --nav-link-paragraph-indent: 0px
22141
+ }
22142
+ [data-theme='custom'] [component-variant="nav-link-small-fill"][disabled],
22143
+ [data-theme='dark'] [component-variant="nav-link-small-fill"][disabled],
22144
+ [data-theme='light'] [component-variant="nav-link-small-fill"][disabled],
22145
+ [data-theme='custom'] [component-variant="nav-link-small-fill"]:disabled,
22146
+ [data-theme='dark'] [component-variant="nav-link-small-fill"]:disabled,
22147
+ [data-theme='light'] [component-variant="nav-link-small-fill"]:disabled {
22148
+ --nav-link-color: var(--text-secondary);
22149
+ --nav-link-padding-left: var(--spacing-space-2);
22150
+ --nav-link-padding-right: var(--spacing-space-2);
22151
+ --nav-link-font-family: var(--font-family-body);
22152
+ --nav-link-font-size: var(--font-size-body-small);
22153
+ --nav-link-font-weight: var(--font-weight-medium);
22154
+ --nav-link-line-height: var(--line-height-body-small);
22155
+ --nav-link-paragraph-spacing: 0px;
22156
+ --nav-link-paragraph-indent: 0px
22157
+ }
22158
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"], [data-theme='dark'] [component-variant="nav-link-medium-fill"], [data-theme='light'] [component-variant="nav-link-medium-fill"] {
22076
22159
  --nav-link-color: var(--interactive-surface-primary-hover);
22077
22160
  --nav-link-padding-left: var(--spacing-space-2);
22078
22161
  --nav-link-padding-right: var(--spacing-space-2);
@@ -22083,7 +22166,7 @@ span.flatpickr-weekday {
22083
22166
  --nav-link-paragraph-spacing: 0px;
22084
22167
  --nav-link-paragraph-indent: 0px
22085
22168
  }
22086
- [data-theme='dark'] [component-variant="nav-link-fill"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-fill"]:hover:not(:disabled):not([disabled]) {
22169
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"]:hover:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-fill"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-fill"]:hover:not(:disabled):not([disabled]) {
22087
22170
  --nav-link-color: var(--text-primary);
22088
22171
  --nav-link-padding-left: var(--spacing-space-2);
22089
22172
  --nav-link-padding-right: var(--spacing-space-2);
@@ -22094,7 +22177,7 @@ span.flatpickr-weekday {
22094
22177
  --nav-link-paragraph-spacing: 0px;
22095
22178
  --nav-link-paragraph-indent: 0px
22096
22179
  }
22097
- [data-theme='dark'] [component-variant="nav-link-fill"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-fill"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-fill"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-fill"]:active:not(:disabled):not([disabled]) {
22180
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-fill"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-fill"][active]:not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-medium-fill"]:active:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-fill"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-fill"]:active:not(:disabled):not([disabled]) {
22098
22181
  --nav-link-color: var(--text-primary);
22099
22182
  --nav-link-padding-left: var(--spacing-space-2);
22100
22183
  --nav-link-padding-right: var(--spacing-space-2);
@@ -22105,7 +22188,7 @@ span.flatpickr-weekday {
22105
22188
  --nav-link-paragraph-spacing: 0px;
22106
22189
  --nav-link-paragraph-indent: 0px
22107
22190
  }
22108
- [data-theme='dark'] [component-variant="nav-link-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-fill"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-fill"]:focus-visible:not(:disabled):not([disabled]) {
22191
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-fill"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-medium-fill"]:focus-visible:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-fill"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-fill"]:focus-visible:not(:disabled):not([disabled]) {
22109
22192
  --nav-link-color: var(--text-primary);
22110
22193
  --nav-link-outline-color: var(--border-border-grey-1);
22111
22194
  --nav-link-outline-width: 1px;
@@ -22118,10 +22201,12 @@ span.flatpickr-weekday {
22118
22201
  --nav-link-paragraph-spacing: 0px;
22119
22202
  --nav-link-paragraph-indent: 0px
22120
22203
  }
22121
- [data-theme='dark'] [component-variant="nav-link-fill"][disabled],
22122
- [data-theme='light'] [component-variant="nav-link-fill"][disabled],
22123
- [data-theme='dark'] [component-variant="nav-link-fill"]:disabled,
22124
- [data-theme='light'] [component-variant="nav-link-fill"]:disabled {
22204
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"][disabled],
22205
+ [data-theme='dark'] [component-variant="nav-link-medium-fill"][disabled],
22206
+ [data-theme='light'] [component-variant="nav-link-medium-fill"][disabled],
22207
+ [data-theme='custom'] [component-variant="nav-link-medium-fill"]:disabled,
22208
+ [data-theme='dark'] [component-variant="nav-link-medium-fill"]:disabled,
22209
+ [data-theme='light'] [component-variant="nav-link-medium-fill"]:disabled {
22125
22210
  --nav-link-color: var(--text-secondary);
22126
22211
  --nav-link-padding-left: var(--spacing-space-2);
22127
22212
  --nav-link-padding-right: var(--spacing-space-2);
@@ -22132,7 +22217,76 @@ span.flatpickr-weekday {
22132
22217
  --nav-link-paragraph-spacing: 0px;
22133
22218
  --nav-link-paragraph-indent: 0px
22134
22219
  }
22135
- [data-theme='dark'] [component-variant="nav-link-underline"], [data-theme='light'] [component-variant="nav-link-underline"] {
22220
+ [data-theme='custom'] [component-variant="nav-link-small-underline"], [data-theme='dark'] [component-variant="nav-link-small-underline"], [data-theme='light'] [component-variant="nav-link-small-underline"] {
22221
+ --nav-link-color: var(--text-primary);
22222
+ --nav-link-padding-left: var(--spacing-space-2);
22223
+ --nav-link-padding-right: var(--spacing-space-2);
22224
+ --nav-link-font-family: var(--font-family-body);
22225
+ --nav-link-font-size: var(--font-size-body-small);
22226
+ --nav-link-font-weight: var(--font-weight-regular);
22227
+ --nav-link-line-height: var(--line-height-body-small);
22228
+ --nav-link-paragraph-spacing: 0px;
22229
+ --nav-link-paragraph-indent: 0px
22230
+ }
22231
+ [data-theme='custom'] [component-variant="nav-link-small-underline"]:hover:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-underline"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-underline"]:hover:not(:disabled):not([disabled]) {
22232
+ --nav-link-color: var(--text-primary);
22233
+ --nav-link-border-color: var(--border-border-grey-1);
22234
+ --nav-link-border-bottom-width: 1px;
22235
+ --nav-link-padding-left: var(--spacing-space-2);
22236
+ --nav-link-padding-right: var(--spacing-space-2);
22237
+ --nav-link-font-family: var(--font-family-body);
22238
+ --nav-link-font-size: var(--font-size-body-small);
22239
+ --nav-link-font-weight: var(--font-weight-regular);
22240
+ --nav-link-line-height: var(--line-height-body-small);
22241
+ --nav-link-paragraph-spacing: 0px;
22242
+ --nav-link-paragraph-indent: 0px
22243
+ }
22244
+ [data-theme='custom'] [component-variant="nav-link-small-underline"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-underline"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-underline"][active]:not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-small-underline"]:active:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-underline"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-underline"]:active:not(:disabled):not([disabled]) {
22245
+ --nav-link-color: var(--text-primary);
22246
+ --nav-link-border-color: var(--border-border-grey-1);
22247
+ --nav-link-border-bottom-width: 1px;
22248
+ --nav-link-padding-left: var(--spacing-space-2);
22249
+ --nav-link-padding-right: var(--spacing-space-2);
22250
+ --nav-link-font-family: var(--font-family-body);
22251
+ --nav-link-font-size: var(--font-size-body-small);
22252
+ --nav-link-font-weight: var(--font-weight-regular);
22253
+ --nav-link-line-height: var(--line-height-body-small);
22254
+ --nav-link-paragraph-spacing: 0px;
22255
+ --nav-link-paragraph-indent: 0px
22256
+ }
22257
+ [data-theme='custom'] [component-variant="nav-link-small-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-small-underline"]:focus-visible:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-small-underline"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-small-underline"]:focus-visible:not(:disabled):not([disabled]) {
22258
+ --nav-link-color: var(--text-primary);
22259
+ --nav-link-border-color: var(--border-border-grey-1);
22260
+ --nav-link-border-top-width: 1px;
22261
+ --nav-link-border-right-width: 1px;
22262
+ --nav-link-border-bottom-width: 1px;
22263
+ --nav-link-border-left-width: 1px;
22264
+ --nav-link-padding-left: var(--spacing-space-2);
22265
+ --nav-link-padding-right: var(--spacing-space-2);
22266
+ --nav-link-font-family: var(--font-family-body);
22267
+ --nav-link-font-size: var(--font-size-body-small);
22268
+ --nav-link-font-weight: var(--font-weight-regular);
22269
+ --nav-link-line-height: var(--line-height-body-small);
22270
+ --nav-link-paragraph-spacing: 0px;
22271
+ --nav-link-paragraph-indent: 0px
22272
+ }
22273
+ [data-theme='custom'] [component-variant="nav-link-small-underline"][disabled],
22274
+ [data-theme='dark'] [component-variant="nav-link-small-underline"][disabled],
22275
+ [data-theme='light'] [component-variant="nav-link-small-underline"][disabled],
22276
+ [data-theme='custom'] [component-variant="nav-link-small-underline"]:disabled,
22277
+ [data-theme='dark'] [component-variant="nav-link-small-underline"]:disabled,
22278
+ [data-theme='light'] [component-variant="nav-link-small-underline"]:disabled {
22279
+ --nav-link-color: var(--text-tertiary);
22280
+ --nav-link-padding-left: var(--spacing-space-2);
22281
+ --nav-link-padding-right: var(--spacing-space-2);
22282
+ --nav-link-font-family: var(--font-family-body);
22283
+ --nav-link-font-size: var(--font-size-body-small);
22284
+ --nav-link-font-weight: var(--font-weight-regular);
22285
+ --nav-link-line-height: var(--line-height-body-small);
22286
+ --nav-link-paragraph-spacing: 0px;
22287
+ --nav-link-paragraph-indent: 0px
22288
+ }
22289
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"], [data-theme='dark'] [component-variant="nav-link-medium-underline"], [data-theme='light'] [component-variant="nav-link-medium-underline"] {
22136
22290
  --nav-link-color: var(--text-primary);
22137
22291
  --nav-link-padding-left: var(--spacing-space-2);
22138
22292
  --nav-link-padding-right: var(--spacing-space-2);
@@ -22143,7 +22297,7 @@ span.flatpickr-weekday {
22143
22297
  --nav-link-paragraph-spacing: 0px;
22144
22298
  --nav-link-paragraph-indent: 0px
22145
22299
  }
22146
- [data-theme='dark'] [component-variant="nav-link-underline"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-underline"]:hover:not(:disabled):not([disabled]) {
22300
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"]:hover:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-underline"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-underline"]:hover:not(:disabled):not([disabled]) {
22147
22301
  --nav-link-color: var(--text-primary);
22148
22302
  --nav-link-border-color: var(--border-border-grey-1);
22149
22303
  --nav-link-border-bottom-width: 1px;
@@ -22156,7 +22310,7 @@ span.flatpickr-weekday {
22156
22310
  --nav-link-paragraph-spacing: 0px;
22157
22311
  --nav-link-paragraph-indent: 0px
22158
22312
  }
22159
- [data-theme='dark'] [component-variant="nav-link-underline"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-underline"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-underline"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-underline"]:active:not(:disabled):not([disabled]) {
22313
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-underline"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-underline"][active]:not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-medium-underline"]:active:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-underline"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-underline"]:active:not(:disabled):not([disabled]) {
22160
22314
  --nav-link-color: var(--text-primary);
22161
22315
  --nav-link-border-color: var(--border-border-grey-1);
22162
22316
  --nav-link-border-bottom-width: 1px;
@@ -22169,7 +22323,7 @@ span.flatpickr-weekday {
22169
22323
  --nav-link-paragraph-spacing: 0px;
22170
22324
  --nav-link-paragraph-indent: 0px
22171
22325
  }
22172
- [data-theme='dark'] [component-variant="nav-link-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-underline"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-underline"]:focus-visible:not(:disabled):not([disabled]) {
22326
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-underline"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='custom'] [component-variant="nav-link-medium-underline"]:focus-visible:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="nav-link-medium-underline"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="nav-link-medium-underline"]:focus-visible:not(:disabled):not([disabled]) {
22173
22327
  --nav-link-color: var(--text-primary);
22174
22328
  --nav-link-border-color: var(--border-border-grey-1);
22175
22329
  --nav-link-border-top-width: 1px;
@@ -22185,10 +22339,12 @@ span.flatpickr-weekday {
22185
22339
  --nav-link-paragraph-spacing: 0px;
22186
22340
  --nav-link-paragraph-indent: 0px
22187
22341
  }
22188
- [data-theme='dark'] [component-variant="nav-link-underline"][disabled],
22189
- [data-theme='light'] [component-variant="nav-link-underline"][disabled],
22190
- [data-theme='dark'] [component-variant="nav-link-underline"]:disabled,
22191
- [data-theme='light'] [component-variant="nav-link-underline"]:disabled {
22342
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"][disabled],
22343
+ [data-theme='dark'] [component-variant="nav-link-medium-underline"][disabled],
22344
+ [data-theme='light'] [component-variant="nav-link-medium-underline"][disabled],
22345
+ [data-theme='custom'] [component-variant="nav-link-medium-underline"]:disabled,
22346
+ [data-theme='dark'] [component-variant="nav-link-medium-underline"]:disabled,
22347
+ [data-theme='light'] [component-variant="nav-link-medium-underline"]:disabled {
22192
22348
  --nav-link-color: var(--text-tertiary);
22193
22349
  --nav-link-padding-left: var(--spacing-space-2);
22194
22350
  --nav-link-padding-right: var(--spacing-space-2);