@vygruppen/spor-react 9.1.0 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.1.0 build
2
+ > @vygruppen/spor-react@9.2.1 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 487.93 KB
13
- CJS ⚡️ Build success in 2091ms
12
+ CJS dist/index.js 488.25 KB
13
+ CJS ⚡️ Build success in 2045ms
14
14
  ESM dist/index.mjs 2.02 KB
15
- ESM dist/CountryCodeSelect-N6JNGXLL.mjs 1.19 KB
16
- ESM dist/chunk-AS7NY5TY.mjs 381.97 KB
17
- ESM ⚡️ Build success in 2092ms
18
- DTS ⚡️ Build success in 11787ms
19
- DTS dist/index.d.ts 318.33 KB
20
- DTS dist/index.d.mts 318.33 KB
15
+ ESM dist/CountryCodeSelect-FR7IFLQR.mjs 1.19 KB
16
+ ESM dist/chunk-EVOFJL5T.mjs 382.27 KB
17
+ ESM ⚡️ Build success in 2046ms
18
+ DTS ⚡️ Build success in 12277ms
19
+ DTS dist/index.d.ts 318.44 KB
20
+ DTS dist/index.d.mts 318.44 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - c82f7eb: Set the text color of card selects"
8
+ - Updated dependencies [c82f7eb]
9
+ - @vygruppen/spor-design-tokens@3.5.2
10
+
11
+ ## 9.2.0
12
+
13
+ ### Minor Changes
14
+
15
+ - 8568d79: CardSelect: Add support for not having a visual label, by passing in aria-label instead of label prop
16
+
17
+ ### Patch Changes
18
+
19
+ - 84b4bbf: Change the way cards and card selects are rendered
20
+ - Updated dependencies [84b4bbf]
21
+ - @vygruppen/spor-design-tokens@3.5.1
22
+
3
23
  ## 9.1.0
4
24
 
5
25
  ### Minor Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-AS7NY5TY.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-EVOFJL5T.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -2501,7 +2501,6 @@ var CardSelect = forwardRef(
2501
2501
  isOpen: externalIsOpen,
2502
2502
  defaultOpen = false,
2503
2503
  onToggle,
2504
- label,
2505
2504
  icon,
2506
2505
  children,
2507
2506
  width = "fit-content",
@@ -2510,6 +2509,7 @@ var CardSelect = forwardRef(
2510
2509
  withChevron = true,
2511
2510
  ...props
2512
2511
  }, externalRef) => {
2512
+ const label = "label" in props ? props.label : props["aria-label"];
2513
2513
  const internalRef = useRef(null);
2514
2514
  const triggerRef = externalRef ?? internalRef;
2515
2515
  const state2 = useOverlayTriggerState({
@@ -2535,11 +2535,12 @@ var CardSelect = forwardRef(
2535
2535
  type: "button",
2536
2536
  ref: triggerRef,
2537
2537
  sx: styles3.trigger,
2538
+ "aria-label": label,
2538
2539
  ...buttonProps,
2539
2540
  width,
2540
2541
  "data-attachable": true
2541
2542
  },
2542
- /* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
2543
+ /* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
2543
2544
  ChevronIcon,
2544
2545
  {
2545
2546
  transform: state2.isOpen ? "rotate(180deg)" : "none"
@@ -3340,7 +3341,7 @@ var texts14 = createTexts({
3340
3341
  sv: "Telefonnummer"
3341
3342
  }
3342
3343
  });
3343
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-N6JNGXLL.mjs'));
3344
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FR7IFLQR.mjs'));
3344
3345
  var Radio = forwardRef((props, ref) => {
3345
3346
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3346
3347
  });
@@ -10584,7 +10585,7 @@ var getColorSchemeBaseProps = (props) => {
10584
10585
  ...baseBorder("default", props),
10585
10586
  backgroundColor: mode(
10586
10587
  "white",
10587
- `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
10588
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
10588
10589
  )(props),
10589
10590
  color: "inherit"
10590
10591
  };
@@ -10633,7 +10634,7 @@ var getColorSchemeHoverProps = (props) => {
10633
10634
  return {
10634
10635
  backgroundColor: mode(
10635
10636
  "white",
10636
- `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
10637
+ `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
10637
10638
  )(props),
10638
10639
  ...floatingBorder("hover", props)
10639
10640
  };
@@ -10654,7 +10655,7 @@ var getColorSchemeActiveProps = (props) => {
10654
10655
  switch (colorScheme) {
10655
10656
  case "white":
10656
10657
  return {
10657
- backgroundColor: mode("mint", "teal")(props),
10658
+ backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
10658
10659
  ...floatingBorder("active", props)
10659
10660
  };
10660
10661
  case "grey":
@@ -10669,8 +10670,6 @@ var getColorSchemeActiveProps = (props) => {
10669
10670
  };
10670
10671
  }
10671
10672
  };
10672
-
10673
- // src/theme/components/card-select.ts
10674
10673
  var parts3 = anatomy("card-select").parts("trigger", "card");
10675
10674
  var helpers4 = createMultiStyleConfigHelpers(parts3.keys);
10676
10675
  var config9 = helpers4.defineMultiStyleConfig({
@@ -10681,6 +10680,7 @@ var config9 = helpers4.defineMultiStyleConfig({
10681
10680
  alignItems: "center",
10682
10681
  transitionProperty: "outline",
10683
10682
  transitionDuration: "fast",
10683
+ ...baseText("default", props),
10684
10684
  ...focusVisibleStyles(props)
10685
10685
  },
10686
10686
  card: {
@@ -10688,7 +10688,10 @@ var config9 = helpers4.defineMultiStyleConfig({
10688
10688
  boxShadow: "md",
10689
10689
  padding: 3,
10690
10690
  ...baseText("default", props),
10691
- ...floatingBackground("default", props)
10691
+ backgroundColor: mode(
10692
+ "white",
10693
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
10694
+ )(props)
10692
10695
  }
10693
10696
  }),
10694
10697
  variants: {
@@ -10737,7 +10740,8 @@ var config9 = helpers4.defineMultiStyleConfig({
10737
10740
  _expanded: {
10738
10741
  ...floatingBackground("active", props)
10739
10742
  }
10740
- }
10743
+ },
10744
+ card: {}
10741
10745
  })
10742
10746
  },
10743
10747
  sizes: {
@@ -12097,7 +12101,7 @@ var config24 = defineStyleConfig$1({
12097
12101
  }),
12098
12102
  variants: {
12099
12103
  primary: (props) => ({
12100
- ...accentText("default", props),
12104
+ ...baseText("default", props),
12101
12105
  _hover: {
12102
12106
  ...brandText("hover", props),
12103
12107
  ...brandBackground("hover", props)
@@ -13269,11 +13273,14 @@ var brandTheme = {
13269
13273
  ["VyDigital" /* VyDigital */]: {},
13270
13274
  ["VyUtvikling" /* VyUtvikling */]: {
13271
13275
  colors: {
13272
- accent: {
13273
- surface: {
13274
- default: {
13275
- dark: colors2.darkGrey
13276
- }
13276
+ bg: {
13277
+ default: {
13278
+ dark: colors2.darkGrey
13279
+ }
13280
+ },
13281
+ surface: {
13282
+ default: {
13283
+ dark: colors2.darkGrey
13277
13284
  }
13278
13285
  }
13279
13286
  }
package/dist/index.d.mts CHANGED
@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
657
657
  defaultOpen?: boolean;
658
658
  /** Callback for when the card select opens or closes. */
659
659
  onToggle?: (isOpen: boolean) => void;
660
- /** The text of the trigger button */
661
- label: string;
662
660
  /** An optional trigger button icon, rendered to the left of the label */
663
661
  icon?: React.ReactNode;
664
662
  /** The content of the card select */
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
669
667
  placement?: AriaPositionProps["placement"];
670
668
  /** Whether or not to show the chevron. Defaults to true */
671
669
  withChevron?: boolean;
672
- };
670
+ } & ({
671
+ label: string;
672
+ } | {
673
+ "aria-label": string;
674
+ });
673
675
  /**
674
676
  * A card select component.
675
677
  *
@@ -3172,6 +3174,7 @@ declare const theme: {
3172
3174
  outlineStyle: string;
3173
3175
  outlineOffset: string;
3174
3176
  };
3177
+ color: string;
3175
3178
  appearance: string;
3176
3179
  display: string;
3177
3180
  alignItems: string;
@@ -3307,6 +3310,7 @@ declare const theme: {
3307
3310
  backgroundColor: string;
3308
3311
  boxShadow: string;
3309
3312
  };
3313
+ card: {};
3310
3314
  };
3311
3315
  } | undefined;
3312
3316
  defaultProps?: {
@@ -8686,11 +8690,14 @@ declare const brandTheme: {
8686
8690
  VyDigital: {};
8687
8691
  VyUtvikling: {
8688
8692
  colors: {
8689
- accent: {
8690
- surface: {
8691
- default: {
8692
- dark: string;
8693
- };
8693
+ bg: {
8694
+ default: {
8695
+ dark: string;
8696
+ };
8697
+ };
8698
+ surface: {
8699
+ default: {
8700
+ dark: string;
8694
8701
  };
8695
8702
  };
8696
8703
  };
package/dist/index.d.ts CHANGED
@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
657
657
  defaultOpen?: boolean;
658
658
  /** Callback for when the card select opens or closes. */
659
659
  onToggle?: (isOpen: boolean) => void;
660
- /** The text of the trigger button */
661
- label: string;
662
660
  /** An optional trigger button icon, rendered to the left of the label */
663
661
  icon?: React.ReactNode;
664
662
  /** The content of the card select */
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
669
667
  placement?: AriaPositionProps["placement"];
670
668
  /** Whether or not to show the chevron. Defaults to true */
671
669
  withChevron?: boolean;
672
- };
670
+ } & ({
671
+ label: string;
672
+ } | {
673
+ "aria-label": string;
674
+ });
673
675
  /**
674
676
  * A card select component.
675
677
  *
@@ -3172,6 +3174,7 @@ declare const theme: {
3172
3174
  outlineStyle: string;
3173
3175
  outlineOffset: string;
3174
3176
  };
3177
+ color: string;
3175
3178
  appearance: string;
3176
3179
  display: string;
3177
3180
  alignItems: string;
@@ -3307,6 +3310,7 @@ declare const theme: {
3307
3310
  backgroundColor: string;
3308
3311
  boxShadow: string;
3309
3312
  };
3313
+ card: {};
3310
3314
  };
3311
3315
  } | undefined;
3312
3316
  defaultProps?: {
@@ -8686,11 +8690,14 @@ declare const brandTheme: {
8686
8690
  VyDigital: {};
8687
8691
  VyUtvikling: {
8688
8692
  colors: {
8689
- accent: {
8690
- surface: {
8691
- default: {
8692
- dark: string;
8693
- };
8693
+ bg: {
8694
+ default: {
8695
+ dark: string;
8696
+ };
8697
+ };
8698
+ surface: {
8699
+ default: {
8700
+ dark: string;
8694
8701
  };
8695
8702
  };
8696
8703
  };
package/dist/index.js CHANGED
@@ -2247,7 +2247,6 @@ var init_CardSelect = __esm({
2247
2247
  isOpen: externalIsOpen,
2248
2248
  defaultOpen = false,
2249
2249
  onToggle,
2250
- label,
2251
2250
  icon,
2252
2251
  children,
2253
2252
  width = "fit-content",
@@ -2256,6 +2255,7 @@ var init_CardSelect = __esm({
2256
2255
  withChevron = true,
2257
2256
  ...props
2258
2257
  }, externalRef) => {
2258
+ const label = "label" in props ? props.label : props["aria-label"];
2259
2259
  const internalRef = React69.useRef(null);
2260
2260
  const triggerRef = externalRef ?? internalRef;
2261
2261
  const state2 = reactStately.useOverlayTriggerState({
@@ -2281,11 +2281,12 @@ var init_CardSelect = __esm({
2281
2281
  type: "button",
2282
2282
  ref: triggerRef,
2283
2283
  sx: styles3.trigger,
2284
+ "aria-label": label,
2284
2285
  ...buttonProps,
2285
2286
  width,
2286
2287
  "data-attachable": true
2287
2288
  },
2288
- /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
2289
+ /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
2289
2290
  ChevronIcon,
2290
2291
  {
2291
2292
  transform: state2.isOpen ? "rotate(180deg)" : "none"
@@ -12078,7 +12079,7 @@ var init_card2 = __esm({
12078
12079
  ...baseBorder("default", props),
12079
12080
  backgroundColor: themeTools.mode(
12080
12081
  "white",
12081
- `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
12082
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
12082
12083
  )(props),
12083
12084
  color: "inherit"
12084
12085
  };
@@ -12109,7 +12110,7 @@ var init_card2 = __esm({
12109
12110
  return {
12110
12111
  backgroundColor: themeTools.mode(
12111
12112
  "white",
12112
- `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
12113
+ `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
12113
12114
  )(props),
12114
12115
  ...floatingBorder("hover", props)
12115
12116
  };
@@ -12130,7 +12131,7 @@ var init_card2 = __esm({
12130
12131
  switch (colorScheme) {
12131
12132
  case "white":
12132
12133
  return {
12133
- backgroundColor: themeTools.mode("mint", "teal")(props),
12134
+ backgroundColor: themeTools.mode("bg.tertiary.light", `bg.default.dark`)(props),
12134
12135
  ...floatingBorder("active", props)
12135
12136
  };
12136
12137
  case "grey":
@@ -12147,8 +12148,6 @@ var init_card2 = __esm({
12147
12148
  };
12148
12149
  }
12149
12150
  });
12150
-
12151
- // src/theme/components/card-select.ts
12152
12151
  var parts3, helpers4, config9, card_select_default;
12153
12152
  var init_card_select = __esm({
12154
12153
  "src/theme/components/card-select.ts"() {
@@ -12168,6 +12167,7 @@ var init_card_select = __esm({
12168
12167
  alignItems: "center",
12169
12168
  transitionProperty: "outline",
12170
12169
  transitionDuration: "fast",
12170
+ ...baseText("default", props),
12171
12171
  ...focusVisibleStyles(props)
12172
12172
  },
12173
12173
  card: {
@@ -12175,7 +12175,10 @@ var init_card_select = __esm({
12175
12175
  boxShadow: "md",
12176
12176
  padding: 3,
12177
12177
  ...baseText("default", props),
12178
- ...floatingBackground("default", props)
12178
+ backgroundColor: themeTools.mode(
12179
+ "white",
12180
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
12181
+ )(props)
12179
12182
  }
12180
12183
  }),
12181
12184
  variants: {
@@ -12224,7 +12227,8 @@ var init_card_select = __esm({
12224
12227
  _expanded: {
12225
12228
  ...floatingBackground("active", props)
12226
12229
  }
12227
- }
12230
+ },
12231
+ card: {}
12228
12232
  })
12229
12233
  },
12230
12234
  sizes: {
@@ -13675,7 +13679,6 @@ var init_line_icon = __esm({
13675
13679
  var config24, link_default;
13676
13680
  var init_link2 = __esm({
13677
13681
  "src/theme/components/link.ts"() {
13678
- init_accent_utils();
13679
13682
  init_base_utils();
13680
13683
  init_brand_utils();
13681
13684
  init_focus_utils();
@@ -13712,7 +13715,7 @@ var init_link2 = __esm({
13712
13715
  }),
13713
13716
  variants: {
13714
13717
  primary: (props) => ({
13715
- ...accentText("default", props),
13718
+ ...baseText("default", props),
13716
13719
  _hover: {
13717
13720
  ...brandText("hover", props),
13718
13721
  ...brandBackground("hover", props)
@@ -15129,11 +15132,14 @@ var init_theme = __esm({
15129
15132
  ["VyDigital" /* VyDigital */]: {},
15130
15133
  ["VyUtvikling" /* VyUtvikling */]: {
15131
15134
  colors: {
15132
- accent: {
15133
- surface: {
15134
- default: {
15135
- dark: colors2.darkGrey
15136
- }
15135
+ bg: {
15136
+ default: {
15137
+ dark: colors2.darkGrey
15138
+ }
15139
+ },
15140
+ surface: {
15141
+ default: {
15142
+ dark: colors2.darkGrey
15137
15143
  }
15138
15144
  }
15139
15145
  }
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-AS7NY5TY.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-EVOFJL5T.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.1.0",
3
+ "version": "9.2.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -33,8 +33,6 @@ type CardSelectProps = BoxProps & {
33
33
  defaultOpen?: boolean;
34
34
  /** Callback for when the card select opens or closes. */
35
35
  onToggle?: (isOpen: boolean) => void;
36
- /** The text of the trigger button */
37
- label: string;
38
36
  /** An optional trigger button icon, rendered to the left of the label */
39
37
  icon?: React.ReactNode;
40
38
  /** The content of the card select */
@@ -45,7 +43,7 @@ type CardSelectProps = BoxProps & {
45
43
  placement?: AriaPositionProps["placement"];
46
44
  /** Whether or not to show the chevron. Defaults to true */
47
45
  withChevron?: boolean;
48
- };
46
+ } & ({ label: string } | { "aria-label": string });
49
47
 
50
48
  /**
51
49
  * A card select component.
@@ -69,7 +67,6 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
69
67
  isOpen: externalIsOpen,
70
68
  defaultOpen = false,
71
69
  onToggle,
72
- label,
73
70
  icon,
74
71
  children,
75
72
  width = "fit-content",
@@ -80,6 +77,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
80
77
  },
81
78
  externalRef,
82
79
  ) => {
80
+ const label = "label" in props ? props.label : props["aria-label"];
83
81
  const internalRef = useRef<HTMLButtonElement>(null);
84
82
  const triggerRef = (externalRef ??
85
83
  internalRef) as React.RefObject<HTMLButtonElement>;
@@ -112,13 +110,16 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
112
110
  type="button"
113
111
  ref={triggerRef}
114
112
  sx={styles.trigger}
113
+ aria-label={label}
115
114
  {...buttonProps}
116
115
  width={width}
117
116
  data-attachable
118
117
  >
119
118
  <Flex gap={1.5} alignItems="center">
120
119
  {icon}
121
- <Box as="span">{label}</Box>
120
+ <Box as="span" display={props["aria-label"] ? "none" : "inline"}>
121
+ {label}
122
+ </Box>
122
123
  {withChevron ? (
123
124
  <ChevronIcon
124
125
  transform={state.isOpen ? "rotate(180deg)" : "none"}
@@ -1,5 +1,6 @@
1
1
  import { anatomy } from "@chakra-ui/anatomy";
2
2
  import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
3
+ import { mode } from "@chakra-ui/theme-tools";
3
4
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
4
5
  import { floatingBackground, floatingBorder } from "../utils/floating-utils";
5
6
  import { focusVisibleStyles } from "../utils/focus-utils";
@@ -16,6 +17,7 @@ const config = helpers.defineMultiStyleConfig({
16
17
  alignItems: "center",
17
18
  transitionProperty: "outline",
18
19
  transitionDuration: "fast",
20
+ ...baseText("default", props),
19
21
  ...focusVisibleStyles(props),
20
22
  },
21
23
  card: {
@@ -23,7 +25,10 @@ const config = helpers.defineMultiStyleConfig({
23
25
  boxShadow: "md",
24
26
  padding: 3,
25
27
  ...baseText("default", props),
26
- ...floatingBackground("default", props),
28
+ backgroundColor: mode(
29
+ "white",
30
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
31
+ )(props),
27
32
  },
28
33
  }),
29
34
  variants: {
@@ -73,6 +78,7 @@ const config = helpers.defineMultiStyleConfig({
73
78
  ...floatingBackground("active", props),
74
79
  },
75
80
  },
81
+ card: {},
76
82
  }),
77
83
  },
78
84
  sizes: {
@@ -85,7 +85,7 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
85
85
  ...baseBorder("default", props),
86
86
  backgroundColor: mode(
87
87
  "white",
88
- `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`,
88
+ `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
89
89
  )(props),
90
90
  color: "inherit",
91
91
  };
@@ -134,7 +134,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
134
134
  return {
135
135
  backgroundColor: mode(
136
136
  "white",
137
- `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`,
137
+ `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
138
138
  )(props),
139
139
  ...floatingBorder("hover", props),
140
140
  };
@@ -154,7 +154,7 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
154
154
  switch (colorScheme) {
155
155
  case "white":
156
156
  return {
157
- backgroundColor: mode("mint", "teal")(props),
157
+ backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
158
158
  ...floatingBorder("active", props),
159
159
  };
160
160
  case "grey":
@@ -1,6 +1,5 @@
1
1
  import { defineStyleConfig } from "@chakra-ui/react";
2
2
  import { mode } from "@chakra-ui/theme-tools";
3
- import { accentText } from "../utils/accent-utils";
4
3
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
5
4
  import { brandBackground, brandText } from "../utils/brand-utils";
6
5
  import { focusVisibleStyles } from "../utils/focus-utils";
@@ -41,7 +40,7 @@ const config = defineStyleConfig({
41
40
  }),
42
41
  variants: {
43
42
  primary: (props) => ({
44
- ...accentText("default", props),
43
+ ...baseText("default", props),
45
44
  _hover: {
46
45
  ...brandText("hover", props),
47
46
  ...brandBackground("hover", props),
@@ -22,11 +22,14 @@ export const brandTheme = {
22
22
  [Brand.VyDigital]: {},
23
23
  [Brand.VyUtvikling]: {
24
24
  colors: {
25
- accent: {
26
- surface: {
27
- default: {
28
- dark: foundations.colors.darkGrey,
29
- },
25
+ bg: {
26
+ default: {
27
+ dark: foundations.colors.darkGrey,
28
+ },
29
+ },
30
+ surface: {
31
+ default: {
32
+ dark: foundations.colors.darkGrey,
30
33
  },
31
34
  },
32
35
  },