@postenbring/hedwig-react 1.5.0 → 2.1.0

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 (102) hide show
  1. package/dist/button/button.d.ts +13 -7
  2. package/dist/button/button.d.ts.map +1 -1
  3. package/dist/button/button.js +5 -3
  4. package/dist/button/button.js.map +1 -1
  5. package/dist/button/button.mjs +1 -1
  6. package/dist/button/index.js +5 -3
  7. package/dist/button/index.js.map +1 -1
  8. package/dist/button/index.mjs +1 -1
  9. package/dist/button-list/button-list.d.ts +19 -0
  10. package/dist/button-list/button-list.d.ts.map +1 -0
  11. package/dist/button-list/button-list.js +78 -0
  12. package/dist/button-list/button-list.js.map +1 -0
  13. package/dist/button-list/button-list.mjs +8 -0
  14. package/dist/button-list/button-list.mjs.map +1 -0
  15. package/dist/button-list/index.d.ts +3 -0
  16. package/dist/button-list/index.d.ts.map +1 -0
  17. package/dist/button-list/index.js +80 -0
  18. package/dist/button-list/index.js.map +1 -0
  19. package/dist/button-list/index.mjs +9 -0
  20. package/dist/button-list/index.mjs.map +1 -0
  21. package/dist/card/card.d.ts +10 -0
  22. package/dist/card/card.d.ts.map +1 -1
  23. package/dist/card/card.js +6 -2
  24. package/dist/card/card.js.map +1 -1
  25. package/dist/card/card.mjs +1 -1
  26. package/dist/card/index.js +6 -2
  27. package/dist/card/index.js.map +1 -1
  28. package/dist/card/index.mjs +1 -1
  29. package/dist/{chunk-6DWIJEHQ.mjs → chunk-444SCBJD.mjs} +3 -3
  30. package/dist/chunk-444SCBJD.mjs.map +1 -0
  31. package/dist/{chunk-FUIKSOJF.mjs → chunk-6SVLMQUW.mjs} +4 -4
  32. package/dist/{chunk-BQR4ZRFT.mjs → chunk-CFAPQFEC.mjs} +5 -5
  33. package/dist/{chunk-6VKQ6IRG.mjs → chunk-GXIKHXWC.mjs} +1 -1
  34. package/dist/chunk-GXIKHXWC.mjs.map +1 -0
  35. package/dist/{chunk-NE6PE5W7.mjs → chunk-LDZIJR2D.mjs} +7 -3
  36. package/dist/chunk-LDZIJR2D.mjs.map +1 -0
  37. package/dist/chunk-ME746XCZ.mjs +31 -0
  38. package/dist/chunk-ME746XCZ.mjs.map +1 -0
  39. package/dist/{chunk-V5X3ZS23.mjs → chunk-OHDHIRAW.mjs} +5 -3
  40. package/dist/chunk-OHDHIRAW.mjs.map +1 -0
  41. package/dist/{chunk-AYCHNAU7.mjs → chunk-TYCGAA35.mjs} +6 -4
  42. package/dist/chunk-TYCGAA35.mjs.map +1 -0
  43. package/dist/chunk-Y6NOEN7R.mjs +1 -0
  44. package/dist/chunk-Y6NOEN7R.mjs.map +1 -0
  45. package/dist/{chunk-TC5PD4TA.mjs → chunk-YQMTDQSQ.mjs} +4 -4
  46. package/dist/footer/footer.js +6 -4
  47. package/dist/footer/footer.js.map +1 -1
  48. package/dist/footer/footer.mjs +2 -2
  49. package/dist/footer/index.js +6 -4
  50. package/dist/footer/index.js.map +1 -1
  51. package/dist/footer/index.mjs +2 -2
  52. package/dist/form/error-summary/error-summary.js +4 -2
  53. package/dist/form/error-summary/error-summary.js.map +1 -1
  54. package/dist/form/error-summary/error-summary.mjs +4 -4
  55. package/dist/form/error-summary/index.js +4 -2
  56. package/dist/form/error-summary/index.js.map +1 -1
  57. package/dist/form/error-summary/index.mjs +4 -4
  58. package/dist/form/index.js +4 -2
  59. package/dist/form/index.js.map +1 -1
  60. package/dist/form/index.mjs +18 -18
  61. package/dist/index.d.ts +1 -0
  62. package/dist/index.d.ts.map +1 -1
  63. package/dist/index.js +475 -444
  64. package/dist/index.js.map +1 -1
  65. package/dist/index.mjs +64 -59
  66. package/dist/layout/grid/grid.mjs +2 -2
  67. package/dist/layout/grid/index.mjs +2 -2
  68. package/dist/layout/index.mjs +3 -3
  69. package/dist/layout/stack/index.mjs +2 -2
  70. package/dist/layout/stack/stack.mjs +2 -2
  71. package/dist/link/index.js +4 -2
  72. package/dist/link/index.js.map +1 -1
  73. package/dist/link/index.mjs +1 -1
  74. package/dist/link/link.d.ts +9 -3
  75. package/dist/link/link.d.ts.map +1 -1
  76. package/dist/link/link.js +4 -2
  77. package/dist/link/link.js.map +1 -1
  78. package/dist/link/link.mjs +1 -1
  79. package/dist/modal/index.js.map +1 -1
  80. package/dist/modal/index.mjs +1 -1
  81. package/dist/modal/modal.d.ts +1 -1
  82. package/dist/modal/modal.js.map +1 -1
  83. package/dist/modal/modal.mjs +1 -1
  84. package/package.json +6 -6
  85. package/src/button/button.tsx +19 -10
  86. package/src/button-list/button-list.stories.tsx +27 -0
  87. package/src/button-list/button-list.tsx +37 -0
  88. package/src/button-list/index.tsx +3 -0
  89. package/src/card/card.tsx +16 -2
  90. package/src/footer/footer.tsx +1 -1
  91. package/src/index.ts +1 -0
  92. package/src/link/link.tsx +18 -5
  93. package/src/modal/modal.stories.tsx +1 -1
  94. package/src/modal/modal.tsx +1 -1
  95. package/dist/chunk-6DWIJEHQ.mjs.map +0 -1
  96. package/dist/chunk-6VKQ6IRG.mjs.map +0 -1
  97. package/dist/chunk-AYCHNAU7.mjs.map +0 -1
  98. package/dist/chunk-NE6PE5W7.mjs.map +0 -1
  99. package/dist/chunk-V5X3ZS23.mjs.map +0 -1
  100. /package/dist/{chunk-FUIKSOJF.mjs.map → chunk-6SVLMQUW.mjs.map} +0 -0
  101. /package/dist/{chunk-BQR4ZRFT.mjs.map → chunk-CFAPQFEC.mjs.map} +0 -0
  102. /package/dist/{chunk-TC5PD4TA.mjs.map → chunk-YQMTDQSQ.mjs.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@postenbring/hedwig-react",
3
- "version": "1.5.0",
3
+ "version": "2.1.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -17,8 +17,8 @@
17
17
  "@types/react-dom": "^18.3.1",
18
18
  "react": "^18.3.1",
19
19
  "react-dom": "18.3.1",
20
- "tsup": "^8.3.5",
21
- "typescript": "^5.6.3",
20
+ "tsup": "^8.4.0",
21
+ "typescript": "^5.8.3",
22
22
  "eslint-config-custom": "0.0.1",
23
23
  "hedwig-tsconfig": "0.0.0"
24
24
  },
@@ -29,9 +29,9 @@
29
29
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
30
30
  },
31
31
  "dependencies": {
32
- "@radix-ui/react-popover": "1.1.2",
33
- "@radix-ui/react-slot": "1.1.0",
34
- "@postenbring/hedwig-css": "1.6.0"
32
+ "@radix-ui/react-popover": "1.1.6",
33
+ "@radix-ui/react-slot": "1.1.2",
34
+ "@postenbring/hedwig-css": "2.1.0"
35
35
  },
36
36
  "publishConfig": {
37
37
  "access": "public"
@@ -5,15 +5,17 @@ import { Slot } from "@radix-ui/react-slot";
5
5
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
6
  /**
7
7
  * The height, font size and padding of the button
8
+ *
9
+ * @default "large"
8
10
  */
9
- size?: "small" | "medium" | "large";
11
+ size?: "small" | "large";
10
12
 
11
13
  /**
12
14
  * The background and fill of the button
13
15
  *
14
16
  * @default "primary"
15
17
  */
16
- variant?: "primary" | "secondary" | "primary-outline" | "secondary-outline";
18
+ variant?: "primary" | "secondary" | "tertiary" | "inverted";
17
19
 
18
20
  /**
19
21
  * Make the button use 100% width available.
@@ -22,11 +24,14 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
22
24
  fullWidth?: boolean | "mobile";
23
25
 
24
26
  /**
25
- * Use the button as an icon button
27
+ * Specify that there is an icon in the button.
28
+ * `icon`: There is only an icon in the button.
29
+ * `icon="leading"`: There is an icon before the text.
30
+ * `icon="trailing"`: There is an icon after the text.
26
31
  *
27
- * Render the icon in `children`
32
+ * @default false
28
33
  */
29
- icon?: boolean;
34
+ icon?: boolean | "leading" | "trailing";
30
35
 
31
36
  /**
32
37
  * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -42,8 +47,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
42
47
  * @example
43
48
  * <Button variant="primary">Primary</Button>
44
49
  * <Button variant="secondary" size="large">Secondary</Button>
45
- * <Button variant="primary-outline">Primary Outline</Button>
46
- * <Button variant="secondary-outline" fullWidth="mobile">Secondary Outline</Button>
50
+ * <Button variant="inverted">Inverted</Button>
51
+ * <Button variant="tertiary" fullWidth="mobile">Tertiary</Button>
52
+ * <Button icon="leading"><LeadingIcon />Leading icon</Button>
47
53
  *
48
54
  * @example
49
55
  * // If used for navigation use the `asChild` prop with a anchor element as a child.
@@ -55,15 +61,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
55
61
  asChild,
56
62
  children,
57
63
  variant = "primary",
58
- size = "medium",
64
+ size = "large",
59
65
  fullWidth = false,
60
- icon,
66
+ icon = false,
61
67
  className,
62
68
  ...rest
63
69
  },
64
70
  ref,
65
71
  ) => {
66
72
  const Component = asChild ? Slot : "button";
73
+
67
74
  return (
68
75
  <Component
69
76
  className={clsx(
@@ -73,7 +80,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
73
80
  {
74
81
  "hds-button--full": fullWidth === true,
75
82
  "hds-button--mobile-full": fullWidth === "mobile",
76
- "hds-button--icon-only": icon,
83
+ "hds-button--only-icon": icon === true,
84
+ "hds-button--leading-icon": icon === "leading",
85
+ "hds-button--trailing-icon": icon === "trailing",
77
86
  },
78
87
  className as undefined,
79
88
  )}
@@ -0,0 +1,27 @@
1
+ /* eslint-disable import/no-extraneous-dependencies -- storybook story */
2
+ import type { Meta, StoryObj } from "@storybook/react";
3
+ import { Button } from "../button";
4
+ import { ButtonList } from ".";
5
+
6
+ const meta: Meta<typeof ButtonList> = {
7
+ title: "Button List",
8
+ component: ButtonList,
9
+ argTypes: {},
10
+ };
11
+
12
+ export default meta;
13
+
14
+ type Story = StoryObj<typeof ButtonList>;
15
+
16
+ export const Preview: Story = {
17
+ tags: ["!dev"],
18
+ args: {
19
+ variant: "default",
20
+ children: (
21
+ <>
22
+ <Button>First button</Button>
23
+ <Button variant="secondary">Second button</Button>
24
+ </>
25
+ ),
26
+ },
27
+ };
@@ -0,0 +1,37 @@
1
+ import { forwardRef } from "react";
2
+ import { clsx } from "@postenbring/hedwig-css/typed-classname";
3
+
4
+ export interface ButtonListProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ /**
6
+ * The list type
7
+ *
8
+ * @default "default"
9
+ */
10
+ variant?: "default" | "stretched";
11
+ }
12
+
13
+ /**
14
+ * Button list component
15
+ *
16
+ * @example
17
+ * <ButtonList variant="default">
18
+ * <Button variant="primary">Primary</Button>
19
+ * <Button variant="secondary">Secondary</Button>
20
+ * </ButtonList>
21
+ */
22
+ export const ButtonList = forwardRef<HTMLDivElement, ButtonListProps>(
23
+ ({ variant = "default", className, children, ...rest }, ref) => {
24
+ const Component = "div";
25
+
26
+ return (
27
+ <Component
28
+ className={clsx("hds-button-list", `hds-button-list--${variant}`, className as undefined)}
29
+ ref={ref}
30
+ {...rest}
31
+ >
32
+ {children}
33
+ </Component>
34
+ );
35
+ },
36
+ );
37
+ ButtonList.displayName = "ButtonList";
@@ -0,0 +1,3 @@
1
+ export { ButtonList } from "./button-list";
2
+
3
+ export type * from "./button-list";
package/src/card/card.tsx CHANGED
@@ -22,14 +22,28 @@ export interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageEl
22
22
  * @default false
23
23
  */
24
24
  asChild?: boolean;
25
+ /**
26
+ * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.
27
+ * "crop": Image always fills the available space.
28
+ * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.
29
+ * "scale": No cropping, image scales to the maximum size available and centers.
30
+ * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.
31
+ *
32
+ * @default "crop"
33
+ */
34
+ variant?: "crop" | "scale";
25
35
  }
26
36
  export const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(
27
- ({ asChild, className, ...rest }, ref) => {
37
+ ({ asChild, variant, className, ...rest }, ref) => {
28
38
  const Component = asChild ? Slot : "img";
29
39
  return (
30
40
  <Component
31
41
  {...rest}
32
- className={clsx("hds-card__media__img", className as undefined)}
42
+ className={clsx(
43
+ "hds-card__media__img",
44
+ { "hds-card__img__scale": variant === "scale" },
45
+ className as undefined,
46
+ )}
33
47
  ref={ref}
34
48
  />
35
49
  );
@@ -47,7 +47,7 @@ export const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkPr
47
47
  ({ children, className, asChild, ...rest }, ref) => {
48
48
  const Component = asChild ? Slot : "a";
49
49
  return (
50
- <Button asChild variant="primary-outline" className={clsx(className as undefined)}>
50
+ <Button asChild variant="inverted" className={clsx(className as undefined)}>
51
51
  <Component ref={ref} {...rest}>
52
52
  {children}
53
53
  </Component>
package/src/index.ts CHANGED
@@ -4,6 +4,7 @@ export * from "./blockquote";
4
4
  export * from "./box";
5
5
  export * from "./breadcrumbs";
6
6
  export * from "./button";
7
+ export * from "./button-list";
7
8
  export * from "./card";
8
9
  export * from "./description-list";
9
10
  export * from "./figure";
package/src/link/link.tsx CHANGED
@@ -7,14 +7,21 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
7
7
  /**
8
8
  * The visual style of the link
9
9
  */
10
- variant?: "underline" | "solid" | "inverted" | "no-underline";
10
+ variant?: "underline" | "solid" | "inverted" | "no-underline" | "inverted-no-underline";
11
11
 
12
12
  /**
13
13
  * Font size of the link
14
+ * @default "default"
15
+ */
16
+ size?: "default" | "small" | "large" | "technical";
17
+
18
+ /**
19
+ * Specify that there is an icon in the link.
20
+ * `icon="leading"`: There is an icon before the text.
21
+ * `icon="trailing"`: There is an icon after the text.
14
22
  *
15
- * Note: `medium` is deprecated, use `default` instead of `medium`
16
23
  */
17
- size?: "default" | "small" | "large" | "technical" | "medium";
24
+ icon?: "leading" | "trailing";
18
25
 
19
26
  children: React.ReactNode;
20
27
 
@@ -27,14 +34,20 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
27
34
  }
28
35
 
29
36
  export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
30
- ({ asChild, children, variant = "underline", size = "default", className, ...rest }, ref) => {
37
+ (
38
+ { asChild, children, variant = "underline", size = "default", icon, className, ...rest },
39
+ ref,
40
+ ) => {
31
41
  const Component = asChild ? Slot : "a";
42
+
32
43
  return (
33
44
  <Component
34
45
  className={clsx(
35
46
  "hds-link",
36
47
  variant !== "underline" && `hds-link--${variant}`,
37
- size !== "default" && size !== "medium" && `hds-link--${size}`,
48
+ size !== "default" && `hds-link--${size}`,
49
+ { "hds-link--trailing-icon": icon === "trailing" },
50
+ { "hds-link--leading-icon": icon === "leading" },
38
51
  className as undefined,
39
52
  )}
40
53
  ref={ref}
@@ -34,7 +34,7 @@ export const Preview: Story = {
34
34
  <Modal.Footer>
35
35
  <HStack gap="16" wrap>
36
36
  <Button onClick={onMainAction}>Main action</Button>
37
- <Button variant="primary-outline" onClick={onClose}>
37
+ <Button variant="secondary" onClick={onClose}>
38
38
  Cancel
39
39
  </Button>
40
40
  </HStack>
@@ -108,7 +108,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
108
108
  * <Modal.Footer>
109
109
  * <HStack gap="16" wrap>
110
110
  * <Button onClick={onMainAction}>Main action</Button>
111
- * <Button variant="primary-outline" onClick={onClose}>
111
+ * <Button variant="secondary" onClick={onClose}>
112
112
  * Cancel
113
113
  * </Button>
114
114
  * </HStack>
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/footer/footer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Accordion } from \"../accordion\";\nimport { LinkList } from \"../list/link-list\";\nimport { Button } from \"../button\";\n\ninterface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>\n {children}\n </Component>\n );\n },\n);\nFooterLogo.displayName = \"Footer.Logo\";\n\nexport interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(\n ({ children, className, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Button asChild variant=\"primary-outline\" className={clsx(className as undefined)}>\n <Component ref={ref} {...rest}>\n {children}\n </Component>\n </Button>\n );\n },\n);\nFooterButtonLink.displayName = \"FooterButton\";\n\ninterface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];\n}\n\n/**\n * Responsive sections of links. Will become an accordion on mobile.\n *\n * Use with {@link FooterLinkSection} for each section.\n */\nexport const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <>\n {/* Mobile and Desktop. The accordion styling gets removed on desktop */}\n <Accordion\n className={clsx(\"hds-footer__link-sections\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {/* @ts-expect-error -- It's ok */}\n {children}\n </Accordion>\n </>\n );\n },\n);\nFooterLinkSections.displayName = \"Footer.LinkSections\";\n\ninterface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {\n heading: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(\n ({ heading, children, className, ...rest }, ref) => {\n // @ts-expect-error -- It's ok\n const linkListChildren = <LinkList>{children}</LinkList>;\n return (\n <>\n {/* Mobile */}\n <Accordion.Item\n className={clsx(`hds-footer__link-section`, className as undefined)}\n ref={ref}\n {...rest}\n >\n <Accordion.Header>{heading}</Accordion.Header>\n <Accordion.Content>{linkListChildren}</Accordion.Content>\n </Accordion.Item>\n\n {/* Desktop */}\n <div className={clsx(`hds-footer__link-section`, className as undefined)}>\n <h2>{heading}</h2>\n {linkListChildren}\n </div>\n </>\n );\n },\n);\nFooterLinkSection.displayName = \"Footer.LinkSection\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Footer variant\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"slim\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Footer = forwardRef<HTMLDivElement, FooterProps>(\n ({ children, className, variant, asChild, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\n `hds-footer`,\n variant === \"slim\" && \"hds-footer--slim\",\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n) as FooterType;\nFooter.displayName = \"Footer\";\n\ntype FooterType = ReturnType<typeof forwardRef<HTMLDivElement, FooterProps>> & {\n Logo: typeof FooterLogo;\n ButtonLink: typeof FooterButtonLink;\n LinkSections: typeof FooterLinkSections;\n LinkSection: typeof FooterLinkSection;\n};\n\nFooter.Logo = FooterLogo;\nFooter.ButtonLink = FooterButtonLink;\nFooter.LinkSections = FooterLinkSections;\nFooter.LinkSection = FooterLinkSection;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,kBAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AAuBf,SA8CA,UA9CA,KA0EE,YA1EF;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAtB1B,IAsBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,OAArF,EACE,WACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAclB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QA9C1B,IA8CG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,UAAO,SAAO,MAAC,SAAQ,mBAAkB,WAAW,KAAK,SAAsB,GAC9E,8BAAC,0CAAU,OAAc,OAAxB,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAWxB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UArEf,IAqEG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,gCAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE;AAAA,SACI,OAHL;AAAA,QAME;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAO1B,IAAM,oBAAoB;AAAA,EAC/B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,WAAS,UAAU,UA7FxB,IA6FG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AAEpB,UAAM,mBAAmB,oBAAC,YAAU,UAAS;AAC7C,WACE,iCAEE;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,UAClE;AAAA,WACI,OAHL;AAAA,UAKC;AAAA,gCAAC,UAAU,QAAV,EAAkB,mBAAQ;AAAA,YAC3B,oBAAC,UAAU,SAAV,EAAmB,4BAAiB;AAAA;AAAA;AAAA,MACvC;AAAA,MAGA,qBAAC,SAAI,WAAW,KAAK,4BAA4B,SAAsB,GACrE;AAAA,4BAAC,QAAI,mBAAQ;AAAA,QACZ;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAqBzB,IAAM,SAAS;AAAA,EACpB,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,WAAW,SAAS,QA3InC,IA2IG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,aAAW,WAAS;AAC/B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AASrB,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/modal/modal.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"h1\";\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"footer\";\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n * const modalRef = useRef<HTMLDialogElement>(null);\n * const onClose = () => modalRef.current?.close();\n *\n * return (\n * <>\n * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\n * <Modal ref={modalRef}>\n * <Modal.Header>Dialog header</Modal.Header>\n * <Modal.Content>\n * <p>\n * Dialog header Dialog description - a description of what is about to happen and maybe\n * something about the consequences.\n * </p>\n * </Modal.Content>\n * <Modal.Footer>\n * <HStack gap=\"16\" wrap>\n * <Button onClick={onMainAction}>Main action</Button>\n * <Button variant=\"primary-outline\" onClick={onClose}>\n * Cancel\n * </Button>\n * </HStack>\n * </Modal.Footer>\n * </Modal>\n * </>\n * );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n asChild\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n variant=\"white\"\n >\n <dialog ref={mergedRef} {...rest}>\n {children}\n </dialog>\n </Box>\n );\n },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n"],"mappings":"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","names":["_a"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * The background and fill of the button\n *\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"primary-outline\" | \"secondary-outline\";\n\n /**\n * Make the button use 100% width available.\n * Using the \"mobile\" it only stretch to full width on smaller screens\n */\n fullWidth?: boolean | \"mobile\";\n\n /**\n * Use the button as an icon button\n *\n * Render the icon in `children`\n */\n icon?: boolean;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Button component\n *\n * @example\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\" size=\"large\">Secondary</Button>\n * <Button variant=\"primary-outline\">Primary Outline</Button>\n * <Button variant=\"secondary-outline\" fullWidth=\"mobile\">Secondary Outline</Button>\n *\n * @example\n * // If used for navigation use the `asChild` prop with a anchor element as a child.\n * <Button asChild><a href=\"/home\">Home</a></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild,\n children,\n variant = \"primary\",\n size = \"medium\",\n fullWidth = false,\n icon,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n return (\n <Component\n className={clsx(\n \"hds-button\",\n `hds-button--${size}`,\n `hds-button--${variant}`,\n {\n \"hds-button--full\": fullWidth === true,\n \"hds-button--mobile-full\": fullWidth === \"mobile\",\n \"hds-button--icon-only\": icon,\n },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAiEf;AAhBC,IAAM,SAAS;AAAA,EACpB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IA5DN,IAqDI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,eAAe,OAAO;AAAA,UACtB;AAAA,YACE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB;AAAA,UAC3B;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAbL;AAAA,QAeE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__media__img\", className as undefined)}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/link/link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The visual style of the link\n */\n variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\";\n\n /**\n * Font size of the link\n *\n * Note: `medium` is deprecated, use `default` instead of `medium`\n */\n size?: \"default\" | \"small\" | \"large\" | \"technical\" | \"medium\";\n\n children: React.ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ asChild, children, variant = \"underline\", size = \"default\", className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"a\";\n return (\n <Component\n className={clsx(\n \"hds-link\",\n variant !== \"underline\" && `hds-link--${variant}`,\n size !== \"default\" && size !== \"medium\" && `hds-link--${size}`,\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AA6Bf;AAJC,IAAM,OAAO;AAAA,EAClB,CAAC,IAAoF,QAAQ;AAA5F,iBAAE,WAAS,UAAU,UAAU,aAAa,OAAO,WAAW,UA7BjE,IA6BG,IAA4E,iBAA5E,IAA4E,CAA1E,WAAS,YAAU,WAAuB,QAAkB;AAC7D,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,eAAe,aAAa,OAAO;AAAA,UAC/C,SAAS,aAAa,SAAS,YAAY,aAAa,IAAI;AAAA,UAC5D;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}