@norges-domstoler/dds-components 5.5.0 → 7.0.0

package/dist/hooks/useOnKeyDown.js

@@ -1,5 +1,19 @@
 import { useEffect } from 'react';
 
+/**
+ * Kjører logikk når en spesifisert tast blir trykt ned.
+ * Typisk bruk:
+ * ```
+ * const [isOpen, setOpen] = useState(true);
+ * const ref = useRef<HTMLElement>(null);
+ * useOnKeyDown(['Escape', 'Esc'], () => setOpen(false));
+ *
+ * return isOpen ? <div>innhold</div> : null;
+ * ```
+ * @param key tasten som trykkes.
+ * @param handler funksjonen som skal kjøres.
+ */
+
 var useOnKeyDown = function useOnKeyDown(key, handler) {
   useEffect(function () {
     var listener = function listener(event) {

package/dist/hooks/useRoveFocus.d.ts

@@ -1,4 +1,28 @@
 import { Dispatch, SetStateAction, KeyboardEvent } from 'react';
 import { Direction } from '../types';
 export declare const isKeyboardEvent: (e: Event | KeyboardEvent<Element>) => e is KeyboardEvent<Element>;
-export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];
+/**
+ * Bytter fokus mellom elementer i en gruppe med piltaster og ikke Tab, og looper fokus i gruppen. Typisk bruk:
+ * ```
+ * import elements from './elements';
+ * import RoveItem from './RoveItem';
+ *
+ * const MyComponent = () => {
+ *  const [focus, setFocus] = useRoveFocus(elements.length);
+ *
+ *  return (
+ *  <ul>
+ *    {elements.map((element, index) => (
+ *    <li key={element}>
+ *      <RoveItem index={index} focus={focus === index} setFocus={setFocus}>{element.name}</RoveItem>
+ *    </li>
+ *    ))}
+ *  </ul>)
+ * }
+ * ```
+ * @param size antall elementer i gruppen.
+ * @param reset om fokus i gruppen skal nullstilles; når man tabber seg inn i gruppen skal focus være nullstilt.
+ * @param direction retning elementene blas i.
+ * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
+ */
+export declare function useRoveFocus(size?: number, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];

package/dist/hooks/useRoveFocus.js

@@ -4,6 +4,31 @@ import { useState, useCallback, useEffect } from 'react';
 var isKeyboardEvent = function isKeyboardEvent(e) {
   return e.key !== undefined;
 };
+/**
+ * Bytter fokus mellom elementer i en gruppe med piltaster og ikke Tab, og looper fokus i gruppen. Typisk bruk:
+ * ```
+ * import elements from './elements';
+ * import RoveItem from './RoveItem';
+ *
+ * const MyComponent = () => {
+ *  const [focus, setFocus] = useRoveFocus(elements.length);
+ *
+ *  return (
+ *  <ul>
+ *    {elements.map((element, index) => (
+ *    <li key={element}>
+ *      <RoveItem index={index} focus={focus === index} setFocus={setFocus}>{element.name}</RoveItem>
+ *    </li>
+ *    ))}
+ *  </ul>)
+ * }
+ * ```
+ * @param size antall elementer i gruppen.
+ * @param reset om fokus i gruppen skal nullstilles; når man tabber seg inn i gruppen skal focus være nullstilt.
+ * @param direction retning elementene blas i.
+ * @returns hook par: indeksen til fokuserte elemenentet og funksjonen som håndterer fokus.
+ */
+
 function useRoveFocus(size, reset) {
   var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'column';
 

package/dist/hooks/useScreenSize.d.ts

@@ -5,4 +5,16 @@ export declare enum ScreenSize {
     Large = 3,
     XLarge = 4
 }
+/**
+ * Sjekker skjermstørrelsen basert på brekkpunkter definerte i designsystemet. Eksempel på bruk:
+ * ```
+ * const MyComponent = () => {
+ *  const screenSize = useScreenSize();
+ *  const isSmallScreen = screenSize === ScreenSize.Small;
+ *
+ *  return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
+ * }
+ * ```
+ * @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
+ */
 export declare const useScreenSize: () => ScreenSize;

package/dist/hooks/useScreenSize.js

@@ -1,4 +1,5 @@
-import 'react';
+import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var breakpoints = ddsBaseTokens.breakpoints;
@@ -12,6 +13,55 @@ var ScreenSize;
   ScreenSize[ScreenSize["XLarge"] = 4] = "XLarge";
 })(ScreenSize || (ScreenSize = {}));
 
-[[ScreenSize.XLarge, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXl, ")")], [ScreenSize.Large, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointLg, ")")], [ScreenSize.Medium, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointMd, ")")], [ScreenSize.Small, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointSm, ")")], [ScreenSize.XSmall, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXs, ")")]];
+var screenSizesAndMediaQueries = [[ScreenSize.XLarge, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXl, ")")], [ScreenSize.Large, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointLg, ")")], [ScreenSize.Medium, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointMd, ")")], [ScreenSize.Small, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointSm, ")")], [ScreenSize.XSmall, "only screen and (min-width: ".concat(breakpoints.DdsBreakpointXs, ")")]];
+/**
+ * Sjekker skjermstørrelsen basert på brekkpunkter definerte i designsystemet. Eksempel på bruk:
+ * ```
+ * const MyComponent = () => {
+ *  const screenSize = useScreenSize();
+ *  const isSmallScreen = screenSize === ScreenSize.Small;
+ *
+ *  return <div className={isSmallScreen && 'smallDiv'} >innhold</div>
+ * }
+ * ```
+ * @returns den aktuelle skjermstørrelsen basert på {@link ScreenSize}.
+ */
 
-export { ScreenSize };
+var useScreenSize = function useScreenSize() {
+  var _useState = useState(ScreenSize.Large),
+      _useState2 = _slicedToArray(_useState, 2),
+      screenSize = _useState2[0],
+      setScreenSize = _useState2[1];
+
+  useEffect(function () {
+    function listener() {
+      var _iterator = _createForOfIteratorHelper(screenSizesAndMediaQueries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = _slicedToArray(_step.value, 2),
+              _screenSize = _step$value[0],
+              mediaQuery = _step$value[1];
+
+          if (window.matchMedia(mediaQuery).matches) {
+            setScreenSize(_screenSize);
+            return;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    window.addEventListener('resize', listener);
+    return function () {
+      return window.removeEventListener('resize', listener);
+    };
+  }, []);
+  return screenSize;
+};
+
+export { ScreenSize, useScreenSize };

package/dist/index.d.ts

@@ -37,3 +37,4 @@ export * from './components/ScrollableContainer';
 export * from './icons/tsx';
 export * from './components/ToggleBar';
 export * from './components/Stepper';
+export * from './hooks';

package/dist/index.js

@@ -200,3 +200,11 @@ export { ToggleBar } from './components/ToggleBar/ToggleBar.js';
 export { ToggleRadio } from './components/ToggleBar/ToggleRadio.js';
 export { Stepper } from './components/Stepper/Stepper.js';
 export { Step } from './components/Stepper/Step.js';
+export { useCombinedRef } from './hooks/useCombinedRefs.js';
+export { useOnClickOutside } from './hooks/useOnClickOutside.js';
+export { useOnKeyDown } from './hooks/useOnKeyDown.js';
+export { useFloatPosition } from './hooks/useFloatPosition.js';
+export { isKeyboardEvent, useRoveFocus } from './hooks/useRoveFocus.js';
+export { useFocusTrap } from './hooks/useFocusTrap.js';
+export { useMountTransition } from './hooks/useMountTransition.js';
+export { ScreenSize, useScreenSize } from './hooks/useScreenSize.js';

package/dist/test/mocks/ResizeObserver.d.ts

@@ -0,0 +1,6 @@
+declare class ResizeObserver {
+    observe(): void;
+    unobserve(): void;
+    disconnect(): void;
+}
+export default ResizeObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.5.0",
+  "version": "7.0.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -92,7 +92,7 @@
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "@norges-domstoler/dds-design-tokens": "^1.3.0",
+    "@norges-domstoler/dds-design-tokens": "^3.0.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "styled-components": "^5"

package/dist/cjs/components/Checkbox/Checkbox.styles.d.ts

@@ -1,5 +0,0 @@
-import { CheckboxProps } from './Checkbox.types';
-export declare const CustomCheckbox: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare type ContainerProps = Pick<CheckboxProps, 'disabled' | 'readOnly' | 'error' | 'indeterminate' | 'label'>;
-export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
-export {};

package/dist/cjs/components/Checkbox/Checkbox.tokens.d.ts

@@ -1,65 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const checkboxTokens: {
-    checkbox: {
-        base: CSSObject;
-        spaceLeft: string;
-        hover: {
-            base: CSSObject;
-        };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
-        };
-        checked: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        indeterminate: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-        };
-    };
-    checkmark: {
-        base: CSSObject;
-        color: string;
-        indeterminate: {
-            base: CSSObject;
-        };
-    };
-    container: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
-    };
-};

package/dist/cjs/components/RadioButton/RadioButton.styles.d.ts

@@ -1,5 +0,0 @@
-import { RadioButtonProps } from './RadioButton.types';
-export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare type ContainerProps = Pick<RadioButtonProps, 'error' | 'disabled' | 'readOnly'>;
-export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
-export {};

package/dist/cjs/components/RadioButton/RadioButton.tokens.d.ts

@@ -1,43 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const radioButtonTokens: {
-    radioButton: {
-        base: CSSObject;
-        spaceLeft: string;
-        hover: {
-            base: CSSObject;
-        };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
-        };
-        checked: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-        };
-    };
-    checkmark: {
-        base: CSSObject;
-    };
-    container: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
-};

package/dist/cjs/hooks/useId.d.ts

@@ -1 +0,0 @@
-export declare function useId(prefix: string, suffix?: string): string;

package/dist/components/Checkbox/Checkbox.styles.d.ts

@@ -1,5 +0,0 @@
-import { CheckboxProps } from './Checkbox.types';
-export declare const CustomCheckbox: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare type ContainerProps = Pick<CheckboxProps, 'disabled' | 'readOnly' | 'error' | 'indeterminate' | 'label'>;
-export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
-export {};

package/dist/components/Checkbox/Checkbox.styles.js

@@ -1,38 +0,0 @@
-import styled, { css } from 'styled-components';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
-import { checkboxTokens } from './Checkbox.tokens.js';
-
-var CustomCheckbox = styled.span.withConfig({
-  displayName: "Checkboxstyles__CustomCheckbox",
-  componentId: "sc-17q1ubf-0"
-})(["position:absolute;", " left:", ";box-sizing:border-box;&:after{content:'';position:absolute;display:none;}"], checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
-var Container = styled.label.withConfig({
-  displayName: "Checkboxstyles__Container",
-  componentId: "sc-17q1ubf-1"
-})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;", " ", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}input:checked ~ ", ":after{display:block;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}", " ", " ", " ", " ", ":after{border:solid ", ";", "}"], checkboxTokens.container.base, function (_ref) {
-  var label = _ref.label;
-  return label ? css(["", ""], checkboxTokens.container.withLabel.base) : css(["", ""], checkboxTokens.container.noLabel.base);
-}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focus.base, focusVisibleTransitionValue, function (_ref2) {
-  var error = _ref2.error;
-  return error && css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
-}, function (_ref3) {
-  var indeterminate = _ref3.indeterminate;
-  return indeterminate && css(["input:enabled ~ ", "{", "}input ~ ", ":after{display:block;}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
-}, function (_ref4) {
-  var disabled = _ref4.disabled,
-      indeterminate = _ref4.indeterminate;
-  return disabled && css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
-}, function (_ref5) {
-  var readOnly = _ref5.readOnly,
-      indeterminate = _ref5.indeterminate;
-  return readOnly && css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
-}, CustomCheckbox, checkboxTokens.checkmark.color, function (_ref6) {
-  var indeterminate = _ref6.indeterminate;
-  return indeterminate ? css(["left:25%;top:50%;width:50%;height:1px;", ""], checkboxTokens.checkmark.indeterminate.base) : css(["", ""], checkboxTokens.checkmark.base);
-});
-
-export { Container, CustomCheckbox };

package/dist/components/Checkbox/Checkbox.tokens.d.ts

@@ -1,65 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const checkboxTokens: {
-    checkbox: {
-        base: CSSObject;
-        spaceLeft: string;
-        hover: {
-            base: CSSObject;
-        };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
-        };
-        checked: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        indeterminate: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-        };
-    };
-    checkmark: {
-        base: CSSObject;
-        color: string;
-        indeterminate: {
-            base: CSSObject;
-        };
-    };
-    container: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-        withLabel: {
-            base: CSSObject;
-        };
-        noLabel: {
-            base: CSSObject;
-        };
-    };
-};

package/dist/components/Checkbox/Checkbox.tokens.js

@@ -1,132 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import { hoverInputfield, hoverDangerInputfield } from '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import { dangerInputfield } from '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
-
-var Colors = ddsBaseTokens.colors,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    BorderRadius = ddsBaseTokens.borderRadius;
-var checkboxBase = {
-  border: '1px solid',
-  backgroundColor: Colors.DdsColorNeutralsWhite,
-  borderColor: Colors.DdsColorNeutralsGray5,
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  height: FontPackages.supportingStyle_inputtext_02.base.fontSize,
-  width: FontPackages.supportingStyle_inputtext_02.base.fontSize
-};
-var checkboxCheckedBase = {
-  borderColor: Colors.DdsColorInteractiveBase,
-  backgroundColor: Colors.DdsColorInteractiveBase
-};
-var checkboxDisabledBase = {
-  borderColor: Colors.DdsColorNeutralsGray5,
-  color: Colors.DdsColorNeutralsGray6
-};
-var checkboxCheckedDisabledBase = {
-  borderColor: Colors.DdsColorNeutralsGray6,
-  backgroundColor: Colors.DdsColorNeutralsGray6
-};
-var checkboxReadOnlyBase = {
-  backgroundColor: 'transparent'
-};
-var checkboxCheckedReadOnlyBase = {
-  borderColor: Colors.DdsColorNeutralsGray6,
-  backgroundColor: Colors.DdsColorNeutralsGray6
-};
-var checkboxHoverBase = Object.assign({}, hoverInputfield);
-var checkboxCheckedHoverBase = {
-  backgroundColor: Colors.DdsColorInteractiveDark,
-  boxShadow: "inset 0 0 0 1px  ".concat(Colors.DdsColorInteractiveDark),
-  borderColor: Colors.DdsColorInteractiveDark
-};
-var checkboxDangerBase = Object.assign({}, dangerInputfield);
-var checkboxDangerHoverBase = Object.assign({}, hoverDangerInputfield);
-var focusBase = Object.assign({}, focusVisible);
-var checkmarkBase = {
-  borderWidth: '0 1px 1px 0',
-  transform: 'rotate(45deg)',
-  left: '35%',
-  top: '10%',
-  width: '30%',
-  height: '65%'
-};
-var checkmarkIndeterminateBase = {
-  borderWidth: '1px 0 0 0'
-};
-var containerBase = Object.assign({}, FontPackages.body_sans_02.base);
-var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages.body_sans_02.base), {
-  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing.SizesDdsSpacingLocalX075NumberPx, "px")
-});
-var containerNoLabelBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX0125, " ").concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15)
-};
-var checkboxTokens = {
-  checkbox: {
-    base: checkboxBase,
-    spaceLeft: Spacing.SizesDdsSpacingLocalX025,
-    hover: {
-      base: checkboxHoverBase
-    },
-    disabled: {
-      base: checkboxDisabledBase
-    },
-    readOnly: {
-      base: checkboxReadOnlyBase
-    },
-    checked: {
-      base: checkboxCheckedBase,
-      hover: {
-        base: checkboxCheckedHoverBase
-      },
-      disabled: {
-        base: checkboxCheckedDisabledBase
-      },
-      readOnly: {
-        base: checkboxCheckedReadOnlyBase
-      }
-    },
-    indeterminate: {
-      base: checkboxCheckedBase,
-      hover: {
-        base: checkboxCheckedHoverBase
-      },
-      disabled: {
-        base: checkboxCheckedDisabledBase
-      },
-      readOnly: {
-        base: checkboxCheckedReadOnlyBase
-      }
-    },
-    danger: {
-      base: checkboxDangerBase,
-      hover: {
-        base: checkboxDangerHoverBase
-      }
-    }
-  },
-  checkmark: {
-    base: checkmarkBase,
-    color: Colors.DdsColorNeutralsWhite,
-    indeterminate: {
-      base: checkmarkIndeterminateBase
-    }
-  },
-  container: {
-    base: containerBase,
-    focus: {
-      base: focusBase
-    },
-    withLabel: {
-      base: containerWithLabelBase
-    },
-    noLabel: {
-      base: containerNoLabelBase
-    }
-  }
-};
-
-export { checkboxTokens };

package/dist/components/RadioButton/RadioButton.styles.d.ts

@@ -1,5 +0,0 @@
-import { RadioButtonProps } from './RadioButton.types';
-export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare type ContainerProps = Pick<RadioButtonProps, 'error' | 'disabled' | 'readOnly'>;
-export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
-export {};

package/dist/components/RadioButton/RadioButton.styles.js

@@ -1,27 +0,0 @@
-import styled, { css } from 'styled-components';
-import { radioButtonTokens } from './RadioButton.tokens.js';
-import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
-
-var CustomRadioButton = styled.span.withConfig({
-  displayName: "RadioButtonstyles__CustomRadioButton",
-  componentId: "sc-iwypha-0"
-})(["position:absolute;box-sizing:border-box;border-radius:50%;vertical-align:middle;", " left:", ";&:after{content:'';position:absolute;display:none;}"], radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
-var Container = styled.label.withConfig({
-  displayName: "RadioButtonstyles__Container",
-  componentId: "sc-iwypha-1"
-})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref) {
-  var error = _ref.error;
-  return error && css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
-}, function (_ref3) {
-  var readOnly = _ref3.readOnly;
-  return readOnly && css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
-}, CustomRadioButton, radioButtonTokens.checkmark.base);
-
-export { Container, CustomRadioButton };

package/dist/components/RadioButton/RadioButton.tokens.d.ts

@@ -1,43 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const radioButtonTokens: {
-    radioButton: {
-        base: CSSObject;
-        spaceLeft: string;
-        hover: {
-            base: CSSObject;
-        };
-        disabled: {
-            base: CSSObject;
-        };
-        readOnly: {
-            base: CSSObject;
-        };
-        checked: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-            disabled: {
-                base: CSSObject;
-            };
-            readOnly: {
-                base: CSSObject;
-            };
-        };
-        danger: {
-            base: CSSObject;
-            hover: {
-                base: CSSObject;
-            };
-        };
-    };
-    checkmark: {
-        base: CSSObject;
-    };
-    container: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
-};