@equinor/roma-ui 0.1.0

package/dates.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("date-fns"),t=require("react"),c=({date:e,now:n=new Date})=>{const[,r]=t.useState(new Date);return t.useEffect(()=>{const a=setInterval(()=>{r(new Date)},6e4);return()=>clearInterval(a)},[]),e?s.formatDistance(new Date(e),n,{addSuffix:!0}):""};exports.DateDistance=c;

package/dates.mjs

@@ -0,0 +1,17 @@
+import { formatDistance as a } from "date-fns";
+import { useState as o, useEffect as s } from "react";
+const c = ({
+  date: e,
+  now: t = /* @__PURE__ */ new Date()
+}) => {
+  const [, r] = o(/* @__PURE__ */ new Date());
+  return s(() => {
+    const n = setInterval(() => {
+      r(/* @__PURE__ */ new Date());
+    }, 6e4);
+    return () => clearInterval(n);
+  }, []), e ? a(new Date(e), t, { addSuffix: !0 }) : "";
+};
+export {
+  c as DateDistance
+};

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/select/select';
+export * from './lib/switch/Switch';

package/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./select.js"),t=require("./switch.js");exports.Option=e.Option;exports.Select=e.Select;exports.Styled=e.Styled;exports.Switch=t.Switch;

package/index.mjs

@@ -0,0 +1,8 @@
+import { Option as o, Select as r, Styled as p } from "./select.mjs";
+import { Switch as c } from "./switch.mjs";
+export {
+  o as Option,
+  r as Select,
+  p as Styled,
+  c as Switch
+};

package/lib/dates/date-distance.d.ts

@@ -0,0 +1,4 @@
+export declare const DateDistance: ({ date, now, }: {
+    date: Date | number | string;
+    now?: Date;
+}) => string;

package/lib/dates/index.d.ts

@@ -0,0 +1 @@
+export * from './date-distance';

package/lib/select/HelperText.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const HelperText: ({ helperText }: {
+    helperText?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/lib/select/select.d.ts

@@ -0,0 +1,28 @@
+import { ListBoxItemProps, SelectProps, SelectValueRenderProps } from 'react-aria-components';
+import { InputProps } from '@equinor/eds-core-react';
+import { ChangeEventHandler, ReactNode } from 'react';
+import { default as Styled } from './styled-comps';
+type EdsOptionProps<T, U = any> = Partial<{
+    value: T;
+    children: ReactNode;
+    disabled: boolean;
+    item: U;
+}> & ListBoxItemProps<T>;
+export declare const Select: import('react').ForwardRefExoticComponent<Partial<{
+    selected: any;
+    onSelectedChange: (v: any) => void;
+    children: ReactNode;
+    variant: InputProps["variant"];
+    helperText: ReactNode;
+    label: string;
+    items: Array<object>;
+    placeholder: string;
+    ariaLabel: string;
+    getValueText: (props: SelectValueRenderProps<any>) => ReactNode;
+    onChange: ChangeEventHandler;
+    disabled: boolean;
+    readOnly: boolean;
+    showClearButton: boolean;
+}> & SelectProps<any> & import('react').RefAttributes<unknown>>;
+export declare const Option: <T>({ value, children, item, ...rest }: EdsOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { Styled };

package/lib/select/styled-comps.d.ts

@@ -0,0 +1,370 @@
+import { InputProps } from '@equinor/eds-core-react';
+declare const _default: {
+    ListBox: import('styled-components').IStyledComponent<"web", {
+        style?: import('react').CSSProperties | ((values: import('react-aria-components').ListBoxRenderProps & {
+            defaultStyle: import('react').CSSProperties;
+        }) => import('react').CSSProperties | undefined) | undefined;
+        slot?: string | null | undefined;
+        className?: string | ((values: import('react-aria-components').ListBoxRenderProps & {
+            defaultClassName: string | undefined;
+        }) => string) | undefined;
+        id?: string | undefined;
+        orientation?: import('react-aria').Orientation | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        children?: import('react').ReactNode | ((item: object) => import('react').ReactNode);
+        onFocus?: ((e: import('react').FocusEvent<Element, Element>) => void) | undefined;
+        onBlur?: ((e: import('react').FocusEvent<Element, Element>) => void) | undefined;
+        onScroll?: ((e: import('react').UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+        key?: import('react').Key | null | undefined;
+        autoFocus?: (boolean | import('@react-types/shared').FocusStrategy) | undefined;
+        items?: Iterable<object> | undefined;
+        disallowEmptySelection?: boolean | undefined;
+        onSelectionChange?: ((keys: import('react-aria-components').Selection) => void) | undefined;
+        disabledKeys?: Iterable<import('react-aria-components').Key> | undefined;
+        onFocusChange?: ((isFocused: boolean) => void) | undefined;
+        selectionBehavior?: import('react-stately').SelectionBehavior | undefined;
+        onAction?: ((key: import('react-aria-components').Key) => void) | undefined;
+        shouldFocusWrap?: boolean | undefined;
+        selectionMode?: import('react-aria-components').SelectionMode | undefined;
+        selectedKeys?: ("all" | Iterable<import('react-aria-components').Key>) | undefined;
+        defaultSelectedKeys?: ("all" | Iterable<import('react-aria-components').Key>) | undefined;
+        dragAndDropHooks?: import('react-aria-components').DragAndDropHooks | undefined;
+        renderEmptyState?: ((props: import('react-aria-components').ListBoxRenderProps) => import('react').ReactNode) | undefined;
+        layout?: "stack" | "grid" | undefined;
+        dependencies?: any[] | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }> & (<T extends object>(props: import('react-aria-components').ListBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null);
+    ListBoxItem: import('styled-components').IStyledComponent<"web", import('styled-components/dist/types').Substitute<Omit<import('react-aria-components').ListBoxItemProps<object> & import('react').RefAttributes<object>, "ref"> & {
+        ref?: ((instance: object | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<object> | null | undefined;
+    }, {
+        $density: "compact" | "comfortable";
+    }>> & (<T extends object>(props: import('react-aria-components').ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null);
+    Trigger: import('styled-components').IStyledComponent<"web", import('styled-components/dist/types').Substitute<Omit<import('react-aria-components').ButtonProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
+    }, {
+        $variant?: InputProps["variant"];
+        $hasLabel: boolean;
+        $readonly: boolean;
+        $density: "compact" | "comfortable";
+    }>> & ((props: import('react-aria-components').ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null);
+    Wrapper: import('styled-components').IStyledComponent<"web", import('styled-components/dist/types').Substitute<Omit<import('react-aria-components').SelectProps<object> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, {
+        $variant?: InputProps["variant"];
+    }>> & (<T extends object>(props: import('react-aria-components').SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null);
+    Label: import('styled-components').IStyledComponent<"web", {
+        form?: string | undefined | undefined;
+        style?: import('react').CSSProperties | undefined;
+        slot?: string | undefined | undefined;
+        title?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        role?: import('react').AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        children?: import('react').ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onCopyCapture?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onCut?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onCutCapture?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onPaste?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onPasteCapture?: import('react').ClipboardEventHandler<HTMLLabelElement> | undefined;
+        onCompositionEnd?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onCompositionStart?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLLabelElement> | undefined;
+        onFocus?: import('react').FocusEventHandler<HTMLLabelElement> | undefined;
+        onFocusCapture?: import('react').FocusEventHandler<HTMLLabelElement> | undefined;
+        onBlur?: import('react').FocusEventHandler<HTMLLabelElement> | undefined;
+        onBlurCapture?: import('react').FocusEventHandler<HTMLLabelElement> | undefined;
+        onChange?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onChangeCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onBeforeInput?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onBeforeInputCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onInput?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onInputCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onReset?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onResetCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onSubmit?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onSubmitCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onInvalid?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onInvalidCapture?: import('react').FormEventHandler<HTMLLabelElement> | undefined;
+        onLoad?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onError?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onErrorCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onKeyDown?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onKeyPress?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onKeyUp?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLLabelElement> | undefined;
+        onAbort?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onAbortCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onCanPlay?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onCanPlayCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onCanPlayThrough?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onDurationChange?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onDurationChangeCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEmptied?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEmptiedCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEncrypted?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEncryptedCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEnded?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onEndedCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadedData?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadedDataCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadedMetadata?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadStart?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onLoadStartCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPause?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPauseCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPlay?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPlayCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPlaying?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onPlayingCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onProgress?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onProgressCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onRateChange?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onRateChangeCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onResize?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onResizeCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSeeked?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSeekedCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSeeking?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSeekingCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onStalled?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onStalledCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSuspend?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSuspendCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onTimeUpdate?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onVolumeChange?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onWaiting?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onWaitingCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onAuxClick?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onAuxClickCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onClick?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onClickCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onContextMenu?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onContextMenuCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onDoubleClick?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onDoubleClickCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onDrag?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragEnd?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragEndCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragEnter?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragEnterCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragExit?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragExitCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragLeave?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragLeaveCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragOver?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragOverCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragStart?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDragStartCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDrop?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onDropCapture?: import('react').DragEventHandler<HTMLLabelElement> | undefined;
+        onMouseDown?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseDownCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseEnter?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseLeave?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseMove?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseMoveCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseOut?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseOutCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseOver?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseOverCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseUp?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onMouseUpCapture?: import('react').MouseEventHandler<HTMLLabelElement> | undefined;
+        onSelect?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onSelectCapture?: import('react').ReactEventHandler<HTMLLabelElement> | undefined;
+        onTouchCancel?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchCancelCapture?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchEnd?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchEndCapture?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchMove?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchMoveCapture?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchStart?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onTouchStartCapture?: import('react').TouchEventHandler<HTMLLabelElement> | undefined;
+        onPointerDown?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerDownCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerMove?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerMoveCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerUp?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerUpCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerCancel?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerCancelCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerEnter?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerLeave?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerOver?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerOverCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerOut?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onPointerOutCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onGotPointerCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onLostPointerCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLLabelElement> | undefined;
+        onScroll?: import('react').UIEventHandler<HTMLLabelElement> | undefined;
+        onScrollCapture?: import('react').UIEventHandler<HTMLLabelElement> | undefined;
+        onWheel?: import('react').WheelEventHandler<HTMLLabelElement> | undefined;
+        onWheelCapture?: import('react').WheelEventHandler<HTMLLabelElement> | undefined;
+        onAnimationStart?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onAnimationEnd?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onAnimationIteration?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLLabelElement> | undefined;
+        onTransitionEnd?: import('react').TransitionEventHandler<HTMLLabelElement> | undefined;
+        onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLLabelElement> | undefined;
+        key?: import('react').Key | null | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCapitalize?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        htmlFor?: string | undefined | undefined;
+        elementType?: string | undefined;
+        ref?: ((instance: HTMLLabelElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLabelElement> | null | undefined;
+    }> & ((props: import('react-aria-components').LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null);
+    Popover: import('styled-components').IStyledComponent<"web", {
+        style?: import('react').CSSProperties | ((values: import('react-aria-components').PopoverRenderProps & {
+            defaultStyle: import('react').CSSProperties;
+        }) => import('react').CSSProperties | undefined) | undefined;
+        slot?: string | null | undefined;
+        className?: string | ((values: import('react-aria-components').PopoverRenderProps & {
+            defaultClassName: string | undefined;
+        }) => string) | undefined;
+        offset?: number | undefined;
+        children?: import('react').ReactNode | ((values: import('react-aria-components').PopoverRenderProps & {
+            defaultChildren: import('react').ReactNode | undefined;
+        }) => import('react').ReactNode);
+        key?: import('react').Key | null | undefined;
+        isOpen?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onOpenChange?: ((isOpen: boolean) => void) | undefined;
+        placement?: import('react-aria').Placement | undefined;
+        containerPadding?: number | undefined;
+        crossOffset?: number | undefined;
+        shouldFlip?: boolean | undefined;
+        triggerRef?: import('@react-types/shared').RefObject<Element | null> | undefined;
+        boundaryElement?: Element | undefined;
+        scrollRef?: import('@react-types/shared').RefObject<Element | null> | undefined;
+        shouldUpdatePosition?: boolean | undefined;
+        maxHeight?: number | undefined;
+        arrowBoundaryOffset?: number | undefined;
+        groupRef?: import('@react-types/shared').RefObject<Element | null> | undefined;
+        isNonModal?: boolean | undefined;
+        isKeyboardDismissDisabled?: boolean | undefined;
+        shouldCloseOnInteractOutside?: ((element: Element) => boolean) | undefined;
+        trigger?: string | undefined;
+        isEntering?: boolean | undefined;
+        isExiting?: boolean | undefined;
+        UNSTABLE_portalContainer?: Element | undefined;
+        ref?: ((instance: HTMLElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLElement> | null | undefined;
+    }> & ((props: import('react-aria-components').PopoverProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null);
+    HelperText: ({ helperText }: {
+        helperText?: import('react').ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default _default;

package/lib/switch/Switch.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ToggleStateOptions } from '@react-types/checkbox';
+type Props = ToggleStateOptions & {
+    children?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    label?: string;
+};
+export declare function Switch(sourceProps: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@equinor/roma-ui",
+  "version": "0.1.0",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./switch": {
+      "types": "./lib/switch/Switch.d.ts",
+      "import": "./switch.mjs",
+      "require": "./switch.js"
+    },
+    "./select": {
+      "types": "./lib/select/select.d.ts",
+      "import": "./select.mjs",
+      "require": "./select.js"
+    },
+    "./dates": {
+      "types": "./lib/dates/index.d.ts",
+      "import": "./dates.mjs",
+      "require": "./dates.js"
+    }
+  },
+  "peerDependencies": {
+    "react-aria": "^3.38.0",
+    "react-aria-components": "^1.2.1"
+  }
+}

package/select.js

@@ -0,0 +1,149 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react-aria-components"),u=require("@equinor/eds-core-react"),A=require("@equinor/eds-icons"),n=require("react"),r=require("styled-components"),t=require("@equinor/eds-tokens"),D=r(u.Typography)`
+  variant={'helper'};
+  group={$group};
+  margin-left: 8px;
+  margin-top: 8px;
+`,_=({helperText:e})=>e?o.jsx(D,{group:"input",children:e}):null,W=r(i.Select)`
+  --focus-ring-color: red;
+  --text-color-placeholder: ${t.tokens.colors.text.static_icons__tertiary.rgba};
+  --highlight-background: ${t.tokens.colors.ui.background__light.rgba};
+  --highlight-foreground: ${t.tokens.colors.ui.background__light.rgba};
+  --trigger-width: 300px;
+  --text-color: ${({$variant:e})=>e==="error"?t.tokens.colors.interactive.danger__text.rgba:e==="success"?t.tokens.colors.interactive.success__text.rgba:e==="warning"?t.tokens.colors.interactive.warning__text.rgba:"#000"};
+  --label-color: ${({$variant:e})=>e==="error"?t.tokens.colors.interactive.danger__text.rgba:e==="success"?t.tokens.colors.interactive.success__text.rgba:e==="warning"?t.tokens.colors.interactive.warning__text.rgba:t.tokens.colors.text.static_icons__tertiary.rgba};
+  --outline-color: ${({$variant:e})=>e==="error"?t.tokens.colors.interactive.danger__resting.rgba:e==="success"?t.tokens.colors.interactive.success__resting.rgba:e==="warning"?t.tokens.colors.interactive.warning__resting.rgba:t.tokens.colors.interactive.primary__resting.rgba};
+  outline: none;
+`,F=r(i.Button)`
+  --shadow: inset 0px -1px 0px 0px ${t.tokens.colors.text.static_icons__tertiary.rgba};
+  cursor: pointer;
+  max-width: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  border: 0;
+  align-items: center;
+  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: ${({$readonly:e})=>e?t.tokens.colors.ui.background__default.rgba:t.tokens.colors.ui.background__light.rgba};
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  font-family: ${t.tokens.typography.input.text.fontFamily};
+  ${({$variant:e,$readonly:a})=>e!=="error"&&!a&&"box-shadow: var(--shadow);"}
+  span[data-placeholder] {
+    color: ${t.tokens.colors.text.static_icons__tertiary.rgba};
+  }
+  height: ${({$density:e})=>e==="compact"?"24px":"36px"};
+
+  &:not([data-focused], [data-pressed]) {
+    ${({$variant:e})=>e==="error"&&"outline: 1px solid var(--outline-color) !important;"}
+  }
+  &:focus-visible,
+  &[data-pressed] {
+    ${({$hasLabel:e})=>!e&&`background-color: ${t.tokens.colors.ui.background__medium.rgba};`}
+  }
+  &:focus-within,
+  &[data-pressed] {
+    outline: 2px solid var(--outline-color);
+    box-shadow: none;
+  }
+
+  &[data-readonly] {
+    color: var(--text-color) !important;
+    cursor: default;
+  }
+`,K=r(i.ListBox)`
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 8px, rgba(0, 0, 0, 0.12) 0px 5px 22px,
+    rgba(0, 0, 0, 0.14) 0px 12px 17px;
+  background-color: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  border-radius: 4px;
+  overflow-y: auto;
+  max-height: 300px;
+  height: min-content;
+  display: block;
+  min-height: unset;
+  border: none;
+  outline: none;
+  width: fit-content;
+
+  .react-aria-Header {
+    padding-left: 1.571rem;
+  }
+`,f=r(i.ListBoxItem)`
+  cursor: pointer;
+  outline: none;
+  padding: 0 24px;
+  height: ${({$density:e})=>e==="compact"?"32px":"48px"};
+  display: flex;
+  min-width: calc(var(--trigger-width) - 63px);
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  & > div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &:hover:not([data-disabled]) {
+    background-color: ${t.tokens.colors.ui.background__medium.rgba};
+  }
+
+  &[data-focus-visible] {
+    outline: none;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-placeholder);
+    cursor: not-allowed;
+  }
+
+  &[data-selected] {
+    font-weight: 600;
+    background: var(
+      --eds_interactive_primary__selected_highlight,
+      rgba(230, 250, 236, 1)
+    );
+    color: var(--text-color);
+  }
+
+  &[data-focused],
+  &[data-pressed] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+`,N=r(i.Label)`
+  font-size: ${t.tokens.typography.input.label.fontSize};
+  font-family: ${t.tokens.typography.input.label.fontFamily};
+  font-weight: ${t.tokens.typography.input.label.fontWeight};
+  line-height: ${t.tokens.typography.input.label.lineHeight};
+  text-align: ${t.tokens.typography.input.label.textAlign};
+  color: ${t.tokens.colors.text.static_icons__tertiary.rgba};
+
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0 8px;
+`,O=r(i.Popover)`
+  --text-color: ${t.tokens.colors.text.static_icons__default.rgba};
+  --text-color-placeholder: ${t.tokens.colors.text.static_icons__tertiary.rgba};
+  --highlight-background: ${t.tokens.colors.ui.background__medium.rgba};
+  --highlight-foreground: var(--text-color);
+  font-family: Equinor;
+  max-width: var(--trigger-width);
+  width: 100%;
+  border-radius: 10px;
+  outline: none;
+`;f.displayName="StyledListBoxItem";const s={ListBox:K,ListBoxItem:f,Trigger:F,Wrapper:W,Label:N,Popover:O,HelperText:_},U=r.div`
+  width: 24px;
+  height: 24px;
+  min-width: 18px;
+  margin-right: 2px;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: ${({$isHover:e})=>e?t.tokens.colors.interactive.primary__hover_alt.rgba:""};
+`,V=n.forwardRef(function({children:e,variant:a,selected:d,onSelectedChange:l,label:g,helperText:y,placeholder:k,items:v,ariaLabel:w,disabledKeys:J,disabled:m,readOnly:p,getValueText:$,onChange:h,showClearButton:Q,...S},L){const[x,j]=n.useState(),{density:B}=u.useEds(),I=n.useMemo(()=>d?`select-option-${d}`:x?`select-option-${x}`:"",[x,d]),q=n.useCallback(R=>{let c=(R??"").toString().replace("select-option-","");c===""&&(c=null),l?l(c):h?h({target:{value:c},currentTarget:{value:c}}):j(c)},[h,l]),T=n.useRef(),C=L??T,[E,H]=n.useState(!1),[M,b]=n.useState(!1),z=()=>{b(!0)},P=()=>{b(!1)};return o.jsxs(s.Wrapper,{onSelectionChange:q,selectedKey:I,$variant:a,autoComplete:"text",placeholder:k??" ",isOpen:p?!1:E,onOpenChange:H,isDisabled:m??p,"aria-label":w,...S,children:[g&&o.jsx(s.Label,{elementType:"label",children:g}),o.jsxs(s.Trigger,{ref:C,$density:B,$variant:a,$readonly:p??!1,"data-readonly":p,$hasLabel:!!g,children:[o.jsx(i.SelectValue,{children:$}),!p&&o.jsx(U,{onMouseEnter:z,onMouseLeave:P,$isHover:M,children:o.jsx(u.Icon,{size:24,data:A.arrow_drop_down,color:t.tokens.colors.interactive.primary__resting.rgba})})]}),o.jsx(s.Popover,{offset:4,UNSTABLE_portalContainer:document.querySelector("#roma-deal")??document.body,children:o.jsx(s.ListBox,{items:v,children:e})}),o.jsx(_,{helperText:y})]})}),G=({value:e,children:a,item:d,...l})=>{const{density:g}=u.useEds();return o.jsx(s.ListBoxItem,{$density:g,id:`select-option-${e}`,value:d,isDisabled:l.disabled,...l,children:a})};exports.Option=G;exports.Select=V;exports.Styled=s;

package/select.mjs

@@ -0,0 +1,284 @@
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { Select as W, Button as q, ListBox as A, ListBoxItem as F, Label as K, Popover as N, SelectValue as U } from "react-aria-components";
+import { Typography as V, useEds as x, Icon as G } from "@equinor/eds-core-react";
+import { arrow_drop_down as J } from "@equinor/eds-icons";
+import { forwardRef as Q, useState as u, useMemo as X, useCallback as Y, useRef as Z } from "react";
+import r from "styled-components";
+import { tokens as o } from "@equinor/eds-tokens";
+const O = r(V)`
+  variant={'helper'};
+  group={$group};
+  margin-left: 8px;
+  margin-top: 8px;
+`, _ = ({ helperText: e }) => e ? /* @__PURE__ */ t(
+  O,
+  {
+    group: "input",
+    children: e
+  }
+) : null, ee = r(W)`
+  --focus-ring-color: red;
+  --text-color-placeholder: ${o.colors.text.static_icons__tertiary.rgba};
+  --highlight-background: ${o.colors.ui.background__light.rgba};
+  --highlight-foreground: ${o.colors.ui.background__light.rgba};
+  --trigger-width: 300px;
+  --text-color: ${({ $variant: e }) => e === "error" ? o.colors.interactive.danger__text.rgba : e === "success" ? o.colors.interactive.success__text.rgba : e === "warning" ? o.colors.interactive.warning__text.rgba : "#000"};
+  --label-color: ${({ $variant: e }) => e === "error" ? o.colors.interactive.danger__text.rgba : e === "success" ? o.colors.interactive.success__text.rgba : e === "warning" ? o.colors.interactive.warning__text.rgba : o.colors.text.static_icons__tertiary.rgba};
+  --outline-color: ${({ $variant: e }) => e === "error" ? o.colors.interactive.danger__resting.rgba : e === "success" ? o.colors.interactive.success__resting.rgba : e === "warning" ? o.colors.interactive.warning__resting.rgba : o.colors.interactive.primary__resting.rgba};
+  outline: none;
+`, oe = r(q)`
+  --shadow: inset 0px -1px 0px 0px ${o.colors.text.static_icons__tertiary.rgba};
+  cursor: pointer;
+  max-width: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  border: 0;
+  align-items: center;
+  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: ${({ $readonly: e }) => e ? o.colors.ui.background__default.rgba : o.colors.ui.background__light.rgba};
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  font-family: ${o.typography.input.text.fontFamily};
+  ${({ $variant: e, $readonly: i }) => e !== "error" && !i && "box-shadow: var(--shadow);"}
+  span[data-placeholder] {
+    color: ${o.colors.text.static_icons__tertiary.rgba};
+  }
+  height: ${({ $density: e }) => e === "compact" ? "24px" : "36px"};
+
+  &:not([data-focused], [data-pressed]) {
+    ${({ $variant: e }) => e === "error" && "outline: 1px solid var(--outline-color) !important;"}
+  }
+  &:focus-visible,
+  &[data-pressed] {
+    ${({ $hasLabel: e }) => !e && `background-color: ${o.colors.ui.background__medium.rgba};`}
+  }
+  &:focus-within,
+  &[data-pressed] {
+    outline: 2px solid var(--outline-color);
+    box-shadow: none;
+  }
+
+  &[data-readonly] {
+    color: var(--text-color) !important;
+    cursor: default;
+  }
+`, te = r(A)`
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 8px, rgba(0, 0, 0, 0.12) 0px 5px 22px,
+    rgba(0, 0, 0, 0.14) 0px 12px 17px;
+  background-color: var(--eds_ui_background__default, rgba(255, 255, 255, 1));
+  border-radius: 4px;
+  overflow-y: auto;
+  max-height: 300px;
+  height: min-content;
+  display: block;
+  min-height: unset;
+  border: none;
+  outline: none;
+  width: fit-content;
+
+  .react-aria-Header {
+    padding-left: 1.571rem;
+  }
+`, f = r(F)`
+  cursor: pointer;
+  outline: none;
+  padding: 0 24px;
+  height: ${({ $density: e }) => e === "compact" ? "32px" : "48px"};
+  display: flex;
+  min-width: calc(var(--trigger-width) - 63px);
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  & > div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &:hover:not([data-disabled]) {
+    background-color: ${o.colors.ui.background__medium.rgba};
+  }
+
+  &[data-focus-visible] {
+    outline: none;
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-placeholder);
+    cursor: not-allowed;
+  }
+
+  &[data-selected] {
+    font-weight: 600;
+    background: var(
+      --eds_interactive_primary__selected_highlight,
+      rgba(230, 250, 236, 1)
+    );
+    color: var(--text-color);
+  }
+
+  &[data-focused],
+  &[data-pressed] {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+  }
+`, re = r(K)`
+  font-size: ${o.typography.input.label.fontSize};
+  font-family: ${o.typography.input.label.fontFamily};
+  font-weight: ${o.typography.input.label.fontWeight};
+  line-height: ${o.typography.input.label.lineHeight};
+  text-align: ${o.typography.input.label.textAlign};
+  color: ${o.colors.text.static_icons__tertiary.rgba};
+
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0 8px;
+`, ie = r(N)`
+  --text-color: ${o.colors.text.static_icons__default.rgba};
+  --text-color-placeholder: ${o.colors.text.static_icons__tertiary.rgba};
+  --highlight-background: ${o.colors.ui.background__medium.rgba};
+  --highlight-foreground: var(--text-color);
+  font-family: Equinor;
+  max-width: var(--trigger-width);
+  width: 100%;
+  border-radius: 10px;
+  outline: none;
+`;
+f.displayName = "StyledListBoxItem";
+const s = {
+  ListBox: te,
+  ListBoxItem: f,
+  Trigger: oe,
+  Wrapper: ee,
+  Label: re,
+  Popover: ie,
+  HelperText: _
+}, ae = r.div`
+  width: 24px;
+  height: 24px;
+  min-width: 18px;
+  margin-right: 2px;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: ${({ $isHover: e }) => e ? o.colors.interactive.primary__hover_alt.rgba : ""};
+`, xe = Q(function({
+  children: e,
+  variant: i,
+  selected: l,
+  onSelectedChange: a,
+  label: c,
+  helperText: m,
+  placeholder: y,
+  items: w,
+  ariaLabel: v,
+  disabledKeys: ne,
+  disabled: $,
+  readOnly: d,
+  getValueText: k,
+  onChange: p,
+  showClearButton: se,
+  ...L
+}, S) {
+  const [g, B] = u(), { density: I } = x(), T = X(() => l ? `select-option-${l}` : g ? `select-option-${g}` : "", [g, l]), H = Y(
+    (R) => {
+      let n = (R ?? "").toString().replace("select-option-", "");
+      n === "" && (n = null), a ? a(n) : p ? p({
+        target: { value: n },
+        currentTarget: { value: n }
+      }) : B(n);
+    },
+    [p, a]
+  ), E = Z(), M = S ?? E, [j, z] = u(!1), [C, h] = u(!1), D = () => {
+    h(!0);
+  }, P = () => {
+    h(!1);
+  };
+  return /* @__PURE__ */ b(
+    s.Wrapper,
+    {
+      onSelectionChange: H,
+      selectedKey: T,
+      $variant: i,
+      autoComplete: "text",
+      placeholder: y ?? " ",
+      isOpen: d ? !1 : j,
+      onOpenChange: z,
+      isDisabled: $ ?? d,
+      "aria-label": v,
+      ...L,
+      children: [
+        c && /* @__PURE__ */ t(s.Label, { elementType: "label", children: c }),
+        /* @__PURE__ */ b(
+          s.Trigger,
+          {
+            ref: M,
+            $density: I,
+            $variant: i,
+            $readonly: d ?? !1,
+            "data-readonly": d,
+            $hasLabel: !!c,
+            children: [
+              /* @__PURE__ */ t(U, { children: k }),
+              !d && /* @__PURE__ */ t(
+                ae,
+                {
+                  onMouseEnter: D,
+                  onMouseLeave: P,
+                  $isHover: C,
+                  children: /* @__PURE__ */ t(
+                    G,
+                    {
+                      size: 24,
+                      data: J,
+                      color: o.colors.interactive.primary__resting.rgba
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          s.Popover,
+          {
+            offset: 4,
+            UNSTABLE_portalContainer: document.querySelector("#roma-deal") ?? document.body,
+            children: /* @__PURE__ */ t(s.ListBox, { items: w, children: e })
+          }
+        ),
+        /* @__PURE__ */ t(_, { helperText: m })
+      ]
+    }
+  );
+}), _e = ({
+  value: e,
+  children: i,
+  item: l,
+  ...a
+}) => {
+  const { density: c } = x();
+  return /* @__PURE__ */ t(
+    s.ListBoxItem,
+    {
+      $density: c,
+      id: `select-option-${e}`,
+      value: l,
+      isDisabled: a.disabled,
+      ...a,
+      children: i
+    }
+  );
+};
+export {
+  _e as Option,
+  xe as Select,
+  s as Styled
+};

package/switch.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("react-aria"),b=require("react"),d=require("@equinor/eds-tokens"),C=require("@equinor/eds-core-react");function k(e,t,i){let[o,u]=b.useState(e||t),f=b.useRef(e!==void 0),s=e!==void 0;b.useEffect(()=>{let l=f.current;l!==s&&process.env.NODE_ENV!=="production"&&console.warn(`WARN: A component changed from ${l?"controlled":"uncontrolled"} to ${s?"controlled":"uncontrolled"}.`),f.current=s},[s]);let a=s?e:o,g=b.useCallback((l,...n)=>{let r=(h,...y)=>{i&&(Object.is(a,h)||i(h,...y)),s||(a=h)};typeof l=="function"?(process.env.NODE_ENV!=="production"&&console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"),u((y,...p)=>{let x=l(s?a:y,...p);return r(x,...n),s?y:x})):(s||u(l),r(l,...n))},[s,a,i]);return[a,g]}function R(e={}){let{isReadOnly:t}=e,[i,o]=k(e.isSelected,e.defaultSelected||!1,e.onChange);function u(s){t||o(s)}function f(){t||o(!i)}return{isSelected:i,setSelected:u,toggle:f}}const _={close:"M8.21967 9.28033C8.51256 9.57322 8.98744 9.57322 9.28033 9.28033C9.57322 8.98744 9.57322 8.51256 9.28033 8.21967L6.06066 5L9.28033 1.78033C9.57322 1.48744 9.57322 1.01256 9.28033 0.71967C8.98744 0.426777 8.51256 0.426777 8.21967 0.71967L5 3.93934L1.78033 0.71967C1.48744 0.426777 1.01256 0.426777 0.71967 0.71967C0.426777 1.01256 0.426777 1.48744 0.71967 1.78033L3.93934 5L0.71967 8.21967C0.426777 8.51256 0.426777 8.98744 0.71967 9.28033C1.01256 9.57322 1.48744 9.57322 1.78033 9.28033L5 6.06066L8.21967 9.28033Z",check:"M13.0303 4.21967C13.3232 4.51256 13.3232 4.98744 13.0303 5.28033L6.78033 11.5303C6.48744 11.8232 6.01256 11.8232 5.71967 11.5303L2.96967 8.78033C2.67678 8.48744 2.67678 8.01256 2.96967 7.71967C3.26256 7.42678 3.73744 7.42678 4.03033 7.71967L6.25 9.93934L11.9697 4.21967C12.2626 3.92678 12.7374 3.92678 13.0303 4.21967Z"};function m(e){const t={...e,isDisabled:e.isDisabled??e.disabled,isReadOnly:e.isReadOnly??e.readOnly,isSelected:e.isSelected??e.checked,defaultSelected:e.defaultSelected??e.defaultChecked},i=R(t),o=b.useRef(null),{inputProps:u}=S.useSwitch(t,i,o),{isFocusVisible:f,focusProps:s}=S.useFocusRing(),{isHovered:a,hoverProps:g}=S.useHover({isDisabled:!1}),{density:l}=C.useEds(),n=l==="compact",r=b.useMemo(()=>({ripple:d.tokens.colors.interactive.primary__hover_alt.rgba,background:i.isSelected?d.tokens.colors.interactive.primary__resting.hex:"rgba(220, 220, 220, 1)",circle:i.isSelected?d.tokens.colors.interactive.primary__hover_alt.hex:"rgba(111, 111, 111, 1)",icon:i.isSelected?d.tokens.colors.interactive.primary__resting.hex:"white",focus:d.tokens.colors.interactive.primary__resting.hex}),[i.isSelected]),h=n?32:48,y=n?4:12,p=n?0:8;return c.jsxs(C.Typography,{as:"label",variant:"text",group:"input",style:{display:"flex",alignItems:"center",color:t.isReadOnly||t.isDisabled?d.tokens.colors.text.static_icons__tertiary.rgba:d.tokens.colors.text.static_icons__default.rgba,cursor:t.isReadOnly||t.isDisabled?"not-allowed":"pointer"},children:[c.jsx(S.VisuallyHidden,{children:c.jsx("input",{...u,...s,ref:o})}),c.jsx("div",{style:{display:"inline",height:n?32:48},...g,children:c.jsxs("svg",{width:60,height:h,"aria-hidden":"true",style:{marginRight:4,opacity:t.isDisabled||t.isReadOnly?.4:1},children:[a&&!t.isDisabled&&!t.isReadOnly&&c.jsx("circle",{cx:i.isSelected?42:20,cy:16+p,r:n?16:20,fill:r.ripple}),c.jsx("rect",{x:8,y,width:46,height:24,rx:12,fill:r.background}),c.jsx("circle",{cx:i.isSelected?42:20,cy:16+p,r:9.5,fill:r.circle}),c.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:i.isSelected?_.check:_.close,transform:`translate(${i.isSelected?32:14},${(i.isSelected?6:10)+p}) scale(1.2)`,fill:r.icon,style:{pointerEvents:"none"}}),f&&c.jsx("rect",{x:6,y:p,width:50,height:32,rx:12,fill:"none",strokeDasharray:2,stroke:r.focus,strokeWidth:2})]})}),t.children??t.label]})}exports.Switch=m;

package/switch.mjs

@@ -0,0 +1,160 @@
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { useSwitch as _, useFocusRing as x, useHover as R, VisuallyHidden as O } from "react-aria";
+import { useState as k, useRef as C, useEffect as L, useCallback as v, useMemo as w } from "react";
+import { tokens as a } from "@equinor/eds-tokens";
+import { useEds as D, Typography as $ } from "@equinor/eds-core-react";
+function V(e, t, i) {
+  let [o, f] = k(e || t), u = C(e !== void 0), l = e !== void 0;
+  L(() => {
+    let c = u.current;
+    c !== l && process.env.NODE_ENV !== "production" && console.warn(`WARN: A component changed from ${c ? "controlled" : "uncontrolled"} to ${l ? "controlled" : "uncontrolled"}.`), u.current = l;
+  }, [
+    l
+  ]);
+  let d = l ? e : o, b = v((c, ...s) => {
+    let n = (h, ...p) => {
+      i && (Object.is(d, h) || i(h, ...p)), l || (d = h);
+    };
+    typeof c == "function" ? (process.env.NODE_ENV !== "production" && console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"), f((p, ...y) => {
+      let g = c(l ? d : p, ...y);
+      return n(g, ...s), l ? p : g;
+    })) : (l || f(c), n(c, ...s));
+  }, [
+    l,
+    d,
+    i
+  ]);
+  return [
+    d,
+    b
+  ];
+}
+function E(e = {}) {
+  let { isReadOnly: t } = e, [i, o] = V(e.isSelected, e.defaultSelected || !1, e.onChange);
+  function f(l) {
+    t || o(l);
+  }
+  function u() {
+    t || o(!i);
+  }
+  return {
+    isSelected: i,
+    setSelected: f,
+    toggle: u
+  };
+}
+const m = {
+  close: "M8.21967 9.28033C8.51256 9.57322 8.98744 9.57322 9.28033 9.28033C9.57322 8.98744 9.57322 8.51256 9.28033 8.21967L6.06066 5L9.28033 1.78033C9.57322 1.48744 9.57322 1.01256 9.28033 0.71967C8.98744 0.426777 8.51256 0.426777 8.21967 0.71967L5 3.93934L1.78033 0.71967C1.48744 0.426777 1.01256 0.426777 0.71967 0.71967C0.426777 1.01256 0.426777 1.48744 0.71967 1.78033L3.93934 5L0.71967 8.21967C0.426777 8.51256 0.426777 8.98744 0.71967 9.28033C1.01256 9.57322 1.48744 9.57322 1.78033 9.28033L5 6.06066L8.21967 9.28033Z",
+  check: "M13.0303 4.21967C13.3232 4.51256 13.3232 4.98744 13.0303 5.28033L6.78033 11.5303C6.48744 11.8232 6.01256 11.8232 5.71967 11.5303L2.96967 8.78033C2.67678 8.48744 2.67678 8.01256 2.96967 7.71967C3.26256 7.42678 3.73744 7.42678 4.03033 7.71967L6.25 9.93934L11.9697 4.21967C12.2626 3.92678 12.7374 3.92678 13.0303 4.21967Z"
+};
+function W(e) {
+  const t = {
+    ...e,
+    isDisabled: e.isDisabled ?? e.disabled,
+    isReadOnly: e.isReadOnly ?? e.readOnly,
+    isSelected: e.isSelected ?? e.checked,
+    defaultSelected: e.defaultSelected ?? e.defaultChecked
+  }, i = E(t), o = C(null), { inputProps: f } = _(t, i, o), { isFocusVisible: u, focusProps: l } = x(), { isHovered: d, hoverProps: b } = R({ isDisabled: !1 }), { density: c } = D(), s = c === "compact", n = w(() => ({
+    ripple: a.colors.interactive.primary__hover_alt.rgba,
+    background: i.isSelected ? a.colors.interactive.primary__resting.hex : "rgba(220, 220, 220, 1)",
+    circle: i.isSelected ? a.colors.interactive.primary__hover_alt.hex : "rgba(111, 111, 111, 1)",
+    icon: i.isSelected ? a.colors.interactive.primary__resting.hex : "white",
+    focus: a.colors.interactive.primary__resting.hex
+  }), [i.isSelected]), h = s ? 32 : 48, p = s ? 4 : 12, y = s ? 0 : 8;
+  return /* @__PURE__ */ S(
+    $,
+    {
+      as: "label",
+      variant: "text",
+      group: "input",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        color: t.isReadOnly || t.isDisabled ? a.colors.text.static_icons__tertiary.rgba : a.colors.text.static_icons__default.rgba,
+        cursor: t.isReadOnly || t.isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("input", { ...f, ...l, ref: o }) }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: { display: "inline", height: s ? 32 : 48 },
+            ...b,
+            children: /* @__PURE__ */ S(
+              "svg",
+              {
+                width: 60,
+                height: h,
+                "aria-hidden": "true",
+                style: {
+                  marginRight: 4,
+                  opacity: t.isDisabled || t.isReadOnly ? 0.4 : 1
+                },
+                children: [
+                  d && !t.isDisabled && !t.isReadOnly && /* @__PURE__ */ r(
+                    "circle",
+                    {
+                      cx: i.isSelected ? 42 : 20,
+                      cy: 16 + y,
+                      r: s ? 16 : 20,
+                      fill: n.ripple
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: 8,
+                      y: p,
+                      width: 46,
+                      height: 24,
+                      rx: 12,
+                      fill: n.background
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "circle",
+                    {
+                      cx: i.isSelected ? 42 : 20,
+                      cy: 16 + y,
+                      r: 9.5,
+                      fill: n.circle
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      clipRule: "evenodd",
+                      d: i.isSelected ? m.check : m.close,
+                      transform: `translate(${i.isSelected ? 32 : 14},${(i.isSelected ? 6 : 10) + y}) scale(1.2)`,
+                      fill: n.icon,
+                      style: { pointerEvents: "none" }
+                    }
+                  ),
+                  u && /* @__PURE__ */ r(
+                    "rect",
+                    {
+                      x: 6,
+                      y,
+                      width: 50,
+                      height: 32,
+                      rx: 12,
+                      fill: "none",
+                      strokeDasharray: 2,
+                      stroke: n.focus,
+                      strokeWidth: 2
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        t.children ?? t.label
+      ]
+    }
+  );
+}
+export {
+  W as Switch
+};