@serendie/ui 0.1.12 → 0.1.14

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};

package/dist/assets/avatar.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (C) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...C }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8001 3.26101V2.05665C17.935 2.46416 21.975 6.7603 21.975 12C21.975 17.2398 17.935 21.5359 12.8001 21.9434V20.739C17.2714 20.3349 20.775 16.5766 20.775 12C20.775 7.42343 17.2714 3.66514 12.8001 3.26101ZM11.2001 20.7391C6.72868 20.335 3.22502 16.5767 3.22502 12C3.22502 7.4234 6.72868 3.66508 11.2001 3.261V2.05664C6.06507 2.46411 2.02502 6.76027 2.02502 12C2.02502 17.2398 6.06507 21.536 11.2001 21.9434V20.7391ZM12 6.72503C10.6745 6.72503 9.60002 7.79955 9.60002 9.12503C9.60002 10.4505 10.6745 11.525 12 11.525C13.3255 11.525 14.4 10.4505 14.4 9.12503C14.4 7.79955 13.3255 6.72503 12 6.72503ZM8.40002 9.12503C8.40002 7.13681 10.0118 5.52503 12 5.52503C13.9882 5.52503 15.6 7.13681 15.6 9.12503C15.6 11.1133 13.9882 12.725 12 12.725C10.0118 12.725 8.40002 11.1133 8.40002 9.12503ZM12 15.1C10.1223 15.1 8.60002 16.6223 8.60002 18.5H7.40002C7.40002 15.9595 9.45951 13.9 12 13.9C14.5405 13.9 16.6 15.9595 16.6 18.5H15.4C15.4 16.6223 13.8778 15.1 12 15.1Z", fill: "black" }));
+export {
+  l as default
+};

package/dist/assets/check.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M17.5294 8.52941L10.4991 15.5597L6.46875 11.5294L7.52941 10.4688L10.4991 13.4384L16.4688 7.46875L17.5294 8.52941Z", fill: "#279B20" }));
+export {
+  l as default
+};

package/dist/assets/checkCircle.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { x: 2.69922, y: 2.69922, width: 18.6, height: 18.6, rx: 9.3, fill: "#279B20" }), /* @__PURE__ */ e.createElement("path", { d: "M17.2286 9.22863L10.1983 16.259L6.16797 12.2286L7.22863 11.168L10.1983 14.1376L16.168 8.16797L17.2286 9.22863Z", fill: "white" }));
+export {
+  l as default
+};

package/dist/assets/checkboxChecked.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.25 6C3.25 4.48122 4.48122 3.25 6 3.25H18C19.5188 3.25 20.75 4.48122 20.75 6V18C20.75 19.5188 19.5188 20.75 18 20.75H6C4.48122 20.75 3.25 19.5188 3.25 18V6Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { d: "M16.5294 9.52941L10.9991 15.0597L7.46875 11.5294L8.52941 10.4688L10.9991 12.9384L15.4688 8.46875L16.5294 9.52941Z", fill: "currentColor", className: "checkmark" }));
+export {
+  l as default
+};

package/dist/assets/checkboxUnchecked.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.25 6C3.25 4.48122 4.48122 3.25 6 3.25H18C19.5188 3.25 20.75 4.48122 20.75 6V18C20.75 19.5188 19.5188 20.75 18 20.75H6C4.48122 20.75 3.25 19.5188 3.25 18V6ZM6 4.75C5.30964 4.75 4.75 5.30964 4.75 6V18C4.75 18.6904 5.30964 19.25 6 19.25H18C18.6904 19.25 19.25 18.6904 19.25 18V6C19.25 5.30964 18.6904 4.75 18 4.75H6Z", fill: "currentColor" }));
+export {
+  o as default
+};

package/dist/assets/error.svg.js

@@ -0,0 +1,5 @@
+import * as t from "react";
+const e = (q) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#5f6368", ...q }, /* @__PURE__ */ t.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
+export {
+  e as default
+};

package/dist/assets/errorCircle.svg.js

@@ -0,0 +1,5 @@
+import * as C from "react";
+const t = (e) => /* @__PURE__ */ C.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M12.0035 21.2973C10.7176 21.2973 9.50872 21.0529 8.37682 20.5641C7.24492 20.0754 6.26032 19.4121 5.42302 18.5743C4.58572 17.7364 3.92309 16.7526 3.43511 15.6229C2.94713 14.4931 2.70312 13.286 2.70312 12.0015C2.70312 10.7157 2.9475 9.50677 3.43625 8.37487C3.92498 7.24297 4.58828 6.25837 5.42613 5.42107C6.26396 4.58377 7.24775 3.92113 8.3775 3.43315C9.50725 2.94516 10.7144 2.70117 11.9989 2.70117C13.2847 2.70117 14.4936 2.94555 15.6255 3.4343C16.7574 3.92303 17.742 4.58632 18.5793 5.42417C19.4166 6.262 20.0793 7.2458 20.5673 8.37555C21.0552 9.5053 21.2992 10.7124 21.2992 11.9969C21.2992 13.2828 21.0548 14.4917 20.5661 15.6236C20.0774 16.7555 19.4141 17.7401 18.5762 18.5774C17.7384 19.4147 16.7546 20.0773 15.6249 20.5653C14.4951 21.0533 13.288 21.2973 12.0035 21.2973Z", fill: "#D61930" }), /* @__PURE__ */ C.createElement("path", { d: "M11.999 16.6303C12.2194 16.6303 12.4028 16.5579 12.5493 16.4132C12.6957 16.2685 12.769 16.086 12.769 15.8656C12.769 15.6453 12.6966 15.4619 12.5519 15.3154C12.4072 15.1689 12.2247 15.0957 12.0043 15.0957C11.784 15.0957 11.6006 15.1681 11.4541 15.3128C11.3076 15.4575 11.2344 15.64 11.2344 15.8604C11.2344 16.0807 11.3067 16.2641 11.4514 16.4106C11.5962 16.5571 11.7787 16.6303 11.999 16.6303ZM11.3123 13.0774H12.7113V7.1582H11.3123V13.0774Z", fill: "white" }));
+export {
+  t as default
+};

package/dist/assets/errorFill.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const q = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#5f6368", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" }));
+export {
+  q as default
+};

package/dist/assets/icons/outline/close.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1515 12.0001L5.21179 6.06044L6.06032 5.21191L12 11.1516L17.9397 5.21191L18.7882 6.06044L12.8485 12.0001L18.7882 17.9398L17.9397 18.7884L12 12.8487L6.06032 18.7884L5.21179 17.9398L11.1515 12.0001Z", fill: "black" }));
+export {
+  t as default
+};

package/dist/assets/radioChecked.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 4.75C7.99594 4.75 4.75 7.99594 4.75 12C4.75 16.0041 7.99594 19.25 12 19.25C16.0041 19.25 19.25 16.0041 19.25 12C19.25 7.99594 16.0041 4.75 12 4.75ZM3.25 12C3.25 7.16751 7.16751 3.25 12 3.25C16.8325 3.25 20.75 7.16751 20.75 12C20.75 16.8325 16.8325 20.75 12 20.75C7.16751 20.75 3.25 16.8325 3.25 12Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { d: "M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z", fill: "currentColor" }));
+export {
+  C as default
+};

package/dist/assets/radioUnchecked.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 4.75C7.99594 4.75 4.75 7.99594 4.75 12C4.75 16.0041 7.99594 19.25 12 19.25C16.0041 19.25 19.25 16.0041 19.25 12C19.25 7.99594 16.0041 4.75 12 4.75ZM3.25 12C3.25 7.16751 7.16751 3.25 12 3.25C16.8325 3.25 20.75 7.16751 20.75 12C20.75 16.8325 16.8325 20.75 12 20.75C7.16751 20.75 3.25 16.8325 3.25 12Z", fill: "currentColor" }));
+export {
+  o as default
+};

package/dist/assets/texture.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { width: 25, height: 25, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M5.41384 20.7778C5.18242 20.7041 4.97954 20.5801 4.80519 20.4057C4.63084 20.2314 4.50681 20.0269 4.43309 19.7923L20.0032 4.2019C20.25 4.27755 20.4575 4.4016 20.6258 4.57403C20.7941 4.74645 20.9202 4.94932 21.0042 5.18265L5.41384 20.7778ZM4.40039 14.4922V12.5134L12.7167 4.2019H14.6907L4.40039 14.4922ZM4.40039 7.1807V5.90863C4.40039 5.43363 4.5661 5.03043 4.89752 4.69903C5.22892 4.36761 5.63212 4.2019 6.10712 4.2019H7.38399L4.40039 7.1807ZM18.0177 20.798L20.9965 17.8144V19.0913C20.9965 19.5663 20.8308 19.9695 20.4994 20.3009C20.168 20.6323 19.7648 20.798 19.2898 20.798H18.0177ZM10.7062 20.798L20.9965 10.5077V12.4817L12.685 20.798H10.7062Z", fill: "currentColor" }));
+export {
+  r as default
+};

package/dist/components/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionItemProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../styled-system/types';
-declare const AccordionStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"description" | "title" | "item" | "itemIndicator" | "icon", {
+declare const AccordionStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
     isLeftIcon: {
         true: {
             item: {

package/dist/components/Accordion.js

@@ -0,0 +1,92 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import "../ui/styled-system/helpers.js";
+import { sva as c } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { AccordionItem as l } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item.js";
+import { AccordionItemTrigger as y } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-trigger.js";
+import { AccordionItemIndicator as g } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-indicator.js";
+import { AccordionItemContent as f } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-content.js";
+const i = c({
+  slots: ["item", "title", "itemIndicator", "icon", "description"],
+  base: {
+    item: {
+      display: "flex",
+      width: "100%",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      paddingX: "sd.system.dimension.spacing.medium",
+      paddingY: "sd.system.dimension.spacing.small",
+      _hover: {
+        bg: "color-mix(in srgb, {colors.sd.system.color.component.surface}, {colors.sd.system.color.interaction.hoveredVariant})"
+      },
+      cursor: "pointer"
+    },
+    title: {
+      flex: 1,
+      textAlign: "left",
+      color: "sd.system.color.component.onSurface",
+      textStyle: "sd.system.typography.body.medium_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      }
+    },
+    itemIndicator: {
+      flex: "0 0 24px",
+      transition: "transform 0.2s",
+      _open: {
+        transform: "rotate(180deg)"
+      }
+    },
+    icon: {
+      color: "sd.system.color.component.onSurface"
+    },
+    description: {
+      paddingX: "sd.system.dimension.spacing.medium",
+      paddingTop: "sd.system.dimension.spacing.small",
+      paddingBottom: "sd.system.dimension.spacing.medium",
+      textStyle: "sd.system.typography.body.medium_compact",
+      _expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      }
+    }
+  },
+  variants: {
+    isLeftIcon: {
+      true: {
+        item: {
+          flexDirection: "row-reverse"
+        },
+        itemIndicator: {
+          transform: "rotate(-90deg)",
+          _open: {
+            transform: "rotate(0deg)"
+          }
+        }
+      }
+    }
+  }
+}), w = ({
+  title: t,
+  value: r,
+  description: n,
+  ...m
+}) => {
+  const [d, a] = i.splitVariantProps(m), e = i(d);
+  return /* @__PURE__ */ s(l, { value: t || r, ...a, children: [
+    /* @__PURE__ */ s(y, { className: e.item, children: [
+      /* @__PURE__ */ o("span", { className: e.title, children: t }),
+      /* @__PURE__ */ o(g, { className: e.itemIndicator, children: /* @__PURE__ */ o(
+        p,
+        {
+          name: "chevron-down",
+          className: e.icon,
+          width: 24
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ o(f, { className: e.description, children: n })
+  ] }, t);
+};
+export {
+  w as Accordion
+};

package/dist/components/AccordionGroup.d.ts

@@ -1,2 +1,2 @@
 import { Accordion } from '@ark-ui/react';
-export declare const AccordionGroup: import('../../styled-system/jsx').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;
+export declare const AccordionGroup: import('../../styled-system/types').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;

package/dist/components/AccordionGroup.js

@@ -0,0 +1,15 @@
+import { styled as o } from "../ui/styled-system/jsx/factory.js";
+import "../ui/styled-system/jsx/is-valid-prop.js";
+import "react";
+import "../ui/styled-system/helpers.js";
+import "../ui/styled-system/css/css.js";
+import { AccordionRoot as r } from "../node_modules/@ark-ui/react/dist/components/accordion/accordion-root.js";
+const l = o(r, {
+  base: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+export {
+  l as AccordionGroup
+};

package/dist/components/Avatar.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as f } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as g } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as C } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+import { AvatarRoot as u } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-root.js";
+import { AvatarImage as b } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-image.js";
+import { AvatarFallback as y } from "../node_modules/@ark-ui/react/dist/components/avatar/avatar-fallback.js";
+const s = g({
+  slots: ["root", "fallback", "image"],
+  base: {
+    root: {
+      borderRadius: "50%"
+    },
+    fallback: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      color: "sd.system.color.component.onSurface",
+      backgroundColor: "sd.reference.color.scale.blue.200",
+      textStyle: "sd.system.typography.label.extraLarge_compact"
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%"
+    }
+  },
+  variants: {
+    size: {
+      small: {
+        root: {
+          width: 24,
+          height: 24
+        },
+        fallback: {
+          fontSize: 11
+        }
+      },
+      medium: {
+        root: {
+          width: 40,
+          height: 40
+        },
+        fallback: {
+          fontSize: 19
+        }
+      },
+      large: {
+        root: {
+          width: 80,
+          height: 80
+        },
+        fallback: {
+          fontSize: 37
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), _ = ({
+  src: i,
+  alt: c,
+  text: r,
+  placeholder: d = "filled",
+  className: n,
+  ...m
+}) => {
+  const [o, h] = s.splitVariantProps(m), { size: l } = o, t = s({ size: l, ...o }), p = l === "small" ? 24 : l === "large" ? 80 : 40;
+  return /* @__PURE__ */ e(u, { className: f(t.root, n), ...h, children: i ? /* @__PURE__ */ e(b, { className: t.image, src: i, alt: c }) : r ? /* @__PURE__ */ e(y, { className: t.fallback, children: r.slice(0, 2) }) : d === "outlined" ? /* @__PURE__ */ e(C, { name: "user-circle", size: p }) : /* @__PURE__ */ e(w, {}) });
+}, w = () => /* @__PURE__ */ a("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ a("g", { "clip-path": "url(#clip0_3661_24550)", children: [
+    /* @__PURE__ */ e("rect", { width: "80", height: "80", rx: "40", fill: "#EFF2FC" }),
+    /* @__PURE__ */ e(
+      "g",
+      {
+        style: {
+          mixBlendMode: "multiply"
+        },
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M42.783 26.208L13.5059 26.208L34.4075 63.9769L63.6846 63.9769L42.783 26.208Z",
+            fill: "#0A69CF"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "g",
+      {
+        style: {
+          mixBlendMode: "multiply"
+        },
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M14.5894 51.3908C14.5894 52.5565 16.3965 53.3535 16.8169 54.369C17.2373 55.3845 16.5548 57.2598 17.3465 58.0515C18.1381 58.8431 19.978 58.147 21.0289 58.5811C22.0799 59.0151 22.8415 60.8085 24.0071 60.8085C25.1727 60.8085 25.9698 59.0014 26.9853 58.5811C28.0008 58.1607 29.8761 58.8431 30.6677 58.0515C31.4594 57.2598 30.7633 55.42 31.1973 54.369C31.6313 53.3181 33.4248 52.5565 33.4248 51.3908C33.4248 50.2252 31.6177 49.4281 31.1973 48.4127C30.7769 47.3972 31.4594 45.5218 30.6677 44.7302C29.8761 43.9386 28.0362 44.6347 26.9853 44.2006C25.9343 43.7666 25.1727 41.9731 24.0071 41.9731C22.8415 41.9731 22.0444 43.7803 21.0289 44.2006C20.0135 44.621 18.1381 43.9386 17.3465 44.7302C16.5548 45.5218 17.2509 47.3617 16.8169 48.4127C16.3829 49.4636 14.5894 50.2252 14.5894 51.3908Z",
+            fill: "#8FAEFE"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      "g",
+      {
+        style: {
+          mixBlendMode: "multiply"
+        },
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M48.5175 28.506C51.5824 31.5709 56.5515 31.5709 59.6164 28.506L64.373 33.2627C58.6812 38.9546 49.4528 38.9546 43.7609 33.2627C38.069 27.5708 38.069 18.3424 43.7609 12.6505L48.5175 17.4072C45.4527 20.472 45.4527 25.4412 48.5175 28.506Z",
+            fill: "#F84258"
+          }
+        )
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_3661_24550", children: /* @__PURE__ */ e("rect", { width: "80", height: "80", fill: "white" }) }) })
+] });
+export {
+  _ as Avatar,
+  s as AvatarStyle
+};

package/dist/components/Badge.js

@@ -0,0 +1,122 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as i } from "../ui/styled-system/css/cx.js";
+import { cva as l } from "../ui/styled-system/css/cva.js";
+import "../ui/styled-system/helpers.js";
+import { SerendieSymbol as p } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+const o = l({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "2px",
+    borderRadius: "sd.system.dimension.radius.extraLarge",
+    bg: "sd.system.color.interaction.hoveredVariant"
+  },
+  variants: {
+    size: {
+      small: {
+        height: "16px",
+        pr: "sd.system.dimension.spacing.twoExtraSmall",
+        pl: "sd.system.dimension.spacing.twoExtraSmall",
+        textStyle: "sd.system.typography.label.small_compact",
+        expanded: {
+          textStyle: "sd.system.typography.label.small_expanded"
+        }
+      },
+      medium: {
+        height: "24px",
+        pr: "sd.system.dimension.spacing.extraSmall",
+        pl: "sd.system.dimension.spacing.extraSmall",
+        textStyle: "sd.system.typography.label.medium_compact",
+        expanded: {
+          textStyle: "sd.system.typography.label.medium_expanded"
+        }
+      },
+      large: {
+        height: "32px",
+        pr: "sd.system.dimension.spacing.medium",
+        pl: "sd.system.dimension.spacing.medium",
+        textStyle: "sd.system.typography.label.large_compact",
+        expanded: {
+          textStyle: "sd.system.typography.label.large_expanded"
+        }
+      }
+    },
+    styleColor: {
+      gray: {
+        bg: "sd.reference.color.scale.gray.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      blue: {
+        bg: "sd.reference.color.scale.blue.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      green: {
+        bg: "sd.reference.color.scale.green.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      yellow: {
+        bg: "sd.reference.color.scale.yellow.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      chestnut: {
+        bg: "sd.reference.color.scale.chestnut.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      red: {
+        bg: "sd.reference.color.scale.red.600",
+        color: "sd.system.color.component.inverseOnSurface"
+      },
+      "gray-subtle": {
+        bg: "sd.reference.color.scale.gray.100",
+        color: "sd.reference.color.scale.gray.800"
+      },
+      "blue-subtle": {
+        bg: "sd.reference.color.scale.blue.100",
+        color: "sd.reference.color.scale.blue.800"
+      },
+      "green-subtle": {
+        bg: "sd.reference.color.scale.green.100",
+        color: "sd.reference.color.scale.green.800"
+      },
+      "yellow-subtle": {
+        bg: "sd.reference.color.scale.yellow.100",
+        color: "sd.reference.color.scale.yellow.800"
+      },
+      "chestnut-subtle": {
+        bg: "sd.reference.color.scale.chestnut.100",
+        color: "sd.reference.color.scale.chestnut.800"
+      },
+      "red-subtle": {
+        bg: "sd.reference.color.scale.red.100",
+        color: "sd.reference.color.scale.red.800"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    styleColor: "gray"
+  }
+}), S = ({
+  children: e,
+  closeButton: s,
+  ...c
+}) => {
+  const [t, { className: n, ...a }] = o.splitVariantProps(c), d = o(t);
+  return /* @__PURE__ */ m("span", { className: i(d, n), ...a, children: [
+    e,
+    s
+  ] });
+}, y = l({
+  base: {
+    cursor: "pointer"
+  }
+}), v = (e) => {
+  const s = y();
+  return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(p, { name: "close", color: "currentColor", size: 12 }) });
+};
+export {
+  S as Badge,
+  v as BadgeCloseButton,
+  o as BadgeStyle
+};

package/dist/components/Banner.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../styled-system/css';
-declare const BannerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "description" | "title" | "icon", {
+declare const BannerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
     type: {
         information: {
             container: {

package/dist/components/Banner.js

@@ -0,0 +1,86 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import "../ui/styled-system/css/css.js";
+import { cx as p } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+import { sva as y } from "../ui/styled-system/css/sva.js";
+import { SerendieSymbol as b } from "../node_modules/@serendie/symbols/dist/symbols2.js";
+const t = y({
+  slots: ["container", "icon", "title", "description"],
+  base: {
+    container: {
+      display: "grid",
+      gridTemplateColumns: "24px 1fr",
+      columnGap: "sd.system.dimension.spacing.twoExtraSmall",
+      rowGap: "sd.system.dimension.spacing.extraSmall",
+      p: "sd.system.dimension.spacing.small",
+      borderRadius: "sd.system.dimension.radius.medium"
+    },
+    title: {
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      }
+    },
+    description: {
+      gridArea: "2 / 2 / 3 / 3",
+      textStyle: "sd.system.typography.body.medium_compact",
+      expanded: {
+        textStyle: "sd.system.typography.body.medium_expanded"
+      }
+    }
+  },
+  variants: {
+    type: {
+      information: {
+        container: {
+          bg: "sd.system.color.component.surface",
+          color: "sd.system.color.component.onSurface",
+          borderWidth: "sd.system.dimension.border.medium",
+          borderStyle: "solid",
+          borderColor: "sd.system.color.component.outline"
+        }
+      },
+      error: {
+        container: {
+          bg: "sd.system.color.impression.negativeContainer",
+          color: "sd.system.color.impression.onNegativeContainer",
+          borderWidth: "sd.system.dimension.border.medium",
+          borderStyle: "solid",
+          borderColor: "sd.system.color.impression.negativeContainer"
+        },
+        icon: {
+          color: "sd.system.color.impression.negative"
+        }
+      },
+      warning: {
+        container: {
+          bg: "sd.system.color.impression.noticeContainer",
+          color: "sd.system.color.impression.onNoticeContainer",
+          borderWidth: "sd.system.dimension.border.medium",
+          borderStyle: "solid",
+          borderColor: "sd.system.color.impression.noticeContainer"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "information"
+  }
+}), v = (n) => {
+  const [s, { title: d, icon: r, description: m, className: a, ...l }] = t.splitVariantProps(n), e = t(s), i = s.type || "alert-circle";
+  return /* @__PURE__ */ c("div", { className: p(e.container, a), ...l, children: [
+    /* @__PURE__ */ o("div", { className: e.icon, children: r || /* @__PURE__ */ o(
+      b,
+      {
+        name: "alert-circle",
+        size: 24,
+        variant: i === "error" || i === "warning" ? "filled" : "outlined"
+      }
+    ) }),
+    /* @__PURE__ */ o("h2", { className: e.title, children: d }),
+    /* @__PURE__ */ o("p", { className: e.description, children: m })
+  ] });
+};
+export {
+  v as Banner
+};

package/dist/components/BottomNavigation.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { css as r } from "../ui/styled-system/css/css.js";
+import { cx as i } from "../ui/styled-system/css/cx.js";
+import "../ui/styled-system/helpers.js";
+const d = ({
+  children: o,
+  className: t,
+  ...s
+}) => /* @__PURE__ */ e(
+  "nav",
+  {
+    className: i(
+      r({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-around",
+        height: 64,
+        paddingX: "sd.system.dimension.spacing.medium",
+        borderTop: "1px solid",
+        borderTopColor: "sd.system.color.component.outline"
+      }),
+      t
+    ),
+    ...s,
+    children: o
+  }
+);
+export {
+  d as BottomNavigation
+};

package/dist/components/BottomNavigationItem.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../styled-system/css';
-export declare const BottomNavigationItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "icon" | "root" | "iconGroup" | "badge", {
+export declare const BottomNavigationItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {