@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Label/Label.mdx

@@ -0,0 +1,105 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LabelStories from './Label.stories';
+
+<Meta of={LabelStories} />
+
+# Label
+
+The Label component is a fundamental UI element used to provide clear text descriptions for form controls.
+**While most form components accept a `label` prop, there are cases where you may need more flexibility or control — in such scenarios, you can use the Label component directly.**
+
+It enhances usability by clearly identifying input fields and improves accessibility by properly associating labels with their corresponding form elements using htmlFor.
+The component supports a range of customization options, including descriptions, hints, required indicators, disabled and invalid states, and visual weight variants.
+
+
+## Usage
+
+<Canvas of={LabelStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Label, Input } from "@webiny/admin-ui";
+
+const LabelExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div className="wby-mb-4 wby-space-y-2">
+            <Label
+                id="full-name-label"
+                htmlFor="full-name"
+                text="Full Name"
+                description="As shown on your government-issued ID"
+                hint="Include middle name if applicable"
+                required={true}
+                value="Label value will be shown here"
+                weight="strong"
+                invalid={false}
+                disabled={false}
+            />
+
+            <Input
+                id="full-name"
+                type="text"
+                placeholder="e.g. John Michael Doe"
+                required={true}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+        </div>
+    );
+};
+
+export default LabelExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Label/Label.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={LabelStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { Label, Input } from "@webiny/admin-ui";
+
+const LabelExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div className="wby-mb-4 wby-space-y-2">
+            <Label
+                id="full-name-label"
+                htmlFor="full-name"
+                text="Full Name"
+                description="As shown on your government-issued ID"
+                hint="Include middle name if applicable"
+                required={true}
+                value="Label value will be shown here"
+                weight="strong"
+                invalid={false}
+                disabled={false}
+            />
+
+            <Input
+                id="full-name"
+                type="text"
+                placeholder="e.g. John Michael Doe"
+                required={true}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+        </div>
+    );
+};
+
+export default LabelExample;
+```

package/Label/Label.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./Label";
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Documentation: Story;
+export declare const Default: Story;
+export declare const LightWeight: Story;
+export declare const Required: Story;
+export declare const WithDescription: Story;
+export declare const WithHint: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;

package/Label/Label.stories.js

@@ -0,0 +1,137 @@
+import React from "react";
+import { Label } from "./Label";
+import { Tooltip } from "../Tooltip";
+import { Input } from "../Input";
+const meta = {
+  title: "Components/Form/Label",
+  component: Label,
+  parameters: {
+    layout: "padded"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+export const Documentation = {
+  render: args => {
+    const [value, setValue] = React.useState("");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-mb-4 wby-space-y-2"
+    }, /*#__PURE__*/React.createElement(Label, args), /*#__PURE__*/React.createElement(Input, {
+      id: args.htmlFor,
+      type: "text",
+      placeholder: "e.g. John Michael Doe",
+      required: args.required,
+      value: value,
+      onChange: e => setValue(e.target.value)
+    }));
+  },
+  args: {
+    text: "Full Name",
+    htmlFor: "full-name",
+    description: "As shown on your government-issued ID",
+    hint: "Include middle name if applicable",
+    required: true,
+    disabled: false,
+    weight: "strong",
+    value: "Label value will be shown here",
+    invalid: false
+  },
+  argTypes: {
+    text: {
+      description: "The text content of the label",
+      control: "text"
+    },
+    htmlFor: {
+      description: "The ID of the form element this label is associated with",
+      control: "text"
+    },
+    description: {
+      description: "Additional descriptive text shown next to the label",
+      control: "text"
+    },
+    hint: {
+      description: "Tooltip hint text that appears on hover",
+      control: "text"
+    },
+    required: {
+      description: "Whether the associated form field is required",
+      control: "boolean"
+    },
+    disabled: {
+      description: "Whether the label should appear disabled",
+      control: "boolean"
+    },
+    weight: {
+      description: "The font weight of the label text",
+      control: "select",
+      options: ["strong", "light"]
+    },
+    value: {
+      description: "Optional value to display on the right side of the label",
+      control: "text"
+    },
+    invalid: {
+      description: "Whether the label should appear in an invalid state",
+      control: "boolean"
+    }
+  }
+};
+export const Default = {
+  args: {
+    text: "Test label",
+    htmlFor: "test-field"
+  },
+  render: args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: args.htmlFor
+  }), /*#__PURE__*/React.createElement(Label, args))
+};
+export const LightWeight = {
+  args: {
+    ...Default.args,
+    weight: "light"
+  }
+};
+export const Required = {
+  args: {
+    ...Default.args,
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "(description)"
+  }
+};
+export const WithHint = {
+  args: {
+    ...Default.args,
+    hint: "This is an additional message in case context to this label needs to be added"
+  }
+};
+export const WithValue = {
+  args: {
+    ...Default.args,
+    value: 24
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-64"
+  }, /*#__PURE__*/React.createElement(Label, args))
+};
+export const Disabled = {
+  args: {
+    htmlFor: "test-field-disabled",
+    text: "Test label",
+    description: "(description)",
+    hint: "This is an additional message in case context to this label needs to be added",
+    required: true,
+    disabled: true,
+    value: 24
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-64"
+  }, /*#__PURE__*/React.createElement(Label, args))
+};
+
+//# sourceMappingURL=Label.stories.js.map

package/Label/Label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Label","Tooltip","Input","meta","title","component","parameters","layout","decorators","Story","createElement","Provider","Documentation","render","args","value","setValue","useState","className","id","htmlFor","type","placeholder","required","onChange","e","target","text","description","hint","disabled","weight","invalid","argTypes","control","options","Default","Fragment","LightWeight","Required","WithDescription","WithHint","WithValue","Disabled"],"sources":["Label.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Label } from \"./Label\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Input } from \"~/Input\";\n\nconst meta: Meta<typeof Label> = {\n    title: \"Components/Form/Label\",\n    component: Label,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Label>;\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = React.useState(\"\");\n\n        return (\n            <div className=\"wby-mb-4 wby-space-y-2\">\n                <Label {...args} />\n                <Input\n                    id={args.htmlFor}\n                    type=\"text\"\n                    placeholder=\"e.g. John Michael Doe\"\n                    required={args.required}\n                    value={value}\n                    onChange={e => setValue(e.target.value)}\n                />\n            </div>\n        );\n    },\n    args: {\n        text: \"Full Name\",\n        htmlFor: \"full-name\",\n        description: \"As shown on your government-issued ID\",\n        hint: \"Include middle name if applicable\",\n        required: true,\n        disabled: false,\n        weight: \"strong\",\n        value: \"Label value will be shown here\",\n        invalid: false\n    },\n    argTypes: {\n        text: {\n            description: \"The text content of the label\",\n            control: \"text\"\n        },\n        htmlFor: {\n            description: \"The ID of the form element this label is associated with\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Additional descriptive text shown next to the label\",\n            control: \"text\"\n        },\n        hint: {\n            description: \"Tooltip hint text that appears on hover\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Whether the associated form field is required\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Whether the label should appear disabled\",\n            control: \"boolean\"\n        },\n        weight: {\n            description: \"The font weight of the label text\",\n            control: \"select\",\n            options: [\"strong\", \"light\"]\n        },\n        value: {\n            description: \"Optional value to display on the right side of the label\",\n            control: \"text\"\n        },\n        invalid: {\n            description: \"Whether the label should appear in an invalid state\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        text: \"Test label\",\n        htmlFor: \"test-field\"\n    },\n    render: args => (\n        <>\n            <input type=\"checkbox\" id={args.htmlFor} />\n            <Label {...args} />\n        </>\n    )\n};\n\nexport const LightWeight: Story = {\n    args: {\n        ...Default.args,\n        weight: \"light\"\n    }\n};\n\nexport const Required: Story = {\n    args: {\n        ...Default.args,\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"(description)\"\n    }\n};\n\nexport const WithHint: Story = {\n    args: {\n        ...Default.args,\n        hint: \"This is an additional message in case context to this label needs to be added\"\n    }\n};\n\nexport const WithValue: Story = {\n    args: {\n        ...Default.args,\n        value: 24\n    },\n    render: args => (\n        <div className=\"wby-w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n\nexport const Disabled: Story = {\n    args: {\n        htmlFor: \"test-field-disabled\",\n        text: \"Test label\",\n        description: \"(description)\",\n        hint: \"This is an additional message in case context to this label needs to be added\",\n        required: true,\n        disabled: true,\n        value: 24\n    },\n    render: args => (\n        <div className=\"wby-w-64\">\n            <Label {...args} />\n        </div>\n    )\n};\n"],"mappings":"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","ignoreList":[]}

package/Label/components/LabelDescription.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils";
+declare const labelDescriptionVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {
+    content: React.ReactNode;
+}
+declare const LabelDescription: ({ content, disabled }: LabelDescriptionProps) => React.JSX.Element;
+export { LabelDescription, type LabelDescriptionProps };

package/Label/components/LabelDescription.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn, cva } from "../../utils";
+import { Text } from "../../Text";
+const labelDescriptionVariants = cva("wby-font-normal wby-text-neutral-strong", {
+  variants: {
+    disabled: {
+      true: "wby-text-neutral-disabled"
+    }
+  }
+});
+const LabelDescription = ({
+  content,
+  disabled
+}) => /*#__PURE__*/React.createElement(Text, {
+  className: cn(labelDescriptionVariants({
+    disabled
+  })),
+  size: "sm"
+}, content);
+export { LabelDescription };
+
+//# sourceMappingURL=LabelDescription.js.map

package/Label/components/LabelDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","Text","labelDescriptionVariants","variants","disabled","true","LabelDescription","content","createElement","className","size"],"sources":["LabelDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Text } from \"~/Text\";\n\nconst labelDescriptionVariants = cva(\"wby-font-normal wby-text-neutral-strong\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-neutral-disabled\"\n        }\n    }\n});\n\ninterface LabelDescriptionProps extends VariantProps<typeof labelDescriptionVariants> {\n    content: React.ReactNode;\n}\n\nconst LabelDescription = ({ content, disabled }: LabelDescriptionProps) => (\n    <Text className={cn(labelDescriptionVariants({ disabled }))} size={\"sm\"}>\n        {content}\n    </Text>\n);\n\nexport { LabelDescription, type LabelDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,wBAAwB,GAAGF,GAAG,CAAC,yCAAyC,EAAE;EAC5EG,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,OAAO;EAAEH;AAAgC,CAAC,kBAClEN,KAAA,CAAAU,aAAA,CAACP,IAAI;EAACQ,SAAS,EAAEV,EAAE,CAACG,wBAAwB,CAAC;IAAEE;EAAS,CAAC,CAAC,CAAE;EAACM,IAAI,EAAE;AAAK,GACnEH,OACC,CACT;AAED,SAASD,gBAAgB","ignoreList":[]}

package/Label/components/LabelHint.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface LabelHintProps {
+    content: React.ReactNode;
+}
+declare const LabelHint: ({ content }: LabelHintProps) => React.JSX.Element;
+export { LabelHint, type LabelHintProps };

package/Label/components/LabelHint.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { Tooltip } from "../../Tooltip";
+import { Icon } from "../../Icon";
+const LabelHint = ({
+  content
+}) => /*#__PURE__*/React.createElement(Tooltip, {
+  content: content,
+  trigger: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(InfoIcon, null),
+    size: "xs",
+    label: "More information",
+    color: "neutral-light"
+  })
+});
+export { LabelHint };
+
+//# sourceMappingURL=LabelHint.js.map

package/Label/components/LabelHint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","InfoIcon","Tooltip","Icon","LabelHint","content","createElement","trigger","icon","size","label","color"],"sources":["LabelHint.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Icon } from \"~/Icon\";\n\ninterface LabelHintProps {\n    content: React.ReactNode;\n}\n\nconst LabelHint = ({ content }: LabelHintProps) => (\n    <Tooltip\n        content={content}\n        trigger={\n            <Icon\n                icon={<InfoIcon />}\n                size=\"xs\"\n                label={\"More information\"}\n                color={\"neutral-light\"}\n            />\n        }\n    />\n);\n\nexport { LabelHint, type LabelHintProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,OAAO;AAChB,SAASC,IAAI;AAMb,MAAMC,SAAS,GAAGA,CAAC;EAAEC;AAAwB,CAAC,kBAC1CN,KAAA,CAAAO,aAAA,CAACJ,OAAO;EACJG,OAAO,EAAEA,OAAQ;EACjBE,OAAO,eACHR,KAAA,CAAAO,aAAA,CAACH,IAAI;IACDK,IAAI,eAAET,KAAA,CAAAO,aAAA,CAACL,QAAQ,MAAE,CAAE;IACnBQ,IAAI,EAAC,IAAI;IACTC,KAAK,EAAE,kBAAmB;IAC1BC,KAAK,EAAE;EAAgB,CAC1B;AACJ,CACJ,CACJ;AAED,SAASP,SAAS","ignoreList":[]}

package/Label/components/LabelRequired.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils";
+declare const labelRequiredVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;
+declare const LabelRequired: ({ disabled }: LabelRequiredProps) => React.JSX.Element;
+export { LabelRequired, type LabelRequiredProps };

package/Label/components/LabelRequired.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn, cva } from "../../utils";
+const labelRequiredVariants = cva("wby-text-destructive-primary", {
+  variants: {
+    disabled: {
+      true: "wby-text-destructive-muted"
+    }
+  }
+});
+const LabelRequired = ({
+  disabled
+}) => /*#__PURE__*/React.createElement("span", {
+  className: cn(labelRequiredVariants({
+    disabled
+  }))
+}, "*");
+export { LabelRequired };
+
+//# sourceMappingURL=LabelRequired.js.map

package/Label/components/LabelRequired.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","labelRequiredVariants","variants","disabled","true","LabelRequired","createElement","className"],"sources":["LabelRequired.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst labelRequiredVariants = cva(\"wby-text-destructive-primary\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-destructive-muted\"\n        }\n    }\n});\n\ntype LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;\n\nconst LabelRequired = ({ disabled }: LabelRequiredProps) => (\n    <span className={cn(labelRequiredVariants({ disabled }))}>{\"*\"}</span>\n);\n\nexport { LabelRequired, type LabelRequiredProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,qBAAqB,GAAGD,GAAG,CAAC,8BAA8B,EAAE;EAC9DE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAIF,MAAMC,aAAa,GAAGA,CAAC;EAAEF;AAA6B,CAAC,kBACnDL,KAAA,CAAAQ,aAAA;EAAMC,SAAS,EAAER,EAAE,CAACE,qBAAqB,CAAC;IAAEE;EAAS,CAAC,CAAC;AAAE,GAAE,GAAU,CACxE;AAED,SAASE,aAAa","ignoreList":[]}

package/Label/components/LabelValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils";
+declare const labelValueVariants: (props?: ({
+    weight?: "strong" | "light" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface LabelValueProps extends VariantProps<typeof labelValueVariants> {
+    value: React.ReactNode;
+}
+declare const LabelValue: ({ value, weight, disabled }: LabelValueProps) => React.JSX.Element;
+export { LabelValue, type LabelValueProps };

package/Label/components/LabelValue.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { cn, cva } from "../../utils";
+import { Text } from "../../Text";
+const labelValueVariants = cva("wby-text-neutral-strong", {
+  variants: {
+    weight: {
+      strong: "wby-font-semibold",
+      light: "wby-font-regular"
+    },
+    disabled: {
+      true: "wby-text-neutral-disabled"
+    }
+  },
+  defaultVariants: {
+    weight: "strong"
+  }
+});
+const LabelValue = ({
+  value,
+  weight,
+  disabled
+}) => /*#__PURE__*/React.createElement(Text, {
+  size: "sm",
+  className: cn(labelValueVariants({
+    weight,
+    disabled
+  }))
+}, value);
+export { LabelValue };
+
+//# sourceMappingURL=LabelValue.js.map

package/Label/components/LabelValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","Text","labelValueVariants","variants","weight","strong","light","disabled","true","defaultVariants","LabelValue","value","createElement","size","className"],"sources":["LabelValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Text } from \"~/Text\";\n\nconst labelValueVariants = cva(\"wby-text-neutral-strong\", {\n    variants: {\n        weight: {\n            strong: \"wby-font-semibold\",\n            light: \"wby-font-regular\"\n        },\n        disabled: {\n            true: \"wby-text-neutral-disabled\"\n        }\n    },\n    defaultVariants: {\n        weight: \"strong\"\n    }\n});\n\ninterface LabelValueProps extends VariantProps<typeof labelValueVariants> {\n    value: React.ReactNode;\n}\n\nconst LabelValue = ({ value, weight, disabled }: LabelValueProps) => (\n    <Text size=\"sm\" className={cn(labelValueVariants({ weight, disabled }))}>\n        {value}\n    </Text>\n);\n\nexport { LabelValue, type LabelValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAAC,yBAAyB,EAAE;EACtDG,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,mBAAmB;MAC3BC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AAMF,MAAMM,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEP,MAAM;EAAEG;AAA0B,CAAC,kBAC5DT,KAAA,CAAAc,aAAA,CAACX,IAAI;EAACY,IAAI,EAAC,IAAI;EAACC,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,MAAM;IAAEG;EAAS,CAAC,CAAC;AAAE,GACnEI,KACC,CACT;AAED,SAASD,UAAU","ignoreList":[]}

package/Label/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./LabelRequired";
+export * from "./LabelDescription";
+export * from "./LabelHint";
+export * from "./LabelValue";

package/Label/components/index.js

@@ -0,0 +1,6 @@
+export * from "./LabelRequired";
+export * from "./LabelDescription";
+export * from "./LabelHint";
+export * from "./LabelValue";
+
+//# sourceMappingURL=index.js.map

package/Label/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./LabelRequired\";\nexport * from \"./LabelDescription\";\nexport * from \"./LabelHint\";\nexport * from \"./LabelValue\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/Label/index.d.ts

@@ -0,0 +1 @@
+export * from "./Label";

package/Label/index.js

@@ -0,0 +1,3 @@
+export * from "./Label";
+
+//# sourceMappingURL=index.js.map

package/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Label\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Link/Link.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+import { type LinkProps as WebinyReactRouterLinkProps } from "@webiny/react-router";
+declare const linkVariants: (props?: ({
+    size?: "inherit" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "primary" | "secondary" | "primary-negative" | "secondary-negative" | null | undefined;
+    underline?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface LinkProps extends WebinyReactRouterLinkProps, VariantProps<typeof linkVariants> {
+    disabled?: boolean;
+}
+declare const Link: (({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
+    original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
+        original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
+        original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Link, type LinkProps };

package/Link/Link.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { cva, makeDecoratable, cn } from "../utils";
+import { Link as WebinyReactRouterLink } from "@webiny/react-router";
+const linkVariants = cva("wby-font-sans wby-rounded-xs", {
+  variants: {
+    size: {
+      inherit: "[font-size:inherit]",
+      sm: "wby-text-sm",
+      md: "wby-text-md",
+      lg: "wby-text-lg",
+      xl: "wby-text-xl"
+    },
+    variant: {
+      primary: ["wby-text-accent-primary", "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"],
+      secondary: ["wby-text-neutral-primary", "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed"],
+      "primary-negative": ["wby-text-accent-primary", "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"],
+      "secondary-negative": ["wby-text-neutral-light", "focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong"]
+    },
+    underline: {
+      true: "wby-underline hover:wby-no-underline",
+      false: "hover:wby-underline"
+    }
+  },
+  defaultVariants: {
+    size: "inherit",
+    variant: "primary",
+    underline: false
+  }
+});
+const LinkBase = ({
+  size,
+  variant,
+  underline,
+  className,
+  children,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(WebinyReactRouterLink, Object.assign({}, rest, {
+    className: cn(linkVariants({
+      size,
+      variant,
+      underline
+    }), className)
+  }), children);
+};
+const Link = makeDecoratable("link", LinkBase);
+export { Link };
+
+//# sourceMappingURL=Link.js.map

package/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cva","makeDecoratable","cn","Link","WebinyReactRouterLink","linkVariants","variants","size","inherit","sm","md","lg","xl","variant","primary","secondary","underline","true","false","defaultVariants","LinkBase","className","children","rest","createElement","Object","assign"],"sources":["Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils\";\nimport {\n    Link as WebinyReactRouterLink,\n    type LinkProps as WebinyReactRouterLinkProps\n} from \"@webiny/react-router\";\n\nconst linkVariants = cva(\"wby-font-sans wby-rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"wby-text-sm\",\n            md: \"wby-text-md\",\n            lg: \"wby-text-lg\",\n            xl: \"wby-text-xl\"\n        },\n        variant: {\n            primary: [\n                \"wby-text-accent-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"wby-text-neutral-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"wby-text-accent-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"wby-text-neutral-light\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"wby-underline hover:wby-no-underline\",\n            false: \"hover:wby-underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\ninterface LinkProps extends WebinyReactRouterLinkProps, VariantProps<typeof linkVariants> {\n    disabled?: boolean;\n}\n\nconst LinkBase = ({ size, variant, underline, className, children, ...rest }: LinkProps) => {\n    return (\n        <WebinyReactRouterLink\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </WebinyReactRouterLink>\n    );\n};\n\nconst Link = makeDecoratable(\"link\", LinkBase);\n\nexport { Link, type LinkProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAqBC,eAAe,EAAEC,EAAE;AACpD,SACIC,IAAI,IAAIC,qBAAqB,QAE1B,sBAAsB;AAE7B,MAAMC,YAAY,GAAGL,GAAG,CAAC,8BAA8B,EAAE;EACrDM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,OAAO,EAAE,qBAAqB;MAC9BC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,yBAAyB,EACzB,mGAAmG,CACtG;MACDC,SAAS,EAAE,CACP,0BAA0B,EAC1B,mGAAmG,CACtG;MACD,kBAAkB,EAAE,CAChB,yBAAyB,EACzB,mGAAmG,CACtG;MACD,oBAAoB,EAAE,CAClB,wBAAwB,EACxB,mGAAmG;IAE3G,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE,sCAAsC;MAC5CC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbZ,IAAI,EAAE,SAAS;IACfM,OAAO,EAAE,SAAS;IAClBG,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAMF,MAAMI,QAAQ,GAAGA,CAAC;EAAEb,IAAI;EAAEM,OAAO;EAAEG,SAAS;EAAEK,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACxF,oBACIxB,KAAA,CAAAyB,aAAA,CAACpB,qBAAqB,EAAAqB,MAAA,CAAAC,MAAA,KACdH,IAAI;IACRF,SAAS,EAAEnB,EAAE,CAACG,YAAY,CAAC;MAAEE,IAAI;MAAEM,OAAO;MAAEG;IAAU,CAAC,CAAC,EAAEK,SAAS;EAAE,IAEpEC,QACkB,CAAC;AAEhC,CAAC;AAED,MAAMnB,IAAI,GAAGF,eAAe,CAAC,MAAM,EAAEmB,QAAQ,CAAC;AAE9C,SAASjB,IAAI","ignoreList":[]}