linear-react-components-ui 1.1.24-beta.4 → 1.1.25-rc.1

package/lib/table/index.js

@@ -44,7 +44,7 @@ var _RowColumn = _interopRequireDefault(require("./RowColumn"));
 require("../assets/styles/table.scss");
 var _helpers = _interopRequireDefault(require("./helpers"));
 const _excluded = ["children"],
-  _excluded2 = ["onColClick", "onRowClick", "bodyScrollable", "vertical", "skeletonize", "strict", "skeletonHeight", "skeletonInHeader", "skeletonInRows", "selectedRowId"];
+  _excluded2 = ["onColClick", "onRowClick", "bodyScrollable", "vertical", "skeletonize", "strict", "skeletonHeight", "skeletonInHeader", "skeletonInRows", "selectedRowId", "allowHorizontalScroll"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -87,7 +87,8 @@ const Table = _ref2 => {
       skeletonHeight,
       skeletonInHeader,
       skeletonInRows,
-      selectedRowId: selectedRowIdFromProps
+      selectedRowId: selectedRowIdFromProps,
+      allowHorizontalScroll = false
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
   const [selectedRowId, setSelectedRowId] = (0, _react.useState)(selectedRowIdFromProps);
@@ -120,6 +121,20 @@ const Table = _ref2 => {
     columnsWidth,
     handlerSetColumnsCount
   }), [bodyContainerRef, bodyScrollWidth, selectedRowId, vertical, skeletonize, skeletonHeight, skeletonInHeader, skeletonInRows, strict, columnsCount, handleSelectRow, onColClick, onRowClick, handlerSetColumnsWidth, columnsWidth, handlerSetColumnsCount]);
+  const getTableComponent = () => {
+    const tableComponent = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("table", _extends({
+      style: {
+        contain: strict ? 'strict' : 'size style'
+      },
+      className: getClass(props)
+    }, rest), children));
+    if (allowHorizontalScroll) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "horizontal-scroll-container"
+      }, tableComponent);
+    }
+    return tableComponent;
+  };
   const contextValues = (0, _react.useMemo)(() => getContextValues(), [getContextValues]);
   (0, _react.useEffect)(() => {
     if (bodyScrollable && bodyContainerRef && bodyContainerRef.current) {
@@ -138,11 +153,6 @@ const Table = _ref2 => {
     value: contextValues
   }, bodyScrollable ? /*#__PURE__*/_react.default.createElement("div", {
     className: getClass(props)
-  }, children) : /*#__PURE__*/_react.default.createElement("table", _extends({
-    style: {
-      contain: strict ? 'strict' : 'size style'
-    },
-    className: getClass(props)
-  }, rest), children));
+  }, children) : getTableComponent());
 };
 var _default = exports.default = Table;

package/lib/table/types.d.ts

@@ -18,6 +18,7 @@ interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
     skeletonInRows?: number;
     skeletonInHeader?: boolean;
     skeletonHeight?: number;
+    allowHorizontalScroll?: boolean;
 }
 interface ITableHeaderProps extends ComponentProps<'th'> {
     children?: ReactNode;

package/lib/textContent/index.d.ts

@@ -1,17 +1,22 @@
-import React__default from 'react';
-import { ITooltipCommonProps } from '../tooltip/types.js';
+import React__default, { MutableRefObject } from 'react';
+import { WithTooltipProps } from '../internals/types.js';
+import '../@types/PermissionAttr.js';
 import '../@types/Position.js';
 
-interface TextContentProps extends React__default.HTMLAttributes<HTMLElement>, ITooltipCommonProps {
+interface TextContentProps extends React__default.HTMLAttributes<HTMLElement>, WithTooltipProps {
     as?: 'span' | 'strong' | 'p';
     label?: string | string[];
     styleForLabel?: object;
     labelUppercase?: boolean;
     required?: boolean;
     disabled?: boolean;
+    targetRef?: (ref: HTMLSpanElement | null) => void;
+    labelRef?: MutableRefObject<HTMLSpanElement | null>;
     onHoverLabel?: (e: React__default.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-    errorMessage?: string;
 }
-declare const TextContent: React__default.ForwardRefExoticComponent<TextContentProps & React__default.RefAttributes<HTMLElement>>;
+declare const _default: {
+    (props: TextContentProps & React__default.RefAttributes<HTMLElement>): JSX.Element;
+    displayName: string;
+};
 
-export { TextContent as default };
+export { _default as default };

package/lib/textContent/index.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("../assets/styles/textContent.scss");
-var _tooltip = require("../tooltip");
-const _excluded = ["as", "children", "className", "styleForLabel", "onHoverLabel", "tooltip", "tooltipPosition", "tooltipWidth", "errorMessage", "labelUppercase"];
+var _withTooltip = _interopRequireDefault(require("../internals/withTooltip"));
+var _lodash = _interopRequireDefault(require("lodash"));
+const _excluded = ["as", "children", "className", "styleForLabel", "onHoverLabel"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -19,29 +21,18 @@ const TextContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children,
       className,
       styleForLabel,
-      onHoverLabel,
-      tooltip,
-      tooltipPosition,
-      tooltipWidth,
-      errorMessage,
-      labelUppercase: __
+      onHoverLabel
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const compRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => compRef.current, []);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Comp, _extends({
-    ref: compRef,
+  const typedRef = ref;
+  const restProps = _lodash.default.omit(props, ['tooltipWidth', 'tooltip', 'tooltipPosition', 'labelUppercase']);
+  return /*#__PURE__*/_react.default.createElement(Comp, _extends({
+    ref: typedRef,
     style: styleForLabel,
     className: `text-content-component ${className}`,
     "data-textcontent": Comp,
     onMouseEnter: onHoverLabel
-  }, props), children), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: compRef,
-    text: tooltip,
-    position: tooltipPosition,
-    width: tooltipWidth,
-    textError: errorMessage
-  }));
+  }, restProps), children);
 });
 TextContent.displayName = 'TextContent';
-var _default = exports.default = TextContent;
+var _default = exports.default = (0, _withTooltip.default)(TextContent);

package/lib/tooltip/index.d.ts

@@ -1,7 +1,6 @@
+import React__default from 'react';
 import { ITooltipProps } from './types.js';
-import 'react';
-import '../@types/Position.js';
 
-declare function Tooltip({ text, textError, targetRef, style, width, space, className, position, onDeniedText, }: ITooltipProps): JSX.Element | null;
+declare const Tooltip: ({ text, textError, tooltipRef, style, tooltipDimensions, className, handlerSetDimensions, }: ITooltipProps) => React__default.ReactPortal;
 
-export { Tooltip, Tooltip as default };
+export { Tooltip as default };

package/lib/tooltip/index.js

@@ -3,44 +3,61 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = exports.default = Tooltip;
-var _react = _interopRequireDefault(require("react"));
-var _TooltipContent = _interopRequireDefault(require("./TooltipContent"));
-var _useTooltip2 = require("./useTooltip");
-const _excluded = ["showTooltip"];
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
+require("../assets/styles/tooltip.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function Tooltip(_ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Tooltip = _ref => {
   let {
     text,
     textError,
-    targetRef,
-    style,
-    width,
-    space,
-    className,
-    position = 'bottom',
-    onDeniedText
+    tooltipRef,
+    style = '',
+    tooltipDimensions,
+    className = 'bottom',
+    handlerSetDimensions = () => {}
   } = _ref;
-  const _useTooltip = (0, _useTooltip2.useTooltip)({
-      targetRef,
-      errorMessage: textError,
-      position,
-      width,
-      text,
-      space,
-      onDeniedText
-    }),
-    {
-      showTooltip
-    } = _useTooltip,
-    tooltipContentProps = _objectWithoutProperties(_useTooltip, _excluded);
-  if (!showTooltip) return null;
-  return /*#__PURE__*/_react.default.createElement(_TooltipContent.default, _extends({
-    styleForContent: style,
-    classNameForContent: className,
-    position: position
-  }, tooltipContentProps));
-}
+  const tooltipComponent = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.id = `tooltip-${uuid.v1()}`;
+    tooltipComponent.current.className = `tooltip-component ${className} `;
+    tooltipComponent.current.dataset.testid = 'tooltip-component';
+    tooltipComponent.current.style.cssText = style;
+    document.body.appendChild(tooltipComponent.current);
+    const tooltipEl = document.querySelector(`div#${tooltipComponent.current.id}`);
+    let widthDimension = tooltipEl?.offsetWidth;
+    const heightDimension = tooltipEl?.offsetHeight;
+    if (tooltipDimensions && tooltipDimensions.width) {
+      widthDimension = tooltipDimensions.width;
+    }
+    handlerSetDimensions({
+      width: widthDimension,
+      height: Number(heightDimension)
+    });
+    // eslint-disable-next-line no-param-reassign
+    if (tooltipRef) {
+      tooltipRef.current = tooltipEl;
+    }
+    return () => {
+      document.body.removeChild(tooltipComponent.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = `tooltip-component ${className} `;
+  }, [className]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.style.cssText = style;
+  }, [style]);
+  (0, _react.useEffect)(() => {
+    tooltipComponent.current.className = textError ? `tooltip-error tooltip-component ${className}` : `tooltip-component ${className}`;
+  }, [textError]);
+  const getTooltipContent = () => /*#__PURE__*/_react.default.createElement("div", {
+    className: "tooltipcontent"
+  }, textError || text);
+  return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
+};
+var _default = exports.default = Tooltip;

package/lib/tooltip/types.d.ts

@@ -1,39 +1,17 @@
-import { RefObject, CSSProperties, MutableRefObject } from 'react';
-import { Position } from '../@types/Position.js';
+import { MutableRefObject } from 'react';
 
 type Dimensions = {
     width: number | string;
     height: number;
 };
 interface ITooltipProps {
-    targetRef: RefObject<HTMLElement>;
     text?: string;
-    textError?: string;
-    style?: CSSProperties;
+    style?: string;
     className?: string;
-    width?: string | number;
-    space?: number;
-    position?: Exclude<Position, 'center'>;
-    onDeniedText?: string;
-}
-interface ITooltipContentProps {
     tooltipRef?: MutableRefObject<HTMLElement | null>;
-    text?: string;
-    style?: string;
-    styleForContent?: CSSProperties;
-    classNameForContent?: string;
-    width?: string | number;
-    space?: number;
-    tooltip?: string;
-    position?: Exclude<Position, 'center'>;
     handlerSetDimensions?: ({ width, height }: Dimensions) => void;
     tooltipDimensions?: Dimensions;
     textError?: string;
 }
-interface ITooltipCommonProps {
-    tooltip?: string;
-    tooltipWidth?: string | number;
-    tooltipPosition?: Exclude<Position, 'center'>;
-}
 
-export { ITooltipCommonProps, ITooltipContentProps, ITooltipProps };
+export { ITooltipProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.24-beta.4",
+  "version": "1.1.25-rc.1",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -54,7 +54,7 @@
     "moment": "2.30.1",
     "prop-types": "15.8.1",
     "react-dev-utils": "12.0.0",
-    "react-imask": "7.6.1",
+    "react-imask": "^7.6.1",
     "react-router-dom": "6.21.3",
     "react-syntax-highlighter": "15.5.0",
     "semver": "7.5.4",
@@ -68,7 +68,6 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.23.3",
-    "@faker-js/faker": "9.8.0",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.4.13",
     "@testing-library/dom": "10.4.0",

package/lib/BaseMask-0c14ef51.d.ts

@@ -1,24 +0,0 @@
-import React__default from 'react';
-import { T as TextFieldInputProps } from './index-3b70931d.js';
-import { FactoryOpts } from 'imask';
-
-interface MaskFieldProps extends TextFieldInputProps {
-    maskOptions?: FactoryOpts;
-    onAccept?: (value: string) => void;
-    onComplete?: (value: string, maskRef: any, e?: InputEvent) => void;
-    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
-    autoCompleteMask?: string;
-    value?: string;
-}
-declare const Input: React__default.ForwardRefExoticComponent<MaskFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-declare const BaseMask_Input: typeof Input;
-type BaseMask_MaskFieldProps = MaskFieldProps;
-declare namespace BaseMask {
-  export {
-    BaseMask_Input as Input,
-    BaseMask_MaskFieldProps as MaskFieldProps,
-  };
-}
-
-export { BaseMask as B, Input as I, MaskFieldProps as M };

package/lib/Cnpj-bde01dd0.d.ts

@@ -1,18 +0,0 @@
-import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
-
-interface CnpjFieldProps extends MaskFieldProps {
-    onValidate?: (errors: string[]) => void;
-}
-declare const Input: React__default.ForwardRefExoticComponent<CnpjFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-type Cnpj_CnpjFieldProps = CnpjFieldProps;
-declare const Cnpj_Input: typeof Input;
-declare namespace Cnpj {
-  export {
-    Cnpj_CnpjFieldProps as CnpjFieldProps,
-    Cnpj_Input as Input,
-  };
-}
-
-export { Cnpj as C, Input as I, CnpjFieldProps as a };

package/lib/Cpf-3fa496ad.d.ts

@@ -1,18 +0,0 @@
-import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
-
-interface CpfFieldProps extends MaskFieldProps {
-    onValidate?: (errors: string[]) => void;
-}
-declare const Input: React__default.ForwardRefExoticComponent<CpfFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-type Cpf_CpfFieldProps = CpfFieldProps;
-declare const Cpf_Input: typeof Input;
-declare namespace Cpf {
-  export {
-    Cpf_CpfFieldProps as CpfFieldProps,
-    Cpf_Input as Input,
-  };
-}
-
-export { Cpf as C, Input as I, CpfFieldProps as a };

package/lib/Phone-2bb0b397.d.ts

@@ -1,18 +0,0 @@
-import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
-
-interface PhoneFieldProps extends MaskFieldProps {
-    isCellphone?: boolean;
-}
-declare const Input: React__default.ForwardRefExoticComponent<PhoneFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-declare const Phone_Input: typeof Input;
-type Phone_PhoneFieldProps = PhoneFieldProps;
-declare namespace Phone {
-  export {
-    Phone_Input as Input,
-    Phone_PhoneFieldProps as PhoneFieldProps,
-  };
-}
-
-export { Input as I, Phone as P, PhoneFieldProps as a };

package/lib/ZipCode-09460e18.d.ts

@@ -1,13 +0,0 @@
-import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
-
-declare const Input: React__default.ForwardRefExoticComponent<MaskFieldProps & React__default.RefAttributes<HTMLInputElement>>;
-
-declare const ZipCode_Input: typeof Input;
-declare namespace ZipCode {
-  export {
-    ZipCode_Input as Input,
-  };
-}
-
-export { Input as I, ZipCode as Z };

package/lib/assets/styles/checkbox2.scss

@@ -1,199 +0,0 @@
-@import "commons.scss";
-@import "colors.scss";
-@import "effects.scss";
-@import "fonts.scss";
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.checkbox-field-root {
-  display: flex;
-  flex-direction: column;
-  text-align: start;
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    text-align: start;
-    gap: 6px;
-    width: 100%;
-    height: 28px;
-    margin: 0;
-    padding: 0;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-      background-color: transparent;
-    }
-    .input-root {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .input {
-        @extend %component-fonts;
-        position: relative;
-        padding: 6px;
-        font-size: 0.875rem;
-        line-height: 0.875rem;
-        border: 1px solid $component-border-color;
-        background: $font-color-second left top no-repeat;
-        cursor: pointer;
-        vertical-align: middle;
-        transition: background-color 0.1s, border-color 0.1s;
-        flex-shrink: 0;
-        appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        &:focus, &:hover {
-          transition: box-shadow 0.2s;
-        }
-        &:checked {
-          border-color: $default-actived-color;
-        }
-        &[data-state-rounded=true] {
-          border-radius: 2px;
-        }
-        &[data-state-variant=default] {
-          &:checked {
-            background-color: $checked-effect;
-          }
-          &:focus, &:hover, &[data-state-in-focus-select-field=true] {
-            box-shadow: 0 0 0 2px $checked-effect;
-          }
-        }
-        &[data-state-variant=secondary] {
-          &:checked {
-            background-color: $font-selected-color;
-          }
-          &:focus, &:hover, &[data-state-in-focus-select-field=true] {
-            box-shadow: 0 0 0 2px $font-selected-color;
-          }
-        }
-        &[data-state-size=small] {
-          width: 14px;
-          height: 14px;
-        }
-        &[data-state-size=default] {
-          width: 18px;
-          height: 18px;
-        }
-        &[data-state-size=medium] {
-          width: 20px;
-          height: 20px;
-        }
-        &[data-state-size=large] {
-          width: 22px;
-          height: 22px;
-        }
-        &[data-state-read-only=true], &[data-state-read-only=true]:checked {
-          cursor: default;
-          pointer-events: none;
-          border-color: $font-color-disabled;
-          background-color: $input-read-only-bg-color;
-        }
-        &:disabled, &:disabled:checked {
-          border-color: $font-color-disabled;
-          background-color: $input-disabled-bg-color;
-          cursor: not-allowed;
-          pointer-events: none;
-          transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        }
-        &[data-state-skeletonize=true] {
-          border: none !important;
-          color: transparent !important;
-          background-color: transparent !important;
-        }
-      }
-      .checkmark {
-        display: block;
-        position: absolute;
-        margin: 0;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.1s, visibility 0.1s;
-        pointer-events: none;
-        fill: $font-color-second;
-      }
-      &:has(input:checked) {
-        .checkmark {
-          opacity: 1;
-          visibility: initial;
-          width: 75%;
-          height: 75%;
-        }
-      }
-      &:has(input[data-state-read-only=true]) {
-        .checkmark {
-          fill: $font-color-disabled;
-        }
-      }
-      &:has(input:disabled) {
-        .checkmark {
-          fill: $font-color-disabled;
-        }
-      }
-      &:has(input[data-state-skeletonize=true]) {
-        .checkmark {
-          fill: transparent !important;
-        }
-      }
-    }
-    .label {
-      @extend %input-label;
-      font-size: 0.875rem;
-      line-height: normal;
-      color: $font-color-default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &[data-state-input-required=true]::after {
-        content: "*";
-        color: $font-color-default;
-      }
-      &[data-state-uppercase=true] {
-        text-transform: uppercase;
-      }
-      &[data-state-required-label=true] {
-        color: $error-color;
-        font-weight: 600;
-        font-size: 0.875rem;
-        margin-left: 1px;
-      }
-      &[data-state-skeletonize=true] {
-        color: transparent;
-      }
-      &[data-state-read-only=true], &[data-state-disabled=true] {
-        cursor: default;
-        pointer-events: none;
-      }
-    }
-    >button {
-      width: 20px;
-      height: auto;
-      margin: 0px !important;
-    }
-  }
-  .hint {
-    span {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-  .error {
-    width: 100%;
-    color: $error-color;
-    margin-top: 5px;
-    font-size: 0.8125rem;
-    line-height: 0.8125rem;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-    }
-  }
-}