@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

package/form/RadioContainer/RadioContainer.stories.d.ts

@@ -7,10 +7,13 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/form/RadioContainer/__stories__/Default";
+export * from "@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend";
 export * from "@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions";
 export * from "@digigov/ui/form/RadioContainer/__stories__/Inline";
 export * from "@digigov/ui/form/RadioContainer/__stories__/WithHints";
 export * from "@digigov/ui/form/RadioContainer/__stories__/NoneAnswer";
 export * from "@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage";
 export * from "@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal";
+export * from "@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider";
+export * from "@digigov/ui/form/RadioContainer/__stories__/Dense";
 import RadioContainer from "@digigov/ui/form/RadioContainer";

package/form/RadioContainer/RadioContainer.stories.js

@@ -24,6 +24,20 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _WithMediumLegend = require("@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend");
+
+Object.keys(_WithMediumLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithMediumLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithMediumLegend[key];
+    }
+  });
+});
+
 var _MultipleQuestions = require("@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions");
 
 Object.keys(_MultipleQuestions).forEach(function (key) {
@@ -107,6 +121,34 @@ Object.keys(_ConditionalReveal).forEach(function (key) {
     }
   });
 });
+
+var _InlineWithDivider = require("@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider");
+
+Object.keys(_InlineWithDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InlineWithDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InlineWithDivider[key];
+    }
+  });
+});
+
+var _Dense = require("@digigov/ui/form/RadioContainer/__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/form/RadioContainer',
   description: 'Use the radios component when users can only select one option from a list.',

package/form/RadioContainer/__stories__/ConditionalReveal.js

@@ -27,7 +27,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   value: "email"
 }, "Email"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioConditional, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 email", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "email",
-  cellWidth: "one-third"
+  width: "33.3%"
 })), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "contact",
   value: "phone"

package/form/RadioContainer/__stories__/Default.js

@@ -13,16 +13,19 @@ var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
 var _RadioContainer = require("@digigov/ui/form/RadioContainer");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "country",
   value: "eu"
-}, "\u03A7\u03CE\u03C1\u03B1 \u03B5\u03BD\u03C4\u03CC\u03C2 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "country",
-  value: "world"
-}, "\u03A7\u03CE\u03C1\u03B1 \u03B5\u03BA\u03C4\u03CC\u03C2 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"))));
+  value: "us"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
 
 var Default = function Default() {
   return _ref;

package/form/RadioContainer/__stories__/Dense.d.ts

@@ -0,0 +1,2 @@
+export declare const Dense: () => JSX.Element;
+export default Dense;

package/form/RadioContainer/__stories__/Dense.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _RadioContainer = require("@digigov/ui/form/RadioContainer");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  dense: true
+}, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "greece"
+}, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "eu"
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "us"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/RadioContainer/__stories__/Inline.js

@@ -20,7 +20,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "name-hint"
 }, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
-  inline: true
+  layout: "horizontal"
 }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "changed_name",
   value: "yes"

package/form/RadioContainer/__stories__/InlineWithDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const InlineWithDivider: () => JSX.Element;
+export default InlineWithDivider;

package/form/RadioContainer/__stories__/InlineWithDivider.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InlineWithDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _RadioContainer = require("@digigov/ui/form/RadioContainer");
+
+var _Hint = _interopRequireDefault(require("@digigov/ui/typography/Hint"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  id: "name-hint"
+}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03B9\u03B8\u03AD\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03AC \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  layout: "horizontal"
+}, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "changed_name",
+  value: "yes"
+}, "\u039D\u03B1\u03B9"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  dividerText: "\u03AE",
+  name: "changed_name",
+  value: "no"
+}, "\u038C\u03C7\u03B9"))));
+
+var InlineWithDivider = function InlineWithDivider() {
+  return _ref;
+};
+
+exports.InlineWithDivider = InlineWithDivider;
+var _default = InlineWithDivider;
+exports["default"] = _default;

package/form/RadioContainer/__stories__/MultipleQuestions.js

@@ -19,7 +19,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   "aria-describedby": "country-hint"
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
   size: "sm"
-}, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+}, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "country-hint"
 }, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "country",

package/form/RadioContainer/__stories__/NoneAnswer.js

@@ -13,14 +13,18 @@ var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
 var _RadioContainer = require("@digigov/ui/form/RadioContainer");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03CC\u03C3\u03B1 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC \u03AD\u03C7\u03B5\u03C4\u03B5;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "name-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "md"
+}, "\u03A0\u03CC\u03C3\u03B1 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC \u03AD\u03C7\u03B5\u03C4\u03B5;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "children",
   value: "onetwo"
 }, "1-2 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "children",
   value: "threefour"
 }, "3 \u03AE \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C0\u03B1\u03B9\u03B4\u03B9\u03AC"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
-  divider: "\u03AE",
+  dividerText: "\u03AE",
   name: "children",
   value: "none"
 }, "\u039A\u03B1\u03BD\u03AD\u03BD\u03B1 \u03C0\u03B1\u03B9\u03B4\u03AF"))));

package/form/RadioContainer/__stories__/WithErrorMessage.js

@@ -23,7 +23,9 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   error: true
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
   "aria-describedby": "travel-hint travel-error"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "md"
+}, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "travel-hint"
 }, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03CC\u03BD\u03BF \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
   id: "travel-error"

package/form/RadioContainer/__stories__/WithHints.js

@@ -21,7 +21,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   size: "md"
 }, "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "login-hint"
-}, "\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\u03CD\u03C4\u03BF\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+}, "\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."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "login",
   value: "gsis",
   "aria-describedby": "gsis-hint"

package/form/RadioContainer/__stories__/WithMediumLegend.d.ts

@@ -0,0 +1,2 @@
+export declare const WithMediumLegend: () => JSX.Element;
+export default WithMediumLegend;

package/form/RadioContainer/__stories__/WithMediumLegend.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithMediumLegend = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _RadioContainer = require("@digigov/ui/form/RadioContainer");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "md"
+}, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "greece"
+}, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "eu"
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "country",
+  value: "us"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
+
+var WithMediumLegend = function WithMediumLegend() {
+  return _ref;
+};
+
+exports.WithMediumLegend = WithMediumLegend;
+var _default = WithMediumLegend;
+exports["default"] = _default;

package/form/RadioContainer/index.mdx

@@ -11,48 +11,28 @@ import RadioContainer from '@digigov/ui/form/RadioContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Inline.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Inline.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -60,21 +40,18 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithErrorMessage.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Radio
+implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.
 
 ## API
 

package/form/SearchContainer/index.d.ts

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/SearchContainer';
+export * from '@digigov/react-core/SearchButton';
+export * from '@digigov/react-icons/SearchIcon';
+import SearchContainer from '@digigov/react-core/SearchContainer';
+export default SearchContainer;

package/form/{SearchSection → SearchContainer}/index.js

@@ -8,16 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _SearchSection = _interopRequireWildcard(require("@digigov/react-core/SearchSection"));
+var _SearchContainer = _interopRequireWildcard(require("@digigov/react-core/SearchContainer"));
 
-Object.keys(_SearchSection).forEach(function (key) {
+Object.keys(_SearchContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SearchSection[key]) return;
+  if (key in exports && exports[key] === _SearchContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SearchSection[key];
+      return _SearchContainer[key];
     }
   });
 });
@@ -54,5 +54,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _default = _SearchSection["default"];
+var _default = _SearchContainer["default"];
 exports["default"] = _default;

package/form/SelectContainer/{Select.stories.d.ts → SelectContainer.stories.d.ts}

@@ -9,4 +9,5 @@ export default _default;
 export * from "@digigov/ui/form/SelectContainer/__stories__/Default";
 export * from "@digigov/ui/form/SelectContainer/__stories__/DisabledInput";
 export * from "@digigov/ui/form/SelectContainer/__stories__/WithHint";
+export * from "@digigov/ui/form/SelectContainer/__stories__/Dense";
 import SelectContainer from "@digigov/ui/form/SelectContainer";

package/form/SelectContainer/{Select.stories.js → SelectContainer.stories.js}

@@ -51,6 +51,20 @@ Object.keys(_WithHint).forEach(function (key) {
     }
   });
 });
+
+var _Dense = require("@digigov/ui/form/SelectContainer/__stories__/Dense");
+
+Object.keys(_Dense).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dense[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dense[key];
+    }
+  });
+});
 var _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.',

package/form/SelectContainer/__stories__/Default.js

@@ -19,13 +19,13 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   name: "select-list",
   "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "dim"
+  value: "popular"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "recent"
 }, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "views"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "comments"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
 var Default = function Default() {

package/form/SelectContainer/__stories__/Dense.d.ts

@@ -0,0 +1,2 @@
+export declare const Dense: () => JSX.Element;
+export default Dense;

package/form/SelectContainer/__stories__/Dense.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dense = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _LabelContainer = require("@digigov/ui/form/LabelContainer");
+
+var _SelectContainer = require("@digigov/ui/form/SelectContainer");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectContainer, {
+  dense: true,
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
+}, /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
+  value: "popular"
+}, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
+  value: "recent"
+}, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
+  value: "views"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
+  value: "comments"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
+
+var Dense = function Dense() {
+  return _ref;
+};
+
+exports.Dense = Dense;
+var _default = Dense;
+exports["default"] = _default;

package/form/SelectContainer/index.mdx

@@ -11,32 +11,26 @@ import SelectContainer from '@digigov/ui/form/SelectContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
+
+## Accessibility
 
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/form/SingleCharacterInputs/SingleCharacterInput.stories.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    export const title: string;
+    export const description: string;
+    export const link: string;
+    export { SingleCharacterInputs as component };
+    export const displayName: string;
+}
+export default _default;
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/Default";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit";
+import SingleCharacterInputs from "@digigov/ui/form/SingleCharacterInputs";

package/form/{SingleCharacterInputContainer/SingleCharacterInputContainer.stories.js → SingleCharacterInputs/SingleCharacterInput.stories.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _SingleCharacterInputContainer = _interopRequireDefault(require("@digigov/ui/form/SingleCharacterInputContainer"));
+var _SingleCharacterInputs = _interopRequireDefault(require("@digigov/ui/form/SingleCharacterInputs"));
 
-var _Default = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/Default");
+var _Default = require("@digigov/ui/form/SingleCharacterInputs/__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,7 +24,7 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _WithDefaultError = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithDefaultError");
+var _WithDefaultError = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError");
 
 Object.keys(_WithDefaultError).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -38,7 +38,7 @@ Object.keys(_WithDefaultError).forEach(function (key) {
   });
 });
 
-var _WithErrorMessageInvalidCode = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode");
+var _WithErrorMessageInvalidCode = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode");
 
 Object.keys(_WithErrorMessageInvalidCode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -52,7 +52,7 @@ Object.keys(_WithErrorMessageInvalidCode).forEach(function (key) {
   });
 });
 
-var _WithErrorMessageLessDigit = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit");
+var _WithErrorMessageLessDigit = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit");
 
 Object.keys(_WithErrorMessageLessDigit).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -66,10 +66,10 @@ Object.keys(_WithErrorMessageLessDigit).forEach(function (key) {
   });
 });
 var _default = {
-  title: 'Digigov UI/form/SingleCharacterInputContainer',
+  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: _SingleCharacterInputContainer["default"],
-  displayName: 'SingleCharacterInputContainer'
+  component: _SingleCharacterInputs["default"],
+  displayName: 'SingleCharacterInputs'
 };
 exports["default"] = _default;