@jigowatts/jigowatts-ui 1.2.2 → 2.1.0

package/dist/components/TwoFaInputController/index.test.es.js

@@ -0,0 +1,123 @@
+import { jsx as c } from "react/jsx-runtime";
+import { a as s, r as l, s as u, f as d } from "../../react.esm-BBESb8eI.js";
+import { useForm as a } from "react-hook-form";
+import { TwoFaInputController as i } from "./index.es.js";
+describe("TwoFaInputController", () => {
+  it("renders six input fields with the correct attributes", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          }
+        }
+      )
+    );
+    const t = u.getAllByRole("textbox");
+    expect(t).toHaveLength(6), t.forEach((e) => {
+      expect(e).toHaveAttribute("type", "text"), expect(e).toHaveAttribute("inputmode", "numeric"), expect(e).toHaveAttribute("maxlength", "1"), expect(e).toHaveAttribute("autocomplete", "off"), expect(e).toHaveStyle("text-align: center"), expect(e).toHaveStyle("width: 2ch"), expect(e).toHaveStyle("height: 3ch"), expect(e).toHaveStyle("font-size: 1.5rem");
+    });
+  }), it("focuses the next input field when a digit is entered", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          }
+        }
+      )
+    );
+    const t = u.getAllByRole("textbox");
+    d.change(t[0], { target: { value: "1" } }), expect(t[1]).toHaveFocus();
+  }), it("moves focus to the previous input field on backspace", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          }
+        }
+      )
+    );
+    const t = u.getAllByRole("textbox");
+    d.keyDown(t[1], { key: "Backspace" }), expect(t[0]).toHaveFocus();
+  }), it("moves focus to the previous input field on ArrowLeft", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          }
+        }
+      )
+    );
+    const t = u.getAllByRole("textbox");
+    d.keyDown(t[1], { key: "ArrowLeft" }), expect(t[0]).toHaveFocus();
+  }), it("moves focus to the next input field on ArrowRight", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          }
+        }
+      )
+    );
+    const t = u.getAllByRole("textbox");
+    d.keyDown(t[0], { key: "ArrowRight" }), expect(t[1]).toHaveFocus();
+  }), it("displays validate error message when there are errors", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill("");
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: () => {
+          },
+          errors: {
+            code: [{ type: "required", message: "必須" }]
+          },
+          errorMessage: "必須"
+        }
+      )
+    ), expect(u.getByText("必須")).toBeInTheDocument();
+  }), it("calls onSubmit with the correct code when all inputs are filled", () => {
+    const o = s(() => a().control).result.current, r = "code", n = Array(6).fill(""), t = jest.fn();
+    l(
+      /* @__PURE__ */ c(
+        i,
+        {
+          control: o,
+          name: r,
+          defaultValue: n,
+          onSubmit: t
+        }
+      )
+    ), u.getAllByRole("textbox").forEach((h, f) => {
+      d.change(h, { target: { value: String(f + 1) } });
+    }), expect(t).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=index.test.es.js.map

package/dist/components/TwoFaInputController/index.test.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/TwoFaInputController/index.test.tsx"],"sourcesContent":["import { fireEvent, render, renderHook, screen } from \"@testing-library/react\";\nimport { FieldErrors, useForm } from \"react-hook-form\";\n\nimport TwoFaInputController from \".\";\n\ndescribe(\"TwoFaInputController\", () => {\n  it(\"renders six input fields with the correct attributes\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    expect(inputs).toHaveLength(6);\n    inputs.forEach((input) => {\n      expect(input).toHaveAttribute(\"type\", \"text\");\n      expect(input).toHaveAttribute(\"inputmode\", \"numeric\");\n      expect(input).toHaveAttribute(\"maxlength\", \"1\");\n      expect(input).toHaveAttribute(\"autocomplete\", \"off\");\n      expect(input).toHaveStyle(\"text-align: center\");\n      expect(input).toHaveStyle(\"width: 2ch\");\n      expect(input).toHaveStyle(\"height: 3ch\");\n      expect(input).toHaveStyle(\"font-size: 1.5rem\");\n    });\n  });\n\n  it(\"focuses the next input field when a digit is entered\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    fireEvent.change(inputs[0], { target: { value: \"1\" } });\n    expect(inputs[1]).toHaveFocus();\n  });\n\n  it(\"moves focus to the previous input field on backspace\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    fireEvent.keyDown(inputs[1], { key: \"Backspace\" });\n    expect(inputs[0]).toHaveFocus();\n  });\n\n  it(\"moves focus to the previous input field on ArrowLeft\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    fireEvent.keyDown(inputs[1], { key: \"ArrowLeft\" });\n    expect(inputs[0]).toHaveFocus();\n  });\n\n  it(\"moves focus to the next input field on ArrowRight\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    fireEvent.keyDown(inputs[0], { key: \"ArrowRight\" });\n    expect(inputs[1]).toHaveFocus();\n  });\n\n  it(\"displays validate error message when there are errors\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n    const errors: FieldErrors<{ code: string[] }> = {\n      code: [{ type: \"required\", message: \"必須\" }],\n    };\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={() => {}}\n        errors={errors}\n        errorMessage=\"必須\"\n      />,\n    );\n\n    expect(screen.getByText(\"必須\")).toBeInTheDocument();\n  });\n\n  it(\"calls onSubmit with the correct code when all inputs are filled\", () => {\n    const controlResult = renderHook(() => {\n      const methods = useForm();\n      return methods.control;\n    });\n    const control = controlResult.result.current;\n    const name = \"code\";\n    const defaultValue = Array(6).fill(\"\");\n    const handleSubmit = jest.fn();\n\n    render(\n      <TwoFaInputController\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        onSubmit={handleSubmit}\n      />,\n    );\n\n    const inputs = screen.getAllByRole(\"textbox\");\n    inputs.forEach((input, index) => {\n      fireEvent.change(input, { target: { value: String(index + 1) } });\n    });\n\n    expect(handleSubmit).toHaveBeenCalled();\n  });\n});\n"],"names":["control","renderHook","useForm","name","defaultValue","render","jsx","TwoFaInputController","inputs","screen","input","fireEvent","handleSubmit","index"],"mappings":"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"}

package/dist/components/TwoFaLabel/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),t=require("@mui/material"),o={NOT_SELECTED:"not_selected",ENABLED:"enabled",DISABLED:"disabled"},s=r=>{const{twoFaStatus:i,labelEnabled:l="有効",labelDisabled:n="無効"}=r,d=i===o.ENABLED;return e.jsx(t.Box,{sx:{display:"flex",flexDirection:"row",gap:"6px",alignItems:"center"},children:d?e.jsxs(e.Fragment,{children:[e.jsx(a.VerifiedUser,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"#6672e8"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"#6672e8"},children:l})]}):e.jsxs(e.Fragment,{children:[e.jsx(a.Shield,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"grey"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"grey"},children:n})]})})};exports.TwoFaLabel=s;exports.TwoFaStatus=o;exports.default=s;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/TwoFaLabel/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/TwoFaLabel/index.tsx"],"sourcesContent":["import { Shield, VerifiedUser } from \"@mui/icons-material\";\nimport { Box, Typography } from \"@mui/material\";\n\nexport const TwoFaStatus = {\n  NOT_SELECTED: \"not_selected\",\n  ENABLED: \"enabled\",\n  DISABLED: \"disabled\",\n} as const;\n\nexport type CommonTwoFaStatus = (typeof TwoFaStatus)[keyof typeof TwoFaStatus];\n\nexport type TwoFaLabelProps = {\n  /**\n   * 2要素認証のステータスを設定します。\n   * - `enabled`: 有効\n   * - `disabled`: 無効\n   * - `not_selected`: 未設定（無効として表示）\n   */\n  twoFaStatus?: CommonTwoFaStatus;\n  /**\n   * \"有効\" の場合に表示するテキスト (デフォルト: \"有効\")\n   */\n  labelEnabled?: string;\n  /**\n   * \"無効\" の場合に表示するテキスト (デフォルト: \"無効\")\n   */\n  labelDisabled?: string;\n};\n\n/**\n * 2要素認証済みか否かを表示するラベルコンポーネントです。\n */\nexport const TwoFaLabel = (props: TwoFaLabelProps) => {\n  const { twoFaStatus, labelEnabled = \"有効\", labelDisabled = \"無効\" } = props;\n\n  const isEnabled = twoFaStatus === TwoFaStatus.ENABLED;\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"6px\",\n        alignItems: \"center\",\n      }}\n    >\n      {isEnabled ? (\n        <>\n          <VerifiedUser\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"#6672e8\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"#6672e8\" }}\n          >\n            {labelEnabled}\n          </Typography>\n        </>\n      ) : (\n        <>\n          <Shield\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"grey\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"grey\" }}\n          >\n            {labelDisabled}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n\nexport default TwoFaLabel;\n"],"names":["TwoFaStatus","TwoFaLabel","props","twoFaStatus","labelEnabled","labelDisabled","isEnabled","jsx","Box","jsxs","Fragment","VerifiedUser","Typography","Shield"],"mappings":"6MAGaA,EAAc,CACzB,aAAc,eACd,QAAS,UACT,SAAU,UACZ,EAyBaC,EAAcC,GAA2B,CACpD,KAAM,CAAE,YAAAC,EAAa,aAAAC,EAAe,KAAM,cAAAC,EAAgB,MAASH,EAE7DI,EAAYH,IAAgBH,EAAY,QAE9C,OACEO,EAAAA,IAACC,EAAAA,IAAA,CACC,GAAI,CACF,QAAS,OACT,cAAe,MACf,IAAK,MACL,WAAY,QAAA,EAGb,WACCC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACI,EAAAA,aAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,OAAQ,MAAO,SAAA,CAAU,CAAA,EAE3CJ,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,SAAU,MAAO,SAAA,EAEhC,SAAAR,CAAA,CAAA,CACH,CAAA,CACF,EAEAK,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACM,EAAAA,OAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,OAAQ,MAAO,MAAA,CAAO,CAAA,EAExCN,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,SAAU,MAAO,MAAA,EAEhC,SAAAP,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CAIR"}

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

@@ -0,0 +1,28 @@
+export declare const TwoFaStatus: {
+    readonly NOT_SELECTED: "not_selected";
+    readonly ENABLED: "enabled";
+    readonly DISABLED: "disabled";
+};
+export type CommonTwoFaStatus = (typeof TwoFaStatus)[keyof typeof TwoFaStatus];
+export type TwoFaLabelProps = {
+    /**
+     * 2要素認証のステータスを設定します。
+     * - `enabled`: 有効
+     * - `disabled`: 無効
+     * - `not_selected`: 未設定（無効として表示）
+     */
+    twoFaStatus?: CommonTwoFaStatus;
+    /**
+     * "有効" の場合に表示するテキスト (デフォルト: "有効")
+     */
+    labelEnabled?: string;
+    /**
+     * "無効" の場合に表示するテキスト (デフォルト: "無効")
+     */
+    labelDisabled?: string;
+};
+/**
+ * 2要素認証済みか否かを表示するラベルコンポーネントです。
+ */
+export declare const TwoFaLabel: (props: TwoFaLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default TwoFaLabel;

package/dist/components/TwoFaLabel/index.es.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as t, Fragment as o } from "react/jsx-runtime";
+import { VerifiedUser as n, Shield as c } from "@mui/icons-material";
+import { Box as f, Typography as a } from "@mui/material";
+const x = {
+  NOT_SELECTED: "not_selected",
+  ENABLED: "enabled",
+  DISABLED: "disabled"
+}, S = (r) => {
+  const { twoFaStatus: i, labelEnabled: l = "有効", labelDisabled: s = "無効" } = r, d = i === x.ENABLED;
+  return /* @__PURE__ */ e(
+    f,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        gap: "6px",
+        alignItems: "center"
+      },
+      children: d ? /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(
+          n,
+          {
+            "data-testid": "two-fa-icon",
+            sx: { fontSize: "1rem", color: "#6672e8" }
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            "data-testid": "two-fa-text",
+            sx: { fontSize: "0.8rem", color: "#6672e8" },
+            children: l
+          }
+        )
+      ] }) : /* @__PURE__ */ t(o, { children: [
+        /* @__PURE__ */ e(
+          c,
+          {
+            "data-testid": "two-fa-icon",
+            sx: { fontSize: "1rem", color: "grey" }
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            "data-testid": "two-fa-text",
+            sx: { fontSize: "0.8rem", color: "grey" },
+            children: s
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  S as TwoFaLabel,
+  x as TwoFaStatus,
+  S as default
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/TwoFaLabel/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../src/components/TwoFaLabel/index.tsx"],"sourcesContent":["import { Shield, VerifiedUser } from \"@mui/icons-material\";\nimport { Box, Typography } from \"@mui/material\";\n\nexport const TwoFaStatus = {\n  NOT_SELECTED: \"not_selected\",\n  ENABLED: \"enabled\",\n  DISABLED: \"disabled\",\n} as const;\n\nexport type CommonTwoFaStatus = (typeof TwoFaStatus)[keyof typeof TwoFaStatus];\n\nexport type TwoFaLabelProps = {\n  /**\n   * 2要素認証のステータスを設定します。\n   * - `enabled`: 有効\n   * - `disabled`: 無効\n   * - `not_selected`: 未設定（無効として表示）\n   */\n  twoFaStatus?: CommonTwoFaStatus;\n  /**\n   * \"有効\" の場合に表示するテキスト (デフォルト: \"有効\")\n   */\n  labelEnabled?: string;\n  /**\n   * \"無効\" の場合に表示するテキスト (デフォルト: \"無効\")\n   */\n  labelDisabled?: string;\n};\n\n/**\n * 2要素認証済みか否かを表示するラベルコンポーネントです。\n */\nexport const TwoFaLabel = (props: TwoFaLabelProps) => {\n  const { twoFaStatus, labelEnabled = \"有効\", labelDisabled = \"無効\" } = props;\n\n  const isEnabled = twoFaStatus === TwoFaStatus.ENABLED;\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"6px\",\n        alignItems: \"center\",\n      }}\n    >\n      {isEnabled ? (\n        <>\n          <VerifiedUser\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"#6672e8\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"#6672e8\" }}\n          >\n            {labelEnabled}\n          </Typography>\n        </>\n      ) : (\n        <>\n          <Shield\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"grey\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"grey\" }}\n          >\n            {labelDisabled}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n\nexport default TwoFaLabel;\n"],"names":["TwoFaStatus","TwoFaLabel","props","twoFaStatus","labelEnabled","labelDisabled","isEnabled","jsx","Box","jsxs","Fragment","VerifiedUser","Typography","Shield"],"mappings":";;;AAGO,MAAMA,IAAc;AAAA,EACzB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACZ,GAyBaC,IAAa,CAACC,MAA2B;AACpD,QAAM,EAAE,aAAAC,GAAa,cAAAC,IAAe,MAAM,eAAAC,IAAgB,SAASH,GAE7DI,IAAYH,MAAgBH,EAAY;AAE9C,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,MAAA;AAAA,MAGb,cACC,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI,EAAE,UAAU,QAAQ,OAAO,UAAA;AAAA,UAAU;AAAA,QAAA;AAAA,QAE3C,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI,EAAE,UAAU,UAAU,OAAO,UAAA;AAAA,YAEhC,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF,IAEA,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI,EAAE,UAAU,QAAQ,OAAO,OAAA;AAAA,UAAO;AAAA,QAAA;AAAA,QAExC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI,EAAE,UAAU,UAAU,OAAO,OAAA;AAAA,YAEhC,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/TwoFaLabel/index.test.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const a=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),t=require("./index.cjs.js");describe("TwoFaLabel",()=>{it("renders '有効' when twoFaStatus is enabled",()=>{e.render(a.jsx(t.TwoFaLabel,{twoFaStatus:t.TwoFaStatus.ENABLED})),expect(e.screen.getByTestId("two-fa-text")).toHaveTextContent("有効"),expect(e.screen.getByTestId("two-fa-icon")).toBeInTheDocument()}),it("renders '無効' when twoFaStatus is disabled",()=>{e.render(a.jsx(t.TwoFaLabel,{twoFaStatus:t.TwoFaStatus.DISABLED})),expect(e.screen.getByTestId("two-fa-text")).toHaveTextContent("無効"),expect(e.screen.getByTestId("two-fa-icon")).toBeInTheDocument()}),it("renders '無効' when twoFaStatus is not_selected",()=>{e.render(a.jsx(t.TwoFaLabel,{twoFaStatus:t.TwoFaStatus.NOT_SELECTED})),expect(e.screen.getByTestId("two-fa-text")).toHaveTextContent("無効"),expect(e.screen.getByTestId("two-fa-icon")).toBeInTheDocument()}),it("renders '無効' when twoFaStatus is undefined",()=>{e.render(a.jsx(t.TwoFaLabel,{})),expect(e.screen.getByTestId("two-fa-text")).toHaveTextContent("無効"),expect(e.screen.getByTestId("two-fa-icon")).toBeInTheDocument()}),it("renders custom labels for enabled and disabled states",()=>{e.render(a.jsx(t.TwoFaLabel,{twoFaStatus:t.TwoFaStatus.ENABLED,labelEnabled:"Enabled"})),expect(e.screen.getByTestId("two-fa-text")).toHaveTextContent("Enabled")})});
+//# sourceMappingURL=index.test.cjs.js.map

package/dist/components/TwoFaLabel/index.test.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/TwoFaLabel/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport TwoFaLabel, { TwoFaStatus } from \".\";\n\ndescribe(\"TwoFaLabel\", () => {\n  it(\"renders '有効' when twoFaStatus is enabled\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.ENABLED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"有効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is disabled\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.DISABLED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is not_selected\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.NOT_SELECTED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is undefined\", () => {\n    render(<TwoFaLabel />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders custom labels for enabled and disabled states\", () => {\n    render(\n      <TwoFaLabel twoFaStatus={TwoFaStatus.ENABLED} labelEnabled=\"Enabled\" />,\n    );\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"Enabled\");\n  });\n});\n"],"names":["render","jsx","TwoFaLabel","TwoFaStatus","screen"],"mappings":"wHAIA,SAAS,aAAc,IAAM,CAC3B,GAAG,2CAA4C,IAAM,CACnDA,EAAAA,OAAOC,EAAAA,IAACC,aAAA,CAAW,YAAaC,EAAAA,YAAY,QAAS,CAAE,EAEvD,OAAOC,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,EAChE,OAAOA,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAA,CAC5C,CAAC,EAED,GAAG,4CAA6C,IAAM,CACpDJ,EAAAA,OAAOC,EAAAA,IAACC,aAAA,CAAW,YAAaC,EAAAA,YAAY,SAAU,CAAE,EAExD,OAAOC,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,EAChE,OAAOA,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAA,CAC5C,CAAC,EAED,GAAG,gDAAiD,IAAM,CACxDJ,EAAAA,OAAOC,EAAAA,IAACC,aAAA,CAAW,YAAaC,EAAAA,YAAY,aAAc,CAAE,EAE5D,OAAOC,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,EAChE,OAAOA,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAA,CAC5C,CAAC,EAED,GAAG,6CAA8C,IAAM,CACrDJ,EAAAA,OAAOC,EAAAA,IAACC,eAAW,CAAE,EAErB,OAAOE,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,EAChE,OAAOA,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAA,CAC5C,CAAC,EAED,GAAG,wDAAyD,IAAM,CAChEJ,EAAAA,aACGE,EAAAA,WAAA,CAAW,YAAaC,EAAAA,YAAY,QAAS,aAAa,SAAA,CAAU,CAAA,EAEvE,OAAOC,EAAAA,OAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,SAAS,CACvE,CAAC,CACH,CAAC"}

package/dist/components/TwoFaLabel/index.test.d.ts

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

package/dist/components/TwoFaLabel/index.test.es.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { r as o, s as t } from "../../react.esm-BBESb8eI.js";
+import { TwoFaLabel as a, TwoFaStatus as n } from "./index.es.js";
+describe("TwoFaLabel", () => {
+  it("renders '有効' when twoFaStatus is enabled", () => {
+    o(/* @__PURE__ */ e(a, { twoFaStatus: n.ENABLED })), expect(t.getByTestId("two-fa-text")).toHaveTextContent("有効"), expect(t.getByTestId("two-fa-icon")).toBeInTheDocument();
+  }), it("renders '無効' when twoFaStatus is disabled", () => {
+    o(/* @__PURE__ */ e(a, { twoFaStatus: n.DISABLED })), expect(t.getByTestId("two-fa-text")).toHaveTextContent("無効"), expect(t.getByTestId("two-fa-icon")).toBeInTheDocument();
+  }), it("renders '無効' when twoFaStatus is not_selected", () => {
+    o(/* @__PURE__ */ e(a, { twoFaStatus: n.NOT_SELECTED })), expect(t.getByTestId("two-fa-text")).toHaveTextContent("無効"), expect(t.getByTestId("two-fa-icon")).toBeInTheDocument();
+  }), it("renders '無効' when twoFaStatus is undefined", () => {
+    o(/* @__PURE__ */ e(a, {})), expect(t.getByTestId("two-fa-text")).toHaveTextContent("無効"), expect(t.getByTestId("two-fa-icon")).toBeInTheDocument();
+  }), it("renders custom labels for enabled and disabled states", () => {
+    o(
+      /* @__PURE__ */ e(a, { twoFaStatus: n.ENABLED, labelEnabled: "Enabled" })
+    ), expect(t.getByTestId("two-fa-text")).toHaveTextContent("Enabled");
+  });
+});
+//# sourceMappingURL=index.test.es.js.map

package/dist/components/TwoFaLabel/index.test.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/TwoFaLabel/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport TwoFaLabel, { TwoFaStatus } from \".\";\n\ndescribe(\"TwoFaLabel\", () => {\n  it(\"renders '有効' when twoFaStatus is enabled\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.ENABLED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"有効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is disabled\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.DISABLED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is not_selected\", () => {\n    render(<TwoFaLabel twoFaStatus={TwoFaStatus.NOT_SELECTED} />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders '無効' when twoFaStatus is undefined\", () => {\n    render(<TwoFaLabel />);\n\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"無効\");\n    expect(screen.getByTestId(\"two-fa-icon\")).toBeInTheDocument();\n  });\n\n  it(\"renders custom labels for enabled and disabled states\", () => {\n    render(\n      <TwoFaLabel twoFaStatus={TwoFaStatus.ENABLED} labelEnabled=\"Enabled\" />,\n    );\n    expect(screen.getByTestId(\"two-fa-text\")).toHaveTextContent(\"Enabled\");\n  });\n});\n"],"names":["render","jsx","TwoFaLabel","TwoFaStatus","screen"],"mappings":";;;AAIA,SAAS,cAAc,MAAM;AAC3B,KAAG,4CAA4C,MAAM;AACnD,IAAAA,EAAO,gBAAAC,EAACC,GAAA,EAAW,aAAaC,EAAY,SAAS,CAAE,GAEvD,OAAOC,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,GAChE,OAAOA,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAA;AAAA,EAC5C,CAAC,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ,EAAO,gBAAAC,EAACC,GAAA,EAAW,aAAaC,EAAY,UAAU,CAAE,GAExD,OAAOC,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,GAChE,OAAOA,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAA;AAAA,EAC5C,CAAC,GAED,GAAG,iDAAiD,MAAM;AACxD,IAAAJ,EAAO,gBAAAC,EAACC,GAAA,EAAW,aAAaC,EAAY,cAAc,CAAE,GAE5D,OAAOC,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,GAChE,OAAOA,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAA;AAAA,EAC5C,CAAC,GAED,GAAG,8CAA8C,MAAM;AACrD,IAAAJ,EAAO,gBAAAC,EAACC,KAAW,CAAE,GAErB,OAAOE,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,IAAI,GAChE,OAAOA,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAA;AAAA,EAC5C,CAAC,GAED,GAAG,yDAAyD,MAAM;AAChE,IAAAJ;AAAA,wBACGE,GAAA,EAAW,aAAaC,EAAY,SAAS,cAAa,UAAA,CAAU;AAAA,IAAA,GAEvE,OAAOC,EAAO,YAAY,aAAa,CAAC,EAAE,kBAAkB,SAAS;AAAA,EACvE,CAAC;AACH,CAAC;"}

package/dist/components/VStack/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/VStack/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** children同士のギャップ */\n  spacing?: number;\n  /**コンテンツの中身 */\n  children: ReactNode;\n};\n\n/**\n * 子要素を垂直方向に配置するコンポーネント\n * ギャップを指定することで子要素間の間隔を調整できます\n */\nexport const VStack = (props: Props) => {\n  const { children, spacing: gap = 24 } = props;\n  return (\n    <div className={styles.content} style={{ gap }}>\n      {children}\n    </div>\n  );\n};\n\nexport default VStack;\n"],"names":["VStack","props","children","gap","jsx","styles"],"mappings":"oLAeaA,EAAUC,GAAiB,CACtC,KAAM,CAAE,SAAAC,EAAU,QAASC,EAAM,EAAO,EAAAF,EAEtC,OAAAG,MAAC,OAAI,UAAWC,EAAO,QAAS,MAAO,CAAE,IAAAF,GACtC,SAAAD,EACH,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/VStack/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** children同士のギャップ */\n  spacing?: number;\n  /**コンテンツの中身 */\n  children: ReactNode;\n};\n\n/**\n * 子要素を垂直方向に配置するコンポーネント\n * ギャップを指定することで子要素間の間隔を調整できます\n */\nexport const VStack = (props: Props) => {\n  const { children, spacing: gap = 24 } = props;\n  return (\n    <div className={styles.content} style={{ gap }}>\n      {children}\n    </div>\n  );\n};\n\nexport default VStack;\n"],"names":["VStack","props","children","gap","jsx","styles"],"mappings":"oLAeaA,EAAUC,GAAiB,CACtC,KAAM,CAAE,SAAAC,EAAU,QAASC,EAAM,IAAOF,EACxC,OACEG,MAAC,OAAI,UAAWC,EAAO,QAAS,MAAO,CAAE,IAAAF,GACtC,SAAAD,EACH,CAEJ"}

package/dist/components/VStack/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/VStack/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** children同士のギャップ */\n  spacing?: number;\n  /**コンテンツの中身 */\n  children: ReactNode;\n};\n\n/**\n * 子要素を垂直方向に配置するコンポーネント\n * ギャップを指定することで子要素間の間隔を調整できます\n */\nexport const VStack = (props: Props) => {\n  const { children, spacing: gap = 24 } = props;\n  return (\n    <div className={styles.content} style={{ gap }}>\n      {children}\n    </div>\n  );\n};\n\nexport default VStack;\n"],"names":["VStack","props","children","gap","jsx","styles"],"mappings":";;;GAeaA,IAAS,CAACC,MAAiB;AACtC,QAAM,EAAE,UAAAC,GAAU,SAASC,IAAM,GAAO,IAAAF;AAEtC,SAAA,gBAAAG,EAAC,SAAI,WAAWC,EAAO,SAAS,OAAO,EAAE,KAAAF,KACtC,UAAAD,GACH;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/VStack/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n  /** children同士のギャップ */\n  spacing?: number;\n  /**コンテンツの中身 */\n  children: ReactNode;\n};\n\n/**\n * 子要素を垂直方向に配置するコンポーネント\n * ギャップを指定することで子要素間の間隔を調整できます\n */\nexport const VStack = (props: Props) => {\n  const { children, spacing: gap = 24 } = props;\n  return (\n    <div className={styles.content} style={{ gap }}>\n      {children}\n    </div>\n  );\n};\n\nexport default VStack;\n"],"names":["VStack","props","children","gap","jsx","styles"],"mappings":";;;GAeaA,IAAS,CAACC,MAAiB;AACtC,QAAM,EAAE,UAAAC,GAAU,SAASC,IAAM,OAAOF;AACxC,SACE,gBAAAG,EAAC,SAAI,WAAWC,EAAO,SAAS,OAAO,EAAE,KAAAF,KACtC,UAAAD,GACH;AAEJ;"}

package/dist/components/VStack/index.test.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),i=require("../../react.esm-CiMn0Rnx.cjs");require("../../index-BpMSrIOq.cjs");const c=require("./index.cjs.js");describe("VStack Component",()=>{it("renders its children",()=>{const{getByText:t}=i.render(e.jsxs(c.VStack,{children:[e.jsx("div",{children:"Child 1"}),e.jsx("div",{children:"Child 2"})]}));expect(t("Child 1")).toBeInTheDocument(),expect(t("Child 2")).toBeInTheDocument()}),it("applies default gap spacing",()=>{const{container:t}=i.render(e.jsx(c.VStack,{children:e.jsx("div",{children:"Child"})}));expect(t.firstChild).toHaveStyle("gap: 24px")}),it("applies custom gap spacing",()=>{const{container:n}=i.render(e.jsx(c.VStack,{spacing:10,children:e.jsx("div",{children:"Child"})}));expect(n.firstChild).toHaveStyle("gap: 10px")})});
+"use strict";const e=require("react/jsx-runtime"),i=require("../../react.esm-DGuy6Rn3.cjs");require("../../index-9p9q0wxE.cjs");const c=require("./index.cjs.js");describe("VStack Component",()=>{it("renders its children",()=>{const{getByText:t}=i.render(e.jsxs(c.VStack,{children:[e.jsx("div",{children:"Child 1"}),e.jsx("div",{children:"Child 2"})]}));expect(t("Child 1")).toBeInTheDocument(),expect(t("Child 2")).toBeInTheDocument()}),it("applies default gap spacing",()=>{const{container:t}=i.render(e.jsx(c.VStack,{children:e.jsx("div",{children:"Child"})}));expect(t.firstChild).toHaveStyle("gap: 24px")}),it("applies custom gap spacing",()=>{const{container:n}=i.render(e.jsx(c.VStack,{spacing:10,children:e.jsx("div",{children:"Child"})}));expect(n.firstChild).toHaveStyle("gap: 10px")})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/VStack/index.test.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/VStack/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { VStack } from \".\";\n\ndescribe(\"VStack Component\", () => {\n  it(\"renders its children\", () => {\n    const { getByText } = render(\n      <VStack>\n        <div>Child 1</div>\n        <div>Child 2</div>\n      </VStack>,\n    );\n\n    expect(getByText(\"Child 1\")).toBeInTheDocument();\n    expect(getByText(\"Child 2\")).toBeInTheDocument();\n  });\n\n  it(\"applies default gap spacing\", () => {\n    const { container } = render(\n      <VStack>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(\"gap: 24px\");\n  });\n\n  it(\"applies custom gap spacing\", () => {\n    const customSpacing = 10;\n    const { container } = render(\n      <VStack spacing={customSpacing}>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(`gap: ${customSpacing}px`);\n  });\n});\n"],"names":["getByText","render","VStack","jsx","container"],"mappings":"kKAMA,SAAS,mBAAoB,IAAM,CACjC,GAAG,uBAAwB,IAAM,CACzB,KAAA,CAAE,UAAAA,GAAcC,EAAA,cACnBC,EAAAA,OACC,CAAA,SAAA,CAAAC,EAAAA,IAAC,OAAI,SAAO,SAAA,CAAA,EACZA,EAAAA,IAAC,OAAI,SAAO,SAAA,CAAA,CAAA,CACd,CAAA,CACF,EAEA,OAAOH,EAAU,SAAS,CAAC,EAAE,kBAAkB,EAC/C,OAAOA,EAAU,SAAS,CAAC,EAAE,kBAAkB,CAAA,CAChD,EAED,GAAG,8BAA+B,IAAM,CAChC,KAAA,CAAE,UAAAI,GAAcH,EAAA,OACnBE,MAAAD,EAAAA,OAAA,CACC,SAACC,EAAAA,IAAA,MAAA,CAAI,iBAAK,CACZ,CAAA,CACF,EAEA,OAAOC,EAAU,UAAU,EAAE,YAAY,WAAW,CAAA,CACrD,EAED,GAAG,6BAA8B,IAAM,CAE/B,KAAA,CAAE,UAAAA,GAAcH,EAAA,aACnBC,EAAO,OAAA,CAAA,QAAS,GACf,SAACC,EAAA,IAAA,MAAA,CAAI,gBAAK,CAAA,CACZ,CAAA,CACF,EAEA,OAAOC,EAAU,UAAU,EAAE,YAAY,WAAyB,CAAA,CACnE,CACH,CAAC"}
+{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/VStack/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { VStack } from \".\";\n\ndescribe(\"VStack Component\", () => {\n  it(\"renders its children\", () => {\n    const { getByText } = render(\n      <VStack>\n        <div>Child 1</div>\n        <div>Child 2</div>\n      </VStack>,\n    );\n\n    expect(getByText(\"Child 1\")).toBeInTheDocument();\n    expect(getByText(\"Child 2\")).toBeInTheDocument();\n  });\n\n  it(\"applies default gap spacing\", () => {\n    const { container } = render(\n      <VStack>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(\"gap: 24px\");\n  });\n\n  it(\"applies custom gap spacing\", () => {\n    const customSpacing = 10;\n    const { container } = render(\n      <VStack spacing={customSpacing}>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(`gap: ${customSpacing}px`);\n  });\n});\n"],"names":["getByText","render","VStack","jsx","container"],"mappings":"kKAMA,SAAS,mBAAoB,IAAM,CACjC,GAAG,uBAAwB,IAAM,CAC/B,KAAM,CAAE,UAAAA,GAAcC,EAAAA,cACnBC,EAAAA,OAAA,CACC,SAAA,CAAAC,EAAAA,IAAC,OAAI,SAAA,SAAA,CAAO,EACZA,EAAAA,IAAC,OAAI,SAAA,SAAA,CAAO,CAAA,CAAA,CACd,CAAA,EAGF,OAAOH,EAAU,SAAS,CAAC,EAAE,kBAAA,EAC7B,OAAOA,EAAU,SAAS,CAAC,EAAE,kBAAA,CAC/B,CAAC,EAED,GAAG,8BAA+B,IAAM,CACtC,KAAM,CAAE,UAAAI,GAAcH,EAAAA,OACpBE,MAACD,EAAAA,OAAA,CACC,SAAAC,EAAAA,IAAC,MAAA,CAAI,iBAAK,CAAA,CACZ,CAAA,EAGF,OAAOC,EAAU,UAAU,EAAE,YAAY,WAAW,CACtD,CAAC,EAED,GAAG,6BAA8B,IAAM,CAErC,KAAM,CAAE,UAAAA,GAAcH,EAAAA,aACnBC,EAAAA,OAAA,CAAO,QAAS,GACf,SAAAC,EAAAA,IAAC,MAAA,CAAI,iBAAK,CAAA,CACZ,CAAA,EAGF,OAAOC,EAAU,UAAU,EAAE,YAAY,WAAyB,CACpE,CAAC,CACH,CAAC"}

package/dist/components/VStack/index.test.es.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { r as t } from "../../react.esm-2FJSSo-S.js";
-import "../../index-DCSLk6pp.js";
+import { r as t } from "../../react.esm-BBESb8eI.js";
+import "../../index-Cj9ZvtM1.js";
 import { VStack as c } from "./index.es.js";
 describe("VStack Component", () => {
   it("renders its children", () => {

package/dist/components/VStack/index.test.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.es.js","sources":["../../../src/components/VStack/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { VStack } from \".\";\n\ndescribe(\"VStack Component\", () => {\n  it(\"renders its children\", () => {\n    const { getByText } = render(\n      <VStack>\n        <div>Child 1</div>\n        <div>Child 2</div>\n      </VStack>,\n    );\n\n    expect(getByText(\"Child 1\")).toBeInTheDocument();\n    expect(getByText(\"Child 2\")).toBeInTheDocument();\n  });\n\n  it(\"applies default gap spacing\", () => {\n    const { container } = render(\n      <VStack>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(\"gap: 24px\");\n  });\n\n  it(\"applies custom gap spacing\", () => {\n    const customSpacing = 10;\n    const { container } = render(\n      <VStack spacing={customSpacing}>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(`gap: ${customSpacing}px`);\n  });\n});\n"],"names":["getByText","render","VStack","jsx","container"],"mappings":";;;;AAMA,SAAS,oBAAoB,MAAM;AACjC,KAAG,wBAAwB,MAAM;AACzB,UAAA,EAAE,WAAAA,MAAcC;AAAA,wBACnBC,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAC,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,QACZ,gBAAAA,EAAC,SAAI,UAAO,UAAA,CAAA;AAAA,MAAA,EACd,CAAA;AAAA,IACF;AAEA,WAAOH,EAAU,SAAS,CAAC,EAAE,kBAAkB,GAC/C,OAAOA,EAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAChD,GAED,GAAG,+BAA+B,MAAM;AAChC,UAAA,EAAE,WAAAI,MAAcH;AAAA,MACnB,gBAAAE,EAAAD,GAAA,EACC,UAAC,gBAAAC,EAAA,OAAA,EAAI,mBAAK,EACZ,CAAA;AAAA,IACF;AAEA,WAAOC,EAAU,UAAU,EAAE,YAAY,WAAW;AAAA,EAAA,CACrD,GAED,GAAG,8BAA8B,MAAM;AAE/B,UAAA,EAAE,WAAAA,MAAcH;AAAA,wBACnBC,GAAO,EAAA,SAAS,IACf,UAAC,gBAAAC,EAAA,OAAA,EAAI,kBAAK,CAAA,EACZ,CAAA;AAAA,IACF;AAEA,WAAOC,EAAU,UAAU,EAAE,YAAY,WAAyB;AAAA,EAAA,CACnE;AACH,CAAC;"}
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/VStack/index.test.tsx"],"sourcesContent":["import { render } from \"@testing-library/react\";\n\nimport \"@testing-library/jest-dom\";\n\nimport { VStack } from \".\";\n\ndescribe(\"VStack Component\", () => {\n  it(\"renders its children\", () => {\n    const { getByText } = render(\n      <VStack>\n        <div>Child 1</div>\n        <div>Child 2</div>\n      </VStack>,\n    );\n\n    expect(getByText(\"Child 1\")).toBeInTheDocument();\n    expect(getByText(\"Child 2\")).toBeInTheDocument();\n  });\n\n  it(\"applies default gap spacing\", () => {\n    const { container } = render(\n      <VStack>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(\"gap: 24px\");\n  });\n\n  it(\"applies custom gap spacing\", () => {\n    const customSpacing = 10;\n    const { container } = render(\n      <VStack spacing={customSpacing}>\n        <div>Child</div>\n      </VStack>,\n    );\n\n    expect(container.firstChild).toHaveStyle(`gap: ${customSpacing}px`);\n  });\n});\n"],"names":["getByText","render","VStack","jsx","container"],"mappings":";;;;AAMA,SAAS,oBAAoB,MAAM;AACjC,KAAG,wBAAwB,MAAM;AAC/B,UAAM,EAAE,WAAAA,MAAcC;AAAA,wBACnBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAAC,SAAI,UAAA,UAAA,CAAO;AAAA,QACZ,gBAAAA,EAAC,SAAI,UAAA,UAAA,CAAO;AAAA,MAAA,EAAA,CACd;AAAA,IAAA;AAGF,WAAOH,EAAU,SAAS,CAAC,EAAE,kBAAA,GAC7B,OAAOA,EAAU,SAAS,CAAC,EAAE,kBAAA;AAAA,EAC/B,CAAC,GAED,GAAG,+BAA+B,MAAM;AACtC,UAAM,EAAE,WAAAI,MAAcH;AAAA,MACpB,gBAAAE,EAACD,GAAA,EACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,mBAAK,EAAA,CACZ;AAAA,IAAA;AAGF,WAAOC,EAAU,UAAU,EAAE,YAAY,WAAW;AAAA,EACtD,CAAC,GAED,GAAG,8BAA8B,MAAM;AAErC,UAAM,EAAE,WAAAA,MAAcH;AAAA,wBACnBC,GAAA,EAAO,SAAS,IACf,UAAA,gBAAAC,EAAC,OAAA,EAAI,mBAAK,EAAA,CACZ;AAAA,IAAA;AAGF,WAAOC,EAAU,UAAU,EAAE,YAAY,WAAyB;AAAA,EACpE,CAAC;AACH,CAAC;"}