@uxf/ui 11.22.1 → 11.24.0

package/components.d.ts

@@ -6,10 +6,6 @@ import * as buttonStories from "./button/button.stories";
 import * as buttonGroupStories from "./button-group/button-group.stories";
 import * as buttonListStories from "./button-list/button-list.stories";
 import * as calendarStories from "./calendar/calendar.stories";
-import * as checkboxStories from "./checkbox/checkbox.stories";
-import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
-import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
-import * as chipStories from "./chip/chip.stories";
 import * as colorRadioStories from "./color-radio/color-radio.stories";
 import * as colorRadioGroupStories from "./color-radio-group/color-radio-group.stories";
 import * as comboboxStories from "./combobox/combobox.stories";
@@ -26,6 +22,10 @@ import * as errorMessageStories from "./error-message/error-message.stories";
 import * as fileInputStories from "./file-input/file-input.stories";
 import * as flashMessagesStories from "./flash-messages/flash-messages.stories";
 import * as formComponentStories from "./form-component/form-component.stories";
+import * as checkboxStories from "./checkbox/checkbox.stories";
+import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
+import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
+import * as chipStories from "./chip/chip.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
 import * as inputStories from "./input/input.stories";
@@ -33,6 +33,7 @@ import * as labelStories from "./label/label.stories";
 import * as layoutStories from "./layout/layout.stories";
 import * as listItemStories from "./list-item/list-item.stories";
 import * as loaderStories from "./loader/loader.stories";
+import * as lozengeStories from "./lozenge/lozenge.stories";
 import * as messageStories from "./message/message.stories";
 import * as modalStories from "./modal/modal.stories";
 import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
@@ -85,22 +86,6 @@ export declare const components: {
         readonly title: "Calendar";
         readonly stories: typeof calendarStories;
     };
-    readonly checkbox: {
-        readonly title: "Checkbox";
-        readonly stories: typeof checkboxStories;
-    };
-    readonly "checkbox-button": {
-        readonly title: "CheckboxButton";
-        readonly stories: typeof checkboxButtonStories;
-    };
-    readonly "checkbox-input": {
-        readonly title: "CheckboxInput";
-        readonly stories: typeof checkboxInputStories;
-    };
-    readonly chip: {
-        readonly title: "Chip";
-        readonly stories: typeof chipStories;
-    };
     readonly "color-radio": {
         readonly title: "ColorRadio";
         readonly stories: typeof colorRadioStories;
@@ -165,6 +150,22 @@ export declare const components: {
         readonly title: "FormComponent";
         readonly stories: typeof formComponentStories;
     };
+    readonly checkbox: {
+        readonly title: "Checkbox";
+        readonly stories: typeof checkboxStories;
+    };
+    readonly "checkbox-button": {
+        readonly title: "CheckboxButton";
+        readonly stories: typeof checkboxButtonStories;
+    };
+    readonly "checkbox-input": {
+        readonly title: "CheckboxInput";
+        readonly stories: typeof checkboxInputStories;
+    };
+    readonly chip: {
+        readonly title: "Chip";
+        readonly stories: typeof chipStories;
+    };
     readonly icon: {
         readonly title: "Icon";
         readonly stories: typeof iconStories;
@@ -193,6 +194,10 @@ export declare const components: {
         readonly title: "Loader";
         readonly stories: typeof loaderStories;
     };
+    readonly lozenge: {
+        readonly title: "Lozenge";
+        readonly stories: typeof lozengeStories;
+    };
     readonly message: {
         readonly title: "Message";
         readonly stories: typeof messageStories;

package/components.js

@@ -33,10 +33,6 @@ const buttonStories = __importStar(require("./button/button.stories"));
 const buttonGroupStories = __importStar(require("./button-group/button-group.stories"));
 const buttonListStories = __importStar(require("./button-list/button-list.stories"));
 const calendarStories = __importStar(require("./calendar/calendar.stories"));
-const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
-const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
-const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
-const chipStories = __importStar(require("./chip/chip.stories"));
 const colorRadioStories = __importStar(require("./color-radio/color-radio.stories"));
 const colorRadioGroupStories = __importStar(require("./color-radio-group/color-radio-group.stories"));
 const comboboxStories = __importStar(require("./combobox/combobox.stories"));
@@ -53,6 +49,10 @@ const errorMessageStories = __importStar(require("./error-message/error-message.
 const fileInputStories = __importStar(require("./file-input/file-input.stories"));
 const flashMessagesStories = __importStar(require("./flash-messages/flash-messages.stories"));
 const formComponentStories = __importStar(require("./form-component/form-component.stories"));
+const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
+const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
+const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
+const chipStories = __importStar(require("./chip/chip.stories"));
 const iconStories = __importStar(require("./icon/icon.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
@@ -60,6 +60,7 @@ const labelStories = __importStar(require("./label/label.stories"));
 const layoutStories = __importStar(require("./layout/layout.stories"));
 const listItemStories = __importStar(require("./list-item/list-item.stories"));
 const loaderStories = __importStar(require("./loader/loader.stories"));
+const lozengeStories = __importStar(require("./lozenge/lozenge.stories"));
 const messageStories = __importStar(require("./message/message.stories"));
 const modalStories = __importStar(require("./modal/modal.stories"));
 const multiComboboxStories = __importStar(require("./multi-combobox/multi-combobox.stories"));
@@ -112,22 +113,6 @@ exports.components = {
         title: "Calendar",
         stories: calendarStories
     },
-    "checkbox": {
-        title: "Checkbox",
-        stories: checkboxStories
-    },
-    "checkbox-button": {
-        title: "CheckboxButton",
-        stories: checkboxButtonStories
-    },
-    "checkbox-input": {
-        title: "CheckboxInput",
-        stories: checkboxInputStories
-    },
-    "chip": {
-        title: "Chip",
-        stories: chipStories
-    },
     "color-radio": {
         title: "ColorRadio",
         stories: colorRadioStories
@@ -192,6 +177,22 @@ exports.components = {
         title: "FormComponent",
         stories: formComponentStories
     },
+    "checkbox": {
+        title: "Checkbox",
+        stories: checkboxStories
+    },
+    "checkbox-button": {
+        title: "CheckboxButton",
+        stories: checkboxButtonStories
+    },
+    "checkbox-input": {
+        title: "CheckboxInput",
+        stories: checkboxInputStories
+    },
+    "chip": {
+        title: "Chip",
+        stories: chipStories
+    },
     "icon": {
         title: "Icon",
         stories: iconStories
@@ -220,6 +221,10 @@ exports.components = {
         title: "Loader",
         stories: loaderStories
     },
+    "lozenge": {
+        title: "Lozenge",
+        stories: lozengeStories
+    },
     "message": {
         title: "Message",
         stories: messageStories

package/css/lozenge.css

@@ -0,0 +1,137 @@
+.uxf-lozenge {
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: theme("borderRadius.sm");
+    display: inline-flex;
+    height: 16px;
+    max-width: 100%;
+    padding: 0 4px;
+
+    &__text {
+        color: var(--color);
+        font-size: 0.625em;
+        font-weight: theme("fontWeight.semibold");
+        letter-spacing: -0.02em;
+        text-transform: uppercase;
+
+        @apply truncate;
+    }
+
+    &--variant-default {
+        --color: theme("colors.white");
+
+        :root .dark & {
+            --color: theme("colors.lightHigh");
+        }
+
+        &.uxf-lozenge--color-blue {
+            --bg-color: theme("colors.blue.600");
+
+            :root .dark & {
+                --bg-color: theme("colors.blue.400");
+            }
+        }
+
+        &.uxf-lozenge--color-default {
+            --bg-color: theme("colors.gray.600");
+
+            :root .dark & {
+                --bg-color: theme("colors.gray.400");
+            }
+        }
+
+        &.uxf-lozenge--color-green {
+            --bg-color: theme("colors.green.600");
+
+            :root .dark & {
+                --bg-color: theme("colors.green.400");
+            }
+        }
+
+        &.uxf-lozenge--color-indigo {
+            --bg-color: theme("colors.indigo.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.indigo.200");
+            }
+        }
+
+        &.uxf-lozenge--color-orange {
+            --bg-color: theme("colors.orange.600");
+
+            :root .dark & {
+                --bg-color: theme("colors.orange.400");
+            }
+        }
+
+        &.uxf-lozenge--color-red {
+            --bg-color: theme("colors.red.600");
+
+            :root .dark & {
+                --bg-color: theme("colors.red.400");
+            }
+        }
+    }
+
+    &--variant-muted {
+        &.uxf-lozenge--color-blue {
+            --bg-color: theme("colors.blue.100");
+            --color: theme("colors.blue.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.blue.800");
+                --color: theme("colors.blue.200");
+            }
+        }
+
+        &.uxf-lozenge--color-default {
+            --bg-color: theme("colors.gray.200");
+            --color: theme("colors.gray.700");
+
+            :root .dark & {
+                --bg-color: theme("colors.gray.700");
+                --color: theme("colors.gray.200");
+            }
+        }
+
+        &.uxf-lozenge--color-green {
+            --bg-color: theme("colors.green.100");
+            --color: theme("colors.green.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.green.900");
+                --color: theme("colors.green.200");
+            }
+        }
+
+        &.uxf-lozenge--color-indigo {
+            --bg-color: theme("colors.indigo.50");
+            --color: theme("colors.indigo.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.indigo.900");
+                --color: theme("colors.indigo.200");
+            }
+        }
+
+        &.uxf-lozenge--color-orange {
+            --bg-color: theme("colors.orange.200");
+            --color: theme("colors.orange.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.orange.900");
+                --color: theme("colors.orange.200");
+            }
+        }
+
+        &.uxf-lozenge--color-red {
+            --bg-color: theme("colors.red.100");
+            --color: theme("colors.red.800");
+
+            :root .dark & {
+                --bg-color: theme("colors.red.900");
+                --color: theme("colors.red.200");
+            }
+        }
+    }
+}

package/lozenge/README.md

@@ -0,0 +1,23 @@
+#  Lozenge
+
+Figma: <a href="https://www.figma.com/design/InhbHrNUhDGbBvRDRonXsD/Vent-UI?node-id=5609-49333&t=1yQ7UvhBiOjHAaLE-4">zde</a>
+
+## Usage
+
+### Basic lozenge
+
+```tsx
+import { Lozenge } from "@uxf/ui/lozenge";
+
+function Example() {
+    return (
+        <Lozenge color="green" variant="muted" > Example </Lozenge>
+    );
+}
+```
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/lozenge.css");
+```

package/lozenge/index.d.ts

@@ -0,0 +1,3 @@
+export { Lozenge } from "./lozenge";
+export type { LozengeProps } from "./lozenge";
+export type { LozengeColor, LozengeVariant } from "./theme";

package/lozenge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lozenge = void 0;
+var lozenge_1 = require("./lozenge");
+Object.defineProperty(exports, "Lozenge", { enumerable: true, get: function () { return lozenge_1.Lozenge; } });

package/lozenge/lozenge.d.ts

@@ -0,0 +1,7 @@
+import { LozengeColor, LozengeVariant } from "@uxf/ui/lozenge/theme";
+import React, { HTMLAttributes } from "react";
+export interface LozengeProps extends HTMLAttributes<HTMLDivElement> {
+    color?: LozengeColor;
+    variant?: LozengeVariant;
+}
+export declare const Lozenge: React.ForwardRefExoticComponent<LozengeProps & React.RefAttributes<HTMLDivElement>>;

package/lozenge/lozenge.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lozenge = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+exports.Lozenge = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const lozengeClassName = (0, cx_1.cx)("uxf-lozenge", `uxf-lozenge--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-lozenge--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: lozengeClassName },
+        react_1.default.createElement("span", { className: "uxf-lozenge__text" }, props.children)));
+});
+exports.Lozenge.displayName = "UxfLozenge";

package/lozenge/lozenge.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lozenge/lozenge.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const lozenge_stories_1 = require("./lozenge.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(lozenge_stories_1.Default, null));

package/lozenge/lozenge.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/lozenge/lozenge.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const lozenge_1 = require("@uxf/ui/lozenge");
+const react_1 = __importDefault(require("react"));
+const storybook_config_1 = require("../utils/storybook-config");
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Lozenge");
+    return (react_1.default.createElement("div", { className: "grid w-80 grid-cols-2 justify-items-start gap-4 p-8" }, config.colors.map((color) => config.variants.map((variant) => (react_1.default.createElement(lozenge_1.Lozenge, { color: color, key: variant + color, variant: variant },
+        variant,
+        " / ",
+        color))))));
+}
+exports.Default = Default;

package/lozenge/theme.d.ts

@@ -0,0 +1,14 @@
+export interface LozengeColors {
+    blue: true;
+    default: true;
+    green: true;
+    indigo: true;
+    orange: true;
+    red: true;
+}
+export interface LozengeVariants {
+    default: true;
+    muted: true;
+}
+export type LozengeColor = keyof LozengeColors;
+export type LozengeVariant = keyof LozengeVariants;

package/lozenge/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.22.1",
+  "version": "11.24.0",
   "description": "",
   "publishConfig": {
     "access": "public"

package/readmes.d.ts

@@ -9,10 +9,6 @@ export declare const readmes: {
     readonly "button-group": typeof alertBubbleReadme;
     readonly "button-list": typeof alertBubbleReadme;
     readonly calendar: typeof alertBubbleReadme;
-    readonly checkbox: typeof alertBubbleReadme;
-    readonly "checkbox-button": typeof alertBubbleReadme;
-    readonly "checkbox-input": typeof alertBubbleReadme;
-    readonly chip: typeof alertBubbleReadme;
     readonly "color-radio": typeof alertBubbleReadme;
     readonly "color-radio-group": typeof alertBubbleReadme;
     readonly combobox: typeof alertBubbleReadme;
@@ -29,6 +25,10 @@ export declare const readmes: {
     readonly "file-input": typeof alertBubbleReadme;
     readonly "flash-messages": typeof alertBubbleReadme;
     readonly "form-component": typeof alertBubbleReadme;
+    readonly checkbox: typeof alertBubbleReadme;
+    readonly "checkbox-button": typeof alertBubbleReadme;
+    readonly "checkbox-input": typeof alertBubbleReadme;
+    readonly chip: typeof alertBubbleReadme;
     readonly icon: typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
@@ -36,6 +36,7 @@ export declare const readmes: {
     readonly layout: typeof alertBubbleReadme;
     readonly "list-item": typeof alertBubbleReadme;
     readonly loader: typeof alertBubbleReadme;
+    readonly lozenge: typeof alertBubbleReadme;
     readonly message: typeof alertBubbleReadme;
     readonly modal: typeof alertBubbleReadme;
     readonly "multi-combobox": typeof alertBubbleReadme;

package/readmes.js

@@ -13,26 +13,26 @@ const README_md_5 = __importDefault(require("./button/README.md"));
 const README_md_6 = __importDefault(require("./button-group/README.md"));
 const README_md_7 = __importDefault(require("./button-list/README.md"));
 const README_md_8 = __importDefault(require("./calendar/README.md"));
-const README_md_9 = __importDefault(require("./checkbox/README.md"));
-const README_md_10 = __importDefault(require("./checkbox-button/README.md"));
-const README_md_11 = __importDefault(require("./checkbox-input/README.md"));
-const README_md_12 = __importDefault(require("./chip/README.md"));
-const README_md_13 = __importDefault(require("./color-radio/README.md"));
-const README_md_14 = __importDefault(require("./color-radio-group/README.md"));
-const README_md_15 = __importDefault(require("./combobox/README.md"));
-const README_md_16 = __importDefault(require("./date-picker/README.md"));
-const README_md_17 = __importDefault(require("./date-picker-input/README.md"));
-const README_md_18 = __importDefault(require("./date-range-picker/README.md"));
-const README_md_19 = __importDefault(require("./date-range-picker-input/README.md"));
-const README_md_20 = __importDefault(require("./datetime-picker/README.md"));
-const README_md_21 = __importDefault(require("./datetime-picker-input/README.md"));
-const README_md_22 = __importDefault(require("./dialog/README.md"));
-const README_md_23 = __importDefault(require("./dropdown/README.md"));
-const README_md_24 = __importDefault(require("./dropzone/README.md"));
-const README_md_25 = __importDefault(require("./error-message/README.md"));
-const README_md_26 = __importDefault(require("./file-input/README.md"));
-const README_md_27 = __importDefault(require("./flash-messages/README.md"));
-const README_md_28 = __importDefault(require("./form-component/README.md"));
+const README_md_9 = __importDefault(require("./color-radio/README.md"));
+const README_md_10 = __importDefault(require("./color-radio-group/README.md"));
+const README_md_11 = __importDefault(require("./combobox/README.md"));
+const README_md_12 = __importDefault(require("./date-picker/README.md"));
+const README_md_13 = __importDefault(require("./date-picker-input/README.md"));
+const README_md_14 = __importDefault(require("./date-range-picker/README.md"));
+const README_md_15 = __importDefault(require("./date-range-picker-input/README.md"));
+const README_md_16 = __importDefault(require("./datetime-picker/README.md"));
+const README_md_17 = __importDefault(require("./datetime-picker-input/README.md"));
+const README_md_18 = __importDefault(require("./dialog/README.md"));
+const README_md_19 = __importDefault(require("./dropdown/README.md"));
+const README_md_20 = __importDefault(require("./dropzone/README.md"));
+const README_md_21 = __importDefault(require("./error-message/README.md"));
+const README_md_22 = __importDefault(require("./file-input/README.md"));
+const README_md_23 = __importDefault(require("./flash-messages/README.md"));
+const README_md_24 = __importDefault(require("./form-component/README.md"));
+const README_md_25 = __importDefault(require("./checkbox/README.md"));
+const README_md_26 = __importDefault(require("./checkbox-button/README.md"));
+const README_md_27 = __importDefault(require("./checkbox-input/README.md"));
+const README_md_28 = __importDefault(require("./chip/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
 const README_md_30 = __importDefault(require("./image-gallery/README.md"));
 const README_md_31 = __importDefault(require("./input/README.md"));
@@ -40,25 +40,26 @@ const README_md_32 = __importDefault(require("./label/README.md"));
 const README_md_33 = __importDefault(require("./layout/README.md"));
 const README_md_34 = __importDefault(require("./list-item/README.md"));
 const README_md_35 = __importDefault(require("./loader/README.md"));
-const README_md_36 = __importDefault(require("./message/README.md"));
-const README_md_37 = __importDefault(require("./modal/README.md"));
-const README_md_38 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_39 = __importDefault(require("./multi-select/README.md"));
-const README_md_40 = __importDefault(require("./pagination/README.md"));
-const README_md_41 = __importDefault(require("./paper/README.md"));
-const README_md_42 = __importDefault(require("./radio/README.md"));
-const README_md_43 = __importDefault(require("./radio-group/README.md"));
-const README_md_44 = __importDefault(require("./raster-image/README.md"));
-const README_md_45 = __importDefault(require("./select/README.md"));
-const README_md_46 = __importDefault(require("./tabs/README.md"));
-const README_md_47 = __importDefault(require("./text-input/README.md"));
-const README_md_48 = __importDefault(require("./text-link/README.md"));
-const README_md_49 = __importDefault(require("./textarea/README.md"));
-const README_md_50 = __importDefault(require("./time-picker/README.md"));
-const README_md_51 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_52 = __importDefault(require("./toggle/README.md"));
-const README_md_53 = __importDefault(require("./tooltip/README.md"));
-const README_md_54 = __importDefault(require("./typography/README.md"));
+const README_md_36 = __importDefault(require("./lozenge/README.md"));
+const README_md_37 = __importDefault(require("./message/README.md"));
+const README_md_38 = __importDefault(require("./modal/README.md"));
+const README_md_39 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_40 = __importDefault(require("./multi-select/README.md"));
+const README_md_41 = __importDefault(require("./pagination/README.md"));
+const README_md_42 = __importDefault(require("./paper/README.md"));
+const README_md_43 = __importDefault(require("./radio/README.md"));
+const README_md_44 = __importDefault(require("./radio-group/README.md"));
+const README_md_45 = __importDefault(require("./raster-image/README.md"));
+const README_md_46 = __importDefault(require("./select/README.md"));
+const README_md_47 = __importDefault(require("./tabs/README.md"));
+const README_md_48 = __importDefault(require("./text-input/README.md"));
+const README_md_49 = __importDefault(require("./text-link/README.md"));
+const README_md_50 = __importDefault(require("./textarea/README.md"));
+const README_md_51 = __importDefault(require("./time-picker/README.md"));
+const README_md_52 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_53 = __importDefault(require("./toggle/README.md"));
+const README_md_54 = __importDefault(require("./tooltip/README.md"));
+const README_md_55 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -68,26 +69,26 @@ exports.readmes = {
     "button-group": README_md_6.default,
     "button-list": README_md_7.default,
     "calendar": README_md_8.default,
-    "checkbox": README_md_9.default,
-    "checkbox-button": README_md_10.default,
-    "checkbox-input": README_md_11.default,
-    "chip": README_md_12.default,
-    "color-radio": README_md_13.default,
-    "color-radio-group": README_md_14.default,
-    "combobox": README_md_15.default,
-    "date-picker": README_md_16.default,
-    "date-picker-input": README_md_17.default,
-    "date-range-picker": README_md_18.default,
-    "date-range-picker-input": README_md_19.default,
-    "datetime-picker": README_md_20.default,
-    "datetime-picker-input": README_md_21.default,
-    "dialog": README_md_22.default,
-    "dropdown": README_md_23.default,
-    "dropzone": README_md_24.default,
-    "error-message": README_md_25.default,
-    "file-input": README_md_26.default,
-    "flash-messages": README_md_27.default,
-    "form-component": README_md_28.default,
+    "color-radio": README_md_9.default,
+    "color-radio-group": README_md_10.default,
+    "combobox": README_md_11.default,
+    "date-picker": README_md_12.default,
+    "date-picker-input": README_md_13.default,
+    "date-range-picker": README_md_14.default,
+    "date-range-picker-input": README_md_15.default,
+    "datetime-picker": README_md_16.default,
+    "datetime-picker-input": README_md_17.default,
+    "dialog": README_md_18.default,
+    "dropdown": README_md_19.default,
+    "dropzone": README_md_20.default,
+    "error-message": README_md_21.default,
+    "file-input": README_md_22.default,
+    "flash-messages": README_md_23.default,
+    "form-component": README_md_24.default,
+    "checkbox": README_md_25.default,
+    "checkbox-button": README_md_26.default,
+    "checkbox-input": README_md_27.default,
+    "chip": README_md_28.default,
     "icon": README_md_29.default,
     "image-gallery": README_md_30.default,
     "input": README_md_31.default,
@@ -95,23 +96,24 @@ exports.readmes = {
     "layout": README_md_33.default,
     "list-item": README_md_34.default,
     "loader": README_md_35.default,
-    "message": README_md_36.default,
-    "modal": README_md_37.default,
-    "multi-combobox": README_md_38.default,
-    "multi-select": README_md_39.default,
-    "pagination": README_md_40.default,
-    "paper": README_md_41.default,
-    "radio": README_md_42.default,
-    "radio-group": README_md_43.default,
-    "raster-image": README_md_44.default,
-    "select": README_md_45.default,
-    "tabs": README_md_46.default,
-    "text-input": README_md_47.default,
-    "text-link": README_md_48.default,
-    "textarea": README_md_49.default,
-    "time-picker": README_md_50.default,
-    "time-picker-input": README_md_51.default,
-    "toggle": README_md_52.default,
-    "tooltip": README_md_53.default,
-    "typography": README_md_54.default,
+    "lozenge": README_md_36.default,
+    "message": README_md_37.default,
+    "modal": README_md_38.default,
+    "multi-combobox": README_md_39.default,
+    "multi-select": README_md_40.default,
+    "pagination": README_md_41.default,
+    "paper": README_md_42.default,
+    "radio": README_md_43.default,
+    "radio-group": README_md_44.default,
+    "raster-image": README_md_45.default,
+    "select": README_md_46.default,
+    "tabs": README_md_47.default,
+    "text-input": README_md_48.default,
+    "text-link": README_md_49.default,
+    "textarea": README_md_50.default,
+    "time-picker": README_md_51.default,
+    "time-picker-input": README_md_52.default,
+    "toggle": README_md_53.default,
+    "tooltip": README_md_54.default,
+    "typography": README_md_55.default,
 };

package/utils/storybook-config.d.ts

@@ -3,6 +3,7 @@ import React, { ReactNode } from "react";
 import { AlertBubbleColor, AlertBubbleSize } from "../alert-bubble";
 import { ChipColor } from "../chip";
 import { InputGroupSizes } from "../input/theme";
+import { LozengeColor, LozengeVariant } from "../lozenge";
 import { MessageColor, MessageVariant } from "../message/theme";
 export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {
@@ -25,6 +26,10 @@ export interface StorybookConfig {
     Input: {
         sizes: (keyof InputGroupSizes)[];
     };
+    Lozenge: {
+        colors: LozengeColor[];
+        variants: LozengeVariant[];
+    };
     Select: any;
 }
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];

package/utils/storybook-config.js

@@ -45,6 +45,10 @@ exports.defaultConfig = {
     Input: {
         sizes: ["small", "default", "large"],
     },
+    Lozenge: {
+        colors: ["blue", "default", "green", "indigo", "orange", "red"],
+        variants: ["default", "muted"],
+    },
     Select: {},
 };
 // Context