@citygross/components 0.8.163 → 0.8.164

package/build/@types/components/CgButton/ButtonAsLink/ButtonAsLink.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare type TButtonAsLink = {
     children: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const ButtonAsLink: ({ children, ...props }: TButtonAsLink) => JSX.Element;
+export declare const ButtonAsLink: ({ children, type, ...props }: TButtonAsLink) => JSX.Element;

package/build/@types/components/CgButton/CgButton.styles.d.ts

@@ -1,7 +1,10 @@
+import { TChildrenContainer } from './CgButton.types';
 export declare const ButtonStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
     sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
     variantAttributes: import("./CgButton.types").TButtonVariantAttributes;
 }, never>;
+export declare const ChildrenContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TChildrenContainer, never>;
+export declare const SpinnerContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const DivAsButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
     sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
     variantAttributes: import("./CgButton.types").TButtonVariantAttributes;

package/build/@types/components/CgButton/CgButton.types.d.ts

@@ -42,3 +42,4 @@ export declare type TButtonVariantAttributes = {
     border?: boolean;
     fontColor?: string;
 };
+export declare type TChildrenContainer = Pick<TCgButtonRoot, 'loading'>;

package/build/@types/components/FormElements/FormElement.styles.d.ts

@@ -9,4 +9,5 @@ declare type TOptionInputWrapper = {
 };
 export declare const OptionInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputWrapper, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const HiddenLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js

@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ButtonAsLink = function (_a) {
-    var children = _a.children, props = _tslib.__rest(_a, ["children"]);
-    return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({}, props), children));
+    var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = _tslib.__rest(_a, ["children", "type"]);
+    return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({ type: type }, props), children));
 };
 
 exports.ButtonAsLink = ButtonAsLink;

package/build/cjs/components/src/components/CgButton/CgButton.js

@@ -18,7 +18,10 @@ var CgButton = React.forwardRef(function (_a, ref) {
     var _b;
     var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "type", "variant"]);
     var _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
-    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props), loading ? (React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })) : (children)));
+    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
+        React__default["default"].createElement(CgButton_styles.ChildrenContainer, { loading: loading }, children),
+        loading && (React__default["default"].createElement(CgButton_styles.SpinnerContainer, null,
+            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
 });
 CgButton.displayName = 'CgButton';
 

package/build/cjs/components/src/components/CgButton/CgButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/CgButton/CgButton.styles.js

@@ -72,7 +72,7 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
     var variantAttributes = _a.variantAttributes;
     return variantAttributes.backgroundActive;
 }, global_styles.focusVisible);
-var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), sharedButtonStyles, function (_a) {
+var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n  position: relative;\n\n  svg {\n    display: block;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n  position: relative;\n\n  svg {\n    display: block;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), sharedButtonStyles, function (_a) {
     var variantAttributes = _a.variantAttributes;
     return variantAttributes.backgroundDisabled;
 }, function (_a) {
@@ -80,9 +80,16 @@ var ButtonStyle = styled__default["default"].button(templateObject_2 || (templat
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
 });
-var DivAsButton = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
-var templateObject_1, templateObject_2, templateObject_3;
+var ChildrenContainer = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  opacity: ", ";\n"], ["\n  opacity: ", ";\n"])), function (_a) {
+    var loading = _a.loading;
+    return (loading ? 0 : 1);
+});
+var SpinnerContainer = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+var DivAsButton = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.ButtonStyle = ButtonStyle;
+exports.ChildrenContainer = ChildrenContainer;
 exports.DivAsButton = DivAsButton;
+exports.SpinnerContainer = SpinnerContainer;
 //# sourceMappingURL=CgButton.styles.js.map

package/build/cjs/components/src/components/CgButton/CgButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/FormElement.styles.js

@@ -102,11 +102,14 @@ var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (tem
     var theme = _a.theme;
     return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.focusVisible;
 });
-var HiddenInput = styled__default["default"].input(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"], ["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var hiddenStyles = styled.css(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"], ["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"])));
+var HiddenInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hiddenStyles);
+var HiddenLabel = styled__default["default"].label(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hiddenStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
 exports.ErrorLabel = ErrorLabel;
 exports.HiddenInput = HiddenInput;
+exports.HiddenLabel = HiddenLabel;
 exports.Label = Label;
 exports.OptionInputWrapper = OptionInputWrapper;
 exports.Wrapper = Wrapper;

package/build/cjs/components/src/components/FormElements/FormElement.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/FormElements/Input/Input.js

@@ -7,7 +7,6 @@ var React = require('react');
 var designTokens = require('@citygross/design-tokens');
 var typography = require('@citygross/typography');
 var formElement = require('../../../helpers/form-element.js');
-var ScreenReader = require('../../ScreenReader/ScreenReader.js');
 var FormElement_styles = require('../FormElement.styles.js');
 var Input_styles = require('./Input.styles.js');
 var FormElement_types = require('../FormElement.types.js');
@@ -23,9 +22,9 @@ var Input = function (_a) {
     var sizeAttributes = formElement.getSizeAttributes(size);
     var errorId = "".concat(id, "-error");
     return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
-        React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id }, hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(React.Fragment, null,
+        hideLabel ? (React__default["default"].createElement(FormElement_styles.HiddenLabel, { htmlFor: id }, label)) : (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
             label,
-            required ? ' *' : ''))),
+            required ? ' *' : '')),
         React__default["default"].createElement(Input_styles.InputWrapper, null,
             React__default["default"].createElement(Input_styles.InputContainer, { fullWidth: fullWidth },
                 elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),

package/build/cjs/components/src/components/FormElements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { ButtonAsLink as ButtonAsLink$1 } from './ButtonAsLink.styles.js';
 
 var ButtonAsLink = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement(ButtonAsLink$1, __assign({}, props), children));
+    var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = __rest(_a, ["children", "type"]);
+    return (React.createElement(ButtonAsLink$1, __assign({ type: type }, props), children));
 };
 
 export { ButtonAsLink };

package/build/es/components/src/components/CgButton/CgButton.js

@@ -1,6 +1,6 @@
 import { __rest, __assign } from '../../../../_virtual/_tslib.js';
 import React, { forwardRef } from 'react';
-import { ButtonStyle } from './CgButton.styles.js';
+import { ButtonStyle, ChildrenContainer, SpinnerContainer } from './CgButton.styles.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { EButtonSize, EButtonVariant } from './CgButton.types.js';
 import { getButtonAttributes } from '../../helpers/button.js';
@@ -10,7 +10,10 @@ var CgButton = forwardRef(function (_a, ref) {
     var _b;
     var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? EButtonVariant.primary : _e, props = __rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "type", "variant"]);
     var _f = getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
-    return (React.createElement(ButtonStyle, __assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props), loading ? (React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })) : (children)));
+    return (React.createElement(ButtonStyle, __assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
+        React.createElement(ChildrenContainer, { loading: loading }, children),
+        loading && (React.createElement(SpinnerContainer, null,
+            React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
 });
 CgButton.displayName = 'CgButton';
 

package/build/es/components/src/components/CgButton/CgButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CgButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/CgButton/CgButton.styles.js

@@ -64,7 +64,7 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
     var variantAttributes = _a.variantAttributes;
     return variantAttributes.backgroundActive;
 }, focusVisible);
-var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), sharedButtonStyles, function (_a) {
+var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n  position: relative;\n\n  svg {\n    display: block;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n  position: relative;\n\n  svg {\n    display: block;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), sharedButtonStyles, function (_a) {
     var variantAttributes = _a.variantAttributes;
     return variantAttributes.backgroundDisabled;
 }, function (_a) {
@@ -72,8 +72,13 @@ var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTe
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder;
 });
-var DivAsButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
-var templateObject_1, templateObject_2, templateObject_3;
+var ChildrenContainer = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: ", ";\n"], ["\n  opacity: ", ";\n"])), function (_a) {
+    var loading = _a.loading;
+    return (loading ? 0 : 1);
+});
+var SpinnerContainer = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
+var DivAsButton = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { ButtonStyle, DivAsButton };
+export { ButtonStyle, ChildrenContainer, DivAsButton, SpinnerContainer };
 //# sourceMappingURL=CgButton.styles.js.map

package/build/es/components/src/components/CgButton/CgButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CgButton.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/FormElements/FormElement.styles.js

@@ -94,8 +94,10 @@ var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __ma
     var theme = _a.theme;
     return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.focusVisible;
 });
-var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"], ["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var hiddenStyles = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"], ["\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n"])));
+var HiddenInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hiddenStyles);
+var HiddenLabel = styled.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), hiddenStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
-export { ErrorLabel, HiddenInput, Label, OptionInputWrapper, Wrapper, sharedFormElementStyles };
+export { ErrorLabel, HiddenInput, HiddenLabel, Label, OptionInputWrapper, Wrapper, sharedFormElementStyles };
 //# sourceMappingURL=FormElement.styles.js.map

package/build/es/components/src/components/FormElements/FormElement.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormElement.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/FormElements/Input/Input.js

@@ -1,10 +1,9 @@
 import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { theme } from '@citygross/design-tokens';
 import { BodyText } from '@citygross/typography';
 import { getSizeAttributes } from '../../../helpers/form-element.js';
-import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
-import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
+import { Wrapper, HiddenLabel, Label, ErrorLabel } from '../FormElement.styles.js';
 import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
 import { EFormElementSize } from '../FormElement.types.js';
 
@@ -15,9 +14,9 @@ var Input = function (_a) {
     var sizeAttributes = getSizeAttributes(size);
     var errorId = "".concat(id, "-error");
     return (React.createElement(Wrapper, null,
-        React.createElement(Label, { htmlFor: id }, hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(Fragment, null,
+        hideLabel ? (React.createElement(HiddenLabel, { htmlFor: id }, label)) : (React.createElement(Label, { htmlFor: id },
             label,
-            required ? ' *' : ''))),
+            required ? ' *' : '')),
         React.createElement(InputWrapper, null,
             React.createElement(InputContainer, { fullWidth: fullWidth },
                 elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),

package/build/es/components/src/components/FormElements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.163",
+  "version": "0.8.164",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "1dfab1a2f0154c620a1e874a5a9b9be9d64f1028"
+  "gitHead": "2ceba690548259d29b0271499880d6f8614a8764"
 }