@team-frieeren/components 1.0.18 → 1.0.19

package/dist/Button.js

@@ -72,7 +72,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     color = _a.color,
     backgroundColor = _a.backgroundColor,
     borderColor = _a.borderColor,
-    rest = __rest(_a, ["type", "display", "disabled", "loading", "size", "className", "children", "color", "backgroundColor", "borderColor"]);
+    borderRadius = _a.borderRadius,
+    rest = __rest(_a, ["type", "display", "disabled", "loading", "size", "className", "children", "color", "backgroundColor", "borderColor", "borderRadius"]);
   return jsxs("button", _assign({
     ref: ref,
     "data-frieeren-component": "Button",
@@ -83,7 +84,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: {
       color: color,
       backgroundColor: backgroundColor,
-      borderColor: borderColor
+      borderColor: borderColor,
+      borderRadius: borderRadius
     }
   }, rest, {
     children: [jsx("span", {

package/dist/FloatingActionButton.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import cx from 'classnames';
+
+function FloatingActionButton(_a) {
+  var _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    className = _a.className,
+    _c = _a.position,
+    position = _c === void 0 ? "fixed" : _c,
+    top = _a.top,
+    left = _a.left,
+    _d = _a.bottom,
+    bottom = _d === void 0 ? 16 : _d,
+    _e = _a.right,
+    right = _e === void 0 ? 16 : _e,
+    _f = _a.actions,
+    actions = _f === void 0 ? [] : _f,
+    icon = _a.icon,
+    openIcon = _a.openIcon,
+    closeIcon = _a.closeIcon,
+    _onClick = _a.onClick;
+  var _g = useState(false),
+    isOpen = _g[0],
+    setIsOpen = _g[1];
+  var style = {
+    position: position
+  };
+  if (top !== undefined) style.top = top;
+  if (left !== undefined) style.left = left;
+  if (bottom !== undefined) style.bottom = bottom;
+  if (right !== undefined) style.right = right;
+  return jsxs("div", {
+    className: cx("floating-action-button", className),
+    "data-frieeren-component": "floating-action-button",
+    style: style,
+    children: [jsx("button", {
+      className: cx("floating-action-button--button"),
+      style: {
+        backgroundColor: "#3A8DFF"
+      },
+      disabled: disabled,
+      type: "button",
+      onClick: function onClick() {
+        setIsOpen(!isOpen);
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick();
+      },
+      children: isOpen ? closeIcon !== null && closeIcon !== void 0 ? closeIcon : icon : openIcon !== null && openIcon !== void 0 ? openIcon : icon
+    }), jsx("div", {
+      style: {
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        bottom: "76px",
+        right: "0",
+        opacity: isOpen ? 1 : 0,
+        visibility: isOpen ? "visible" : "hidden",
+        transition: "all 0.3s ease-in-out"
+      },
+      children: actions === null || actions === void 0 ? void 0 : actions.map(function (action, index) {
+        return jsx("div", {
+          style: {
+            transform: isOpen ? "translateY(0)" : "translateY(".concat(40 - index * 20, "px)"),
+            transition: "transform 0.3s ease-in-out",
+            transitionDelay: isOpen ? "".concat((index + 1) * 0.1, "s") : "0s"
+          },
+          children: jsx("button", {
+            className: cx("floating-action-button--button", "floating-action-button--action-button"),
+            disabled: action.disabled,
+            type: "button",
+            onClick: function onClick() {
+              var _a;
+              (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+              setIsOpen(false);
+            },
+            children: action.icon
+          })
+        }, index);
+      })
+    })]
+  });
+}
+
+export { FloatingActionButton };

package/dist/Switch.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Switch as Switch$1 } from 'radix-ui';
+import cx from 'classnames';
+
+var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.defaultValue,
+    defaultValue = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    value = _a.value;
+  return jsx(Switch$1.Root, {
+    ref: ref,
+    defaultChecked: defaultValue,
+    onCheckedChange: onChange,
+    checked: value,
+    className: cx("switch", className),
+    "data-frieeren-component": "Switch",
+    disabled: disabled,
+    "aria-disabled": disabled,
+    children: jsx(Switch$1.Thumb, {
+      className: "switch-thumb"
+    })
+  });
+});
+Switch.displayName = "Switch";
+
+export { Switch };

package/dist/Tabs.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect, useRef } from 'react';
 import * as TabsBase from '@radix-ui/react-tabs';
 
@@ -25,35 +25,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var Root = function Root(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Root, _assign({
-    "data-frieeren-component": "Tabs",
-    className: "tabs"
-  }, props));
-};
-var List = function List(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.List, _assign({
-    "data-frieeren-component": "TabsList",
-    className: "tabs--list"
-  }, props));
-};
-var Trigger = function Trigger(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Trigger, _assign({
-    "data-frieeren-component": "TabsTrigger",
-    className: "tabs--trigger"
-  }, props));
-};
-var Content = function Content(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Content, _assign({
-    "data-frieeren-component": "TabsContent",
-    className: "tabs--content"
-  }, props));
-};
-
 /**
  * 탭 인디케이터의 위치를 계산하고 관리하는 커스텀 훅
  * @param {UseTabsIndicatorProps} props - 탭 인디케이터 설정
@@ -124,36 +95,29 @@ var Tabs = function Tabs(props) {
     value = props.value,
     rest = __rest(props, ["width", "tabItems", "value"]);
   var listRef = useRef(null);
-  var indicatorStyle = useTabsIndicator({
+  useTabsIndicator({
     listRef: listRef
   }).indicatorStyle;
-  return jsxs(Root, _assign({
+  return jsx(TabsBase.Root, _assign({
+    "data-frieeren-component": "Tabs",
+    className: "tabs",
     value: value
   }, rest, {
     style: {
       width: width
     },
-    children: [jsxs("div", {
+    children: jsx(TabsBase.List, {
       ref: listRef,
-      className: "tabs--list-wrapper",
-      children: [jsx(List, {
-        "data-orientation": "horizontal",
-        children: tabItems.map(function (item) {
-          return jsx(Trigger, {
-            value: item.value,
-            children: item.text
-          }, "tabTrigger_".concat(item.value));
-        })
-      }), jsx("div", {
-        className: "tabs--indicator",
-        style: indicatorStyle
-      })]
-    }), tabItems.map(function (item) {
-      return jsx(Content, {
-        value: item.value,
-        children: item.content
-      }, "tabContent_".concat(item.value));
-    })]
+      "data-orientation": "horizontal",
+      className: "tabs--list",
+      children: tabItems.map(function (item) {
+        return jsx(TabsBase.Trigger, {
+          value: item.value,
+          className: "tabs--trigger",
+          children: item.label
+        }, "tabTrigger_".concat(item.value));
+      })
+    })
   }));
 };
 

package/dist/components/Button/Button.d.ts

@@ -10,6 +10,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     color?: string;
     backgroundColor?: string;
     borderColor?: string;
+    borderRadius?: React.CSSProperties["borderRadius"];
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
@@ -24,6 +25,7 @@ declare const LogButton: React.ForwardRefExoticComponent<{
     color?: string;
     backgroundColor?: string;
     borderColor?: string;
+    borderRadius?: React.CSSProperties["borderRadius"];
 } & {
     children?: React.ReactNode | undefined;
 } & {

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

@@ -12,6 +12,7 @@ declare const meta: {
         color?: string;
         backgroundColor?: string;
         borderColor?: string;
+        borderRadius?: React.CSSProperties["borderRadius"];
     } & {
         children?: import("react").ReactNode | undefined;
     } & {
@@ -37,6 +38,9 @@ declare const meta: {
         disabled: {
             description: string;
         };
+        borderRadius: {
+            description: string;
+        };
     };
 };
 export default meta;

package/dist/components/Button/Button.type.d.ts

@@ -14,6 +14,7 @@ export type ButtonProps = PropsWithChildren<{
     color?: string;
     backgroundColor?: string;
     borderColor?: string;
+    borderRadius?: React.CSSProperties["borderRadius"];
 }>;
 export type LogButtonProps = ButtonProps & {
     logParams?: Record<string, string>;

package/dist/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,2 @@
+import { FloatingActionButtonProps } from "./FloatingActionButton.type";
+export declare function FloatingActionButton({ disabled, className, position, top, left, bottom, right, actions, icon, openIcon, closeIcon, onClick }: FloatingActionButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { StoryObj } from "@storybook/react";
+import { FloatingActionButton } from "./FloatingActionButton";
+declare const meta: {
+    title: string;
+    component: typeof FloatingActionButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        position: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        top: {
+            control: "number";
+            description: string;
+        };
+        left: {
+            control: "number";
+            description: string;
+        };
+        bottom: {
+            control: "number";
+            description: string;
+        };
+        right: {
+            control: "number";
+            description: string;
+        };
+        actions: {
+            control: "object";
+            description: string;
+        };
+        icon: {
+            control: "object";
+            description: string;
+        };
+        openIcon: {
+            control: "object";
+            description: string;
+        };
+        closeIcon: {
+            control: "object";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

package/dist/components/FloatingActionButton/FloatingActionButton.type.d.ts

@@ -0,0 +1,19 @@
+export type FloatingActionButtonAction = {
+    icon: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+export type FloatingActionButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    position?: "fixed" | "absolute";
+    top?: React.CSSProperties["top"];
+    left?: React.CSSProperties["left"];
+    bottom?: React.CSSProperties["bottom"];
+    right?: React.CSSProperties["right"];
+    actions?: FloatingActionButtonAction[];
+    icon?: React.ReactNode;
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    onClick?: () => void;
+};

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

@@ -0,0 +1 @@
+export { FloatingActionButton } from "./FloatingActionButton";

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { SwitchProps } from "./Switch.type";
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/{Toggle/Toggle.stories.d.ts → Switch/Switch.stories.d.ts}

@@ -1,22 +1,32 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./Toggle.type").ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./Switch.type").SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
     parameters: {
         layout: string;
     };
     tags: string[];
     argTypes: {
-        states: {
-            control: string[];
+        defaultValue: {
+            control: "boolean";
             description: string;
         };
         onChange: {
             action: string;
             description: string;
         };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        value: {
+            control: "boolean";
+            description: string;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Toggles: Story;
+export declare const Base: Story;
+export declare const Disabled: Story;
+export declare const SwitchGroup: Story;

package/dist/components/Switch/Switch.type.d.ts

@@ -0,0 +1,7 @@
+export interface SwitchProps {
+    className?: string;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    defaultValue?: boolean;
+    value?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch";
+export type { SwitchProps } from "./Switch.type";

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,2 @@
 import { TabsProps } from "./Tabs.type";
-declare const Tabs: React.FC<TabsProps>;
-export { Tabs };
+export declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import type { StoryObj } from "@storybook/react";
  */
 declare const meta: {
     title: string;
-    component: import("react").FC<import("./Tabs.type").TabsProps>;
+    component: (props: import("./Tabs.type").TabsProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -16,13 +16,12 @@ declare const meta: {
             options: string[];
             description: string;
         };
-        onValueChange: {
-            control: "object";
-            description: string;
-        };
-        dir: {
+        tabItems: {
             control: "select";
-            options: string[];
+            options: {
+                value: string;
+                label: import("react/jsx-runtime").JSX.Element;
+            }[];
             description: string;
         };
         defaultValue: {
@@ -34,5 +33,4 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare function ControlledTabs(): import("react/jsx-runtime").JSX.Element;
+export declare const Base: Story;

package/dist/components/Tabs/Tabs.type.d.ts

@@ -2,14 +2,13 @@ import * as TabsBase from "@radix-ui/react-tabs";
 import { ReactNode, RefObject } from "react";
 interface TabItem {
     value: string;
-    text: string;
-    content: ReactNode;
+    label: ReactNode;
 }
-interface TabsProps extends Omit<TabsBase.TabsProps, "children"> {
+export interface UseTabsIndicatorProps {
+    listRef: RefObject<HTMLDivElement>;
+}
+export interface TabsProps extends Omit<TabsBase.TabsProps, "children" | "dir"> {
     width?: string;
     tabItems: TabItem[];
 }
-interface UseTabsIndicatorProps {
-    listRef: RefObject<HTMLDivElement>;
-}
-export { TabsProps, TabItem, UseTabsIndicatorProps };
+export {};

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

@@ -1 +1,2 @@
 export { Tabs } from "./Tabs";
+export type { TabsProps } from "./Tabs.type";

package/dist/index.css

@@ -1,2 +1,2 @@
-@charset "UTF-8";
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-color-brand-primary:#3a8dff;--seed-color-brand-secondary:#637a99;--seed-color-brand-caution:#f3b132;--seed-color-brand-error:#ff6b6b;--seed-color-brand-success:#00c896;--seed-color-brand-warning:#ffb03a;--seed-color-neatural-neutral100:#f7f9fc;--seed-color-neatural-neutral200:#e3e8ef;--seed-color-neatural-neutral300:#cdd5df;--seed-color-neatural-neutral400:#a8b2bf;--seed-color-neatural-neutral500:#7c8899;--seed-color-neatural-neutral600:#5a6777;--seed-color-neatural-neutral700:#414c59;--seed-color-neatural-neutral800:#2a3038;--seed-font-weight-title1:700;--seed-font-weight-subtitle1:700;--seed-font-weight-body1:700;--seed-font-line-height-title1:140%;--seed-font-line-height-subtitle1:140%;--seed-font-line-height-body1:140%;--seed-font-letter-spacing-title1:-2%;--seed-font-letter-spacing-subtitle1:-2%;--seed-font-letter-spacing-body1:-2%;--seed-font-size-title1:24px;--seed-font-size-subtitle1:20px;--seed-font-size-body1:16px}.box{box-sizing:border-box}:root{--button-loading-dot-delay:0.2s;--button-loading-dot-duration:1.4s}.button{border:none;border-radius:var(--seed-spacing-300);box-sizing:border-box;cursor:pointer;font-weight:500;position:relative;transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.button.button--loading{cursor:wait}.button--size-lg{font-size:16px;gap:var(--seed-spacing-300);height:52px;padding:var(--seed-spacing-500) var(--seed-spacing-700)}.button--size-lg>.button--content span{height:20px}.button--size-md{font-size:14px;gap:var(--seed-spacing-300);height:48px;padding:var(--seed-spacing-300) var(--seed-spacing-400)}.button--size-md>.button--content span{height:20px}.button--type-solid-green{background-color:var(--seed-brand-color-primary);color:var(--seed-ui-color-line-white)}.button--type-solid-green:active:not(:disabled),.button--type-solid-green:hover:not(:disabled){background-color:var(--seed-palette-color-green-700)}.button--type-solid-green.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-solid-red{background-color:var(--seed-brand-color-point2);color:var(--seed-ui-color-line-white)}.button--type-solid-red:active:not(:disabled),.button--type-solid-red:hover:not(:disabled){background-color:var(--seed-palette-color-red-600)}.button--type-solid-red.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-outline-green{background-color:var(--seed-ui-color-background-container);border:1px solid var(--seed-brand-color-primary);color:var(--seed-brand-color-primary)}.button--type-outline-green:active:not(:disabled),.button--type-outline-green:hover:not(:disabled){background-color:var(--seed-brand-color-secondary2)}.button--type-outline-green.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-outline-gray{background-color:var(--seed-ui-color-background-white);border:1px solid var(--seed-ui-color-line-dark);color:var(--seed-ui-color-text-black)}.button--type-outline-gray:active:not(:disabled),.button--type-outline-gray:hover:not(:disabled){background-color:var(--seed-ui-color-background-gray)}.button--type-outline-gray.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-text-none{background-color:transparent;color:var(--seed-ui-color-text-black)}.button--type-text-none:active:not(:disabled),.button--type-text-none:hover:not(:disabled){color:var(--seed-ui-color-text-lite)}.button--type-text-none.disabled{color:var(--seed-ui-color-text-disabled)}.button--display-inline{display:inline-flex}.button--display-block{display:flex}.button--content,.button--display-full{display:flex;width:100%}.button--content{align-items:center;flex-direction:row;justify-content:center;opacity:1;transition:opacity .2s}.button--content.button--content--hidden{opacity:0}.button--loading{align-items:center;display:flex;gap:12px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.button--loading-dot{animation:loadingDot var(--button-loading-dot-duration) infinite;background-color:currentColor;border-radius:50%;height:8px;opacity:0;width:8px}.button--loading-dot:nth-child(2){animation-delay:var(--button-loading-dot-delay)}.button--loading-dot:nth-child(3){animation-delay:calc(var(--button-loading-dot-delay)*2)}@keyframes loadingDot{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}80%,to{opacity:0;transform:translateY(0)}}:root{--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-size-heading:24px;--font-size-body:16px;--font-size-text:14px;--line-height-default:1.4;--font-display-block:block;--font-display-inline-block:inline-block;--font-display-inline:inline;--font-display-flex:flex;--font-display-inline-flex:inline-flex;--font-display-none:none}.text{box-sizing:border-box}.text--font-weight-regular{font-weight:var(--font-weight-regular)}.text--font-weight-medium{font-weight:var(--font-weight-medium)}.text--font-weight-bold{font-weight:var(--font-weight-bold)}.text--typography-heading{font-size:var(--font-size-heading);line-height:var(--line-height-default)}.text--typography-body{font-size:var(--font-size-body);line-height:var(--line-height-default)}.text--typography-text{font-size:var(--font-size-text);line-height:var(--line-height-default)}.text--single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--multi-line{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text--display-block{display:var(--font-display-block)}.text--display-inline-block{display:var(--font-display-inline-block)}.text--display-inline{display:var(--font-display-inline)}.text--display-flex{display:var(--font-display-flex)}.text--display-inline-flex{display:var(--font-display-inline-flex)}.text--display-none{display:var(--font-display-none)}:root{--seed-palette-color-base-900:#25292c}.overlay{animation:overlayShow .25s cubic-bezier(.3,0,0,1)}.dialog-content{animation:contentShow .3s cubic-bezier(.3,0,0,1);background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);left:50%;max-height:85vh;max-width:450px;padding:25px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw}.dialog-handle{margin-top:10px;width:45px}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dialog-content--theme-light{background-color:var(--seed-palette-color-base-100)}.dialog-content--theme-dark{background-color:var(--seed-palette-color-base-900)}.dialog-content--radius-none{border-radius:var(--seed-spacing-100)}.dialog-content--radius-small{border-radius:var(--seed-spacing-300)}.dialog-content--radius-medium{border-radius:var(--seed-spacing-600)}.dialog-content--radius-large{border-radius:var(--seed-spacing-900)}.popover-content{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-radius:4px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);padding:20px;width:260px;will-change:transform,opacity}:root{--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-1000:#0c4a6e}.SelectTrigger{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px var(--seed-palette-color-base-1000);color:var(--seed-palette-color-base-1000);display:inline-flex;font-size:13px;gap:5px;height:35px;justify-content:center;line-height:1;padding:0 15px}.SelectTrigger:hover{background-color:var(--seed-palette-color-blue-200)}.SelectTrigger:focus{box-shadow:0 0 0 2px #000}.SelectTrigger[data-placeholder]{color:var(--seed-palette-color-base-800)}.SelectIcon{color:var(--seed-palette-color-base-1000)}.SelectContent{background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(22,23,24,.35),0 10px 20px -15px rgba(22,23,24,.2);overflow:hidden}.SelectViewport{padding:5px}.SelectItem{align-items:center;border-radius:3px;color:var(--seed-palette-color-base-1000);display:flex;font-size:13px;height:25px;line-height:1;padding:0 35px 0 25px;position:relative;user-select:none}.SelectItem[data-disabled]{color:var(--seed-palette-color-blue-800);pointer-events:none}.SelectItem[data-highlighted]{background-color:var(--seed-palette-color-base-800);color:var(--seed-color-violet-1);outline:none}.SelectLabel{color:var(--seed-palette-color-blue-1000);font-size:12px;line-height:25px;padding:0 25px}.SelectSeparator{background-color:var(--seed-palette-color-base-500);height:1px;margin:5px}.SelectItemIndicator{display:inline-flex;left:0;position:absolute;width:25px}.SelectItemIndicator,.SelectScrollButton{align-items:center;justify-content:center}.SelectScrollButton{background-color:#fff;color:var(--seed-palette-color-base-1000);cursor:default;display:flex;height:25px}.toggle{background-color:var(--seed-palette-color-base-400);border-radius:var(--seed-rounding-500);height:28px;position:relative;width:52px}.toggle[data-state=checked]{background-color:var(--seed-brand-color-primary)}.toggle-thumb{background-color:var(--seed-ui-color-icon-white);border-radius:var(--seed-rounding-400);box-shadow:0 4px 4px 0 rgba(0,0,0,.15);display:block;height:22px;transform:translateX(4px);transition:transform .1s;width:22px;will-change:transform}.toggle-thumb[data-state=checked]{transform:translateX(26px)}:root{--input-transition:0.2s ease-in-out}.input-wrapper{align-items:center;display:flex;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--error .input,.input-wrapper.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--disabled .input{border:1px solid var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:"파일 선택"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:"파일 선택 완료"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}.tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list-wrapper{position:relative}.tabs--list{background-color:var(--seed-ui-color-background-chips);display:flex;gap:var(--seed-spacing-200);height:48px;padding:var(--seed-spacing-200)}.tabs--indicator,.tabs--list{border-radius:var(--seed-rounding-500)}.tabs--indicator{background-color:var(--seed-ui-color-background-white);box-shadow:4px 4px 20px 0 rgba(0,0,0,.08);height:calc(48px - var(--seed-spacing-200)*2);left:0;position:absolute;top:var(--seed-spacing-200);transition:all .2s ease-in-out;z-index:0}.tabs--trigger{align-items:center;border-radius:var(--seed-rounding-400);display:flex;flex:1;font-size:var(--seed-font-size-s);justify-content:center;position:relative;transition:all .2s ease-in-out;z-index:1}.tabs--trigger[data-state=inactive]{color:var(--seed-ui-color-text-lite);font-weight:var(--seed-font-weight-400)}.tabs--trigger[data-state=active]{color:var(--seed-ui-color-text-black);font-weight:var(--seed-font-weight-700)}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-800:#494f54;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{background-color:rgba(0,0,0,.4);inset:0;position:fixed}.drawer-content{background-color:#fff;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;bottom:0;height:fit-content;left:0;max-height:calc(100dvh - 32px);outline:none;overflow-y:hidden;position:fixed;right:0}.drawer-content-inner{-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 68px);overflow-y:auto}.bottomsheet-container--radius-none{border-top:var(--seed-spacing-100)}.bottomsheet-container--radius-small{border-radius:var(--seed-spacing-300)}.bottomsheet-container--radius-medium{border-radius:var(--seed-spacing-700)}.bottomsheet-container--radius-large{border-radius:var(--seed-spacing-900)}.bottomsheet-container--theme-light{background-color:var(--seed-palette-color-base-100)}.bottomsheet-container--theme-dark{background-color:var(--seed-palette-color-base-800)}.drawer-handle{height:36px;width:100%}@keyframes toast-enter-top{0%{opacity:.5;transform:translate3d(0,-200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,-150%,-1px) scale(.6)}}@keyframes toast-enter-bottom{0%{opacity:.5;transform:translate3d(0,200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,150%,-1px) scale(.6)}}@keyframes toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}.toast--content{align-items:center;background:var(--seed-ui-color-misc-black-70);border-radius:var(--seed-rounding-300);box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);box-sizing:border-box;color:#363636;display:flex;gap:var(--seed-spacing-600);justify-content:space-between;min-height:56px;opacity:0;padding:var(--seed-spacing-500);pointer-events:auto;position:relative;transition:transform .23s cubic-bezier(.21,1.02,.73,1);will-change:transform}.toast--content.top.visible{animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.top.hidden{animation:toast-exit-top .4s cubic-bezier(.06,.71,.55,1) forwards}.toast--content.bottom.visible{animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.bottom.hidden{animation:toast-exit-bottom .4s cubic-bezier(.06,.71,.55,1) forwards}@media (prefers-reduced-motion:reduce){.toast--content.visible{animation:toast-fade-in .35s ease-in forwards}.toast--content.hidden{animation:toast-fade-out .4s ease-out forwards}}.toast--type-message{gap:var(--seed-spacing-300)}.toast--type-icon,.toast--type-message{align-items:center;display:flex}.toast--type-icon[data-toast-type=default]{display:none}.toast--message{color:var(--seed-ui-color-text-white);font-size:var(--seed-font-size-s);font-weight:var(--seed-font-weight-400);line-height:var(--seed-font-line-height-sm)}.toast--action-link{text-decoration:underline;text-underline-offset:2px}.toast--action-button,.toast--action-link{color:var(--seed-ui-color-text-white);cursor:pointer;flex-shrink:0;font-size:var(--seed-font-size-xs);font-weight:var(--seed-font-weight-400)}.toast--action-button{align-items:center;background-color:var(--seed-brand-color-primary);border-radius:var(--seed-rounding-400);display:flex;justify-content:center;padding:var(--seed-spacing-200) var(--seed-spacing-300)}.toaster-content{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.toast-wrapper{position:absolute}.toast-wrapper>*{transition:all .23s cubic-bezier(.21,1.02,.73,1)}.toast-wrapper.toast-wrapper--top-right{right:0}.toast-wrapper.toast-wrapper--top-left{left:0}.toast-wrapper.toast-wrapper--top-center{left:50%}.toast-wrapper.toast-wrapper--bottom-right{bottom:0;right:0}.toast-wrapper.toast-wrapper--bottom-left{bottom:0;left:0}.toast-wrapper.toast-wrapper--bottom-center{bottom:0;left:50%}.popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+@charset "UTF-8";@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-palette-color-base-200:#f6f7f9;--seed-palette-color-base-300:#edf0f3;--seed-palette-color-base-400:#e0e5ea;--seed-palette-color-base-600:#a6abaf;--seed-palette-color-base-700:#7b8287;--seed-palette-color-blue-100:#f0f9ff;--seed-palette-color-blue-300:#bae6fd;--seed-palette-color-blue-400:#7dd3fc;--seed-palette-color-blue-500:#38bdf8;--seed-palette-color-blue-600:#0ea5e9;--seed-palette-color-blue-700:#0284c7;--seed-palette-color-blue-900:#075985;--seed-palette-color-purple-100:#f9fafe;--seed-palette-color-purple-200:#ecedfc;--seed-palette-color-purple-300:#d0d2f7;--seed-palette-color-purple-400:#b5b8f2;--seed-palette-color-purple-500:#9a9eec;--seed-palette-color-purple-600:#7a82e4;--seed-palette-color-purple-700:#6167c9;--seed-palette-color-purple-800:#5756a6;--seed-palette-color-purple-900:#494582;--seed-palette-color-purple-1000:#38325d;--seed-palette-color-red-100:#fef2f2;--seed-palette-color-red-200:#fee2e2;--seed-palette-color-red-300:#fecaca;--seed-palette-color-red-400:#fca5a5;--seed-palette-color-red-500:#f87171;--seed-palette-color-red-600:#ef4444;--seed-palette-color-red-700:#dc2626;--seed-palette-color-red-800:#b91c1c;--seed-palette-color-red-900:#991b1b;--seed-palette-color-red-1000:#7f1d1d;--seed-palette-color-orange-100:#fff7ed;--seed-palette-color-orange-200:#ffedd5;--seed-palette-color-orange-300:#fed7aa;--seed-palette-color-orange-400:#fdba74;--seed-palette-color-orange-500:#fb923c;--seed-palette-color-orange-600:#f97316;--seed-palette-color-orange-700:#ea580c;--seed-palette-color-orange-800:#c2410c;--seed-palette-color-orange-900:#9a3412;--seed-palette-color-orange-1000:#7c2d12;--seed-palette-color-yellow-100:#fefce8;--seed-palette-color-yellow-200:#fef9c3;--seed-palette-color-yellow-300:#fef08a;--seed-palette-color-yellow-400:#fde047;--seed-palette-color-yellow-500:#facc15;--seed-palette-color-yellow-600:#eab308;--seed-palette-color-yellow-700:#ca8a04;--seed-palette-color-yellow-800:#a16207;--seed-palette-color-yellow-900:#854d0e;--seed-palette-color-yellow-1000:#713f12;--seed-palette-color-green-100:#e9ffe9;--seed-palette-color-green-200:#d5ffd5;--seed-palette-color-green-300:#bdffbd;--seed-palette-color-green-400:#89ee89;--seed-palette-color-green-500:#60e060;--seed-palette-color-green-600:#50bf50;--seed-palette-color-green-700:#2fa32f;--seed-palette-color-green-800:#1e861e;--seed-palette-color-green-900:#156015;--seed-palette-color-green-1000:#063f06;--seed-ui-color-text-white:#fff;--seed-ui-color-text-disabled:#c6ccd1;--seed-ui-color-text-lite:#a6abaf;--seed-ui-color-text-dark:#494f54;--seed-ui-color-text-black:#191b1c;--seed-ui-color-background-white:#fff;--seed-ui-color-background-container:#fff;--seed-ui-color-background-gray:#f6f7f9;--seed-ui-color-background-chips:#f6f7f9;--seed-ui-color-background-placeholder:#e0e5ea;--seed-ui-color-background-guide:#e0e5ea;--seed-ui-color-background-focus:#191b1c;--seed-ui-color-icon-white:#fff;--seed-ui-color-icon-lite:#a6abaf;--seed-ui-color-icon-dark:#494f54;--seed-ui-color-icon-black:#191b1c;--seed-ui-color-line-white:#fff;--seed-ui-color-line-lite:#edf0f3;--seed-ui-color-line-medium:#c6ccd1;--seed-ui-color-line-dark:#494f54;--seed-ui-color-line-focus:#25292c;--seed-ui-color-toast-complete:#50bf50;--seed-ui-color-toast-error:#ef4444;--seed-ui-color-toast-caution:#fef08a;--seed-ui-color-misc-black-70:rgba(0,0,0,.7);--seed-ui-color-misc-black-40:rgba(0,0,0,.4);--seed-brand-color-primary:#50bf50;--seed-brand-color-secondary1:#bdffbd;--seed-brand-color-secondary2:#e9ffe9;--seed-brand-color-point1:#ef4444;--seed-brand-color-point2:#f87171;--seed-brand-color-point3:#fb923c;--seed-brand-color-point4:#fef08a;--seed-font-family-head:pretendard;--seed-font-family-title:pretendard;--seed-font-family-body:pretendard;--seed-font-family-paragraph:pretendard;--seed-font-family-caption:pretendard;--seed-font-weight-400:regular;--seed-font-weight-500:medium;--seed-font-weight-700:bold;--seed-font-size-xs:12px;--seed-font-size-s:14px;--seed-font-size-sm:16px;--seed-font-size-md:18px;--seed-font-size-lg:20px;--seed-font-size-xl:22px;--seed-font-size-2xl:24px;--seed-font-size-4xl:32px;--seed-font-size-5xl:40px;--seed-font-size-6xl:48px;--seed-font-size-3xl:28px;--seed-font-line-height-sm:16px;--seed-font-line-height-2xl:24px;--seed-font-line-height-4xl:32px;--seed-font-line-height-5xl:40px;--seed-font-line-height-6xl:48px;--seed-font-line-height-lg:20px;--seed-font-line-height-3xl:28px;--seed-font-line-height-s:14px;--seed-spacing-200:4px;--seed-spacing-400:12px;--seed-spacing-500:16px;--seed-spacing-700:24px;--seed-spacing-800:28px;--seed-spacing-1000:40px;--seed-spacing-1100:48px;--seed-spacing-1200:56px;--seed-spacing-1300:64px;--seed-spacing-1400:72px;--seed-rounding-100:0px;--seed-rounding-200:4px;--seed-rounding-300:8px;--seed-rounding-400:12px;--seed-rounding-500:16px;--seed-rounding-600:20px;--seed-rounding-700:24px;--seed-rounding-800:28px;--seed-rounding-900:32px;--seed-rounding-1000:40px;--seed-rounding-1100:48px;--seed-rounding-1200:56px;--seed-rounding-1300:64px;--seed-rounding-1400:72px;--seed-color-brand-primary:#3a8dff;--seed-color-brand-secondary:#637a99;--seed-color-brand-caution:#f3b132;--seed-color-brand-error:#ff6b6b;--seed-color-brand-success:#00c896;--seed-color-brand-warning:#ffb03a;--seed-color-neatural-neutral100:#f7f9fc;--seed-color-neatural-neutral200:#e3e8ef;--seed-color-neatural-neutral300:#cdd5df;--seed-color-neatural-neutral400:#a8b2bf;--seed-color-neatural-neutral500:#7c8899;--seed-color-neatural-neutral600:#5a6777;--seed-color-neatural-neutral700:#414c59;--seed-color-neatural-neutral800:#2a3038;--seed-font-weight-title1:700;--seed-font-weight-subtitle1:700;--seed-font-weight-body1:700;--seed-font-line-height-title1:140%;--seed-font-line-height-subtitle1:140%;--seed-font-line-height-body1:140%;--seed-font-letter-spacing-title1:-2%;--seed-font-letter-spacing-subtitle1:-2%;--seed-font-letter-spacing-body1:-2%;--seed-font-size-title1:24px;--seed-font-size-subtitle1:20px;--seed-font-size-body1:16px}.box{box-sizing:border-box}:root{--button-loading-dot-delay:0.2s;--button-loading-dot-duration:1.4s}.button{border:none;border-radius:var(--seed-spacing-300);box-sizing:border-box;cursor:pointer;font-weight:500;position:relative;transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.button.button--loading{cursor:wait}.button--size-lg{font-size:16px;gap:var(--seed-spacing-300);height:52px;padding:var(--seed-spacing-500) var(--seed-spacing-700)}.button--size-lg>.button--content span{height:20px}.button--size-md{font-size:14px;gap:var(--seed-spacing-300);height:48px;padding:var(--seed-spacing-300) var(--seed-spacing-400)}.button--size-md>.button--content span{height:20px}.button--type-solid-green{background-color:var(--seed-brand-color-primary);color:var(--seed-ui-color-line-white)}.button--type-solid-green:active:not(:disabled),.button--type-solid-green:hover:not(:disabled){background-color:var(--seed-palette-color-green-700)}.button--type-solid-green.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-solid-red{background-color:var(--seed-brand-color-point2);color:var(--seed-ui-color-line-white)}.button--type-solid-red:active:not(:disabled),.button--type-solid-red:hover:not(:disabled){background-color:var(--seed-palette-color-red-600)}.button--type-solid-red.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-outline-green{background-color:var(--seed-ui-color-background-container);border:1px solid var(--seed-brand-color-primary);color:var(--seed-brand-color-primary)}.button--type-outline-green:active:not(:disabled),.button--type-outline-green:hover:not(:disabled){background-color:var(--seed-brand-color-secondary2)}.button--type-outline-green.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-outline-gray{background-color:var(--seed-ui-color-background-white);border:1px solid var(--seed-ui-color-line-dark);color:var(--seed-ui-color-text-black)}.button--type-outline-gray:active:not(:disabled),.button--type-outline-gray:hover:not(:disabled){background-color:var(--seed-ui-color-background-gray)}.button--type-outline-gray.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-text-none{background-color:transparent;color:var(--seed-ui-color-text-black)}.button--type-text-none:active:not(:disabled),.button--type-text-none:hover:not(:disabled){color:var(--seed-ui-color-text-lite)}.button--type-text-none.disabled{color:var(--seed-ui-color-text-disabled)}.button--display-inline{display:inline-flex}.button--display-block{display:flex}.button--content,.button--display-full{display:flex;width:100%}.button--content{align-items:center;flex-direction:row;justify-content:center;opacity:1;transition:opacity .2s}.button--content.button--content--hidden{opacity:0}.button--loading{align-items:center;display:flex;gap:12px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.button--loading-dot{animation:loadingDot var(--button-loading-dot-duration) infinite;background-color:currentColor;border-radius:50%;height:8px;opacity:0;width:8px}.button--loading-dot:nth-child(2){animation-delay:var(--button-loading-dot-delay)}.button--loading-dot:nth-child(3){animation-delay:calc(var(--button-loading-dot-delay)*2)}@keyframes loadingDot{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}80%,to{opacity:0;transform:translateY(0)}}:root{--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-size-heading:24px;--font-size-body:16px;--font-size-text:14px;--line-height-default:1.4;--font-display-block:block;--font-display-inline-block:inline-block;--font-display-inline:inline;--font-display-flex:flex;--font-display-inline-flex:inline-flex;--font-display-none:none}.text{box-sizing:border-box}.text--font-weight-regular{font-weight:var(--font-weight-regular)}.text--font-weight-medium{font-weight:var(--font-weight-medium)}.text--font-weight-bold{font-weight:var(--font-weight-bold)}.text--typography-heading{font-size:var(--font-size-heading);line-height:var(--line-height-default)}.text--typography-body{font-size:var(--font-size-body);line-height:var(--line-height-default)}.text--typography-text{font-size:var(--font-size-text);line-height:var(--line-height-default)}.text--single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--multi-line{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text--display-block{display:var(--font-display-block)}.text--display-inline-block{display:var(--font-display-inline-block)}.text--display-inline{display:var(--font-display-inline)}.text--display-flex{display:var(--font-display-flex)}.text--display-inline-flex{display:var(--font-display-inline-flex)}.text--display-none{display:var(--font-display-none)}:root{--seed-palette-color-base-900:#25292c}.overlay{animation:overlayShow .25s cubic-bezier(.3,0,0,1)}.dialog-content{animation:contentShow .3s cubic-bezier(.3,0,0,1);background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);left:50%;max-height:85vh;max-width:450px;padding:25px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw}.dialog-handle{margin-top:10px;width:45px}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dialog-content--theme-light{background-color:var(--seed-palette-color-base-100)}.dialog-content--theme-dark{background-color:var(--seed-palette-color-base-900)}.dialog-content--radius-none{border-radius:var(--seed-spacing-100)}.dialog-content--radius-small{border-radius:var(--seed-spacing-300)}.dialog-content--radius-medium{border-radius:var(--seed-spacing-600)}.dialog-content--radius-large{border-radius:var(--seed-spacing-900)}.popover-content{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-radius:4px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);padding:20px;width:260px;will-change:transform,opacity}:root{--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-1000:#0c4a6e}.SelectTrigger{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px var(--seed-palette-color-base-1000);color:var(--seed-palette-color-base-1000);display:inline-flex;font-size:13px;gap:5px;height:35px;justify-content:center;line-height:1;padding:0 15px}.SelectTrigger:hover{background-color:var(--seed-palette-color-blue-200)}.SelectTrigger:focus{box-shadow:0 0 0 2px #000}.SelectTrigger[data-placeholder]{color:var(--seed-palette-color-base-800)}.SelectIcon{color:var(--seed-palette-color-base-1000)}.SelectContent{background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(22,23,24,.35),0 10px 20px -15px rgba(22,23,24,.2);overflow:hidden}.SelectViewport{padding:5px}.SelectItem{align-items:center;border-radius:3px;color:var(--seed-palette-color-base-1000);display:flex;font-size:13px;height:25px;line-height:1;padding:0 35px 0 25px;position:relative;user-select:none}.SelectItem[data-disabled]{color:var(--seed-palette-color-blue-800);pointer-events:none}.SelectItem[data-highlighted]{background-color:var(--seed-palette-color-base-800);color:var(--seed-color-violet-1);outline:none}.SelectLabel{color:var(--seed-palette-color-blue-1000);font-size:12px;line-height:25px;padding:0 25px}.SelectSeparator{background-color:var(--seed-palette-color-base-500);height:1px;margin:5px}.SelectItemIndicator{display:inline-flex;left:0;position:absolute;width:25px}.SelectItemIndicator,.SelectScrollButton{align-items:center;justify-content:center}.SelectScrollButton{background-color:#fff;color:var(--seed-palette-color-base-1000);cursor:default;display:flex;height:25px}:root{--switch-width:52px;--switch-height:32px;--switch-thumb-width:28px;--switch-thumb-height:28px;--switch-background-color:#b7c2d0;--switch-checked-background-color:#3a8dff;--switch-thumb-background-color:#fff}.switch{background-color:var(--switch-background-color);border-radius:16px;height:var(--switch-height);position:relative;width:var(--switch-width)}.switch[data-state=checked]{background-color:var(--switch-checked-background-color)}.switch-thumb{background-color:var(--switch-thumb-background-color);border-radius:14px;display:block;height:var(--switch-thumb-height);transform:translateX(2px);transition:transform .1s;width:var(--switch-thumb-width);will-change:transform}.switch-thumb[data-state=checked]{transform:translateX(calc(var(--switch-width) - var(--switch-thumb-width) - 2px))}:root{--input-transition:0.2s ease-in-out}.input-wrapper{align-items:center;display:flex;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--error .input,.input-wrapper.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--disabled .input{border:1px solid var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:"파일 선택"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:"파일 선택 완료"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}.tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list{background-color:#fff;height:35px;padding:0 20px}.tabs--list,.tabs--trigger{display:flex;position:relative}.tabs--trigger{align-items:center;flex:1;justify-content:center;padding:8px;z-index:1}.tabs--trigger div{font-size:14px;font-style:normal;font-weight:400;letter-spacing:-.28px;line-height:140%}.tabs--trigger[data-state=inactive]{color:#b7c2d0}.tabs--trigger[data-state=active]{color:#3a8dff}.floating-action-button{align-items:center;display:flex;justify-content:center;position:relative}.floating-action-button--button{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:56px;justify-content:center;width:56px}.floating-action-button--action-button{background-color:#fff;box-shadow:0 0 5.6px 0 rgba(0,0,0,.04)}.floating-action-button--action-button:hover{background-color:#ebf4ff;transition:background-color .2s ease-in-out}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-800:#494f54;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{background-color:rgba(0,0,0,.4);inset:0;position:fixed}.drawer-content{background-color:#fff;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;bottom:0;height:fit-content;left:0;max-height:calc(100dvh - 32px);outline:none;overflow-y:hidden;position:fixed;right:0}.drawer-content-inner{-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 68px);overflow-y:auto}.bottomsheet-container--radius-none{border-top:var(--seed-spacing-100)}.bottomsheet-container--radius-small{border-radius:var(--seed-spacing-300)}.bottomsheet-container--radius-medium{border-radius:var(--seed-spacing-700)}.bottomsheet-container--radius-large{border-radius:var(--seed-spacing-900)}.bottomsheet-container--theme-light{background-color:var(--seed-palette-color-base-100)}.bottomsheet-container--theme-dark{background-color:var(--seed-palette-color-base-800)}.drawer-handle{height:36px;width:100%}@keyframes toast-enter-top{0%{opacity:.5;transform:translate3d(0,-200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,-150%,-1px) scale(.6)}}@keyframes toast-enter-bottom{0%{opacity:.5;transform:translate3d(0,200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,150%,-1px) scale(.6)}}@keyframes toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}.toast--content{align-items:center;background:var(--seed-ui-color-misc-black-70);border-radius:var(--seed-rounding-300);box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);box-sizing:border-box;color:#363636;display:flex;gap:var(--seed-spacing-600);justify-content:space-between;min-height:56px;opacity:0;padding:var(--seed-spacing-500);pointer-events:auto;position:relative;transition:transform .23s cubic-bezier(.21,1.02,.73,1);will-change:transform}.toast--content.top.visible{animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.top.hidden{animation:toast-exit-top .4s cubic-bezier(.06,.71,.55,1) forwards}.toast--content.bottom.visible{animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.bottom.hidden{animation:toast-exit-bottom .4s cubic-bezier(.06,.71,.55,1) forwards}@media (prefers-reduced-motion:reduce){.toast--content.visible{animation:toast-fade-in .35s ease-in forwards}.toast--content.hidden{animation:toast-fade-out .4s ease-out forwards}}.toast--type-message{gap:var(--seed-spacing-300)}.toast--type-icon,.toast--type-message{align-items:center;display:flex}.toast--type-icon[data-toast-type=default]{display:none}.toast--message{color:var(--seed-ui-color-text-white);font-size:var(--seed-font-size-s);font-weight:var(--seed-font-weight-400);line-height:var(--seed-font-line-height-sm)}.toast--action-link{text-decoration:underline;text-underline-offset:2px}.toast--action-button,.toast--action-link{color:var(--seed-ui-color-text-white);cursor:pointer;flex-shrink:0;font-size:var(--seed-font-size-xs);font-weight:var(--seed-font-weight-400)}.toast--action-button{align-items:center;background-color:var(--seed-brand-color-primary);border-radius:var(--seed-rounding-400);display:flex;justify-content:center;padding:var(--seed-spacing-200) var(--seed-spacing-300)}.toaster-content{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.toast-wrapper{position:absolute}.toast-wrapper>*{transition:all .23s cubic-bezier(.21,1.02,.73,1)}.toast-wrapper.toast-wrapper--top-right{right:0}.toast-wrapper.toast-wrapper--top-left{left:0}.toast-wrapper.toast-wrapper--top-center{left:50%}.toast-wrapper.toast-wrapper--bottom-right{bottom:0;right:0}.toast-wrapper.toast-wrapper--bottom-left{bottom:0;left:0}.toast-wrapper.toast-wrapper--bottom-center{bottom:0;left:50%}.popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/index.d.ts

@@ -10,8 +10,9 @@ export { Button } from "./components/Button";
 export { Text } from "./components/Text";
 export { RadioGroup } from "./components/RadioGroup";
 export { Checkbox } from "./components/Checkbox";
-export { Toggle } from "./components/Toggle";
+export { Switch } from "./components/Switch";
 export { Select } from "./components/Select";
 export { Input } from "./components/Input";
 export { Tabs } from "./components/Tabs";
 export { LogProvider, LogScreen } from "./components/Log";
+export { FloatingActionButton } from "./components/FloatingActionButton";

package/dist/index.js

@@ -5,7 +5,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useState, useEffect, useCallback, useMemo, Fragment, createContext, useContext, forwardRef, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Dialog, Switch } from 'radix-ui';
+import { Dialog, Switch as Switch$1 } from 'radix-ui';
 import { Drawer } from 'vaul';
 import * as RadioGroupBase from '@radix-ui/react-radio-group';
 import * as CheckboxBase from '@radix-ui/react-checkbox';
@@ -743,7 +743,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     color = _a.color,
     backgroundColor = _a.backgroundColor,
     borderColor = _a.borderColor,
-    rest = __rest(_a, ["type", "display", "disabled", "loading", "size", "className", "children", "color", "backgroundColor", "borderColor"]);
+    borderRadius = _a.borderRadius,
+    rest = __rest(_a, ["type", "display", "disabled", "loading", "size", "className", "children", "color", "backgroundColor", "borderColor", "borderRadius"]);
   return jsxs("button", _assign({
     ref: ref,
     "data-frieeren-component": "Button",
@@ -754,7 +755,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: {
       color: color,
       backgroundColor: backgroundColor,
-      borderColor: borderColor
+      borderColor: borderColor,
+      borderRadius: borderRadius
     }
   }, rest, {
     children: [jsx("span", {
@@ -852,7 +854,7 @@ function Text(_a) {
   }));
 }
 
-function Root$3(_a) {
+function Root$2(_a) {
   var className = _a.className,
     props = __rest(_a, ["className"]);
   return jsx(RadioGroupBase.Root, _assign({
@@ -876,12 +878,12 @@ var Indicator$1 = function Indicator(_a) {
   }, props));
 };
 var RadioGroup = {
-  Root: Root$3,
+  Root: Root$2,
   Item: Item$1,
   Indicator: Indicator$1
 };
 
-var Root$2 = function Root(_a) {
+var Root$1 = function Root(_a) {
   var className = _a.className,
     props = __rest(_a, ["className"]);
   return jsx(CheckboxBase.Root, _assign({
@@ -896,29 +898,35 @@ var Indicator = function Indicator(_a) {
   }, props));
 };
 var Checkbox = {
-  Root: Root$2,
+  Root: Root$1,
   Indicator: Indicator
 };
 
-var Toggle = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Switch = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-    _b = _a.states,
-    states = _b === void 0 ? "active" : _b,
-    onChange = _a.onChange;
-  return jsx(Switch.Root, {
+    _b = _a.defaultValue,
+    defaultValue = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    value = _a.value;
+  return jsx(Switch$1.Root, {
     ref: ref,
+    defaultChecked: defaultValue,
     onCheckedChange: onChange,
-    checked: states === "active",
-    className: cx("toggle", className),
-    "data-frieeren-component": "Toggle",
-    children: jsx(Switch.Thumb, {
-      className: "toggle-thumb"
+    checked: value,
+    className: cx("switch", className),
+    "data-frieeren-component": "Switch",
+    disabled: disabled,
+    "aria-disabled": disabled,
+    children: jsx(Switch$1.Thumb, {
+      className: "switch-thumb"
     })
   });
 });
-Toggle.displayName = "Toggle";
+Switch.displayName = "Switch";
 
-var Root$1 = function Root(_a) {
+var Root = function Root(_a) {
   var className = _a.className,
     props = __rest(_a, ["className"]);
   return jsx("div", {
@@ -928,7 +936,7 @@ var Root$1 = function Root(_a) {
     }, props))
   });
 };
-var Trigger$1 = function Trigger(_a) {
+var Trigger = function Trigger(_a) {
   var props = __rest(_a, []);
   return jsx(SelectBase.Trigger, _assign({
     "data-frieeren-component": "SelectTrigger"
@@ -940,7 +948,7 @@ var Portal = function Portal(_a) {
     "data-frieeren-component": "SelectPortal"
   }, props));
 };
-var Content$1 = function Content(_a) {
+var Content = function Content(_a) {
   var props = __rest(_a, []);
   return jsx(SelectBase.Content, _assign({
     "data-frieeren-component": "SelectContent"
@@ -983,10 +991,10 @@ var Value = function Value(_a) {
   }, props));
 };
 var Select = {
-  Root: Root$1,
-  Trigger: Trigger$1,
+  Root: Root,
+  Trigger: Trigger,
   Portal: Portal,
-  Content: Content$1,
+  Content: Content,
   Viewport: Viewport,
   Group: Group,
   Item: Item,
@@ -1095,35 +1103,6 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 Input.displayName = "Input";
 
-var Root = function Root(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Root, _assign({
-    "data-frieeren-component": "Tabs",
-    className: "tabs"
-  }, props));
-};
-var List = function List(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.List, _assign({
-    "data-frieeren-component": "TabsList",
-    className: "tabs--list"
-  }, props));
-};
-var Trigger = function Trigger(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Trigger, _assign({
-    "data-frieeren-component": "TabsTrigger",
-    className: "tabs--trigger"
-  }, props));
-};
-var Content = function Content(_a) {
-  var props = __rest(_a, []);
-  return jsx(TabsBase.Content, _assign({
-    "data-frieeren-component": "TabsContent",
-    className: "tabs--content"
-  }, props));
-};
-
 /**
  * 탭 인디케이터의 위치를 계산하고 관리하는 커스텀 훅
  * @param {UseTabsIndicatorProps} props - 탭 인디케이터 설정
@@ -1194,36 +1173,29 @@ var Tabs = function Tabs(props) {
     value = props.value,
     rest = __rest(props, ["width", "tabItems", "value"]);
   var listRef = useRef(null);
-  var indicatorStyle = useTabsIndicator({
+  useTabsIndicator({
     listRef: listRef
   }).indicatorStyle;
-  return jsxs(Root, _assign({
+  return jsx(TabsBase.Root, _assign({
+    "data-frieeren-component": "Tabs",
+    className: "tabs",
     value: value
   }, rest, {
     style: {
       width: width
     },
-    children: [jsxs("div", {
+    children: jsx(TabsBase.List, {
       ref: listRef,
-      className: "tabs--list-wrapper",
-      children: [jsx(List, {
-        "data-orientation": "horizontal",
-        children: tabItems.map(function (item) {
-          return jsx(Trigger, {
-            value: item.value,
-            children: item.text
-          }, "tabTrigger_".concat(item.value));
-        })
-      }), jsx("div", {
-        className: "tabs--indicator",
-        style: indicatorStyle
-      })]
-    }), tabItems.map(function (item) {
-      return jsx(Content, {
-        value: item.value,
-        children: item.content
-      }, "tabContent_".concat(item.value));
-    })]
+      "data-orientation": "horizontal",
+      className: "tabs--list",
+      children: tabItems.map(function (item) {
+        return jsx(TabsBase.Trigger, {
+          value: item.value,
+          className: "tabs--trigger",
+          children: item.label
+        }, "tabTrigger_".concat(item.value));
+      })
+    })
   }));
 };
 
@@ -1250,4 +1222,84 @@ function LogScreen(_a) {
   return children;
 }
 
-export { BottomSheet, Box, LogButton as Button, Checkbox, Container, Flex, Grid, Input, LogProvider, LogScreen, LogPopup as Popup, RadioGroup, Select, Tabs, Text, ToastProvider, Toggle, useToast };
+function FloatingActionButton(_a) {
+  var _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    className = _a.className,
+    _c = _a.position,
+    position = _c === void 0 ? "fixed" : _c,
+    top = _a.top,
+    left = _a.left,
+    _d = _a.bottom,
+    bottom = _d === void 0 ? 16 : _d,
+    _e = _a.right,
+    right = _e === void 0 ? 16 : _e,
+    _f = _a.actions,
+    actions = _f === void 0 ? [] : _f,
+    icon = _a.icon,
+    openIcon = _a.openIcon,
+    closeIcon = _a.closeIcon,
+    _onClick = _a.onClick;
+  var _g = useState(false),
+    isOpen = _g[0],
+    setIsOpen = _g[1];
+  var style = {
+    position: position
+  };
+  if (top !== undefined) style.top = top;
+  if (left !== undefined) style.left = left;
+  if (bottom !== undefined) style.bottom = bottom;
+  if (right !== undefined) style.right = right;
+  return jsxs("div", {
+    className: cx("floating-action-button", className),
+    "data-frieeren-component": "floating-action-button",
+    style: style,
+    children: [jsx("button", {
+      className: cx("floating-action-button--button"),
+      style: {
+        backgroundColor: "#3A8DFF"
+      },
+      disabled: disabled,
+      type: "button",
+      onClick: function onClick() {
+        setIsOpen(!isOpen);
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick();
+      },
+      children: isOpen ? closeIcon !== null && closeIcon !== void 0 ? closeIcon : icon : openIcon !== null && openIcon !== void 0 ? openIcon : icon
+    }), jsx("div", {
+      style: {
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        bottom: "76px",
+        right: "0",
+        opacity: isOpen ? 1 : 0,
+        visibility: isOpen ? "visible" : "hidden",
+        transition: "all 0.3s ease-in-out"
+      },
+      children: actions === null || actions === void 0 ? void 0 : actions.map(function (action, index) {
+        return jsx("div", {
+          style: {
+            transform: isOpen ? "translateY(0)" : "translateY(".concat(40 - index * 20, "px)"),
+            transition: "transform 0.3s ease-in-out",
+            transitionDelay: isOpen ? "".concat((index + 1) * 0.1, "s") : "0s"
+          },
+          children: jsx("button", {
+            className: cx("floating-action-button--button", "floating-action-button--action-button"),
+            disabled: action.disabled,
+            type: "button",
+            onClick: function onClick() {
+              var _a;
+              (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+              setIsOpen(false);
+            },
+            children: action.icon
+          })
+        }, index);
+      })
+    })]
+  });
+}
+
+export { BottomSheet, Box, LogButton as Button, Checkbox, Container, Flex, FloatingActionButton, Grid, Input, LogProvider, LogScreen, LogPopup as Popup, RadioGroup, Select, Switch, Tabs, Text, ToastProvider, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-frieeren/components",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -69,7 +69,8 @@
     "classnames": "^2.5.1",
     "radix-ui": "^1.1.3",
     "sass": "^1.80.4",
-    "vaul": "^1.1.1"
+    "vaul": "^1.1.1",
+    "@team-frieeren/icons": "1.0.2"
   },
   "exports": {
     ".": {
@@ -108,9 +109,9 @@
       "import": "./dist/Checkbox.js",
       "types": "./dist/components/Checkbox/index.d.ts"
     },
-    "./toggle": {
-      "import": "./dist/Toggle.js",
-      "types": "./dist/components/Toggle/index.d.ts"
+    "./switch": {
+      "import": "./dist/Switch.js",
+      "types": "./dist/components/Switch/index.d.ts"
     },
     "./select": {
       "import": "./dist/Select.js",
@@ -128,6 +129,10 @@
       "import": "./dist/Log.js",
       "types": "./dist/components/Log/index.d.ts"
     },
+    "./floatingActionButton": {
+      "import": "./dist/FloatingActionButton.js",
+      "types": "./dist/components/FloatingActionButton/index.d.ts"
+    },
     "./styles.css": "./dist/index.css"
   },
   "scripts": {

package/dist/Toggle.js

@@ -1,24 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Switch } from 'radix-ui';
-import cx from 'classnames';
-
-var Toggle = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var className = _a.className,
-    _b = _a.states,
-    states = _b === void 0 ? "active" : _b,
-    onChange = _a.onChange;
-  return jsx(Switch.Root, {
-    ref: ref,
-    onCheckedChange: onChange,
-    checked: states === "active",
-    className: cx("toggle", className),
-    "data-frieeren-component": "Toggle",
-    children: jsx(Switch.Thumb, {
-      className: "toggle-thumb"
-    })
-  });
-});
-Toggle.displayName = "Toggle";
-
-export { Toggle };

package/dist/components/Tabs/TabsBase.d.ts

@@ -1,6 +0,0 @@
-import * as TabsBase from "@radix-ui/react-tabs";
-declare const Root: ({ ...props }: TabsBase.TabsProps) => import("react/jsx-runtime").JSX.Element;
-declare const List: ({ ...props }: TabsBase.TabsListProps) => import("react/jsx-runtime").JSX.Element;
-declare const Trigger: ({ ...props }: TabsBase.TabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
-declare const Content: ({ ...props }: TabsBase.TabsContentProps) => import("react/jsx-runtime").JSX.Element;
-export { Root, List, Trigger, Content };

package/dist/components/Toggle/Toggle.d.ts

@@ -1,2 +0,0 @@
-import { ToggleProps } from "./Toggle.type";
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Toggle/Toggle.type.d.ts

@@ -1,6 +0,0 @@
-export type ToggleStates = "active" | "inactive";
-export interface ToggleProps {
-    className?: string;
-    states?: ToggleStates;
-    onChange?: (checked: boolean) => void;
-}

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

@@ -1 +0,0 @@
-export { Toggle } from "./Toggle";