@digigov/ui 2.0.0-f2d82d25 → 2.0.0-rc.0

package/cjs/form/Checkbox/__stories__/InlineWithDivider/index.js

@@ -1,29 +0,0 @@
-"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 _Checkbox = require("@digigov/ui/form/Checkbox");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = 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, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "feeling-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(_Checkbox.Checkbox, {
-  layout: "horizontal"
-}, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "feeling",
-  value: "cold"
-}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "feeling",
-  value: "fever",
-  dividerText: "\u03AE"
-}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"))));
-var InlineWithDivider = exports.InlineWithDivider = function InlineWithDivider() {
-  return _ref;
-};
-var _default = exports["default"] = InlineWithDivider;

package/cjs/form/Checkbox/__stories__/MultipleQuestions/index.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.MultipleQuestions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Checkbox = require("@digigov/ui/form/Checkbox");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = 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, {
-  size: "sm"
-}, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "feeling-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(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "feeling",
-  value: "cold"
-}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "feeling",
-  value: "fever"
-}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "feeling",
-  value: "fatigue"
-}, "\u0391\u03B9\u03C3\u03B8\u03AC\u03BD\u03BF\u03BC\u03B1\u03B9 \u03BA\u03BF\u03CD\u03C1\u03B1\u03C3\u03B7"))));
-var MultipleQuestions = exports.MultipleQuestions = function MultipleQuestions() {
-  return _ref;
-};
-var _default = exports["default"] = MultipleQuestions;

package/cjs/form/Checkbox/__stories__/NoneAnswer/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.NoneAnswer = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Checkbox = require("@digigov/ui/form/Checkbox");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__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(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "cold",
-  value: "cold"
-}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "fever",
-  value: "fever"
-}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "fatigue",
-  value: "fatigue",
-  dividerText: "\u03AE"
-}, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));
-var NoneAnswer = exports.NoneAnswer = function NoneAnswer() {
-  return _ref;
-};
-var _default = exports["default"] = NoneAnswer;

package/cjs/form/Checkbox/__stories__/NoneAnswerWithError/index.js

@@ -1,31 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.NoneAnswerWithError = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Checkbox = require("@digigov/ui/form/Checkbox");
-var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  error: true
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__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(_ErrorMessage.ErrorMessage, {
-  id: "travel-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "country",
-  value: "en"
-}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "country",
-  value: "fr"
-}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  dividerText: "\u03AE",
-  name: "country",
-  value: "none"
-}, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));
-var NoneAnswerWithError = exports.NoneAnswerWithError = function NoneAnswerWithError() {
-  return _ref;
-};
-var _default = exports["default"] = NoneAnswerWithError;

package/cjs/form/Checkbox/__stories__/WithErrorMessage/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithErrorMessage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Checkbox = require("@digigov/ui/form/Checkbox");
-var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  error: true
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
-  "aria-describedby": "country-hint country-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, {
-  id: "country-hint"
-}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
-  id: "country-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "country",
-  value: "en"
-}, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "country",
-  value: "fr"
-}, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"))));
-var WithErrorMessage = exports.WithErrorMessage = function WithErrorMessage() {
-  return _ref;
-};
-var _default = exports["default"] = WithErrorMessage;

package/cjs/form/Checkbox/__stories__/WithHint/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithHint = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Checkbox = require("@digigov/ui/form/Checkbox");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
-  "aria-describedby": "nationality-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "nationality-hint"
-}, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, null, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "nationality",
-  value: "gr",
-  "aria-describedby": "gr-hint"
-}, "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AE", /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "gr-hint"
-}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03B1\u03BD\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD \u03B1\u03C0\u03CC\u03B4\u03B7\u03BC\u03C9\u03BD \u03C0\u03BF\u03BB\u03B9\u03C4\u03CE\u03BD")), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "nationality",
-  value: "cy"
-}, "\u039A\u03C5\u03C0\u03C1\u03B9\u03B1\u03BA\u03AE"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  name: "nationality",
-  value: "other"
-}, "\u0386\u03BB\u03BB\u03B7 \u03C7\u03CE\u03C1\u03B1"))));
-var WithHint = exports.WithHint = function WithHint() {
-  return _ref;
-};
-var _default = exports["default"] = WithHint;

package/cjs/form/Checkbox/index.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-exports["default"] = void 0;
-var _Checkbox = _interopRequireWildcard(require("@digigov/react-core/cjs/Checkbox"));
-Object.keys(_Checkbox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Checkbox[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Checkbox[key];
-    }
-  });
-});
-var _CheckboxItem = require("@digigov/react-core/cjs/CheckboxItem");
-Object.keys(_CheckboxItem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CheckboxItem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CheckboxItem[key];
-    }
-  });
-});
-var _CheckboxConditional = require("@digigov/react-core/cjs/CheckboxConditional");
-Object.keys(_CheckboxConditional).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CheckboxConditional[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CheckboxConditional[key];
-    }
-  });
-});
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var _default = exports["default"] = _Checkbox["default"];

package/cjs/form/Checkbox/index.mdx

@@ -1,85 +0,0 @@
----
-id: checkbox
-title: Checkbox
----
-
-# Checkbox
-
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
-
-### If you’re asking more than one question on the page
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="MultipleQuestions.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/Checkbox"
-  story="WithHint.tsx"
-/>
-
-### Add an option for ‘none’
-
-When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswer.tsx"
-/>
-
-If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
-
-### Error messages
-
-Error messages should be styled like this:
-
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
-
-## Conditionally revealing a related question
-
-You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
-
-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/Checkbox"
-  story="ConditionalReveal.tsx"
-/>
-
-## Accessibility
-
-You can read more about the accessibility patterns used in our Checkbox
-implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="Checkbox" />

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

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-exports["default"] = void 0;
-var _DateInputContainer = _interopRequireDefault(require("@digigov/ui/form/DateInputContainer"));
-var _Default = require("@digigov/ui/form/DateInputContainer/__stories__/Default");
-Object.keys(_Default).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Default[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Default[key];
-    }
-  });
-});
-var _MultipleQuestions = require("@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions");
-Object.keys(_MultipleQuestions).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _MultipleQuestions[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _MultipleQuestions[key];
-    }
-  });
-});
-var _WithErrorMessage = require("@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage");
-Object.keys(_WithErrorMessage).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _WithErrorMessage[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _WithErrorMessage[key];
-    }
-  });
-});
-var _WithErrorMessageForSingleField = require("@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField");
-Object.keys(_WithErrorMessageForSingleField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _WithErrorMessageForSingleField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _WithErrorMessageForSingleField[key];
-    }
-  });
-});
-var _Dense = require("@digigov/ui/form/DateInputContainer/__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 = exports["default"] = {
-  title: 'Digigov UI/form/DateInputContainer',
-  description: 'Use the date input component to help users enter a memorable date or one they can easily look up.',
-  link: 'https://guide.services.gov.gr/docs/components/date-input',
-  component: _DateInputContainer["default"],
-  displayName: 'DateInputContainer'
-};

package/cjs/form/DateInputContainer/DateInputContainer.stories.playwright.json

@@ -1,61 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-ui-form-dateinput--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            },
-            {
-              "name": "keyboard.insertText",
-              "args": {
-                "text": "11"
-              }
-            }
-          ],
-          "id": "HEWnXMsN0nqw",
-          "title": "Actions with mouse"
-        }
-      ]
-    },
-    "digigov-ui-form-dateinput--with-error-message-for-single-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.insertText",
-              "args": {
-                "text": "2022"
-              }
-            }
-          ],
-          "id": "5QICoU6J1W8E",
-          "title": "Actions with keyboard"
-        }
-      ]
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
-  heading: true
-}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "passport-hint"
-}, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, {
-  "aria-describedby": "passport-hint"
-}, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "day"
-}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "month"
-}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  width: 4,
-  name: "year"
-}, "\u0388\u03C4\u03BF\u03C2"))));
-var Default = exports.Default = function Default() {
-  return _ref;
-};
-var _default = exports["default"] = Default;

package/cjs/form/DateInputContainer/__stories__/Dense/index.js

@@ -1,28 +0,0 @@
-"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 _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  "aria-describedby": "passport-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
-  size: "md"
-}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, {
-  dense: true
-}, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "day"
-}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "month"
-}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  width: 4,
-  name: "year"
-}, "\u0388\u03C4\u03BF\u03C2"))));
-var Dense = exports.Dense = function Dense() {
-  return _ref;
-};
-var _default = exports["default"] = Dense;

package/cjs/form/DateInputContainer/__stories__/MultipleQuestions/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.MultipleQuestions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  "aria-describedby": "passport-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
-  size: "md"
-}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "passport-hint"
-}, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, null, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "day"
-}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "month"
-}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  width: 4,
-  name: "year"
-}, "\u0388\u03C4\u03BF\u03C2"))));
-var MultipleQuestions = exports.MultipleQuestions = function MultipleQuestions() {
-  return _ref;
-};
-var _default = exports["default"] = MultipleQuestions;

package/cjs/form/DateInputContainer/__stories__/WithErrorMessage/index.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithErrorMessage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
-var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  error: true,
-  "aria-describedby": "passport-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "passport-hint"
-}, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
-  id: "passport-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, {
-  "aria-describedby": "passport-error"
-}, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  error: true,
-  name: "day",
-  defaultValue: 11
-}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  error: true,
-  name: "month",
-  defaultValue: 5
-}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  error: true,
-  width: 4,
-  name: "year",
-  defaultValue: 2043
-}, "\u0388\u03C4\u03BF\u03C2"))));
-var WithErrorMessage = exports.WithErrorMessage = function WithErrorMessage() {
-  return _ref;
-};
-var _default = exports["default"] = WithErrorMessage;

package/cjs/form/DateInputContainer/__stories__/WithErrorMessageForSingleField/index.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithErrorMessageForSingleField = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DateInputContainer = require("@digigov/ui/form/DateInputContainer");
-var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
-var _FieldContainer = require("@digigov/ui/form/FieldContainer");
-var _Hint = require("@digigov/ui/typography/Hint");
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {
-  error: true
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
-  "aria-describedby": "passport-hint"
-}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
-  id: "passport-hint"
-}, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
-  id: "passport-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputContainer, {
-  "aria-describedby": "passport-error"
-}, /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "day"
-}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  name: "month"
-}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_DateInputContainer.DateInputItem, {
-  error: true,
-  width: 4,
-  name: "year",
-  defaultValue: 2043
-}, "\u0388\u03C4\u03BF\u03C2"))));
-var WithErrorMessageForSingleField = exports.WithErrorMessageForSingleField = function WithErrorMessageForSingleField() {
-  return _ref;
-};
-var _default = exports["default"] = WithErrorMessageForSingleField;