@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/cjs/form/RadioContainer/RadioContainer.stories/index.js

@@ -34,13 +34,19 @@ __export(RadioContainer_stories_exports, {
   InlineWithDivider: () => import_InlineWithDivider.InlineWithDivider,
   MultipleQuestions: () => import_MultipleQuestions.MultipleQuestions,
   NoneAnswer: () => import_NoneAnswer.NoneAnswer,
+  WithControls: () => WithControls,
   WithErrorMessage: () => import_WithErrorMessage.WithErrorMessage,
   WithHints: () => import_WithHints.WithHints,
   WithMediumLegend: () => import_WithMediumLegend.WithMediumLegend,
   default: () => RadioContainer_stories_default
 });
 module.exports = __toCommonJS(RadioContainer_stories_exports);
-var import_RadioContainer = __toESM(require("@digigov/ui/form/RadioContainer"));
+var import_react = __toESM(require("react"));
+var import_RadioContainer = require("@digigov/ui/form/RadioContainer");
+var import_FieldContainer = require("@digigov/ui/form/FieldContainer");
+var import_Hint = require("@digigov/ui/typography/Hint");
+var import_ErrorMessage = require("@digigov/ui/form/ErrorMessage");
+var import_VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
 var import_Default = require("@digigov/ui/form/RadioContainer/__stories__/Default");
 var import_WithMediumLegend = require("@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend");
 var import_MultipleQuestions = require("@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions");
@@ -55,9 +61,115 @@ var RadioContainer_stories_default = {
   title: "Digigov UI/form/RadioContainer",
   description: "Use the radios component when users can only select one option from a list.",
   link: "https://guide.services.gov.gr/docs/components/radio",
-  component: import_RadioContainer.default,
+  component: import_RadioContainer.RadioContainer,
   displayName: "RadioContainer"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.FieldContainer, { error: args.error }, /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.Fieldset, { "aria-describedby": [`${args.hintId} ${args.errorId}`] }, /* @__PURE__ */ import_react.default.createElement(
+      import_FieldContainer.FieldsetLegend,
+      {
+        size: args.legendSize,
+        heading: args.singleQuestionInPage
+      },
+      args.legend
+    ), args.hint && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ import_react.default.createElement(import_ErrorMessage.ErrorMessage, { id: args.errorId }, /* @__PURE__ */ import_react.default.createElement(import_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), args.errorMessage), /* @__PURE__ */ import_react.default.createElement(import_RadioContainer.RadioContainer, { dense: args.dense, layout: args.layout }, args.items && args.items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      import_RadioContainer.RadioItem,
+      {
+        key: item.value,
+        name: args.fieldsetName,
+        value: item,
+        dividerText: item.dividerText,
+        "aria-describedby": item.hintId
+      },
+      item.label,
+      item.hint && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { id: item.hintId }, item.hintMessage)
+    )))));
+  },
+  args: {
+    legend: "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;",
+    legendSize: "lg",
+    singleQuestionInPage: true,
+    fieldsetName: "login-method",
+    hint: true,
+    hintMessage: "\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03C5\u03C4\u03CC\u03C4\u03B7\u03C4\u03AC \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5.",
+    hintId: "hint-id",
+    error: false,
+    errorMessage: "\u03A0\u03B1\u03C1\u03B1\u03BA\u03B1\u03BB\u03CE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03C4\u03B9\u03C2 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2.",
+    errorId: "error-id",
+    layout: "vertical",
+    dense: false,
+    items: [
+      {
+        value: "taxis",
+        label: "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet",
+        hint: true,
+        hintMessage: "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5.",
+        hintId: "hint-id-1",
+        dividerText: ""
+      },
+      {
+        value: "banking",
+        label: "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking",
+        hint: true,
+        hintMessage: "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5.",
+        hintId: "hint-id-2"
+      },
+      {
+        value: "none",
+        label: "\u03A7\u03C9\u03C1\u03AF\u03C2 \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7",
+        dividerText: "\u03AE"
+      }
+    ]
+  },
+  argTypes: {
+    legend: {
+      control: { type: "text" }
+    },
+    legendSize: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"]
+    },
+    singleQuestionInPage: {
+      control: { type: "boolean" }
+    },
+    fieldsetName: {
+      control: { type: "text" }
+    },
+    hint: {
+      control: { type: "boolean" }
+    },
+    hintMessage: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: { type: "boolean" }
+    },
+    errorMessage: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    errorId: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    layout: {
+      control: { type: "inline-radio" },
+      options: ["vertical", "horizontal"]
+    },
+    dense: {
+      control: { type: "boolean" }
+    },
+    items: {
+      control: { type: "object" }
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ConditionalReveal,
@@ -67,6 +179,7 @@ var RadioContainer_stories_default = {
   InlineWithDivider,
   MultipleQuestions,
   NoneAnswer,
+  WithControls,
   WithErrorMessage,
   WithHints,
   WithMediumLegend

package/cjs/form/RadioContainer/RadioContainer.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/form/RadioContainer/RadioContainer.stories.js"],
-  "sourcesContent": ["import RadioContainer from '@digigov/ui/form/RadioContainer';\nexport default {\n  title: 'Digigov UI/form/RadioContainer',\n  description:\n    'Use the radios component when users can only select one option from a list.',\n  link: 'https://guide.services.gov.gr/docs/components/radio',\n  component: RadioContainer,\n  displayName: 'RadioContainer',\n};\nexport { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';\nexport { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';\nexport { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';\nexport { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';\nexport { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';\nexport { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';\nexport { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';\nexport { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';\nexport { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';\nexport { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2B;AAS3B,qBAAwB;AACxB,8BAAiC;AACjC,+BAAkC;AAClC,oBAAuB;AACvB,uBAA0B;AAC1B,wBAA2B;AAC3B,8BAAiC;AACjC,+BAAkC;AAClC,+BAAkC;AAClC,mBAAsB;AAjBtB,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW,sBAAAA;AAAA,EACX,aAAa;AACf;",
-  "names": ["RadioContainer"]
+  "sources": ["../../../../src/form/RadioContainer/RadioContainer.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { ErrorMessage } from '@digigov/ui/form/ErrorMessage';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nexport default {\n  title: 'Digigov UI/form/RadioContainer',\n  description:\n    'Use the radios component when users can only select one option from a list.',\n  link: 'https://guide.services.gov.gr/docs/components/radio',\n  component: RadioContainer,\n  displayName: 'RadioContainer',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <FieldContainer error={args.error}>\n        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>\n          <FieldsetLegend\n            size={args.legendSize}\n            heading={args.singleQuestionInPage}\n          >\n            {args.legend}\n          </FieldsetLegend>\n          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}\n          {args.error && (\n            <ErrorMessage id={args.errorId}>\n              <VisuallyHidden>\u039B\u03AC\u03B8\u03BF\u03C2:</VisuallyHidden>\n              {args.errorMessage}\n            </ErrorMessage>\n          )}\n          <RadioContainer dense={args.dense} layout={args.layout}>\n            {args.items &&\n              args.items.map((item) => (\n                <RadioItem\n                  key={item.value}\n                  name={args.fieldsetName}\n                  value={item}\n                  dividerText={item.dividerText}\n                  aria-describedby={item.hintId}\n                >\n                  {item.label}\n                  {item.hint && (\n                    <Hint id={item.hintId}>{item.hintMessage}</Hint>\n                  )}\n                </RadioItem>\n              ))}\n          </RadioContainer>\n        </Fieldset>\n      </FieldContainer>\n    );\n  },\n  args: {\n    legend: '\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;',\n    legendSize: 'lg',\n    singleQuestionInPage: true,\n    fieldsetName: 'login-method',\n    hint: true,\n    hintMessage:\n      '\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03C5\u03C4\u03CC\u03C4\u03B7\u03C4\u03AC \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5.',\n    hintId: 'hint-id',\n    error: false,\n    errorMessage: '\u03A0\u03B1\u03C1\u03B1\u03BA\u03B1\u03BB\u03CE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03C4\u03B9\u03C2 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2.',\n    errorId: 'error-id',\n    layout: 'vertical',\n    dense: false,\n    items: [\n      {\n        value: 'taxis',\n        label: '\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet',\n        hint: true,\n        hintMessage:\n          '\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5.',\n        hintId: 'hint-id-1',\n        dividerText: '',\n      },\n      {\n        value: 'banking',\n        label: '\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking',\n        hint: true,\n        hintMessage:\n          '\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5.',\n        hintId: 'hint-id-2',\n      },\n      {\n        value: 'none',\n        label: '\u03A7\u03C9\u03C1\u03AF\u03C2 \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7',\n        dividerText: '\u03AE',\n      },\n    ],\n  },\n  argTypes: {\n    legend: {\n      control: { type: 'text' },\n    },\n    legendSize: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    singleQuestionInPage: {\n      control: { type: 'boolean' },\n    },\n    fieldsetName: {\n      control: { type: 'text' },\n    },\n    hint: {\n      control: { type: 'boolean' },\n    },\n    hintMessage: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    hintId: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    error: {\n      control: { type: 'boolean' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    errorId: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    layout: {\n      control: { type: 'inline-radio' },\n      options: ['vertical', 'horizontal'],\n    },\n    dense: {\n      control: { type: 'boolean' },\n    },\n    items: {\n      control: { type: 'object' },\n    },\n  },\n};\n\nexport { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';\nexport { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';\nexport { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';\nexport { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';\nexport { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';\nexport { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';\nexport { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';\nexport { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';\nexport { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';\nexport { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/cjs/form/SearchContainer/SearchContainer.stories/index.js

@@ -0,0 +1,46 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SearchContainer_stories_exports = {};
+__export(SearchContainer_stories_exports, {
+  Default: () => import_Default.Default,
+  default: () => SearchContainer_stories_default
+});
+module.exports = __toCommonJS(SearchContainer_stories_exports);
+var import_SearchContainer = __toESM(require("@digigov/ui/form/SearchContainer"));
+var import_Default = require("@digigov/ui/form/SearchContainer/__stories__/Default");
+var SearchContainer_stories_default = {
+  title: "Digigov UI/form/SearchContainer",
+  description: "The SearchContainer component encapsulates the TextInput and SearchButton, providing a comprehensive search functionality.",
+  component: import_SearchContainer.default,
+  displayName: "SearchContainer"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Default
+});
+//# sourceMappingURL=SearchContainer.stories.js.map

package/cjs/form/SearchContainer/SearchContainer.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form/SearchContainer/SearchContainer.stories.js"],
+  "sourcesContent": ["import SearchContainer from '@digigov/ui/form/SearchContainer';\nexport default {\n  title: 'Digigov UI/form/SearchContainer',\n  description:\n    'The SearchContainer component encapsulates the TextInput and SearchButton, providing a comprehensive search functionality.',\n  component: SearchContainer,\n  displayName: 'SearchContainer',\n};\nexport { Default } from '@digigov/ui/form/SearchContainer/__stories__/Default';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA4B;AAQ5B,qBAAwB;AAPxB,IAAO,kCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,WAAW,uBAAAA;AAAA,EACX,aAAa;AACf;",
+  "names": ["SearchContainer"]
+}

package/cjs/form/SearchContainer/__stories__/Default/index.js

@@ -0,0 +1,43 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Default_exports = {};
+__export(Default_exports, {
+  Default: () => Default,
+  default: () => Default_default
+});
+module.exports = __toCommonJS(Default_exports);
+var import_react = __toESM(require("react"));
+var import_SearchContainer = require("@digigov/ui/form/SearchContainer");
+var import_TextInput = require("@digigov/ui/form/TextInput");
+const Default = () => /* @__PURE__ */ import_react.default.createElement(import_SearchContainer.SearchContainer, null, /* @__PURE__ */ import_react.default.createElement(import_TextInput.TextInput, null), /* @__PURE__ */ import_react.default.createElement(import_SearchContainer.SearchButton, null));
+var Default_default = Default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Default
+});
+//# sourceMappingURL=Default.js.map

package/cjs/form/SearchContainer/__stories__/Default.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/form/SearchContainer/__stories__/Default.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  SearchContainer,\n  SearchButton,\n} from '@digigov/ui/form/SearchContainer';\nimport { TextInput } from '@digigov/ui/form/TextInput';\n\nexport const Default = () => (\n  <SearchContainer>\n    <TextInput />\n    <SearchButton />\n  </SearchContainer>\n);\n\nexport default Default;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,6BAGO;AACP,uBAA0B;AAEnB,MAAM,UAAU,MACrB,6BAAAA,QAAA,cAAC,8CACC,6BAAAA,QAAA,cAAC,gCAAU,GACX,6BAAAA,QAAA,cAAC,yCAAa,CAChB;AAGF,IAAO,kBAAQ;",
+  "names": ["React"]
+}

package/cjs/form/SelectContainer/SelectContainer.stories/index.js

@@ -30,11 +30,17 @@ __export(SelectContainer_stories_exports, {
   Default: () => import_Default.Default,
   Dense: () => import_Dense.Dense,
   DisabledInput: () => import_DisabledInput.DisabledInput,
+  WithControls: () => WithControls,
   WithHint: () => import_WithHint.WithHint,
   default: () => SelectContainer_stories_default
 });
 module.exports = __toCommonJS(SelectContainer_stories_exports);
-var import_SelectContainer = __toESM(require("@digigov/ui/form/SelectContainer"));
+var import_react = __toESM(require("react"));
+var import_SelectContainer = require("@digigov/ui/form/SelectContainer");
+var import_FieldContainer = require("@digigov/ui/form/FieldContainer");
+var import_LabelContainer = require("@digigov/ui/form/LabelContainer");
+var import_typography = require("@digigov/ui/typography");
+var import_ErrorMessage = require("@digigov/ui/form/ErrorMessage");
 var import_Default = require("@digigov/ui/form/SelectContainer/__stories__/Default");
 var import_DisabledInput = require("@digigov/ui/form/SelectContainer/__stories__/DisabledInput");
 var import_WithHint = require("@digigov/ui/form/SelectContainer/__stories__/WithHint");
@@ -43,14 +49,85 @@ var SelectContainer_stories_default = {
   title: "Digigov UI/form/SelectContainer",
   description: "The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.",
   link: "https://guide.services.gov.gr/docs/components/select",
-  component: import_SelectContainer.default,
+  component: import_SelectContainer.SelectContainer,
   displayName: "SelectContainer"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.FieldContainer, { error: args.error }, /* @__PURE__ */ import_react.default.createElement(import_LabelContainer.LabelContainer, null, args.label, args.hint && /* @__PURE__ */ import_react.default.createElement(import_typography.Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ import_react.default.createElement(import_ErrorMessage.ErrorMessage, { id: args.errorId }, args.errorMessage), /* @__PURE__ */ import_react.default.createElement(
+      import_SelectContainer.SelectContainer,
+      {
+        dense: args.dense,
+        name: args.selectName,
+        "aria-label": args.ariaLabel
+      },
+      args.options.map((option) => /* @__PURE__ */ import_react.default.createElement(import_SelectContainer.SelectOption, { key: option.value, value: option.value }, option.label))
+    )));
+  },
+  args: {
+    label: "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7",
+    selectName: "select-list",
+    ariaLabel: "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7",
+    hint: false,
+    hintMessage: "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03C1\u03CC\u03C0\u03BF \u03C0\u03BF\u03C5 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03BD\u03BF\u03BC\u03B7\u03B8\u03BF\u03CD\u03BD \u03C4\u03B1 \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1",
+    hintId: "hintId",
+    error: false,
+    errorMessage: "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE",
+    errorId: "errorId",
+    dense: false,
+    options: [
+      { label: "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE", value: "popular" },
+      { label: "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1", value: "recent" },
+      { label: "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2", value: "views" },
+      { label: "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1", value: "comments" }
+    ]
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" }
+    },
+    selectName: {
+      control: { type: "text" }
+    },
+    ariaLabel: {
+      control: { type: "text" }
+    },
+    hint: {
+      control: { type: "boolean" }
+    },
+    hintMessage: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: { type: "boolean" }
+    },
+    errorMessage: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    errorId: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    dense: {
+      control: { type: "boolean" }
+    },
+    options: {
+      control: { type: "object" }
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Default,
   Dense,
   DisabledInput,
+  WithControls,
   WithHint
 });
 //# sourceMappingURL=SelectContainer.stories.js.map

package/cjs/form/SelectContainer/SelectContainer.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/form/SelectContainer/SelectContainer.stories.js"],
-  "sourcesContent": ["import SelectContainer from '@digigov/ui/form/SelectContainer';\nexport default {\n  title: 'Digigov UI/form/SelectContainer',\n  description:\n    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',\n  link: 'https://guide.services.gov.gr/docs/components/select',\n  component: SelectContainer,\n  displayName: 'SelectContainer',\n};\nexport { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';\nexport { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';\nexport { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';\nexport { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA4B;AAS5B,qBAAwB;AACxB,2BAA8B;AAC9B,sBAAyB;AACzB,mBAAsB;AAXtB,IAAO,kCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW,uBAAAA;AAAA,EACX,aAAa;AACf;",
-  "names": ["SelectContainer"]
+  "sources": ["../../../../src/form/SelectContainer/SelectContainer.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  SelectContainer,\n  SelectOption,\n} from '@digigov/ui/form/SelectContainer';\nimport { FieldContainer } from '@digigov/ui/form/FieldContainer';\nimport { LabelContainer } from '@digigov/ui/form/LabelContainer';\nimport { Hint } from '@digigov/ui/typography';\nimport { ErrorMessage } from '@digigov/ui/form/ErrorMessage';\n\nexport default {\n  title: 'Digigov UI/form/SelectContainer',\n  description:\n    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',\n  link: 'https://guide.services.gov.gr/docs/components/select',\n  component: SelectContainer,\n  displayName: 'SelectContainer',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <FieldContainer error={args.error}>\n        <LabelContainer>\n          {args.label}\n          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}\n          {args.error && (\n            <ErrorMessage id={args.errorId}>{args.errorMessage}</ErrorMessage>\n          )}\n          <SelectContainer\n            dense={args.dense}\n            name={args.selectName}\n            aria-label={args.ariaLabel}\n          >\n            {args.options.map((option) => (\n              <SelectOption key={option.value} value={option.value}>\n                {option.label}\n              </SelectOption>\n            ))}\n          </SelectContainer>\n        </LabelContainer>\n      </FieldContainer>\n    );\n  },\n  args: {\n    label: '\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7',\n    selectName: 'select-list',\n    ariaLabel: '\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7',\n    hint: false,\n    hintMessage: '\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03C1\u03CC\u03C0\u03BF \u03C0\u03BF\u03C5 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03BD\u03BF\u03BC\u03B7\u03B8\u03BF\u03CD\u03BD \u03C4\u03B1 \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1',\n    hintId: 'hintId',\n    error: false,\n    errorMessage: '\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE',\n    errorId: 'errorId',\n    dense: false,\n    options: [\n      { label: '\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE', value: 'popular' },\n      { label: '\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1', value: 'recent' },\n      { label: '\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2', value: 'views' },\n      { label: '\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1', value: 'comments' },\n    ],\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    selectName: {\n      control: { type: 'text' },\n    },\n    ariaLabel: {\n      control: { type: 'text' },\n    },\n    hint: {\n      control: { type: 'boolean' },\n    },\n    hintMessage: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    hintId: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    error: {\n      control: { type: 'boolean' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    errorId: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    dense: {\n      control: { type: 'boolean' },\n    },\n    options: {\n      control: { type: 'object' },\n    },\n  },\n};\n\nexport { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';\nexport { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';\nexport { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';\nexport { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,6BAGO;AACP,4BAA+B;AAC/B,4BAA+B;AAC/B,wBAAqB;AACrB,0BAA6B;AA+F7B,qBAAwB;AACxB,2BAA8B;AAC9B,sBAAyB;AACzB,mBAAsB;AAhGtB,IAAO,kCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,QAAQ,CAAC,SAAS;AAChB,WACE,6BAAAA,QAAA,cAAC,wCAAe,OAAO,KAAK,SAC1B,6BAAAA,QAAA,cAAC,4CACE,KAAK,OACL,KAAK,QAAQ,6BAAAA,QAAA,cAAC,0BAAK,IAAI,KAAK,UAAS,KAAK,WAAY,GACtD,KAAK,SACJ,6BAAAA,QAAA,cAAC,oCAAa,IAAI,KAAK,WAAU,KAAK,YAAa,GAErD,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,KAAK;AAAA,QACZ,MAAM,KAAK;AAAA,QACX,cAAY,KAAK;AAAA;AAAA,MAEhB,KAAK,QAAQ,IAAI,CAAC,WACjB,6BAAAA,QAAA,cAAC,uCAAa,KAAK,OAAO,OAAO,OAAO,OAAO,SAC5C,OAAO,KACV,CACD;AAAA,IACH,CACF,CACF;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,MAAM;AAAA,IACN,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,EAAE,OAAO,oDAAY,OAAO,UAAU;AAAA,MACtC,EAAE,OAAO,oDAAY,OAAO,SAAS;AAAA,MACrC,EAAE,OAAO,6HAAyB,OAAO,QAAQ;AAAA,MACjD,EAAE,OAAO,2GAAsB,OAAO,WAAW;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,YAAY;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,aAAa;AAAA,MACX,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,SAAS,IAAI,KAAK;AAAA,IAC/B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,SAAS,IAAI,KAAK;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "names": ["React"]
 }

package/cjs/form/SingleCharacterInputs/SingleCharacterInput.stories/index.js

@@ -28,13 +28,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var SingleCharacterInput_stories_exports = {};
 __export(SingleCharacterInput_stories_exports, {
   Default: () => import_Default.Default,
+  WithControls: () => WithControls,
   WithDefaultError: () => import_WithDefaultError.WithDefaultError,
   WithErrorMessageInvalidCode: () => import_WithErrorMessageInvalidCode.WithErrorMessageInvalidCode,
   WithErrorMessageLessDigit: () => import_WithErrorMessageLessDigit.WithErrorMessageLessDigit,
   default: () => SingleCharacterInput_stories_default
 });
 module.exports = __toCommonJS(SingleCharacterInput_stories_exports);
-var import_SingleCharacterInputs = __toESM(require("@digigov/ui/form/SingleCharacterInputs"));
+var import_react = __toESM(require("react"));
+var import_FieldContainer = require("@digigov/ui/form/FieldContainer");
+var import_SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
+var import_Hint = require("@digigov/ui/typography/Hint");
+var import_ErrorMessage = require("@digigov/ui/form/ErrorMessage");
+var import_VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
 var import_Default = require("@digigov/ui/form/SingleCharacterInputs/__stories__/Default");
 var import_WithDefaultError = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError");
 var import_WithErrorMessageInvalidCode = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode");
@@ -43,12 +49,97 @@ var SingleCharacterInput_stories_default = {
   title: "Digigov UI/form/SingleCharacterInputs",
   description: "Use the One-time password input component to help users enter a memorable digital character for One-time password.",
   link: "https://guide.services.gov.gr/docs/patterns/one-time-password",
-  component: import_SingleCharacterInputs.default,
+  component: import_SingleCharacterInputs.SingleCharacterInputs,
   displayName: "SingleCharacterInputs"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.FieldContainer, { error: args.error }, /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.Fieldset, { "aria-describedby": [`${args.hintId} ${args.errorId}`] }, /* @__PURE__ */ import_react.default.createElement(import_FieldContainer.FieldsetLegend, { heading: args.singleQuestionInPage }, args.legend), args.hint && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ import_react.default.createElement(import_ErrorMessage.ErrorMessage, { id: args.errorId }, /* @__PURE__ */ import_react.default.createElement(import_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), args.errorMessage), /* @__PURE__ */ import_react.default.createElement(import_SingleCharacterInputs.SingleCharacterInputs, null, args.items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      import_SingleCharacterInputs.SingleCharacterInput,
+      {
+        key: item.value,
+        name: item.value,
+        defaultValue: item.defaultValue,
+        error: item.error
+      }
+    )))));
+  },
+  args: {
+    singleQuestionInPage: false,
+    legend: "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2",
+    hint: true,
+    hintMessage: "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF.",
+    hintId: "code-hint",
+    error: false,
+    errorMessage: "\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03C0\u03BF\u03C5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B1\u03C4\u03B5 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BB\u03B1\u03BD\u03B8\u03B1\u03C3\u03BC\u03AD\u03BD\u03BF\u03C2",
+    errorId: "code-error",
+    items: [
+      {
+        defaultValue: "",
+        name: "digit-1",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-2",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-3",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-4",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-5",
+        error: false
+      }
+    ]
+  },
+  argTypes: {
+    singleQuestionInPage: {
+      control: { type: "boolean" }
+    },
+    legend: {
+      control: { type: "text" }
+    },
+    hint: {
+      control: { type: "boolean" }
+    },
+    hintMessage: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: { type: "boolean" }
+    },
+    errorMessage: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    items: {
+      control: { type: "object" }
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ["ref"]
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Default,
+  WithControls,
   WithDefaultError,
   WithErrorMessageInvalidCode,
   WithErrorMessageLessDigit

package/cjs/form/SingleCharacterInputs/SingleCharacterInput.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/form/SingleCharacterInputs/SingleCharacterInput.stories.js"],
-  "sourcesContent": ["import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';\nexport default {\n  title: 'Digigov UI/form/SingleCharacterInputs',\n  description:\n    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',\n  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',\n  component: SingleCharacterInputs,\n  displayName: 'SingleCharacterInputs',\n};\nexport { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';\nexport { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';\nexport { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';\nexport { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAAkC;AASlC,qBAAwB;AACxB,8BAAiC;AACjC,yCAA4C;AAC5C,uCAA0C;AAX1C,IAAO,uCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW,6BAAAA;AAAA,EACX,aAAa;AACf;",
-  "names": ["SingleCharacterInputs"]
+  "sources": ["../../../../src/form/SingleCharacterInputs/SingleCharacterInput.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\nimport {\n  SingleCharacterInputs,\n  SingleCharacterInput,\n} from '@digigov/ui/form/SingleCharacterInputs';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { ErrorMessage } from '@digigov/ui/form/ErrorMessage';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nexport default {\n  title: 'Digigov UI/form/SingleCharacterInputs',\n  description:\n    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',\n  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',\n  component: SingleCharacterInputs,\n  displayName: 'SingleCharacterInputs',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <FieldContainer error={args.error}>\n        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>\n          <FieldsetLegend heading={args.singleQuestionInPage}>\n            {args.legend}\n          </FieldsetLegend>\n          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}\n          {args.error && (\n            <ErrorMessage id={args.errorId}>\n              <VisuallyHidden>\u039B\u03AC\u03B8\u03BF\u03C2:</VisuallyHidden>\n              {args.errorMessage}\n            </ErrorMessage>\n          )}\n          <SingleCharacterInputs>\n            {args.items.map((item) => (\n              <SingleCharacterInput\n                key={item.value}\n                name={item.value}\n                defaultValue={item.defaultValue}\n                error={item.error}\n              />\n            ))}\n          </SingleCharacterInputs>\n        </Fieldset>\n      </FieldContainer>\n    );\n  },\n  args: {\n    singleQuestionInPage: false,\n    legend: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2',\n    hint: true,\n    hintMessage:\n      '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF.',\n    hintId: 'code-hint',\n    error: false,\n    errorMessage: '\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03C0\u03BF\u03C5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B1\u03C4\u03B5 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BB\u03B1\u03BD\u03B8\u03B1\u03C3\u03BC\u03AD\u03BD\u03BF\u03C2',\n    errorId: 'code-error',\n    items: [\n      {\n        defaultValue: '',\n        name: 'digit-1',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-2',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-3',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-4',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-5',\n        error: false,\n      },\n    ],\n  },\n  argTypes: {\n    singleQuestionInPage: {\n      control: { type: 'boolean' },\n    },\n    legend: {\n      control: { type: 'text' },\n    },\n    hint: {\n      control: { type: 'boolean' },\n    },\n    hintMessage: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    hintId: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    error: {\n      control: { type: 'boolean' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    items: {\n      control: { type: 'object' },\n    },\n  },\n  parameters: {\n    controls: {\n      exclude: ['ref'],\n    },\n  },\n};\n\nexport { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';\nexport { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';\nexport { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';\nexport { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';\n"],
+  "mappings": "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",
+  "names": ["React"]
 }