@vodafone_de/brix-components 3.1.6 → 3.1.8

package/components/Image/props.d.ts

@@ -0,0 +1,61 @@
+import { ImgHTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { CornerStyle } from '../../foundations/types/CornerStyle';
+export declare const objectFitContain = "contain";
+export declare const objectFitCover = "cover";
+export declare const objectFitNone = "none";
+export type ImageObjectFit = typeof objectFitContain | typeof objectFitCover | typeof objectFitNone;
+export declare const horizontalAlignmentLeft = "left";
+export declare const horizontalAlignmentRight = "right";
+export declare const horizontalAlignmentCenter = "center";
+export type ImageAlignment = typeof horizontalAlignmentLeft | typeof horizontalAlignmentRight | typeof horizontalAlignmentCenter;
+export declare const objectPositionCenter = "center";
+export declare const objectPositionLeftTop = "top left";
+export declare const objectPositionLeftCenter = "center left";
+export declare const objectPositionLeftBottom = "bottom left";
+export declare const objectPositionRightTop = "top right";
+export declare const objectPositionRightCenter = "center right";
+export declare const objectPositionRightBottom = "bottom right";
+export type ImageObjectPosition = typeof objectPositionCenter | typeof objectPositionLeftTop | typeof objectPositionLeftCenter | typeof objectPositionLeftBottom | typeof objectPositionRightTop | typeof objectPositionRightCenter | typeof objectPositionRightBottom;
+export declare const aspectRatio1_1 = "1/1";
+export declare const aspectRatio3_4 = "3/4";
+export declare const aspectRatio16_9 = "16/9";
+export declare const aspectRatio21_9 = "21/9";
+export declare const aspectRatio32_9 = "32/9";
+export declare const aspectRatio48_9 = "48/9";
+export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio3_4 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
+export interface ImageProps extends PatternProps, ImgHTMLAttributes<HTMLImageElement & HTMLSourceElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Image';
+    /**
+     * Object-fit variations
+     */
+    objectFit?: ImageObjectFit;
+    /**
+     * objectPosition can be used for fine-tuning if the aspect ratio of the asset
+     * does not match the aspect ratio for the component in the layout 100%.
+     */
+    objectPosition?: ImageObjectPosition;
+    /**
+     * Horizontal alignment of image inside its container
+     */
+    horizontalAlignment?: ImageAlignment;
+    /**
+     * Corner variations
+     */
+    corners?: CornerStyle;
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alternative description of image. Leave empty to mark image as decorative and hidden for screen readers.
+     */
+    alt?: string;
+    /**
+     * Image aspect-ratio
+     */
+    aspectRatio: AspectRatio;
+}

package/components/Image/styled.d.ts

@@ -0,0 +1,2 @@
+import { ImageProps } from './props';
+export declare const ImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageProps>> & string;

package/components/ImageHeader/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ImageHeaderProps } from './props';
+declare const ImageHeader: FC<ImageHeaderProps>;
+export default ImageHeader;
+export * from './props';

package/components/ImageHeader/index.js

@@ -0,0 +1,262 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const components_Body = require("../Body/index.js");
+const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const SizeTypes = require("../../SizeTypes-CoZ2p2qq.cjs");
+const components_RichText = require("../../index-DORk60LP.cjs");
+const components_Button = require("../Button/index.js");
+const components_Container = require("../Container/index.js");
+const components_Heading = require("../Heading/index.js");
+const components_Price = require("../../index-BxxkHUxs.cjs");
+const styled = require("styled-components");
+const components_Badge = require("../../index-CnLaY-bi.cjs");
+const components_ButtonGroup = require("../ButtonGroup/index.js");
+const components_Grid = require("../Grid/index.js");
+const components_GridItem = require("../GridItem/index.js");
+const components_ResponsiveImage = require("../ResponsiveImage/index.js");
+const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
+const foundations_token_getBackgroundColor = require("../../foundations/token/getBackgroundColor/index.js");
+const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const BackgroundColor = require("../../BackgroundColor-C3dayRDw.cjs");
+const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
+const styled$1 = require("../../styled-CL1J-PFC.cjs");
+const imageHeaderVariantFull = "full";
+const imageHeaderVariantSplit = "split";
+const imageHeaderPositionRight = "right";
+const imageHeaderPositionLeft = "left";
+const getBadgeTopPosition = () => {
+  return `calc(-0.5 * (${foundations_token_getSpacing.getSpacing(Spacing.spacing2Xs)} * 2 + ${foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd).fontSize} * ${foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd).lineHeight}))`;
+};
+const ImageHeaderStyled = styled(components_Grid).withConfig({
+  displayName: "ImageHeaderStyled",
+  componentId: "sc-7ig3h-0"
+})({
+  alignItems: "center",
+  position: "relative",
+  marginRight: `calc(-1 * ${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)})`,
+  marginLeft: `calc(-1 * ${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)})`,
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    width: "100%",
+    margin: "0 auto"
+  })
+}, ({
+  position,
+  variant
+}) => ({
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    flexDirection: position === imageHeaderPositionRight ? "row" : "row-reverse",
+    ...variant === imageHeaderVariantFull && position === imageHeaderPositionRight && {
+      justifyContent: "flex-end"
+    }
+  })
+}));
+const ImageHeaderImagesContainerStyled = styled(components_GridItem).withConfig({
+  displayName: "ImageHeaderImagesContainerStyled",
+  componentId: "sc-7ig3h-1"
+})({
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    flexGrow: "1",
+    width: "auto"
+  })
+}, ({
+  variant,
+  position
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    const marginSide = position === imageHeaderPositionRight ? "marginLeft" : "marginRight";
+    return {
+      ...foundations_mediaQuery_viewport.viewport.lg({
+        [marginSide]: "calc(-1*(100vw - 100%) / 2)"
+      })
+    };
+  }
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      ...foundations_mediaQuery_viewport.viewport.lg({
+        flexBasis: "100%",
+        alignItems: "center",
+        marginRight: "calc(-1 * (100vw - 100%) / 2)",
+        marginLeft: "calc(-1 * (100vw - 100%) / 2)"
+      })
+    };
+  }
+});
+const ImageHeaderResponsiveImageStyled = styled(components_ResponsiveImage).withConfig({
+  displayName: "ImageHeaderResponsiveImageStyled",
+  componentId: "sc-7ig3h-2"
+})({
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    width: "100%"
+  }),
+  img: {
+    ...foundations_mediaQuery_viewport.viewport.lg({
+      height: "450px"
+    })
+  }
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      img: {
+        minHeight: "450px",
+        ...foundations_mediaQuery_viewport.viewport.lg({
+          minHeight: "unset"
+        })
+      }
+    };
+  }
+}, ({
+  position,
+  variant
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    return {
+      img: {
+        ...foundations_mediaQuery_viewport.viewport.lg({
+          objectPosition: `${position === imageHeaderPositionLeft ? imageHeaderPositionLeft : imageHeaderPositionRight} center`
+        })
+      }
+    };
+  }
+});
+const ImageHeaderContentStyled = styled(components_GridItem).withConfig({
+  displayName: "ImageHeaderContentStyled",
+  componentId: "sc-7ig3h-3"
+})({
+  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXl)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)}`,
+  gap: foundations_token_getSpacing.getSpacing(Spacing.spacingSm),
+  alignItems: "center",
+  position: "relative",
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    alignItems: "flex-start",
+    padding: 0
+  })
+}, ({
+  variant,
+  position,
+  contentGridDesktopColumns = 6
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      width: "100%",
+      position: "absolute",
+      bottom: 0,
+      background: foundations_token_getBackgroundColor.getBackgroundColor(BackgroundColor.colorBackgroundOverlay),
+      ...foundations_mediaQuery_viewport.viewport.lg({
+        width: `${100 / (12 / contentGridDesktopColumns)}%`,
+        background: "none",
+        bottom: "auto",
+        justifyContent: "center"
+      })
+    };
+  }
+  if (variant === imageHeaderVariantSplit) {
+    const paddingSide = position === imageHeaderPositionRight ? "paddingLeft" : "paddingRight";
+    return {
+      ...foundations_mediaQuery_viewport.viewport.lg({
+        [paddingSide]: foundations_token_getSpacing.getSpacing(Spacing.spacingMd)
+      })
+    };
+  }
+});
+const ImageHeaderBadgeStyled = styled(components_Badge.Badge).withConfig({
+  displayName: "ImageHeaderBadgeStyled",
+  componentId: "sc-7ig3h-4"
+})({
+  position: "absolute",
+  top: getBadgeTopPosition(),
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    position: "static",
+    top: 0
+  })
+});
+const ImageHeaderHeadingStyled = styled(components_Heading.default).withConfig({
+  displayName: "ImageHeaderHeadingStyled",
+  componentId: "sc-7ig3h-5"
+})({
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    textAlign: "left"
+  })
+});
+const ImageHeaderButtonGroupStyled = styled(components_ButtonGroup).withConfig({
+  displayName: "ImageHeaderButtonGroupStyled",
+  componentId: "sc-7ig3h-6"
+})({
+  marginTop: foundations_token_getSpacing.getSpacing(Spacing.spacingXs),
+  width: "100%",
+  justifyContent: "center",
+  ...foundations_mediaQuery_viewport.viewport.lg({
+    justifyContent: "flex-start"
+  })
+}, ({
+  orientation
+}) => styled$1.flexOrientationVertical === orientation ? foundations_mediaQuery_viewport.viewport.md({
+  width: "auto"
+}) : {});
+const ImageHeader = ({
+  responsiveImage,
+  badge,
+  heading,
+  subline,
+  price,
+  action,
+  variant = imageHeaderVariantSplit,
+  position = imageHeaderPositionLeft,
+  contentGridDesktopColumns = 6,
+  theme,
+  ...props
+}) => {
+  const headingId = `heading-${components_RichText.getUid()}`;
+  const getSubline = (subline2) => {
+    if (!subline2) return null;
+    const commonProps = {
+      key: subline2.uid,
+      bottomSpacing: Spacing.spacingNone
+    };
+    switch (subline2.component) {
+      case "Heading":
+        return /* @__PURE__ */ jsxRuntime.jsx(components_Heading.default, { ...subline2, ...commonProps, size: "md", tag: "div" });
+      case "RichText":
+        return /* @__PURE__ */ jsxRuntime.jsx(components_RichText.RichText, { ...subline2, ...commonProps });
+      case "Body":
+        return /* @__PURE__ */ jsxRuntime.jsx(components_Body.default, { ...subline2, ...commonProps, size: "sm" });
+      default:
+        return null;
+    }
+  };
+  const getAction = (action2) => {
+    if (!action2) return null;
+    switch (action2.component) {
+      case "Button":
+      case "ButtonAsLink":
+        return /* @__PURE__ */ jsxRuntime.jsx(components_Button.default, { ...action2, bottomSpacing: Spacing.spacingNone });
+      case "ButtonGroup":
+        return /* @__PURE__ */ jsxRuntime.jsx(ImageHeaderButtonGroupStyled, { ...action2, bottomSpacing: Spacing.spacingNone });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(components_Container.default, { padding: "None", className: props.className, children: /* @__PURE__ */ jsxRuntime.jsxs(ImageHeaderStyled, { ...props, position, variant, spacing: Spacing.spacingNone, component: "Grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, position, lg: 12 - contentGridDesktopColumns, children: /* @__PURE__ */ jsxRuntime.jsx(ImageHeaderResponsiveImageStyled, { images: responsiveImage.images, variant, position, bottomSpacing: Spacing.spacingNone }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ImageHeaderContentStyled, { variant, position, contentGridDesktopColumns, lg: contentGridDesktopColumns, className: "Dark" === theme ? " Dark" : "", children: [
+      badge && /* @__PURE__ */ jsxRuntime.jsx(ImageHeaderBadgeStyled, { ...badge, size: SizeTypes.mediumSize, bottomSpacing: Spacing.spacingNone }),
+      /* @__PURE__ */ jsxRuntime.jsx(ImageHeaderHeadingStyled, { ...heading, id: headingId, align: components_Heading.headingAlignCenter, weight: FontWeight.fontWeightLight, bottomSpacing: Spacing.spacingNone }),
+      getSubline(subline),
+      price && /* @__PURE__ */ jsxRuntime.jsx(components_Price.Price, { ...price, size: components_Price.priceSizeSm, bottomSpacing: Spacing.spacingNone }),
+      getAction(action)
+    ] })
+  ] }) });
+};
+exports.default = ImageHeader;
+exports.imageHeaderPositionLeft = imageHeaderPositionLeft;
+exports.imageHeaderPositionRight = imageHeaderPositionRight;
+exports.imageHeaderVariantFull = imageHeaderVariantFull;
+exports.imageHeaderVariantSplit = imageHeaderVariantSplit;

package/components/ImageHeader/props.d.ts

@@ -0,0 +1,69 @@
+import { HTMLAttributes } from 'react';
+import { BadgeProps } from '../Badge/props';
+import { HeadingProps } from '../Heading/props';
+import { PatternProps } from '../../foundations/PatternProps';
+import { Theme } from '../../foundations/types/Theme';
+import { BodyProps } from '../Body/props';
+import { ButtonProps } from '../Button/props';
+import { ButtonAsLinkProps } from '../ButtonAsLink/props';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { GridColSpan } from '../Grid/props';
+import { PriceProps } from '../Price/props';
+import { ResponsiveImageProps } from '../ResponsiveImage/props';
+import { RichTextProps } from '../RichText/props';
+export declare const imageHeaderVariantFull = "full";
+export declare const imageHeaderVariantSplit = "split";
+export declare const imageHeaderPositionRight = "right";
+export declare const imageHeaderPositionLeft = "left";
+export type ImageHeaderVariant = typeof imageHeaderVariantFull | typeof imageHeaderVariantSplit;
+export type ImageHeaderPosition = typeof imageHeaderPositionRight | typeof imageHeaderPositionLeft;
+export type AllowedHeadingSizes = 'lg' | 'xl';
+export interface RestrictedHeadingProps extends Omit<HeadingProps, 'bottomSpacing' | 'weight' | 'aligh' | 'size'> {
+    size: AllowedHeadingSizes;
+}
+export interface ImageHeaderProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ImageHeader';
+    /**
+     * Image header images for each viewport
+     */
+    responsiveImage: ResponsiveImageProps;
+    /**
+     * Badge
+     */
+    badge?: Omit<BadgeProps, 'size'>;
+    /**
+     * Heading
+     */
+    heading: RestrictedHeadingProps;
+    /**
+     * Subline
+     */
+    subline?: Omit<BodyProps, 'size' | 'bottomSpacing'> | Omit<HeadingProps, 'size' | 'bottomSpacing' | 'tag'> | Omit<RichTextProps, 'size' | 'bottomSpacing'>;
+    /**
+     * Price
+     */
+    price?: Omit<PriceProps, 'size' | 'bottomSpacing'>;
+    /**
+     * Action | Button, ButtonAsLink or ButtonGroup
+     */
+    action?: ButtonProps | ButtonAsLinkProps | ButtonGroupProps;
+    /**
+     * Image Header Variant
+     */
+    variant?: ImageHeaderVariant;
+    /**
+     * Image Header Content aligned on the right or left
+     */
+    position?: ImageHeaderPosition;
+    /**
+     * Grid config for content block in desktop viewport
+     */
+    contentGridDesktopColumns?: GridColSpan;
+    /**
+     * Theme - Dark or light
+     */
+    theme?: Theme;
+}

package/components/ImageHeader/styled.d.ts

@@ -0,0 +1,9 @@
+import { ImageHeaderProps } from './props';
+export declare const getBadgeTopPosition: () => string;
+export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderBadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Badge').BadgeProps, never>> & string & Omit<import('react').FC<import('../Badge').BadgeProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Heading').HeadingProps, never>> & string & Omit<import('react').FC<import('../Heading').HeadingProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never>> & string & Omit<import('react').FC<import('../ButtonGroup').ButtonGroupProps>, keyof import('react').Component<any, {}, any>>;

package/components/InlineLink/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { InlineLinkProps } from './props';
+declare const InlineLink: FC<InlineLinkProps>;
+export default InlineLink;
+export * from './props';

package/components/InlineLink/index.js

@@ -0,0 +1,42 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styled = require("styled-components");
+const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
+const easing = require("../../easing-CWOuUocw.cjs");
+const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
+const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
+const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
+const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
+const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
+const TextColor = require("../../TextColor-BZDXH1wP.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const hover = {
+  textDecoration: "none",
+  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextBrand)
+};
+const InlineLinkStyled = styled.a.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "InlineLinkStyled",
+  componentId: "sc-ztdjf-0"
+})({
+  cursor: "pointer",
+  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral),
+  textDecoration: "underline",
+  transition: `color 0.2s ${easing.ease_in_sine}`,
+  verticalAlign: "baseline",
+  "&:focus-visible": {
+    ...foundations_mediaQuery_forcedColors.default({
+      outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
+    }),
+    boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}`,
+    outline: "none",
+    ...hover
+  },
+  "&:visited": {
+    color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral)
+  },
+  "&:hover": hover
+});
+const InlineLink = (props) => /* @__PURE__ */ jsxRuntime.jsx(InlineLinkStyled, { ...props, children: props.children });
+module.exports = InlineLink;

package/components/InlineLink/props.d.ts

@@ -0,0 +1,16 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface InlineLinkProps extends Omit<PatternProps, 'bottomSpacing'>, AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'InlineLink';
+    /**
+     * InlineLink has mandatory children
+     */
+    children: ReactNode;
+    /**
+     * href is mandatory
+     */
+    href: string;
+}

package/components/InlineLink/styled.d.ts

@@ -0,0 +1,2 @@
+import { InlineLinkProps } from './props';
+export declare const InlineLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, InlineLinkProps>> & string;

package/components/Input/index.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from './props';
+/**
+ * I left forwardRef which was introduced by Hotel
+ * I'm not 100% sure if that is needed
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;
+export * from './props';

package/components/Input/index.js

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const components_FormElement = require("../FormElement/index.js");
+const components_FormHelperLabel = require("../FormHelperLabel/index.js");
+const components_FormHelperMessage = require("../FormHelperMessage/index.js");
+const components_FormHelperStatusIcon = require("../FormHelperStatusIcon/index.js");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const props = require("../../props-DJ2g0nfk.cjs");
+const styled = require("../../styled-rjPMMnSd.cjs");
+const Input = react.forwardRef(({
+  uid,
+  status,
+  helperText,
+  errorMessage,
+  label,
+  onUpdate,
+  type = "text",
+  bottomSpacing = Spacing.spacingMd,
+  placeholder,
+  ...props$1
+}, ref) => {
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props$1,
+    id: uid,
+    type,
+    "aria-describedby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? messageId : props$1["aria-describedby"],
+    "aria-invalid": props.inputStateError === status ? true : void 0
+  };
+  const onChange = (event) => {
+    if (props$1.onChange) {
+      props$1.onChange(event);
+    }
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(components_FormElement, { bottomSpacing, disabled: props$1.disabled, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.InputWrapperStyled, { status, bottomSpacing: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? Spacing.spacingXs : void 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(styled.InputStyled, { ...inputProps, placeholder: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(placeholder), ref, onChange }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperStatusIcon.default, { status })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: messageId, status, message: props.inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+exports.inputStateError = props.inputStateError;
+exports.inputStateSuccess = props.inputStateSuccess;
+exports.default = Input;

package/components/Input/props.d.ts

@@ -0,0 +1,48 @@
+import { InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const inputStateSuccess = "success";
+export declare const inputStateError = "error";
+export type InputStatus = typeof inputStateSuccess | typeof inputStateError;
+export interface InputSharedProps extends PatternProps {
+    /**
+     * A unique id is mandatory
+     */
+    uid: string;
+    /**
+     * There are two statii success and error.
+     * Leave status undefined for default input field
+     */
+    status?: InputStatus;
+    /**
+     * Message that appears below the input in error state.
+     */
+    errorMessage?: string;
+    /**
+     * Message that appears below the input in default and success state.
+     */
+    helperText?: string;
+    /**
+     * The Label that appears above the input.
+     */
+    label: string | LabelProps;
+    /**
+     * Indicate if input is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * Indicate if input is required or not
+     */
+    required?: boolean;
+}
+export interface InputProps extends InputSharedProps, InputHTMLAttributes<HTMLInputElement> {
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url';
+    /**
+     * function that is called on every change
+     */
+    onUpdate?: (value: string) => void;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Input';
+}

package/components/Input/styled.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { InputStatus } from './props';
+export declare const InputWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PatternProps & {
+    status?: InputStatus;
+}>> & string;
+export declare const InputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputHTMLAttributes<HTMLInputElement>>> & string;

package/components/Label/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { LabelProps } from './props';
+declare const Label: FC<LabelProps>;
+export default Label;
+export * from './props';

package/components/Label/index.js

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const styled = require("styled-components");
+const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const LabelStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "LabelStyled",
+  componentId: "sc-1w6iej7-0"
+})({
+  outline: "none",
+  display: "inline-block"
+}, foundations_token_getBodySize.getBodySize("md"), foundations_token_getBottomSpacing.getBottomSpacing);
+const Label = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(LabelStyled, { ...props, children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(children) });
+module.exports = Label;

package/components/Label/props.d.ts

@@ -0,0 +1,12 @@
+import { LabelHTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface LabelProps extends PatternProps, LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Sets label to disabled by setting to true
+     */
+    disabled?: boolean;
+    /**
+     * Content of Label
+     */
+    children: ReactNode;
+}

package/components/Label/styled.d.ts

@@ -0,0 +1,2 @@
+import { LabelProps } from './props';
+export declare const LabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelProps>> & string;