@mirohq/design-system-base-form 1.2.4 → 2.0.0

package/dist/main.js

@@ -1,12 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var designSystemUseId = require('@mirohq/design-system-use-id');
 var designSystemUtils = require('@mirohq/design-system-utils');
-var designSystemStitches = require('@mirohq/design-system-stitches');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
 
 const FORM_FIELD_STATUS = Object.freeze({
   // the field value is valid
@@ -21,35 +18,33 @@ const FORM_FIELD_STATUS = Object.freeze({
   touched: "touched"
 });
 
-const FormFieldContext = React.createContext({});
+const FormFieldContext = react.createContext({});
 const FormFieldProvider = ({
   children,
   status: customStatus,
   id: customId,
   ...restProps
 }) => {
-  const [status, setStatus] = React.useState(
+  const [status, setStatus] = react.useState(
     customStatus != null ? customStatus : "pristine"
   );
-  const [focused, setFocused] = React.useState(false);
-  const [isFloatingLabel, setIsFloatingLabel] = React.useState(true);
-  const [isHiddenLabel, setIsHiddenLabel] = React.useState(false);
-  const [label, setLabel] = React.useState(null);
-  const shouldUseFloatingLabel = label != null && isFloatingLabel;
+  const [focused, setFocused] = react.useState(false);
+  const [isHiddenLabel, setIsHiddenLabel] = react.useState(false);
+  const [label, setLabel] = react.useState(null);
   const autoId = designSystemUseId.useId();
   const id = customId != null ? customId : autoId;
-  const [messageId, setMessageId] = React.useState("".concat(id, "-message"));
-  const [helperId, setHelperId] = React.useState("".concat(id, "-helper"));
-  const [descriptionId, setDescriptionId] = React.useState("".concat(id, "-description"));
-  const formElementRef = React.useRef(null);
-  const [required, setRequired] = React.useState();
-  const [readOnly, setReadOnly] = React.useState();
-  const [disabled, setDisabled] = React.useState();
-  const [ariaDisabled, setAriaDisabled] = React.useState();
-  const [ariaDescribedBy, setAriaDescribedBy] = React.useState("");
+  const [messageId, setMessageId] = react.useState("".concat(id, "-message"));
+  const [helperId, setHelperId] = react.useState("".concat(id, "-helper"));
+  const [descriptionId, setDescriptionId] = react.useState("".concat(id, "-description"));
+  const formElementRef = react.useRef(null);
+  const [required, setRequired] = react.useState();
+  const [readOnly, setReadOnly] = react.useState();
+  const [disabled, setDisabled] = react.useState();
+  const [ariaDisabled, setAriaDisabled] = react.useState();
+  const [ariaDescribedBy, setAriaDescribedBy] = react.useState("");
   const valid = status === FORM_FIELD_STATUS.valid ? true : status === FORM_FIELD_STATUS.invalid ? false : void 0;
   const ariaInvalid = status === FORM_FIELD_STATUS.invalid ? true : void 0;
-  React.useEffect(() => {
+  react.useEffect(() => {
     const message = document.getElementById(messageId);
     const helper = document.getElementById(helperId);
     const description = document.getElementById(descriptionId);
@@ -78,14 +73,11 @@ const FormFieldProvider = ({
         setStatus,
         focused,
         setFocused,
-        isFloatingLabel,
-        setIsFloatingLabel,
         isHiddenLabel,
         setIsHiddenLabel,
         label,
         setLabel,
         ariaDescribedBy,
-        shouldUseFloatingLabel,
         required,
         setRequired,
         readOnly,
@@ -101,107 +93,9 @@ const FormFieldProvider = ({
     }
   );
 };
-const useFormFieldContext = () => React.useContext(FormFieldContext);
-
-const StyledFloatingLabel = designSystemStitches.styled(designSystemPrimitive.Primitive.label, {
-  transitionProperty: "transform, margin, top, left, font-size",
-  transitionDuration: "200ms",
-  transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  zIndex: 1,
-  pointerEvents: "none",
-  whiteSpace: "nowrap",
-  fontStyle: "normal",
-  lineHeight: 1.5,
-  height: "0.75em",
-  ...designSystemBaseTextField.textFieldStyles.base.placeholder,
-  variants: {
-    floating: {
-      true: {
-        top: "0",
-        transform: "translateY(-50%)",
-        left: "$150",
-        fontSize: "$150",
-        padding: "0 2px",
-        height: "auto",
-        lineHeight: 1,
-        backgroundColor: "$background-neutrals-container"
-      },
-      false: {
-        fontSize: "$200",
-        marginTop: "-1px"
-        // adjust for the input's border
-      }
-    },
-    visuallyHidden: {
-      true: {
-        // todo MDS-1003: replace with shared styles
-        border: "0",
-        clip: "rect(0 0 0 0)",
-        height: "1px",
-        margin: "-1px",
-        overflow: "hidden",
-        padding: "0",
-        position: "absolute",
-        width: "1px"
-      }
-    },
-    size: {
-      medium: {},
-      large: {},
-      "x-large": {}
-    }
-  },
-  compoundVariants: [
-    {
-      size: "medium",
-      floating: false,
-      css: {
-        top: "$50",
-        left: "$100"
-      }
-    },
-    {
-      size: "large",
-      floating: false,
-      css: {
-        top: "$100",
-        left: "$150"
-      }
-    },
-    {
-      size: "x-large",
-      floating: false,
-      css: {
-        top: "$150",
-        // $space$250 does not exist by design but we will force it here
-        left: "calc($200 + $space$50)"
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "large"
-  }
-});
-
-const FloatingLabel = React.forwardRef((props, forwardRef) => {
-  const { isFloatingLabel, isHiddenLabel, formElementId } = useFormFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledFloatingLabel,
-    {
-      htmlFor: formElementId,
-      floating: isFloatingLabel,
-      visuallyHidden: isHiddenLabel,
-      ...props,
-      ref: forwardRef
-    }
-  );
-});
+const useFormFieldContext = () => react.useContext(FormFieldContext);
 
 exports.FORM_FIELD_STATUS = FORM_FIELD_STATUS;
-exports.FloatingLabel = FloatingLabel;
 exports.FormFieldProvider = FormFieldProvider;
 exports.useFormFieldContext = useFormFieldContext;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: FormFieldProviderProps): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  ...textFieldStyles.base.placeholder,\n\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        padding: '0 2px',\n        height: 'auto',\n        lineHeight: 1,\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext","styled","Primitive","textFieldStyles"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: FormFieldProviderProps): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n"],"names":["createContext","useState","useId","useRef","useEffect","ariaDescribedBy","stringAttrValue","jsx","useContext"],"mappings":"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"}

package/dist/module.js

@@ -1,10 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
 import { useId } from '@mirohq/design-system-use-id';
 import { stringAttrValue } from '@mirohq/design-system-utils';
-import { styled } from '@mirohq/design-system-stitches';
-import { Primitive } from '@mirohq/design-system-primitive';
-import { textFieldStyles } from '@mirohq/design-system-base-text-field';
 
 const FORM_FIELD_STATUS = Object.freeze({
   // the field value is valid
@@ -30,10 +27,8 @@ const FormFieldProvider = ({
     customStatus != null ? customStatus : "pristine"
   );
   const [focused, setFocused] = useState(false);
-  const [isFloatingLabel, setIsFloatingLabel] = useState(true);
   const [isHiddenLabel, setIsHiddenLabel] = useState(false);
   const [label, setLabel] = useState(null);
-  const shouldUseFloatingLabel = label != null && isFloatingLabel;
   const autoId = useId();
   const id = customId != null ? customId : autoId;
   const [messageId, setMessageId] = useState("".concat(id, "-message"));
@@ -76,14 +71,11 @@ const FormFieldProvider = ({
         setStatus,
         focused,
         setFocused,
-        isFloatingLabel,
-        setIsFloatingLabel,
         isHiddenLabel,
         setIsHiddenLabel,
         label,
         setLabel,
         ariaDescribedBy,
-        shouldUseFloatingLabel,
         required,
         setRequired,
         readOnly,
@@ -101,102 +93,5 @@ const FormFieldProvider = ({
 };
 const useFormFieldContext = () => useContext(FormFieldContext);
 
-const StyledFloatingLabel = styled(Primitive.label, {
-  transitionProperty: "transform, margin, top, left, font-size",
-  transitionDuration: "200ms",
-  transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  zIndex: 1,
-  pointerEvents: "none",
-  whiteSpace: "nowrap",
-  fontStyle: "normal",
-  lineHeight: 1.5,
-  height: "0.75em",
-  ...textFieldStyles.base.placeholder,
-  variants: {
-    floating: {
-      true: {
-        top: "0",
-        transform: "translateY(-50%)",
-        left: "$150",
-        fontSize: "$150",
-        padding: "0 2px",
-        height: "auto",
-        lineHeight: 1,
-        backgroundColor: "$background-neutrals-container"
-      },
-      false: {
-        fontSize: "$200",
-        marginTop: "-1px"
-        // adjust for the input's border
-      }
-    },
-    visuallyHidden: {
-      true: {
-        // todo MDS-1003: replace with shared styles
-        border: "0",
-        clip: "rect(0 0 0 0)",
-        height: "1px",
-        margin: "-1px",
-        overflow: "hidden",
-        padding: "0",
-        position: "absolute",
-        width: "1px"
-      }
-    },
-    size: {
-      medium: {},
-      large: {},
-      "x-large": {}
-    }
-  },
-  compoundVariants: [
-    {
-      size: "medium",
-      floating: false,
-      css: {
-        top: "$50",
-        left: "$100"
-      }
-    },
-    {
-      size: "large",
-      floating: false,
-      css: {
-        top: "$100",
-        left: "$150"
-      }
-    },
-    {
-      size: "x-large",
-      floating: false,
-      css: {
-        top: "$150",
-        // $space$250 does not exist by design but we will force it here
-        left: "calc($200 + $space$50)"
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "large"
-  }
-});
-
-const FloatingLabel = React.forwardRef((props, forwardRef) => {
-  const { isFloatingLabel, isHiddenLabel, formElementId } = useFormFieldContext();
-  return /* @__PURE__ */ jsx(
-    StyledFloatingLabel,
-    {
-      htmlFor: formElementId,
-      floating: isFloatingLabel,
-      visuallyHidden: isHiddenLabel,
-      ...props,
-      ref: forwardRef
-    }
-  );
-});
-
-export { FORM_FIELD_STATUS, FloatingLabel, FormFieldProvider, useFormFieldContext };
+export { FORM_FIELD_STATUS, FormFieldProvider, useFormFieldContext };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx","../src/floating-label.styled.ts","../src/floating-label.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isFloatingLabel: boolean\n  setIsFloatingLabel: React.Dispatch<React.SetStateAction<boolean>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  shouldUseFloatingLabel: boolean\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: FormFieldProviderProps): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isFloatingLabel, setIsFloatingLabel] = useState(true)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n  const shouldUseFloatingLabel = label != null && isFloatingLabel\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isFloatingLabel,\n        setIsFloatingLabel,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        shouldUseFloatingLabel,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nexport const StyledFloatingLabel = styled(Primitive.label, {\n  transitionProperty: 'transform, margin, top, left, font-size',\n  transitionDuration: '200ms',\n  transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  zIndex: 1,\n  pointerEvents: 'none',\n  whiteSpace: 'nowrap',\n  fontStyle: 'normal',\n  lineHeight: 1.5,\n  height: '0.75em',\n  ...textFieldStyles.base.placeholder,\n\n  variants: {\n    floating: {\n      true: {\n        top: '0',\n        transform: 'translateY(-50%)',\n        left: '$150',\n        fontSize: '$150',\n        padding: '0 2px',\n        height: 'auto',\n        lineHeight: 1,\n        backgroundColor: '$background-neutrals-container',\n      },\n      false: {\n        fontSize: '$200',\n        marginTop: '-1px', // adjust for the input's border\n      },\n    },\n    visuallyHidden: {\n      true: {\n        // todo MDS-1003: replace with shared styles\n        border: '0',\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px',\n      },\n    },\n    size: {\n      medium: {},\n      large: {},\n      'x-large': {},\n    },\n  },\n  compoundVariants: [\n    {\n      size: 'medium',\n      floating: false,\n      css: {\n        top: '$50',\n        left: '$100',\n      },\n    },\n    {\n      size: 'large',\n      floating: false,\n      css: {\n        top: '$100',\n        left: '$150',\n      },\n    },\n    {\n      size: 'x-large',\n      floating: false,\n      css: {\n        top: '$150',\n        // $space$250 does not exist by design but we will force it here\n        left: 'calc($200 + $space$50)',\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'large',\n  },\n})\n\nexport type StyledFloatingLabelProps = ComponentPropsWithRef<\n  typeof StyledFloatingLabel\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useFormFieldContext } from './hooks/use-form-field-context'\nimport { StyledFloatingLabel } from './floating-label.styled'\nimport type { StyledFloatingLabelProps } from './floating-label.styled'\n\nexport interface FloatingLabelProps\n  extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {}\n\nexport const FloatingLabel = React.forwardRef<\n  ElementRef<typeof StyledFloatingLabel>,\n  FloatingLabelProps\n>((props, forwardRef) => {\n  const { isFloatingLabel, isHiddenLabel, formElementId } =\n    useFormFieldContext()\n\n  return (\n    <StyledFloatingLabel\n      htmlFor={formElementId}\n      floating={isFloatingLabel}\n      visuallyHidden={isHiddenLabel}\n      {...props}\n      ref={forwardRef}\n    />\n  )\n})\n"],"names":["ariaDescribedBy"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/constants.ts","../src/hooks/use-form-field-context.tsx"],"sourcesContent":["export const FORM_FIELD_STATUS = Object.freeze({\n  // the field value is valid\n  valid: 'valid',\n  // the field value is invalid\n  invalid: 'invalid',\n  // the field value has been changed\n  dirty: 'dirty',\n  // the field value has not been changed\n  pristine: 'pristine',\n  // the field has been focused and blurred\n  touched: 'touched',\n})\n\nexport type FormFieldStatus = keyof typeof FORM_FIELD_STATUS\n","import React, {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from 'react'\nimport type { AriaAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\n\nimport type { FormFieldStatus } from '../constants'\nimport { FORM_FIELD_STATUS } from '../constants'\n\ntype FormElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement\n\ninterface FormFieldProps {\n  /**\n   * Field status\n   * @default \"pristine\"\n   */\n  status?: FormFieldStatus\n\n  id?: string\n}\n\ninterface FormFieldContextProps<FormElementRef extends FormElements>\n  extends FormFieldProps {\n  setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>\n  isHiddenLabel: boolean\n  setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>\n  label: React.ReactNode\n  setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>\n  focused: boolean\n  setFocused: React.Dispatch<React.SetStateAction<boolean>>\n  helperId: string\n  setHelperId: React.Dispatch<React.SetStateAction<string>>\n  messageId: string\n  setMessageId: React.Dispatch<React.SetStateAction<string>>\n  descriptionId: string\n  setDescriptionId: React.Dispatch<React.SetStateAction<string>>\n  formElementId: string\n  formElementRef: React.MutableRefObject<FormElementRef>\n  ariaDescribedBy: string | undefined\n  required: boolean | undefined\n  setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  readOnly: boolean | undefined\n  setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  disabled: boolean | undefined\n  setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>\n  ariaDisabled: Booleanish | undefined\n  setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>\n  ariaInvalid: AriaAttributes['aria-invalid']\n  valid: boolean | undefined\n}\n\nexport interface FormFieldProviderProps extends FormFieldProps {\n  children?: React.ReactNode\n}\n\nconst FormFieldContext = createContext<FormFieldContextProps<any>>({} as any)\n\nexport const FormFieldProvider = ({\n  children,\n  status: customStatus,\n  id: customId,\n  ...restProps\n}: FormFieldProviderProps): JSX.Element => {\n  // form field state\n  const [status, setStatus] = useState<FormFieldStatus>(\n    customStatus ?? 'pristine'\n  )\n  const [focused, setFocused] = useState(false)\n  const [isHiddenLabel, setIsHiddenLabel] = useState(false)\n  const [label, setLabel] = useState<React.ReactNode>(null)\n\n  // partials\n  const autoId = useId()\n  const id = customId ?? autoId\n\n  const [messageId, setMessageId] = useState(`${id}-message`)\n  const [helperId, setHelperId] = useState(`${id}-helper`)\n  const [descriptionId, setDescriptionId] = useState(`${id}-description`)\n\n  // form element\n  const formElementRef = useRef<HTMLInputElement>(null)\n  const [required, setRequired] = useState<boolean>()\n  const [readOnly, setReadOnly] = useState<boolean>()\n  const [disabled, setDisabled] = useState<boolean>()\n  const [ariaDisabled, setAriaDisabled] = useState<Booleanish>()\n  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>('')\n\n  const valid =\n    status === FORM_FIELD_STATUS.valid\n      ? true\n      : status === FORM_FIELD_STATUS.invalid\n      ? false\n      : undefined\n\n  const ariaInvalid: AriaAttributes['aria-invalid'] =\n    status === FORM_FIELD_STATUS.invalid ? true : undefined\n\n  useEffect(() => {\n    const message = document.getElementById(messageId)\n    const helper = document.getElementById(helperId)\n    const description = document.getElementById(descriptionId)\n\n    const ariaDescribedBy = stringAttrValue(\n      // message or description\n      message != null ? messageId : description != null && descriptionId,\n      helper != null && helperId\n    )\n\n    /**\n     * message + helper text\n     * description + helper text\n     */\n    setAriaDescribedBy(ariaDescribedBy === '' ? undefined : ariaDescribedBy)\n  }, [messageId, helperId, descriptionId])\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        ...restProps,\n        id,\n        formElementRef,\n        formElementId: `${id}-form-element`,\n        messageId,\n        setMessageId,\n        helperId,\n        setHelperId,\n        descriptionId,\n        setDescriptionId,\n        status,\n        setStatus,\n        focused,\n        setFocused,\n        isHiddenLabel,\n        setIsHiddenLabel,\n        label,\n        setLabel,\n        ariaDescribedBy,\n        required,\n        setRequired,\n        readOnly,\n        setReadOnly,\n        disabled,\n        setDisabled,\n        ariaDisabled,\n        setAriaDisabled,\n        ariaInvalid,\n        valid,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  )\n}\n\nexport const useFormFieldContext = <\n  T extends FormElements\n>(): FormFieldContextProps<T> => useContext(FormFieldContext)\n"],"names":["ariaDescribedBy"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,44 +1,6 @@
-import * as React from 'react';
-import React__default, { ComponentPropsWithRef, AriaAttributes } from 'react';
-import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
-import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import React, { AriaAttributes } from 'react';
 import { Booleanish } from '@mirohq/design-system-types';
 
-/* Utilities */
-/* ========================================================================== */
-
-/** Returns a string with the given prefix followed by the given values. */
-type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
-
-type TransformProps<Props, Media> = {
-	[K in keyof Props]: (
-		| Props[K]
-		| (
-			& {
-				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
-			}
-			& {
-				[KMedia in string]: Props[K]
-			}
-		)
-	)
-}
-
-declare const StyledFloatingLabel: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>>, "size" | "floating" | "visuallyHidden"> & TransformProps<{
-    floating?: boolean | "true" | "false" | undefined;
-    visuallyHidden?: boolean | "true" | undefined;
-    size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLLabelElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"label">>, {
-    floating?: boolean | "true" | "false" | undefined;
-    visuallyHidden?: boolean | "true" | undefined;
-    size?: "medium" | "large" | "x-large" | undefined;
-}, {}>;
-type StyledFloatingLabelProps = ComponentPropsWithRef<typeof StyledFloatingLabel>;
-
-interface FloatingLabelProps extends Omit<StyledFloatingLabelProps, 'visuallyHidden'> {
-}
-declare const FloatingLabel: React__default.ForwardRefExoticComponent<Omit<FloatingLabelProps, "ref"> & React__default.RefAttributes<HTMLLabelElement>>;
-
 declare const FORM_FIELD_STATUS: Readonly<{
     valid: "valid";
     invalid: "invalid";
@@ -58,38 +20,35 @@ interface FormFieldProps {
     id?: string;
 }
 interface FormFieldContextProps<FormElementRef extends FormElements> extends FormFieldProps {
-    setStatus: React__default.Dispatch<React__default.SetStateAction<FormFieldStatus>>;
-    isFloatingLabel: boolean;
-    setIsFloatingLabel: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    setStatus: React.Dispatch<React.SetStateAction<FormFieldStatus>>;
     isHiddenLabel: boolean;
-    setIsHiddenLabel: React__default.Dispatch<React__default.SetStateAction<boolean>>;
-    label: React__default.ReactNode;
-    setLabel: React__default.Dispatch<React__default.SetStateAction<React__default.ReactNode>>;
+    setIsHiddenLabel: React.Dispatch<React.SetStateAction<boolean>>;
+    label: React.ReactNode;
+    setLabel: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     focused: boolean;
-    setFocused: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
     helperId: string;
-    setHelperId: React__default.Dispatch<React__default.SetStateAction<string>>;
+    setHelperId: React.Dispatch<React.SetStateAction<string>>;
     messageId: string;
-    setMessageId: React__default.Dispatch<React__default.SetStateAction<string>>;
+    setMessageId: React.Dispatch<React.SetStateAction<string>>;
     descriptionId: string;
-    setDescriptionId: React__default.Dispatch<React__default.SetStateAction<string>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string>>;
     formElementId: string;
-    formElementRef: React__default.MutableRefObject<FormElementRef>;
+    formElementRef: React.MutableRefObject<FormElementRef>;
     ariaDescribedBy: string | undefined;
-    shouldUseFloatingLabel: boolean;
     required: boolean | undefined;
-    setRequired: React__default.Dispatch<React__default.SetStateAction<boolean | undefined>>;
+    setRequired: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     readOnly: boolean | undefined;
-    setReadOnly: React__default.Dispatch<React__default.SetStateAction<boolean | undefined>>;
+    setReadOnly: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     disabled: boolean | undefined;
-    setDisabled: React__default.Dispatch<React__default.SetStateAction<boolean | undefined>>;
+    setDisabled: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     ariaDisabled: Booleanish | undefined;
-    setAriaDisabled: React__default.Dispatch<React__default.SetStateAction<Booleanish | undefined>>;
+    setAriaDisabled: React.Dispatch<React.SetStateAction<Booleanish | undefined>>;
     ariaInvalid: AriaAttributes['aria-invalid'];
     valid: boolean | undefined;
 }
 interface FormFieldProviderProps extends FormFieldProps {
-    children?: React__default.ReactNode;
+    children?: React.ReactNode;
 }
 declare const FormFieldProvider: ({ children, status: customStatus, id: customId, ...restProps }: FormFieldProviderProps) => JSX.Element;
 declare const useFormFieldContext: <T extends FormElements>() => FormFieldContextProps<T>;
@@ -118,5 +77,5 @@ interface FormElementProps {
     required?: boolean;
 }
 
-export { FORM_FIELD_STATUS, FloatingLabel, FormFieldProvider, useFormFieldContext };
-export type { FloatingLabelProps, FormElementProps, FormFieldProviderProps, FormFieldStatus };
+export { FORM_FIELD_STATUS, FormFieldProvider, useFormFieldContext };
+export type { FormElementProps, FormFieldProviderProps, FormFieldStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-form",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,9 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@mirohq/design-system-base-text-field": "^1.3.4",
-    "@mirohq/design-system-primitive": "^2.2.1",
-    "@mirohq/design-system-stitches": "^3.3.1",
+    "@mirohq/design-system-types": "^1.0.3",
     "@mirohq/design-system-use-id": "^1.1.1",
-    "@mirohq/design-system-utils": "^1.2.3",
-    "@mirohq/design-system-types": "^1.0.3"
+    "@mirohq/design-system-utils": "^1.3.0"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",