@helsenorge/designsystem-react 12.7.0 → 12.8.0

package/SingleSelectItem.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useId } from "react";
+import classNames from "classnames";
+import { A as AsChildSlot } from "./AsChildSlot.js";
+import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
+const SingleSelectContext = React__default.createContext(null);
+const SingleSelect = ({ name, disabled, defaultValue, onValueChange, children }) => {
+  const [selected, setSelected] = React__default.useState(defaultValue);
+  const context = React__default.useMemo(
+    () => ({
+      name,
+      disabled,
+      value: selected,
+      onValueChange: (v, e) => {
+        setSelected(v);
+        onValueChange == null ? void 0 : onValueChange(v, e);
+      }
+    }),
+    [name, disabled, selected, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(SingleSelectContext.Provider, { value: context, children });
+};
+const useSingleSelect = () => React__default.useContext(SingleSelectContext);
+const SingleSelectItem = React__default.forwardRef((props, ref) => {
+  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...rest } = props;
+  const generatedId = useId();
+  const inputId = props.inputId ?? generatedId;
+  const group = useSingleSelect();
+  const optionValue = typeof value === "string" && value.length > 0 ? value : inputId;
+  const isSelected = group ? group.value === optionValue : false;
+  const isDisabled = !!disabled || !!(group == null ? void 0 : group.disabled);
+  const asChildSlotRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    var _a;
+    if (defaultSelected && group && typeof group.value === "undefined") {
+      (_a = group.onValueChange) == null ? void 0 : _a.call(group, optionValue);
+    }
+  }, [defaultSelected, group, optionValue]);
+  const contentClasses = classNames(styles["single-select-item__content"], {
+    [styles["single-select-item__content--disabled"]]: isDisabled
+  });
+  const dotClasses = classNames(styles["single-select-item__dot"], {
+    [styles["single-select-item__dot--disabled"]]: isDisabled,
+    [styles["single-select-item__dot--checked"]]: isSelected
+  });
+  const childArray = React__default.Children.toArray(children).filter(React__default.isValidElement);
+  const childElement = childArray[0] ?? null;
+  const selectThis = (e) => {
+    var _a;
+    if (isDisabled) return;
+    if (group && group.value !== optionValue) {
+      (_a = group.onValueChange) == null ? void 0 : _a.call(group, optionValue, e);
+    }
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: dotClasses, "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { children: text })
+  ] });
+  const Component = asChild ? AsChildSlot : "button";
+  const componentProps = asChild ? {
+    ref: asChildSlotRef,
+    elementRef: ref,
+    className: contentClasses,
+    disabled: isDisabled,
+    onSelect: (e) => selectThis(e),
+    ariaCurrent: isSelected ? "true" : void 0,
+    children: childElement,
+    content
+  } : {
+    ...rest,
+    type: "button",
+    className: contentClasses,
+    disabled: isDisabled,
+    onClick: (e) => {
+      e.preventDefault();
+      selectThis(e);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        selectThis(e);
+      }
+    },
+    ref,
+    "aria-disabled": isDisabled || void 0,
+    "aria-current": isSelected ? "true" : void 0,
+    children: content
+  };
+  return /* @__PURE__ */ jsx("div", { "data-testid": testId, className: styles["single-select-item"], children: /* @__PURE__ */ jsx(Component, { ...componentProps }) });
+});
+SingleSelectItem.displayName = "Dropdown.SingleSelectItem";
+export {
+  SingleSelectItem as S,
+  SingleSelect as a
+};
+//# sourceMappingURL=SingleSelectItem.js.map

package/SingleSelectItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectItem.js","sources":["../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\ntype SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nconst SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSingleSelect } from './SingleSelect';\nimport AsChildSlot, { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n}\n\nexport const SingleSelectItem = React.forwardRef((props: SingleSelectItemProps, ref: React.Ref<HTMLElement>) => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref as React.Ref<HTMLElement>,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childElement,\n        content,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref as React.Ref<HTMLButtonElement>,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n});\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"names":["React"],"mappings":"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"}

package/clamp.js

@@ -0,0 +1,11 @@
+const clamp = (min, max, v) => {
+  if (v > max)
+    return max;
+  if (v < min)
+    return min;
+  return v;
+};
+export {
+  clamp as c
+};
+//# sourceMappingURL=clamp.js.map

package/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sources":["../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/clamp.mjs"],"sourcesContent":["const clamp = (min, max, v) => {\n    if (v > max)\n        return max;\n    if (v < min)\n        return min;\n    return v;\n};\n\nexport { clamp };\n"],"names":[],"mappings":"AAAK,MAAC,QAAQ,CAAC,KAAK,KAAK,MAAM;AAC3B,MAAI,IAAI;AACJ,WAAO;AACX,MAAI,IAAI;AACJ,WAAO;AACX,SAAO;AACX;","x_google_ignoreList":[0]}

package/components/ArticleTeaser/styles.module.scss

@@ -61,7 +61,7 @@
     }
 
     &:active {
-      background-color: var(--core-color-blueberry-800);
+      background-color: var(--color-action-background-onlight-active);
     }
 
     &--expanded {
@@ -70,13 +70,11 @@
       border: 1px solid var(--color-action-border-onlight);
 
       &:hover {
-        // @todo: endre denne når ny token er laget
-        background-color: var(--color-action-graphics-ondark-hover);
+        background-color: var(--color-action-background-like-transparent-but-opaque-onlight-hover);
       }
 
       &:active {
-        // @todo: endre denne når ny token er laget
-        background-color: var(--color-action-graphics-ondark);
+        background-color: var(--color-action-background-like-transparent-but-opaque-onlight-hoverselected);
       }
     }
   }

package/components/AsChildSlot/AsChildSlot.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface AsChildSlotHandle {
+    /** Click the child’s DOM node */
+    click: () => void;
+}
+export interface AsChildSlotProps {
+    /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */
+    children?: React.ReactNode;
+    /** Class names to apply to the visible element */
+    className?: string;
+    /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */
+    content?: React.ReactNode;
+    /** Disabled state passed down (merged with child’s disabled/aria-disabled) */
+    disabled?: boolean;
+    /** Called before the child’s onClick when visible */
+    onSelect?: (e: React.SyntheticEvent) => void;
+    /** Optional states to apply to the DOM element */
+    ariaCurrent?: 'page' | 'true';
+    /** DOM ref for the element we end up rendering */
+    elementRef?: React.Ref<HTMLElement>;
+}
+export declare const AsChildSlot: React.ForwardRefExoticComponent<AsChildSlotProps & React.RefAttributes<AsChildSlotHandle>>;
+export default AsChildSlot;

package/components/AsChildSlot/AsChildSlot.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AsChildSlot/index.d.ts

@@ -0,0 +1,3 @@
+import { default as AsChildSlot } from './AsChildSlot';
+export * from './AsChildSlot';
+export default AsChildSlot;

package/components/AsChildSlot/index.js

@@ -0,0 +1,6 @@
+import { A as AsChildSlot } from "../../AsChildSlot.js";
+export {
+  AsChildSlot,
+  AsChildSlot as default
+};
+//# sourceMappingURL=index.js.map

package/components/AsChildSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/AsChildSlot/styles.module.scss

@@ -0,0 +1,13 @@
+.as-child-reset {
+  all: unset;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none !important;
+}

package/components/AsChildSlot/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'as-child-reset': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Drawer/styles.module.scss

@@ -5,23 +5,6 @@
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
 
-@mixin drawer-scroll-shadow {
-  // Scroll shadow
-  // Inspired by: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
-  background:
-    linear-gradient(white 30%, rgb(255 255 255 / 0%)) center top,
-    linear-gradient(rgb(255 255 255 / 0%), white 70%) center bottom,
-    linear-gradient(rgb(0 0 0 / 46%), rgb(0 0 0 / 0%)) center top,
-    linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 46%)) center bottom;
-  background-repeat: no-repeat;
-  background-size:
-    100% 40px,
-    100% 40px,
-    100% 16px,
-    100% 16px;
-  background-attachment: local, local, scroll, scroll;
-}
-
 .drawer {
   position: fixed;
   inset: 0;
@@ -43,7 +26,6 @@
     position: fixed;
     width: 100%;
     max-height: 90dvh;
-    overflow: hidden;
     transform: translateY(100%);
     background-color: var(--core-color-white);
     border-radius: 0.75rem 0.75rem 0 0;
@@ -81,8 +63,6 @@
       @include breakpoints.tiny-screens-media-query {
         overflow-y: auto;
 
-        @include drawer-scroll-shadow;
-
         &:focus-visible {
           outline: 1px solid palette.$black;
           outline-offset: -1px;
@@ -130,22 +110,61 @@
 
   &__content {
     overflow-y: auto;
-    padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
 
     &:focus-visible {
       outline: 1px solid palette.$black;
       outline-offset: -1px;
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s) spacers.getSpacer(xs);
-    }
-
     @include breakpoints.tiny-screens-media-query {
       overflow-y: unset;
     }
 
-    @include drawer-scroll-shadow;
+    &__children {
+      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding: spacers.getSpacer(s) spacers.getSpacer(xs);
+      }
+    }
+
+    &__shadow {
+      position: absolute;
+      z-index: 10;
+      height: 16px;
+      width: 100%;
+      transition: opacity 0.5s;
+      opacity: 0;
+      pointer-events: none;
+
+      @include breakpoints.tiny-screens-media-query {
+        display: none;
+      }
+
+      &--top {
+        top: 0;
+        margin-bottom: calc(0rem - spacers.getSpacer(xs));
+        background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
+
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+          margin-bottom: calc(0rem - spacers.getSpacer(s));
+        }
+      }
+
+      &--bottom {
+        bottom: 0;
+        background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
+        margin-top: calc(0rem - spacers.getSpacer(xs));
+
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+          margin-top: calc(0rem - spacers.getSpacer(s));
+        }
+      }
+
+      &--show {
+        opacity: 1;
+      }
+    }
   }
 
   &__footer {

package/components/Drawer/styles.module.scss.d.ts

@@ -4,6 +4,11 @@ export type Styles = {
   drawer__container__inner: string;
   'drawer__container--right': string;
   drawer__content: string;
+  drawer__content__children: string;
+  drawer__content__shadow: string;
+  'drawer__content__shadow--bottom': string;
+  'drawer__content__shadow--show': string;
+  'drawer__content__shadow--top': string;
   drawer__footer: string;
   drawer__header: string;
   'drawer__header__close-button': string;

package/components/Dropdown/Dropdown.d.ts

@@ -1,34 +1,24 @@
-import { default as React } from 'react';
+import { default as React, ComponentType } from 'react';
+import { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';
 import { HNDesignsystemDropdown } from '../../resources/Resources';
-export declare enum DropdownOnColor {
-    onwhite = "onwhite",
-    ongrey = "ongrey",
-    onblueberry = "onblueberry",
-    oncherry = "oncherry"
-}
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+type DropdownVariants = 'fill' | 'transparent' | 'borderless';
 export interface DropdownProps {
-    /** Label for dropdown. Visible for screen readers  */
-    label: string;
     /** Text on the trigger button that opens the dropdown */
-    placeholder: string;
+    triggerText: string;
     /** Sets the dropdown content */
     children: React.ReactNode;
-    /** @deprecated Close button text */
-    closeText?: string;
-    /** Minimum width for the dropdown in pixels. Does not affect trigger button */
+    /** Minimum width for the dropdown in pixels. Does not affect trigger button. */
     dropdownMinWidth?: number;
-    /** No close button */
+    /** Minimum width for the trigger in pixels. Does not apply for borderless variant */
+    triggerMinWidth?: number;
+    /** Disables rendring of the close button in the list */
     noCloseButton?: boolean;
     /** Called when dropdown is open/closed */
     onToggle?: (isOpen: boolean) => void;
     /** Whether the dropdown is open or not */
     open?: boolean;
-    /** Changes the visuals of the dropdown */
-    onColor?: keyof typeof DropdownOnColor;
-    /** Makes the background of the trigger transparent */
-    transparent?: boolean;
-    /** Makes the width of the full component adjust to its parent */
-    fluid?: boolean;
     /** Makes the dropdown disabled */
     disabled?: boolean;
     /** Sets the data-testid attribute on the dropdown button */
@@ -37,6 +27,14 @@ export interface DropdownProps {
     zIndex?: number;
     /** Resources for component */
     resources?: Partial<HNDesignsystemDropdown>;
+    /** Adds an icon to the trigger */
+    svgIcon?: SvgIcon | IconName;
+    /** Sets the visual variant of the Dropdown */
+    variant?: DropdownVariants;
+}
+export declare const DropdownBase: React.FC<DropdownProps>;
+export interface DropdownCompound extends React.FC<DropdownProps> {
+    SingleSelectItem: ComponentType<SingleSelectItemProps>;
 }
-declare const Dropdown: React.FC<DropdownProps>;
+declare const Dropdown: DropdownCompound;
 export default Dropdown;

package/components/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Dropdown/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+type SingleSelectContextType = {
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;
+};
+export interface SingleSelectProps {
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;
+    children: React.ReactNode;
+}
+export declare const SingleSelect: React.FC<SingleSelectProps>;
+export declare const useSingleSelect: () => SingleSelectContextType | null;
+export {};

package/components/Dropdown/SingleSelect/SingleSelect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Dropdown/SingleSelect/SingleSelectItem.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    /** The text to the singleSelectItem */
+    text?: string;
+    /** input id of the singleSelectItem */
+    inputId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */
+    asChild?: boolean;
+    /** Only use when asChild is set to true and only pass one child */
+    children?: React.ReactNode;
+    /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */
+    value?: string;
+    /** aria-describedby passthrough if needed */
+    ['aria-describedby']?: string;
+    /** Marks this option as initially selected */
+    defaultSelected?: boolean;
+}
+export declare const SingleSelectItem: React.ForwardRefExoticComponent<SingleSelectItemProps & React.RefAttributes<HTMLElement>>;
+export default SingleSelectItem;

package/components/Dropdown/SingleSelect/index.d.ts

@@ -0,0 +1,3 @@
+import { default as SingleSelectItem } from './SingleSelectItem';
+export * from './SingleSelectItem';
+export default SingleSelectItem;

package/components/Dropdown/SingleSelect/index.js

@@ -0,0 +1,6 @@
+import { S as SingleSelectItem } from "../../../SingleSelectItem.js";
+export {
+  SingleSelectItem,
+  SingleSelectItem as default
+};
+//# sourceMappingURL=index.js.map

package/components/Dropdown/SingleSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Dropdown/SingleSelect/styles.module.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.single-select-item {
+  cursor: pointer;
+
+  :focus-visible {
+    outline: none;
+  }
+
+  &__content {
+    all: unset;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: baseline;
+    cursor: pointer;
+    padding: var(--core-space-2xs) 0 var(--core-space-2xs) var(--core-space-s);
+    line-height: 1.75rem;
+
+    &--disabled {
+      cursor: default;
+    }
+  }
+
+  &__dot {
+    appearance: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0.667rem 0 0;
+    background-color: transparent;
+    min-width: 0.67rem;
+    min-height: 0.67rem;
+    border-radius: 10rem;
+    outline: none;
+
+    &:checked {
+      background-color: var(--core-color-black);
+    }
+
+    &--checked {
+      background-color: var(--core-color-black);
+    }
+
+    &--disabled {
+      cursor: default;
+    }
+  }
+}

package/components/Dropdown/SingleSelect/styles.module.scss.d.ts

@@ -0,0 +1,14 @@
+export type Styles = {
+  'single-select-item': string;
+  'single-select-item__content': string;
+  'single-select-item__content--disabled': string;
+  'single-select-item__dot': string;
+  'single-select-item__dot--checked': string;
+  'single-select-item__dot--disabled': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;