@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.38

package/src/components/Forms/DatePicker/DatePicker.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-
-import DatePickerStatic from "./DatePicker.static";
 import { useStatic } from "../../../utils/hooks";
+import DatePickerStatic from "./DatePicker.static";
 
 // Type definitions for daypickr config
 interface DayPickrWeekday {

package/src/components/Forms/Field/Control.tsx

@@ -1,26 +1,26 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
 import dynamic from "next/dynamic";
+import React from "react";
 
 // Importing Autocomplete dynamically to avoid server-side rendering issues
 const Autocomplete = dynamic(() =>
   import("../Autocomplete").then((mod) => ({ default: mod.Autocomplete })),
 );
 
-import { Checkbox } from "../Checkbox";
 import ConditionalWrapper from "../../../utils/ConditionalWrapper";
+import { Checkbox } from "../Checkbox";
 import { DatePicker } from "../DatePicker";
 import { FieldsetContext } from "../Fieldset/FieldsetContext";
 import { File } from "../File";
 import { Group } from "../Group";
+import { InputStepper } from "../InputStepper";
 import { Radio } from "../Radio";
 import { RangeSlider } from "../RangeSlider";
 import { Select } from "../Select";
 import { TextArea } from "../TextArea";
 import { TextInput } from "../TextInput";
-import { InputStepper } from "../InputStepper";
 import { FieldContext } from "./FieldContext";
 import { getDescribedBy } from "./utils";
 

package/src/components/Forms/Field/Description.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 import { Hint } from "../Hint";
+import { FieldContext } from "./FieldContext";
 import { FieldLabel } from "./Label";
 import { FormTooltip } from "./Tooltip";
-import { FieldContext } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__description";
 

package/src/components/Forms/Field/Field.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Bar, BarBreak, BarItem } from "../../Bar";
-import { FieldLabel } from "./Label";
-import { FormTooltip } from "./Tooltip";
-import { Messages } from "./Messages";
 import { Control } from "./Control";
 import { Description } from "./Description";
 import { FieldContext, FieldContextType } from "./FieldContext";
+import { FieldLabel } from "./Label";
+import { Messages } from "./Messages";
+import { FormTooltip } from "./Tooltip";
 import { getControlId } from "./utils";
 
 export interface InputFieldProps {

package/src/components/Forms/Field/Label.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Label } from "../Label";
 import { FieldContext, FieldContextType } from "./FieldContext";

package/src/components/Forms/Field/Messages.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { Message } from "../Message";
 import { FieldsetContext } from "../Fieldset/FieldsetContext";
-import { FieldContext } from "./FieldContext";
+import { Message } from "../Message";
 import type { MessageType as MessageTypeEnum } from "../Message/Message";
+import { FieldContext } from "./FieldContext";
 
 export interface MessageType {
   isMain: boolean;

package/src/components/Forms/Field/tests/Autocomplete.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Checkbox.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/File.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "..";
 

package/src/components/Forms/Field/tests/Group.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Button } from "../../../Button";
 import { Field } from "..";

package/src/components/Forms/Field/tests/Radio.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Rangeslider.Field.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Select.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Text.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Textarea.Field.conformance.test.jsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from 'vitest-axe';
+import { axe } from "vitest-axe";
 
 import { Field } from "../";
 

package/src/components/Forms/Field/tests/Tooltip.unit.test.jsx

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import { FormTooltip } from "../Tooltip";
 import Base from "../../../Tooltip/tests/BaseWrapper";
+import { FormTooltip } from "../Tooltip";
 
 //id is required
 describe("rendering Tooltip", () => {

package/src/components/Forms/Fieldset/Fieldset.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
+import React, { ReactNode } from "react";
 
 import { Messages } from "../Field/Messages";
 

package/src/components/Forms/File/File.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import React, { FC } from "react";
 import cx from "classnames";
-
-import FileStatic from "./File.static";
+import React, { FC } from "react";
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
+import FileStatic from "./File.static";
 
 const CLASS_ROOT = "file-input";
 
 export type FileSize = "default" | "large";
 
 // Omit native 'size' prop to avoid conflict
-export interface FileProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> {
+export interface FileProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /** Html id attribute. Generated automatically if omitted. */
   id?: string;
   /** Disabled state. */

package/src/components/Forms/File/styles/config.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
-@use '../../../../styles/tools/convert';
-@use '../../../Button/styles/config' as buttonConfig;
+@use "../../../../styles/tools/convert";
+@use "../../../Button/styles/config" as buttonConfig;
 
 $sizes: buttonConfig.$sizes;
 
 $sizes: (
-  'default': map.get(buttonConfig.$sizes, 'default'),
-  'large': map.get(buttonConfig.$sizes, 'large'),
+  "default": map.get(buttonConfig.$sizes, "default"),
+  "large": map.get(buttonConfig.$sizes, "large"),
 );
 
-$disabled: map.get(buttonConfig.$base, 'disabled');
+$disabled: map.get(buttonConfig.$base, "disabled");

package/src/components/Forms/Group/Group.tsx

@@ -1,8 +1,7 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
-
-import { TextInput } from "../TextInput/TextInput";
+import React, { HTMLAttributes, ReactNode } from "react";
 import { Select } from "../Select/Select";
+import { TextInput } from "../TextInput/TextInput";
 
 import { Item } from "./Item";
 

package/src/components/Forms/Group/Item.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, HTMLAttributes } from "react";
 import cx from "classnames";
+import React, { HTMLAttributes, ReactNode } from "react";
 
 const CLASS_ROOT = "control-group__item";
 

package/src/components/Forms/Hint/Hint.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "hint";
 

package/src/components/Forms/Hint/styles/config.scss

@@ -1,4 +1,4 @@
-@use '../../../../styles/tools/convert';
+@use "../../../../styles/tools/convert";
 
 $base: (
   font-size: convert.to-rem(14px),

package/src/components/Forms/Hint/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useStatic } from "../../../utils/hooks";
 import { TextInput } from "../TextInput/TextInput";

package/src/components/Forms/Label/Label.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "label";
 

package/src/components/Forms/Label/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);

package/src/components/Forms/Message/Message.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Icon } from "../../Icon";
 
 export type MessageType = "info" | "warning" | "error" | "invalid";
@@ -18,7 +18,7 @@ const icons: Record<MessageType, string> = {
   info: "info",
   warning: "warning-important",
   error: "error-severe",
-  invalid: "error-severe"
+  invalid: "error-severe",
 };
 
 import type { IconColor } from "../../Icon/Icon";
@@ -38,9 +38,13 @@ const Message: React.FC<MessageProps> = ({
   type = "info",
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className, type === "invalid" && {
-    [`${CLASS_ROOT}--invalid`]: type === "invalid",
-  });
+  const classes = cx(
+    CLASS_ROOT,
+    className,
+    type === "invalid" && {
+      [`${CLASS_ROOT}--invalid`]: type === "invalid",
+    },
+  );
 
   return (
     <p className={classes} {...other}>

package/src/components/Forms/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "radio";
 

package/src/components/Forms/Radio/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin display() {
   border-radius: 100%;

package/src/components/Forms/RangeSlider/RangeSlider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
 import RangeSliderStatic from "./RangeSlider.static";

package/src/components/Forms/Select/Select.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import generateId from "../../../utils/generateId";
 

package/src/components/Forms/Select/styles/mixins.scss

@@ -1,5 +1,5 @@
-@use '../../../../styles/tools/generate';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -10,18 +10,18 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 }
 

package/src/components/Forms/TextArea/TextArea.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "textarea";
 

package/src/components/Forms/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 const CLASS_ROOT = "text-input";
 
@@ -17,10 +17,8 @@ export type TextInputType =
 
 export type TextInputSearchIcon = "none" | "transient" | "persistent";
 
-export interface TextInputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> {
+export interface TextInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /** Input html type. */
   htmlType?: TextInputType;
   /** Html id attribute. */

package/src/components/Forms/TextInput/styles/mixins.scss

@@ -1,6 +1,6 @@
-@use '../../../../styles/tools/generate';
-@use '../../../../styles/tools/convert';
-@use './config';
+@use "../../../../styles/tools/generate";
+@use "../../../../styles/tools/convert";
+@use "./config";
 
 @mixin base($config: config.$base) {
   @include generate.css-map($config);
@@ -11,25 +11,25 @@
 }
 
 @mixin states($config: config.$states) {
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:focus {
-    @include generate.css-map($config, 'focus');
+    @include generate.css-map($config, "focus");
   }
 
   &:disabled {
     opacity: 1;
     //stylelint-disable-next-line
     -webkit-text-fill-color: config.$disabled;
-    @include generate.css-map($config, 'disabled');
+    @include generate.css-map($config, "disabled");
   }
 
   &:read-only {
-    @include generate.css-map($config, 'readonly');
+    @include generate.css-map($config, "readonly");
   }
 
   &.is-invalid {
-    @include generate.css-map($config, 'invalid');
+    @include generate.css-map($config, "invalid");
   }
 
   &.is-valid {
@@ -52,10 +52,10 @@
 @mixin search-icon-base {
   background-image: config.$background-image-search-icon;
   background-repeat: no-repeat;
-  @include generate.css-map(config.$background-search, 'default');
+  @include generate.css-map(config.$background-search, "default");
 
   &.text-input--large {
-    @include generate.css-map(config.$background-search, 'large');
+    @include generate.css-map(config.$background-search, "large");
   }
 }
 

package/src/components/Forms/index.ts

@@ -6,6 +6,7 @@ export { Fieldset } from "./Fieldset";
 export { File } from "./File";
 export { Group } from "./Group";
 export { Hint } from "./Hint";
+export { InputStepper } from "./InputStepper";
 export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
@@ -13,4 +14,3 @@ export { RangeSlider } from "./RangeSlider";
 export { Select } from "./Select";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
-export { InputStepper } from "./InputStepper";

package/src/components/Gauge/Gauge.tsx

@@ -1,5 +1,5 @@
-import React, { ForwardedRef } from "react";
 import cx from "classnames";
+import React, { ForwardedRef } from "react";
 
 const getMaxValue = (radius: number): number =>
   Math.PI * (radius + radius * 0.22) * 2;

package/src/components/Gauge/GaugeMaker.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useRef, useState } from "react";
 import { formatHTML } from "../../utils/formatCode";
 
 import { Bar, BarItem } from "../Bar";
-import { Field } from "../Forms/Field";
-import { TextInput } from "../Forms/TextInput";
 import { Button } from "../Button";
+import { Field } from "../Forms/Field";
 import { Message } from "../Forms/Message";
+import { TextInput } from "../Forms/TextInput";
 
 import { Gauge } from "./Gauge";
 

package/src/components/Gauge/tests/Gauge.unit.test.jsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react";
-import React from "react";
 
 import { Gauge } from "../";
 

package/src/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { genResponsiveClasses } from "../../utils";
 
 export type GridVAlign = "stretch" | "start" | "end" | "center";

package/src/components/Grid/GridCol.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
-import cx from 'classnames';
-import { genResponsiveClasses } from '../../utils';
+import cx from "classnames";
+import React from "react";
+import { genResponsiveClasses } from "../../utils";
 
-export type GridColAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-export type GridColSize = number | 'shrink' | 'fill' | 'auto' | Record<string, number | 'shrink' | 'fill' | 'auto'>;
+export type GridColAlign = "top" | "middle" | "bottom" | "stretch";
+export type GridColSize =
+  | number
+  | "shrink"
+  | "fill"
+  | "auto"
+  | Record<string, number | "shrink" | "fill" | "auto">;
 
 export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   align?: GridColAlign;
@@ -11,18 +16,24 @@ export interface GridColProps extends React.HTMLAttributes<HTMLElement> {
   size?: GridColSize;
 }
 
-const CLASS_ROOT = 'grid__col';
+const CLASS_ROOT = "grid__col";
 
-export const GridCol = ({ className, align, tag = "div", size, ...other }: GridColProps) => {
+export const GridCol = ({
+  className,
+  align,
+  tag = "div",
+  size,
+  ...other
+}: GridColProps) => {
   const responsiveClasses = genResponsiveClasses(CLASS_ROOT, size);
-  
+
   const classes = cx(
     CLASS_ROOT, // Always apply base class
     ...responsiveClasses.filter(Boolean), // Filter out null/undefined values
     {
       [`align-self-${align}`]: align,
     },
-    className
+    className,
   );
 
   const TagName = tag;
@@ -30,4 +41,4 @@ export const GridCol = ({ className, align, tag = "div", size, ...other }: GridC
   return <TagName className={classes} {...other} />;
 };
 
-GridCol.displayName = 'GridCol';
+GridCol.displayName = "GridCol";

package/src/components/Grid/tests/Grid.unit.test.jsx

@@ -7,7 +7,6 @@
  * Tests both React component usage and equivalent HTML structure generation.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { Grid } from "../Grid";
 import { GridCol } from "../GridCol";

package/src/components/Grid/tests/GridCol.unit.test.jsx

@@ -6,7 +6,6 @@
  * Also includes complex scenarios with various size combinations and responsive behavior.
  */
 
-import React from "react";
 import { render } from "@testing-library/react";
 import { GridCol } from "../GridCol";
 

package/src/components/Hero/Hero.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { formatPrice } from "../../utils/helpers";
 import { Button } from "../Button";

package/src/components/Hero/styles/config.scss

@@ -1,7 +1,6 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
 
-
 $sticker-colors: (
   default: (
     background-color: var(--color-surface-secondary),