@dnb/eufemia 10.5.0 → 10.6.0

package/es/extensions/forms/Field/PhoneNumber.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext, useCallback, useMemo } from 'react';
+import { Div } from '../../../elements';
+import { Autocomplete, Input } from '../../../components';
+import classnames from 'classnames';
+import countries from '../constants/countries';
+import { forwardSpaceProps } from '../utils';
+import { useField } from './hooks';
+import SharedContext from '../../../shared/Context';
+function PhoneNumber(props) {
+  var _ref;
+  const sharedContext = useContext(SharedContext);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages: _objectSpread({
+      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberErrorRequired
+    }, props === null || props === void 0 ? void 0 : props.errorMessages)
+  });
+  const {
+    className,
+    countryCodeFieldClassName,
+    numberFieldClassName,
+    placeholder,
+    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
+    value,
+    emptyValue,
+    error,
+    disabled,
+    width = 'large',
+    onFocus,
+    onBlur,
+    onChange
+  } = useField(preparedProps);
+  const [, countryCode = '+47', phoneNumber = ''] = ((_ref = value ?? '') === null || _ref === void 0 ? void 0 : _ref.match(/^(\+[^ ]+)? ?(.*)$/)) ?? [];
+  const countriesDropdownData = useMemo(() => countries.map(country => ({
+    selected_key: `+${country.code}`,
+    selected_value: `${country.iso} (+${country.code})`,
+    content: `+${country.code} ${country.name}`
+  })), []);
+  const handleCountryCodeChange = useCallback(({
+    data: changedData
+  }) => {
+    if ((!changedData || !changedData.selected_key.trim()) && !phoneNumber.trim()) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(`${(changedData === null || changedData === void 0 ? void 0 : changedData.selected_key) || ''} ${phoneNumber}`);
+  }, [phoneNumber, emptyValue, onChange]);
+  const handleNumberChange = useCallback(({
+    value
+  }) => {
+    if (!value.trim() && !countryCode.trim()) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
+  }, [countryCode, emptyValue, onChange]);
+  return React.createElement(Div, _extends({
+    className: classnames('dnb-forms-field-phone-number', className, width !== false && `dnb-forms-field-phone-number--width-${width}`)
+  }, forwardSpaceProps(preparedProps)), React.createElement(Autocomplete, {
+    className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
+    label_direction: "vertical",
+    label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
+    data: countriesDropdownData,
+    value: countryCode ?? '+47',
+    disabled: disabled,
+    on_change: handleCountryCodeChange,
+    independent_width: true
+  }), React.createElement(Input, {
+    className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
+    label_direction: "vertical",
+    label: label ?? ' ',
+    placeholder: placeholder ?? '00 00 00 00',
+    on_change: handleNumberChange,
+    on_focus: onFocus,
+    on_blur: onBlur,
+    value: phoneNumber,
+    status: error === null || error === void 0 ? void 0 : error.message,
+    disabled: disabled,
+    type: "tel"
+  }));
+}
+PhoneNumber._supportsEufemiaSpacingProps = true;
+export default PhoneNumber;
+//# sourceMappingURL=PhoneNumber.js.map

package/es/extensions/forms/Field/PhoneNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","useMemo","Div","Autocomplete","Input","classnames","countries","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","_ref","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","label","phoneNumberLabel","value","emptyValue","error","disabled","width","onFocus","onBlur","onChange","countryCode","phoneNumber","match","countriesDropdownData","map","country","selected_key","code","selected_value","iso","content","name","handleCountryCodeChange","data","changedData","trim","handleNumberChange","filter","Boolean","join","createElement","_extends","label_direction","countryCodeLabel","on_change","independent_width","on_focus","on_blur","status","message","type","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Div } from '../../../elements'\nimport { Autocomplete, Input } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    // Styling\n    width?: false | 'medium' | 'large'\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    emptyValue,\n    error,\n    disabled,\n    width = 'large',\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  // Split the value into country code and phone number correctly, even if one of them is not\n  // filled in (avoiding number ending up in country code etc)\n  const [, countryCode = '+47', phoneNumber = ''] =\n    (value ?? '')?.match(/^(\\+[^ ]+)? ?(.*)$/) ?? []\n\n  const countriesDropdownData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const handleCountryCodeChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (\n        (!changedData || !changedData.selected_key.trim()) &&\n        !phoneNumber.trim()\n      ) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.(`${changedData?.selected_key || ''} ${phoneNumber}`)\n    },\n    [phoneNumber, emptyValue, onChange]\n  )\n\n  const handleNumberChange = useCallback(\n    ({ value }: { value: string }) => {\n      if (!value.trim() && !countryCode.trim()) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.([countryCode, value].filter(Boolean).join(' '))\n    },\n    [countryCode, emptyValue, onChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== false && `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <Autocomplete\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={sharedContext?.translation.Forms.countryCodeLabel}\n        data={countriesDropdownData}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        on_change={handleCountryCodeChange}\n        independent_width\n      />\n      <Input\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        on_change={handleNumberChange}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        value={phoneNumber}\n        status={error?.message}\n        disabled={disabled}\n        type=\"tel\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/es/extensions/forms/Field/PostalCodeAndCity.d.ts

@@ -0,0 +1,10 @@
+import { Props as FieldGroupProps } from '../FieldGroup';
+import { Props as StringComponentProps } from './String';
+export type Props = Omit<FieldGroupProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
+    width?: false | 'medium' | 'large';
+};
+declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace PostalCodeAndCity {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default PostalCodeAndCity;

package/es/extensions/forms/Field/PostalCodeAndCity.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["postalCode", "city", "width"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import SharedContext from '../../../shared/Context';
+import FieldGroup from '../FieldGroup';
+import StringComponent from './String';
+function PostalCodeAndCity(props) {
+  const sharedContext = useContext(SharedContext);
+  const {
+      postalCode = {},
+      city = {},
+      width = 'large'
+    } = props,
+    fieldGroupProps = _objectWithoutProperties(props, _excluded);
+  return React.createElement(FieldGroup, _extends({
+    className: classnames('dnb-forms-field-postal-code-and-city', props.className)
+  }, fieldGroupProps), React.createElement("div", {
+    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== false ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
+  }, React.createElement(StringComponent, _extends({}, postalCode, {
+    pattern: postalCode.pattern ?? '^[0-9]{4}$',
+    className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
+    label: postalCode.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel),
+    errorMessages: _objectSpread({
+      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorRequired,
+      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorPattern
+    }, postalCode.errorMessages),
+    placeholder: postalCode.placeholder ?? '0000',
+    width: false,
+    inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input"
+  })), React.createElement(StringComponent, _extends({}, city, {
+    className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
+    label: city.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel),
+    errorMessages: _objectSpread({
+      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityErrorRequired
+    }, city.errorMessages),
+    width: "stretch"
+  }))));
+}
+PostalCodeAndCity._supportsEufemiaSpacingProps = true;
+export default PostalCodeAndCity;
+//# sourceMappingURL=PostalCodeAndCity.js.map

package/es/extensions/forms/Field/PostalCodeAndCity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: false | 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== false &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        />\n        <StringComponent\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAK,KAAK,mDACkCA,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdS,OAAO,EAAET,UAAU,CAACS,OAAO,IAAI,YAAa;IAC5CD,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFE,KAAK,EACHV,UAAU,CAACU,KAAK,KAChBX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDlB,UAAU,CAACc,aAAa,CAC3B;IACFK,WAAW,EAAEnB,UAAU,CAACmB,WAAW,IAAI,MAAO;IAC9CjB,KAAK,EAAE,KAAM;IACbkB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF7B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFE,KAAK,EAAET,IAAI,CAACS,KAAK,KAAIX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDrB,IAAI,CAACa,aAAa,CACrB;IACFZ,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC0B,4BAA4B,GAAG,IAAI;AACrD,eAAe1B,iBAAiB"}

package/es/extensions/forms/Field/SelectCountry.d.ts

@@ -0,0 +1,7 @@
+import { Props as SelectionProps } from './Selection';
+export type Props = SelectionProps;
+declare function SelectCountry(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectCountry {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default SelectCountry;

package/es/extensions/forms/Field/SelectCountry.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext } from 'react';
+import Selection from './Selection';
+import Option from './Option';
+import countries from '../constants/countries';
+import SharedContext from '../../../shared/Context';
+function SelectCountry(props) {
+  const sharedContext = useContext(SharedContext);
+  const selectComponentProps = _objectSpread(_objectSpread({}, props), {}, {
+    placeholder: props.placeholder ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder),
+    label: props.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel),
+    errorMessages: _objectSpread({
+      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryErrorRequired
+    }, props.errorMessages)
+  });
+  return React.createElement(Selection, selectComponentProps, countries.map(country => React.createElement(Option, {
+    key: country.iso,
+    value: country.iso,
+    title: country.name
+  })));
+}
+SelectCountry._supportsEufemiaSpacingProps = true;
+export default SelectCountry;
+//# sourceMappingURL=SelectCountry.js.map

package/es/extensions/forms/Field/SelectCountry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCountry.js","names":["React","useContext","Selection","Option","countries","SharedContext","SelectCountry","props","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","createElement","map","country","key","iso","value","title","name","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/SelectCountry.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport Selection, { Props as SelectionProps } from './Selection'\nimport Option from './Option'\nimport countries from '../constants/countries'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  return (\n    <Selection {...selectComponentProps}>\n      {countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.name}\n        />\n      ))}\n    </Selection>\n  )\n}\n\nSelectCountry._supportsEufemiaSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAmC,aAAa;AAChE,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,aAAa,MAAM,yBAAyB;AAInD,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,aAAa,GAAGP,UAAU,CAACI,aAAa,CAAC;EAE/C,MAAMI,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BH,KAAK;IACRI,WAAW,EACTJ,KAAK,CAACI,WAAW,KACjBH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,EACHR,KAAK,CAACQ,KAAK,KAAIP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1DZ,KAAK,CAACU,aAAa;EACvB,EACF;EAED,OACEjB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,EAAKO,oBAAoB,EAChCL,SAAS,CAACiB,GAAG,CAAEC,OAAO,IACrBtB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IACLoB,GAAG,EAAED,OAAO,CAACE,GAAI;IACjBC,KAAK,EAAEH,OAAO,CAACE,GAAI;IACnBE,KAAK,EAAEJ,OAAO,CAACK;EAAK,CACrB,CACF,CACQ,CAAC;AAEhB;AAEArB,aAAa,CAACsB,4BAA4B,GAAG,IAAI;AACjD,eAAetB,aAAa"}

package/es/extensions/forms/Field/Selection.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ComponentProps } from '../component-types';
+import type { FieldProps } from '../field-types';
+export type Props = ComponentProps & FieldProps<string | number> & {
+    children?: React.ReactNode;
+    variant?: 'dropdown' | 'radio' | 'checkbox';
+    width?: false | 'medium' | 'large' | 'stretch';
+};
+declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Selection {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default Selection;

package/es/extensions/forms/Field/Selection.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _em;
+import React, { useCallback } from 'react';
+import { Div } from '../../../elements';
+import { Dropdown, Radio, Checkbox } from '../../../components';
+import classnames from 'classnames';
+import { forwardSpaceProps } from '../utils';
+import Option from './Option';
+import { useField } from './hooks';
+function Selection(props) {
+  const {
+    className,
+    variant,
+    label,
+    layout = 'vertical',
+    placeholder,
+    value,
+    error,
+    disabled,
+    emptyValue,
+    width = 'large',
+    onBlur,
+    onFocus,
+    onChange,
+    children
+  } = useField(props);
+  const handleDropdownChange = useCallback(({
+    data: {
+      selected_key
+    }
+  }) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(!selected_key ? emptyValue : selected_key);
+  }, [onChange, emptyValue]);
+  const handleRadioChange = useCallback(({
+    value
+  }) => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value === undefined ? emptyValue : value);
+  }, [onChange, emptyValue]);
+  const handleHide = useCallback(({
+    data
+  }) => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      onBlurValue: data === null || data === void 0 ? void 0 : data.selected_key
+    });
+  }, [onBlur]);
+  switch (variant) {
+    case 'checkbox':
+      return React.createElement(Div, _extends({
+        className: classnames('dnb-forms-field-selection', className)
+      }, forwardSpaceProps(props)), React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map((child, i) => React.createElement(Checkbox, {
+        key: child.props.value ?? `option-${i}`,
+        label: child.props.title ?? child.props.children,
+        value: String(child.props.value ?? '')
+      })));
+    case 'radio':
+      return React.createElement(Radio.Group, _extends({
+        className: classnames('dnb-forms-field-selection', className),
+        label: label,
+        layout_direction: "column",
+        on_change: handleRadioChange
+      }, forwardSpaceProps(props), {
+        vertical: true
+      }), React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map((child, i) => React.createElement(Radio, {
+        key: child.props.value ?? `option-${i}`,
+        label: child.props.title ?? child.props.children,
+        value: String(child.props.value ?? '')
+      })));
+    default:
+    case 'dropdown':
+      {
+        const data = React.Children.map(children, child => {
+          if (React.isValidElement(child) && child.type === Option) {
+            return child.props.text ? {
+              selected_key: String(child.props.value ?? ''),
+              content: [child.props.title ?? child.props.children ?? (_em || (_em = React.createElement("em", null, "Untitled"))), child.props.text]
+            } : {
+              selected_key: child.props.value,
+              content: child.props.title ?? child.props.children
+            };
+          }
+          return {
+            content: child
+          };
+        });
+        return React.createElement(Dropdown, _extends({
+          className: classnames('dnb-forms-field-selection', className, width !== false && width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
+          list_class: "dnb-forms-field-selection__list",
+          portal_class: "dnb-forms-field-selection__portal",
+          title: placeholder,
+          default_value: String(value ?? ''),
+          label: label,
+          label_direction: layout,
+          status: error === null || error === void 0 ? void 0 : error.message,
+          disabled: disabled,
+          data: data,
+          on_change: handleDropdownChange,
+          on_show: onFocus,
+          on_hide: handleHide
+        }, forwardSpaceProps(props), {
+          stretch: width === 'stretch'
+        }));
+      }
+  }
+}
+Selection._supportsEufemiaSpacingProps = true;
+export default Selection;
+//# sourceMappingURL=Selection.js.map

package/es/extensions/forms/Field/Selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","data","selected_key","handleRadioChange","undefined","handleHide","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'checkbox'\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const {\n    className,\n    variant,\n    label,\n    layout = 'vertical',\n    placeholder,\n    value,\n    error,\n    disabled,\n    emptyValue,\n    width = 'large',\n    onBlur,\n    onFocus,\n    onChange,\n    children,\n  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      onChange?.(!selected_key ? emptyValue : selected_key)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      onChange?.(value === undefined ? emptyValue : value)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n      onBlur?.({ onBlurValue: data?.selected_key })\n    },\n    [onBlur]\n  )\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <Div\n          className={classnames('dnb-forms-field-selection', className)}\n          {...forwardSpaceProps(props)}\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Checkbox\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Div>\n      )\n    case 'radio':\n      return (\n        <Radio.Group\n          className={classnames('dnb-forms-field-selection', className)}\n          label={label}\n          layout_direction=\"column\"\n          on_change={handleRadioChange}\n          {...forwardSpaceProps(props)}\n          vertical\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Radio\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Radio.Group>\n      )\n    default:\n    case 'dropdown': {\n      const data = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== false &&\n              width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          default_value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={error?.message}\n          disabled={disabled}\n          data={data}\n          on_change={handleDropdownChange}\n          on_show={onFocus}\n          on_hide={handleHide}\n          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/es/extensions/forms/Field/String.d.ts

@@ -0,0 +1,32 @@
+import { InputProps } from '../../../components/input/Input';
+import { InputMaskedProps } from '../../../components/InputMasked';
+import type { ComponentProps } from '../component-types';
+import type { FieldProps } from '../field-types';
+interface ErrorMessages {
+    required?: string;
+    schema?: string;
+    minLength?: string;
+    maxLength?: string;
+    pattern?: string;
+}
+export type Props = ComponentProps & FieldProps<string, undefined, ErrorMessages> & {
+    inputClassName?: string;
+    type?: InputProps['type'];
+    multiline?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+    clear?: boolean;
+    autoresize?: boolean;
+    autoresizeMaxRows?: number;
+    characterCounter?: boolean;
+    mask?: InputMaskedProps['mask'];
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    width?: false | 'medium' | 'large' | 'stretch';
+};
+declare function StringComponent(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace StringComponent {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default StringComponent;

package/es/extensions/forms/Field/String.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { Input, Textarea } from '../../../components';
+import InputMasked from '../../../components/InputMasked';
+import { forwardSpaceProps } from '../utils';
+import SharedContext from '../../../shared/Context';
+import FieldBlock from '../FieldBlock';
+import { useField } from './hooks';
+function StringComponent(props) {
+  var _props$minLength, _props$maxLength;
+  const sharedContext = useContext(SharedContext);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    errorMessages: _objectSpread({
+      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorRequired,
+      minLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMinLength.replace('{minLength}', (_props$minLength = props.minLength) === null || _props$minLength === void 0 ? void 0 : _props$minLength.toString()),
+      maxLength: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.stringInputErrorMaxLength.replace('{maxLength}', (_props$maxLength = props.maxLength) === null || _props$maxLength === void 0 ? void 0 : _props$maxLength.toString()),
+      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.inputErrorPattern
+    }, props.errorMessages),
+    schema: props.schema ?? {
+      type: 'string',
+      minLength: props.minLength,
+      maxLength: props.maxLength,
+      pattern: props.pattern
+    },
+    fromInput: ({
+      value,
+      cleanedValue
+    }) => {
+      if (value === '') {
+        return props.emptyValue;
+      }
+      return cleanedValue ?? value;
+    },
+    width: props.width ?? 'large'
+  });
+  const {
+    id,
+    className,
+    inputClassName,
+    layout,
+    type,
+    placeholder,
+    label,
+    labelDescription,
+    labelSecondary,
+    value,
+    info,
+    warning,
+    error,
+    disabled,
+    multiline,
+    leftIcon,
+    rightIcon,
+    clear,
+    autoresize = true,
+    autoresizeMaxRows = 6,
+    characterCounter,
+    mask,
+    width,
+    onFocus,
+    onBlur,
+    onChange
+  } = useField(preparedProps);
+  const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
+  const cn = classnames('dnb-forms-field-string__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-string__input--width-${width}`);
+  return React.createElement(FieldBlock, _extends({
+    className: classnames('dnb-forms-field-string', className),
+    forId: id,
+    layout: layout,
+    label: label,
+    labelDescription: labelDescription,
+    labelSecondary: labelSecondary ?? characterCounterElement,
+    info: info,
+    warning: warning,
+    error: error
+  }, forwardSpaceProps(props)), multiline ? React.createElement(Textarea, {
+    id: id,
+    className: cn,
+    placeholder: placeholder,
+    value: value,
+    on_focus: onFocus,
+    on_blur: onBlur,
+    on_change: onChange,
+    autoresize: autoresize,
+    autoresize_max_rows: autoresizeMaxRows,
+    disabled: disabled,
+    stretch: width === 'stretch'
+  }) : mask ? React.createElement(InputMasked, {
+    className: cn,
+    mask: mask,
+    placeholder: placeholder,
+    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
+    icon: leftIcon ?? rightIcon,
+    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
+    on_focus: onFocus,
+    on_blur: onBlur,
+    on_change: onChange,
+    disabled: disabled,
+    stretch: width === 'stretch'
+  }) : React.createElement(Input, {
+    id: id,
+    className: cn,
+    type: type,
+    placeholder: placeholder,
+    value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
+    icon: leftIcon ?? rightIcon,
+    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
+    clear: clear,
+    on_focus: onFocus,
+    on_blur: onBlur,
+    on_change: onChange,
+    disabled: disabled,
+    stretch: width === 'stretch'
+  }));
+}
+StringComponent._supportsEufemiaSpacingProps = true;
+export default StringComponent;
+//# sourceMappingURL=String.js.map

package/es/extensions/forms/Field/String.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.js","names":["React","useContext","classnames","Input","Textarea","InputMasked","forwardSpaceProps","SharedContext","FieldBlock","useField","StringComponent","props","_props$minLength","_props$maxLength","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","inputErrorRequired","minLength","stringInputErrorMinLength","replace","toString","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","type","fromInput","value","cleanedValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","info","warning","error","disabled","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","onFocus","onBlur","onChange","characterCounterElement","length","undefined","cn","createElement","_extends","forId","on_focus","on_blur","on_change","autoresize_max_rows","stretch","icon","icon_position","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/String.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../components'\nimport { InputProps } from '../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../components/InputMasked'\nimport { forwardSpaceProps } from '../utils'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = ComponentProps &\n  FieldProps<string, undefined, ErrorMessages> & {\n    inputClassName?: string\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    clear?: boolean\n    autoresize?: boolean\n    autoresizeMaxRows?: number\n    characterCounter?: boolean\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.inputErrorRequired,\n      minLength:\n        sharedContext?.translation.Forms.stringInputErrorMinLength.replace(\n          '{minLength}',\n          props.minLength?.toString()\n        ),\n      maxLength:\n        sharedContext?.translation.Forms.stringInputErrorMaxLength.replace(\n          '{maxLength}',\n          props.maxLength?.toString()\n        ),\n      pattern: sharedContext?.translation.Forms.inputErrorPattern,\n      ...props.errorMessages,\n    },\n    schema: props.schema ?? {\n      type: 'string',\n      minLength: props.minLength,\n      maxLength: props.maxLength,\n      pattern: props.pattern,\n    },\n    fromInput: ({\n      value,\n      cleanedValue,\n    }: {\n      value: string\n      cleanedValue: string\n    }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return cleanedValue ?? value\n    },\n    width: props.width ?? 'large',\n  }\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  const characterCounterElement = characterCounter\n    ? props.maxLength\n      ? `${value?.length ?? '0'}/${props.maxLength}`\n      : `${value?.length ?? '0'}`\n    : undefined\n  const cn = classnames(\n    'dnb-forms-field-string__input',\n    width !== false &&\n      width !== 'stretch' &&\n      `dnb-forms-field-string__input--width-${width}`,\n    inputClassName\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary ?? characterCounterElement}\n      info={info}\n      warning={warning}\n      error={error}\n      {...forwardSpaceProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          id={id}\n          className={cn}\n          placeholder={placeholder}\n          value={value}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          disabled={disabled}\n          stretch={width === 'stretch'}\n        />\n      ) : mask ? (\n        <InputMasked\n          className={cn}\n          mask={mask}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width === 'stretch'}\n        />\n      ) : (\n        <Input\n          id={id}\n          className={cn}\n          type={type}\n          placeholder={placeholder}\n          value={value?.toString() ?? ''}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n          on_focus={onFocus}\n          on_blur={onBlur}\n          on_change={onChange}\n          disabled={disabled}\n          stretch={width === 'stretch'}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsEufemiaSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/Toggle.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from '../component-types';
+import type { FieldProps } from '../field-types';
+export type Props = ComponentProps & FieldProps<unknown> & {
+    valueOn: unknown;
+    valueOff: unknown;
+    variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons';
+    textOn?: string;
+    textOff?: string;
+};
+declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Toggle {
+    var _supportsEufemiaSpacingProps: boolean;
+}
+export default Toggle;