ingred-ui 22.0.0 → 22.2.0

package/dist/components/DualListBox2/DualListBox2.d.ts

@@ -2,32 +2,32 @@ import React, { type ReactNode } from "react";
 import { type Item } from "./types";
 type DualListBox2Props = {
     /**
-     * 選択済みの「追加」項目
-     **/
+     * 選択済みの「追加」項目の配列
+     */
     included: Item[];
     /**
-     * 選択済みの「除外」項目
-     **/
+     * 選択済みの「除外」項目の配列
+     */
     excluded: Item[];
     /**
-     * 追加ボタンを非活性にし、「排他のみモード」にするかどうか
-     **/
+     * 追加ボタンを非活性にし、「除外のみモード」にするかどうか
+     */
     disableInclude?: boolean;
     /**
-     * 除外ボタンを非活性にし、「排他のみモード」にするかどうか
-     **/
+     * 除外ボタンを非活性にし、「追加のみモード」にするかどうか
+     */
     disableExclude?: boolean;
     /**
-     * メニューに表示するボタン要素
-     **/
+     * メニューに表示するカスタムボタン要素
+     */
     menuButtons?: ReactNode;
     /**
-     * ローディング中かどうかのフラグ
-     **/
+     * データ読み込み中かどうかを示すフラグ
+     */
     loading?: boolean;
     /**
-     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのみ）
-     **/
+     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのコンポーネントのみ許可）
+     */
     children: ReactNode;
     /**
      * 「追加」状態の変更イベントハンドラ
@@ -57,6 +57,14 @@ type DualListBox2Props = {
      * 1ページあたりの表示件数が変更されたときのハンドラ
      **/
     onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * 検索フィルターの文字列
+     **/
+    filter?: string;
+    /**
+     * 検索フィルターが変更されたときのハンドラ
+     **/
+    onFilterChange?: (filter: string) => void;
 };
 export declare const DualListBox2: React.ForwardRefExoticComponent<DualListBox2Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,11 +1,16 @@
 import React from "react";
-import { StoryObj, ComponentStory } from "@storybook/react";
-import { type Item, DualListBox2 } from "./index";
+import { StoryObj } from "@storybook/react";
+import { DualListBox2 } from "./DualListBox2";
+export type Item = {
+    id: string;
+    label: string;
+    groupName?: string;
+};
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
-        included: Item[];
-        excluded: Item[];
+        included: import("./types").Item[];
+        excluded: import("./types").Item[];
         disableInclude?: boolean | undefined;
         disableExclude?: boolean | undefined;
         menuButtons?: React.ReactNode;
@@ -18,45 +23,42 @@ declare const meta: {
         pageSize?: number | undefined;
         pageSizeOptions?: number[] | undefined;
         onPageSizeChange?: ((pageSize: number) => void) | undefined;
+        filter?: string | undefined;
+        onFilterChange?: ((filter: string) => void) | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
-    argTypes: {};
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default meta;
+type Story = StoryObj<typeof DualListBox2>;
 /**
  * #### ベーシックなタイプ
  *
  * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合、上限が決まっている場合いずれにも使えます。
- *
- * ---
- *
- * `included` と `excluded` で選択中の値を指定します。
- * 選択状態変更時は、`onIncludedChange` と `onExcludedChange` で、新しい `included` と `excluded` を受け取れるので、これを使って `included` と `excluded` を更新してください。
- *
- * children には、左パネル用の選択できる項目を渡します。右パネルの内容は状態に応じて自動で表示管理されます。
- *
- * モバイルサイズでは、タブで左右パネルの表示を切り替える
- *
- * included はフラットな配列。アコーディオンやセクションの group ごとに分けて配置する
  */
-export declare const Default: ComponentStory<typeof DualListBox2>;
+export declare const Default: Story;
 /**
- * #### 選択候補がアコーディオンで折りたたまれているタイプ
+ * #### アコーディオンタイプ
  *
- * 件数の上限が決まっていて、多い場合や区切りたい場合に利用します。
- * セクションごとに一括選択もできます。
+ * グループ化されたアイテムを表示する場合に使用します。
  */
-export declare const Accordion: StoryObj<typeof DualListBox2>;
+export declare const Accordion: Story;
 /**
- * 「追加」「除外」のいずれかしかできない場合の例です。
+ * #### 「追加」「除外」のいずれかしかできない場合
+ *
  * 状況に応じて、`disableExclude`（除外無効）、`disableInclude`（追加無効） に `true` を指定して制御してください。
  */
-export declare const Either: StoryObj<typeof DualListBox2>;
+export declare const Either: Story;
 /**
  * #### 選択候補がセクションで分かれているタイプ
  *
  * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合に利用します。
  * 検索は各セクションに移動後に使えます。
- *
- * 任意のセクション選択中は、その他のセクションは非表示となります。
  */
-export declare const Section: StoryObj<typeof DualListBox2>;
+export declare const Section: Story;

package/dist/components/DualListBox2/DualListBox2Item.d.ts

@@ -1,12 +1,10 @@
-import { type ReactNode } from "react";
-type DualListBox2ItemProps = {
+import React, { type ReactNode } from "react";
+export type DualListBox2ItemProps = {
     id: string;
     children: ReactNode;
+    isIncluded?: boolean;
+    isExcluded?: boolean;
     disableInclude?: boolean;
     disableExclude?: boolean;
 };
-export declare const DualListBox2Item: {
-    ({ id, disableInclude, disableExclude, children, }: DualListBox2ItemProps): JSX.Element | null;
-    displayName: string;
-};
-export {};
+export declare const DualListBox2Item: React.FC<DualListBox2ItemProps>;

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

@@ -9,6 +9,7 @@ export declare const LeftPanel: import("styled-components").StyledComponent<"div
 export declare const LeftPanelBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LeftPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderSearchReset: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderMenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderCount: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderButtons: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;

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 {};