ingred-ui 22.1.0 → 22.2.0

package/dist/components/FilterComboBox/FilterComboBox.d.ts

@@ -1,4 +1,5 @@
 import { type ReactElement } from "react";
+import { FilterSize, FilterVariant } from "../FilterInputAbstract/types";
 type FilterTagInputProps = {
     values: string[];
     options: (string | string[])[];
@@ -9,6 +10,10 @@ type FilterTagInputProps = {
     }[];
     onChange: (values: string[]) => void;
     onSelectChange: (index: number) => void;
+    size?: FilterSize;
+    variant?: FilterVariant;
+    tagVariant?: FilterVariant;
+    placeholder?: string;
 };
-export declare const FilterComboBox: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, }: FilterTagInputProps) => JSX.Element;
+export declare const FilterComboBox: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, placeholder, }: FilterTagInputProps) => JSX.Element;
 export {};

package/dist/components/FilterComboBox/FilterComboBox.stories.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, }: {
+    component: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, placeholder, }: {
         values: string[];
         options: (string | string[])[];
         selectedIndex: number;
@@ -12,8 +12,72 @@ declare const meta: {
         }[];
         onChange: (values: string[]) => void;
         onSelectChange: (index: number) => void;
+        size?: import("../FilterInputAbstract/types").FilterSize | undefined;
+        variant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
+        tagVariant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
+        placeholder?: string | undefined;
     }) => JSX.Element;
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        tagVariant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
 export default meta;
 /**
@@ -35,3 +99,22 @@ export default meta;
  * options の項目が `[ "イルカ", ["パンダ", "ぱんだ", "熊猫"], "ライオン" ]` の場合、ユーザー入力が "ぱんだ"、"パン"、"猫" と入力したときにどの場合にも「パンダ」がフィルタリングされます。
  */
 export declare const Default: StoryObj<typeof meta>;
+/**
+ * サイズバリエーション
+ *
+ * - small: 高さ28px
+ * - medium: 高さ32px（デフォルト）
+ * - large: 高さ40px
+ */
+export declare const Sizes: StoryObj<typeof meta>;
+/**
+ * カラーバリエーション
+ *
+ * - variant: コンポーネント全体の背景色
+ *   - light: 明るい背景色
+ *   - dark: 暗い背景色（デフォルト）
+ * - tagVariant: タグの背景色
+ *   - light: 明るい背景色（デフォルト）
+ *   - dark: 暗い背景色
+ */
+export declare const Variants: StoryObj<typeof meta>;

package/dist/components/FilterComboBox/styled.d.ts

@@ -1,4 +1,13 @@
-export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/// <reference types="react" />
+import { FilterVariant } from "../FilterInputAbstract/types";
+type StyledProps = {
+    $variant: FilterVariant;
+};
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledProps, never>;
 export declare const TagList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Select: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Select: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
 export declare const SelectIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    onEnter?: (() => void) | undefined;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/FilterInputAbstract/FilterInputAbstract.d.ts

@@ -1,12 +1,15 @@
 import React, { type ReactElement, type ReactNode } from "react";
+import { FilterSize } from "./types";
 export declare const FilterInputContext: React.Context<{
     isSmall: boolean;
 }>;
 type FilterTagProps = {
     label: string;
     onRemove: () => void;
+    size?: FilterSize;
+    variant?: "light" | "dark";
 };
-export declare const FilterTag: ({ label, onRemove }: FilterTagProps) => JSX.Element;
+export declare const FilterTag: ({ label, size, variant, onRemove, }: FilterTagProps) => JSX.Element;
 type FilterInputAbstractProps = {
     selectedIndex: number;
     selectOptions: {
@@ -15,6 +18,7 @@ type FilterInputAbstractProps = {
     }[];
     children?: ReactNode;
     onSelectChange: (index: number) => void;
+    size?: "small" | "medium" | "large";
 };
-export declare const FilterInputAbstract: ({ selectedIndex, selectOptions, onSelectChange, children, }: FilterInputAbstractProps) => JSX.Element;
+export declare const FilterInputAbstract: ({ selectedIndex, selectOptions, onSelectChange, children, size, }: FilterInputAbstractProps) => JSX.Element;
 export {};

package/dist/components/FilterInputAbstract/FilterInputAbstract.stories.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ selectedIndex, selectOptions, onSelectChange, children, }: {
+    component: ({ selectedIndex, selectOptions, onSelectChange, children, size, }: {
         selectedIndex: number;
         selectOptions: {
             icon: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -10,8 +10,25 @@ declare const meta: {
         }[];
         children?: React.ReactNode;
         onSelectChange: (index: number) => void;
+        size?: "small" | "medium" | "large" | undefined;
     }) => JSX.Element;
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
 };
 export default meta;
 /**
@@ -19,3 +36,7 @@ export default meta;
  * このコンポーネントは内部利用専用です。プロダクトには利用しないでください。
  */
 export declare const Default: StoryObj<typeof meta>;
+/**
+ * サイズバリエーション
+ */
+export declare const Sizes: StoryObj<typeof meta>;

package/dist/components/FilterInputAbstract/styled.d.ts

@@ -1,4 +1,22 @@
-export declare const FilterTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const FilterTagButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+/// <reference types="react" />
+import { FilterSize } from "./types";
+export declare const filterBaseStyle: import("styled-components").FlattenSimpleInterpolation;
+export declare const getFilterSizeStyle: (size: FilterSize) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getTriggerIconSizeStyle: (size: FilterSize) => import("styled-components").FlattenSimpleInterpolation;
+export type FilterTagProps = {
+    $size: FilterSize;
+};
 export declare const FilterInputAbstract: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DropDownTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const FilterTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, FilterTagProps, never>;
+export declare const FilterTagButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, FilterTagProps, never>;
+export declare const StyledContextMenu2CheckItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    closeOnChange?: boolean | undefined;
+    prepend?: import("react").ReactNode;
+    children: import("react").ReactNode;
+    onChange?: ((checked: boolean) => void) | undefined;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {
+    checked?: boolean | undefined;
+    colors?: "danger" | undefined;
+}, never>;

package/dist/components/FilterInputAbstract/types.d.ts

@@ -0,0 +1,17 @@
+export type FilterSize = "small" | "medium" | "large";
+export type FilterVariant = "light" | "dark";
+export type FilterSizeProps = {
+    size?: FilterSize;
+};
+export type FilterSizeConfig = {
+    height: string;
+    borderRadius: string;
+    iconSize: string;
+    arrowIconSize: string;
+    padding: string;
+};
+export type FilterVariantConfig = {
+    background: string;
+};
+export declare const FILTER_SIZES: Record<FilterSize, FilterSizeConfig>;
+export declare const FILTER_VARIANTS: Record<FilterVariant, FilterVariantConfig>;

package/dist/components/FilterSelectInput/FilterSelectInput.d.ts

@@ -1,14 +1,18 @@
-import { type ReactElement } from "react";
-type FilterTagInputProps = {
+import React from "react";
+import { FilterSize, FilterVariant } from "../FilterInputAbstract/types";
+type FilterSelectInputProps = {
     value: string;
     options: string[];
     selectedIndex: number;
     selectOptions: {
-        icon: ReactElement;
+        icon: React.ReactElement;
         label: string;
     }[];
     onChange: (value: string) => void;
     onSelectChange: (index: number) => void;
+    size?: FilterSize;
+    variant?: FilterVariant;
+    searchPlaceholder?: string;
 };
-export declare const FilterSelectInput: ({ value, options: values, selectedIndex, selectOptions, onChange, onSelectChange, }: FilterTagInputProps) => JSX.Element;
+export declare const FilterSelectInput: ({ value, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, searchPlaceholder, }: FilterSelectInputProps) => JSX.Element;
 export {};

package/dist/components/FilterSelectInput/FilterSelectInput.stories.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ value, options: values, selectedIndex, selectOptions, onChange, onSelectChange, }: {
+    component: ({ value, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, searchPlaceholder, }: {
         value: string;
         options: string[];
         selectedIndex: number;
@@ -12,8 +12,30 @@ declare const meta: {
         }[];
         onChange: (value: string) => void;
         onSelectChange: (index: number) => void;
+        size?: import("../FilterInputAbstract/types").FilterSize | undefined;
+        variant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
+        searchPlaceholder?: string | undefined;
     }) => JSX.Element;
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        searchPlaceholder: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+    };
 };
 export default meta;
 /**
@@ -23,3 +45,17 @@ export default meta;
  * 自動で横 100% に広がります。必要に応じて、親要素の幅を指定してください。
  */
 export declare const Default: StoryObj<typeof meta>;
+/**
+ * サイズバリエーション
+ *
+ * - small: 高さ28px
+ * - medium: 高さ32px（デフォルト）
+ * - large: 高さ40px
+ */
+export declare const Sizes: StoryObj<typeof meta>;
+export declare const Variants: StoryObj<typeof meta>;
+/**
+ * 検索窓のプレースホルダーをカスタマイズできます。
+ * デフォルトは「絞り込む」です。
+ */
+export declare const SearchPlaceholder: StoryObj<typeof meta>;

package/dist/components/FilterSelectInput/styled.d.ts

@@ -1,4 +1,20 @@
+/// <reference types="react" />
+import { FilterSize, FilterVariant } from "../FilterInputAbstract/types";
+type StyledProps = {
+    $size: FilterSize;
+    $variant: FilterVariant;
+};
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Select: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const SelectLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const Select: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
+type SelectLabelProps = {
+    $size: FilterSize;
+};
+export declare const SelectLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, SelectLabelProps, never>;
 export declare const SelectIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+type StyledContextMenu2TextInputItemProps = {
+    $placeholderColor?: string;
+};
+export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    onEnter?: (() => void) | undefined;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, StyledContextMenu2TextInputItemProps, never>;
+export {};

package/dist/components/FilterTagInput/FilterTagInput.d.ts

@@ -1,4 +1,6 @@
 import { type ReactElement } from "react";
+import { IconSize } from "../Icon";
+import { FilterSize } from "../FilterInputAbstract/types";
 type FilterTagInputProps = {
     title: string;
     values: string[];
@@ -9,6 +11,10 @@ type FilterTagInputProps = {
     }[];
     onChange: (values: string[]) => void;
     onSelectChange: (index: number) => void;
+    size?: FilterSize;
+    variant?: "light" | "dark";
+    tagVariant?: "light" | "dark";
+    menuIconSize?: IconSize | number;
 };
-export declare const FilterTagInput: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, }: FilterTagInputProps) => JSX.Element;
+export declare const FilterTagInput: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, menuIconSize, }: FilterTagInputProps) => JSX.Element;
 export {};

package/dist/components/FilterTagInput/FilterTagInput.stories.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, }: {
+    component: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, menuIconSize, }: {
         title: string;
         values: string[];
         selectedIndex: number;
@@ -12,8 +12,31 @@ declare const meta: {
         }[];
         onChange: (values: string[]) => void;
         onSelectChange: (index: number) => void;
+        size?: import("../FilterInputAbstract/types").FilterSize | undefined;
+        variant?: "dark" | "light" | undefined;
+        tagVariant?: "dark" | "light" | undefined;
+        menuIconSize?: number | import("../Icon").IconSize | undefined;
     }) => JSX.Element;
-    argTypes: {};
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        tagVariant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
 };
 export default meta;
 /**
@@ -55,3 +78,5 @@ export default meta;
  *
  */
 export declare const Default: StoryObj<typeof meta>;
+export declare const Sizes: StoryObj<typeof meta>;
+export declare const Variants: StoryObj<typeof meta>;

package/dist/components/FilterTagInput/styled.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="react" />
-export declare const InlineField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import { FilterSize, FilterVariant } from "../FilterInputAbstract/types";
+type StyledProps = {
+    $size: FilterSize;
+    $variant: FilterVariant;
+};
+export declare const InlineField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledProps, never>;
 export declare const InlineFieldInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const OverflowIndicator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const OverflowIndicator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    $size?: FilterSize | undefined;
+}, never>;
 export declare const InlineInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const InlineInputIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Panel: import("styled-components").StyledComponent<({ className, children }: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
@@ -19,3 +26,4 @@ export declare const PanelTagFieldFocusTrigger: import("styled-components").Styl
 export declare const PanelInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PanelInputSpacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PanelClearButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/Icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 /** @deprecated "arrow_bottom" は "arrow_down" に置き換わりました */
 type DeprecatedArrowBottom = "arrow_bottom";
-export type IconName = "dashboard" | "bar_chart" | "bar_chart_framed" | "line_chart_framed" | "multi_line_chart_framed" | "logout" | "setting" | "arrow_up" | "arrow_down" | "arrow_left" | "arrow_right" | "pencil" | "delete_bin" | "close" | "forbid" | "check" | "eye" | "eye_off" | "exclamation" | "expand_diagonal_s_fill" | "arrow_double_left" | "arrow_double_right" | "question" | "zoom_in" | "sort_up" | "sort_down" | "sort_inactive" | "folder" | "folder_open" | "refresh_line" | "return_line" | "link" | "unlink" | "no_link" | "search" | "import" | "export" | "add_line" | "more" | "more_vert" | "date_range" | "external_link" | "desktop" | "mobile" | "desktop_mobile" | "copy" | "truck" | "camera_movie" | "code_file" | "cart_secure" | "profile" | "auction" | "mail" | "mail_open" | "filter" | "notification" | "user_settings" | "company_settings" | "heart_pulse" | "checkbox_circle" | "alert" | "base_station" | "braille" | "label" | "download_cloud" | "save" | "close_circle" | "bid_strap" | "fluct" | "data_strap" | "company" | "document" | "user" | "information" | "analytics" | "support" | "apps" | "ad_block" | "building" | "image" | "calendar" | "menu" | "file_list" | "draft" | "time" | "stop_circle" | "play_circle" | "sort_asc" | "sort_desc" | "bar_chart_search" | "check_thin" | "image_check" | "group2" | "key" | "operator_match" | "operator_does_not_match" | "operator_contains" | "operator_starts_with" | "operator_ends_with" | "operator_equal" | "operator_not_equal" | "operator_greater_than" | "operator_greater_than_or_equal_to" | "operator_less_than" | "operator_less_than_or_equal_to";
+export type IconName = "dashboard" | "bar_chart" | "bar_chart_framed" | "line_chart_framed" | "multi_line_chart_framed" | "logout" | "setting" | "arrow_up" | "arrow_down" | "arrow_left" | "arrow_right" | "pencil" | "delete_bin" | "close" | "forbid" | "check" | "eye" | "eye_off" | "exclamation" | "expand_diagonal_s_fill" | "arrow_double_left" | "arrow_double_right" | "question" | "zoom_in" | "sort_up" | "sort_down" | "sort_inactive" | "folder" | "folder_open" | "refresh_line" | "return_line" | "link" | "unlink" | "no_link" | "search" | "import" | "export" | "add_line" | "more" | "more_vert" | "date_range" | "external_link" | "desktop" | "mobile" | "desktop_mobile" | "copy" | "truck" | "camera_movie" | "code_file" | "cart_secure" | "profile" | "auction" | "mail" | "mail_open" | "filter" | "notification" | "user_settings" | "company_settings" | "heart_pulse" | "checkbox_circle" | "alert" | "base_station" | "braille" | "label" | "download_cloud" | "save" | "close_circle" | "bid_strap" | "fluct" | "data_strap" | "company" | "document" | "user" | "information" | "analytics" | "support" | "apps" | "ad_block" | "building" | "image" | "calendar" | "menu" | "file_list" | "draft" | "time" | "stop_circle" | "play_circle" | "sort_asc" | "sort_desc" | "bar_chart_search" | "check_thin" | "image_check" | "group2" | "key" | "operator_match" | "operator_does_not_match" | "operator_contains" | "operator_does_not_contains" | "operator_starts_with" | "operator_ends_with" | "operator_equal" | "operator_not_equal" | "operator_greater_than" | "operator_greater_than_or_equal_to" | "operator_less_than" | "operator_less_than_or_equal_to";
 type IconType = "fill" | "line";
 type IconColor = IconType | "active" | string;
 export type IconSize = "sm" | "sm-md" | "md" | "md-lg" | "lg";
@@ -18,14 +18,14 @@ export declare const icons: {
 export type Props = {
     name: IconName;
     type?: IconType;
-    size?: IconSize;
+    size?: IconSize | number;
     color?: IconColor;
     alt?: string;
 } | {
     /** @deprecated "arrow_bottom" は "arrow_down" に置き換わりました */
     name: DeprecatedArrowBottom;
     type?: IconType;
-    size?: IconSize;
+    size?: IconSize | number;
     color?: IconColor;
     alt?: string;
 };

package/dist/components/Icon/internal/OperatorDoesNotContainsIcon/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IconProps } from "../../Icon";
+declare const OperatorDoesNotContainsIcon: React.FunctionComponent<IconProps>;
+export { OperatorDoesNotContainsIcon };

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TagProps } from "./types";
+export declare const Tag: ({ label, size, variant, onRemove, className, disabled, }: TagProps) => JSX.Element;

package/dist/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: ({ label, size, variant, onRemove, className, disabled, }: import("./types").TagProps) => JSX.Element;
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const WithoutRemove: Story;
+export declare const Disabled: Story;

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export type { TagProps, TagSize } from "./types";

package/dist/components/Tag/styled.d.ts

@@ -0,0 +1,10 @@
+import { TagSize, TagVariant } from "./types";
+type StyledTagProps = {
+    $size: TagSize;
+    $variant: TagVariant;
+    $disabled?: boolean;
+};
+export declare const Tag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
+export declare const RemoveButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTagProps, never>;
+export {};

package/dist/components/Tag/types.d.ts

@@ -0,0 +1,47 @@
+export type TagSize = "small" | "medium" | "large";
+export type TagVariant = "light" | "dark";
+export type TagProps = {
+    label: string;
+    size?: TagSize;
+    variant?: TagVariant;
+    onRemove?: () => void;
+    className?: string;
+    disabled?: boolean;
+};
+export declare const TAG_SIZES: {
+    readonly small: {
+        readonly height: "20px";
+        readonly fontSize: "11px";
+        readonly padding: "2px 6px";
+        readonly iconSize: "14px";
+        readonly borderRadius: "2px";
+    };
+    readonly medium: {
+        readonly height: "22px";
+        readonly fontSize: "12px";
+        readonly padding: "2px 7px";
+        readonly iconSize: "16px";
+        readonly borderRadius: "4px";
+    };
+    readonly large: {
+        readonly height: "26px";
+        readonly fontSize: "13px";
+        readonly padding: "3px 8px";
+        readonly iconSize: "18px";
+        readonly borderRadius: "4px";
+    };
+};
+export declare const TAG_VARIANTS: {
+    readonly light: {
+        readonly background: "#FFFFFF";
+        readonly border: "#B3BAC1";
+        readonly text: "#041C33";
+        readonly hoverIcon: "#1F3449";
+    };
+    readonly dark: {
+        readonly background: "#F5F7F8";
+        readonly border: "#B3BAC1";
+        readonly text: "#041C33";
+        readonly hoverIcon: "#1F3449";
+    };
+};