@vygruppen/spor-react 10.9.0 → 10.9.2

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@10.9.0 build
2
+ > @vygruppen/spor-react@10.9.2 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
10
10
  ESM Build start
11
11
  DTS Build start
12
12
  ESM dist/index.mjs 2.16 KB
13
- ESM dist/CountryCodeSelect-3FKJ54VO.mjs 1.22 KB
14
- ESM dist/chunk-HAWOB4BD.mjs 427.04 KB
15
- ESM ⚡️ Build success in 2218ms
16
- CJS dist/index.js 540.72 KB
17
- CJS ⚡️ Build success in 2219ms
18
- DTS ⚡️ Build success in 19257ms
19
- DTS dist/index.d.ts 342.08 KB
20
- DTS dist/index.d.mts 342.08 KB
13
+ ESM dist/CountryCodeSelect-ATLJUIQ5.mjs 1.22 KB
14
+ ESM dist/chunk-5GZRUD7N.mjs 427.10 KB
15
+ ESM ⚡️ Build success in 2201ms
16
+ CJS dist/index.js 540.85 KB
17
+ CJS ⚡️ Build success in 2201ms
18
+ DTS ⚡️ Build success in 15418ms
19
+ DTS dist/index.d.ts 342.44 KB
20
+ DTS dist/index.d.mts 342.44 KB
package/CHANGELOG.md CHANGED
@@ -1,14 +1,26 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 10.9.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 96e8a8a: TravelTag: updated disabled variant colors
8
+
9
+ ## 10.9.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 0299f59: Fix import bug in file for ServiceAlert
14
+
3
15
  ## 10.9.0
4
16
 
5
17
  ### Minor Changes
6
18
 
7
- - 288d5e4: new variant for ServiceAlert
19
+ - 6c3e196: new variant for ServiceAlert
8
20
 
9
21
  ### Patch Changes
10
22
 
11
- - Updated dependencies [288d5e4]
23
+ - Updated dependencies [6c3e196]
12
24
  - @vygruppen/spor-icon-react@3.12.0
13
25
 
14
26
  ## 10.8.2
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-HAWOB4BD.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5GZRUD7N.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -5,14 +5,13 @@ import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleC
5
5
  export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
6
6
  import * as React85 from 'react';
7
7
  import React85__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
8
- import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
8
+ import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ServiceFill24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
9
9
  import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
10
10
  import { useOverlayTriggerState, Item, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
11
11
  export { Item, Section } from 'react-stately';
12
12
  import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
13
13
  import { useLottie } from 'lottie-react';
14
14
  import { motion } from 'framer-motion';
15
- import { ServiceFill24Icon } from '@vygruppen/spor-icon-react/tmp';
16
15
  import { createCalendar, GregorianCalendar, parseTime, endOfMonth, getWeeksInMonth, getLocalTimeZone, isSameMonth, isToday } from '@internationalized/date';
17
16
  export { Time } from '@internationalized/date';
18
17
  import { useSwipeable } from 'react-swipeable';
@@ -1842,7 +1841,7 @@ var texts4 = createTexts({
1842
1841
  sv: "Landskod"
1843
1842
  }
1844
1843
  });
1845
- var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-3FKJ54VO.mjs'));
1844
+ var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-ATLJUIQ5.mjs'));
1846
1845
  var Radio = forwardRef((props, ref) => {
1847
1846
  return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
1848
1847
  });
@@ -12469,7 +12468,7 @@ var config20 = helpers13.defineMultiStyleConfig({
12469
12468
  transitionDuration: "fast",
12470
12469
  transitionProperty: "common",
12471
12470
  _disabled: {
12472
- backgroundColor: "silver"
12471
+ ...surface("disabled", props)
12473
12472
  },
12474
12473
  "button&, a&": {
12475
12474
  boxShadow: "sm",
@@ -12486,8 +12485,7 @@ var config20 = helpers13.defineMultiStyleConfig({
12486
12485
  iconContainer: {
12487
12486
  padding: 0.5,
12488
12487
  "[aria-disabled=true] &": {
12489
- backgroundColor: "osloGrey",
12490
- color: "white"
12488
+ ...surface("disabled", props)
12491
12489
  }
12492
12490
  },
12493
12491
  textContainer: {
@@ -12495,7 +12493,7 @@ var config20 = helpers13.defineMultiStyleConfig({
12495
12493
  paddingRight: 0.5,
12496
12494
  whiteSpace: "nowrap",
12497
12495
  "[aria-disabled=true] &": {
12498
- color: "dimGrey"
12496
+ ...baseText("disabled", props)
12499
12497
  }
12500
12498
  },
12501
12499
  title: {
@@ -12894,7 +12892,10 @@ var config23 = helpers16.defineMultiStyleConfig({
12894
12892
  alignItems: "center"
12895
12893
  },
12896
12894
  icon: {
12897
- color: "white"
12895
+ color: "white",
12896
+ "[aria-disabled=true] &": {
12897
+ color: mode("icon.disabled.light", "icon.disabled.dark")
12898
+ }
12898
12899
  }
12899
12900
  },
12900
12901
  variants: {
package/dist/index.d.mts CHANGED
@@ -1581,10 +1581,23 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
1581
1581
  declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React.JSX.Element | null;
1582
1582
 
1583
1583
  type TravelTagProps = TagProps & BoxProps & {
1584
+ /**
1585
+ * Defines the level of importance
1586
+ * Default to none
1587
+ */
1584
1588
  deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
1585
1589
  isDisabled?: boolean;
1590
+ /**
1591
+ * Needs to be defined if variant is custom
1592
+ */
1586
1593
  foregroundColor?: string;
1594
+ /**
1595
+ * Needs to be defined if variant is custom
1596
+ */
1587
1597
  backgroundColor?: string;
1598
+ /**
1599
+ * Define a custom icon variant
1600
+ */
1588
1601
  customIconVariant?: string;
1589
1602
  };
1590
1603
  /**
@@ -4381,7 +4394,6 @@ declare const theme: {
4381
4394
  padding: number;
4382
4395
  "[aria-disabled=true] &": {
4383
4396
  backgroundColor: string;
4384
- color: string;
4385
4397
  };
4386
4398
  };
4387
4399
  textContainer: {
@@ -4814,6 +4826,9 @@ declare const theme: {
4814
4826
  };
4815
4827
  icon: {
4816
4828
  color: string;
4829
+ "[aria-disabled=true] &": {
4830
+ color: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
4831
+ };
4817
4832
  };
4818
4833
  } | undefined;
4819
4834
  sizes?: {
@@ -7336,7 +7351,6 @@ declare const theme: {
7336
7351
  padding: number;
7337
7352
  "[aria-disabled=true] &": {
7338
7353
  backgroundColor: string;
7339
- color: string;
7340
7354
  };
7341
7355
  };
7342
7356
  textContainer: {
@@ -7555,15 +7569,15 @@ declare const theme: {
7555
7569
  sizes?: {
7556
7570
  "2xs": {
7557
7571
  container: {
7558
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | {
7572
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7559
7573
  sm: string;
7560
7574
  md: string;
7561
7575
  lg: string;
7562
7576
  xl: string;
7563
- } | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96;
7577
+ } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7564
7578
  };
7565
7579
  excessLabel: {
7566
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7580
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7567
7581
  sm: string;
7568
7582
  md: string;
7569
7583
  lg: string;
@@ -7573,7 +7587,7 @@ declare const theme: {
7573
7587
  };
7574
7588
  xs: {
7575
7589
  container: {
7576
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7590
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7577
7591
  sm: string;
7578
7592
  md: string;
7579
7593
  lg: string;
@@ -7581,7 +7595,7 @@ declare const theme: {
7581
7595
  };
7582
7596
  };
7583
7597
  excessLabel: {
7584
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7598
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7585
7599
  sm: string;
7586
7600
  md: string;
7587
7601
  lg: string;
@@ -7591,7 +7605,7 @@ declare const theme: {
7591
7605
  };
7592
7606
  sm: {
7593
7607
  container: {
7594
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7608
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7595
7609
  sm: string;
7596
7610
  md: string;
7597
7611
  lg: string;
@@ -7599,7 +7613,7 @@ declare const theme: {
7599
7613
  };
7600
7614
  };
7601
7615
  excessLabel: {
7602
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7616
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7603
7617
  sm: string;
7604
7618
  md: string;
7605
7619
  lg: string;
@@ -7609,7 +7623,7 @@ declare const theme: {
7609
7623
  };
7610
7624
  md: {
7611
7625
  container: {
7612
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7626
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7613
7627
  sm: string;
7614
7628
  md: string;
7615
7629
  lg: string;
@@ -7617,7 +7631,7 @@ declare const theme: {
7617
7631
  };
7618
7632
  };
7619
7633
  excessLabel: {
7620
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7634
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7621
7635
  sm: string;
7622
7636
  md: string;
7623
7637
  lg: string;
@@ -7627,7 +7641,7 @@ declare const theme: {
7627
7641
  };
7628
7642
  lg: {
7629
7643
  container: {
7630
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7644
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7631
7645
  sm: string;
7632
7646
  md: string;
7633
7647
  lg: string;
@@ -7635,7 +7649,7 @@ declare const theme: {
7635
7649
  };
7636
7650
  };
7637
7651
  excessLabel: {
7638
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7652
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7639
7653
  sm: string;
7640
7654
  md: string;
7641
7655
  lg: string;
@@ -7645,7 +7659,7 @@ declare const theme: {
7645
7659
  };
7646
7660
  xl: {
7647
7661
  container: {
7648
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7662
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7649
7663
  sm: string;
7650
7664
  md: string;
7651
7665
  lg: string;
@@ -7653,7 +7667,7 @@ declare const theme: {
7653
7667
  };
7654
7668
  };
7655
7669
  excessLabel: {
7656
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7670
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7657
7671
  sm: string;
7658
7672
  md: string;
7659
7673
  lg: string;
@@ -7663,7 +7677,7 @@ declare const theme: {
7663
7677
  };
7664
7678
  "2xl": {
7665
7679
  container: {
7666
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7680
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7667
7681
  sm: string;
7668
7682
  md: string;
7669
7683
  lg: string;
@@ -7671,7 +7685,7 @@ declare const theme: {
7671
7685
  };
7672
7686
  };
7673
7687
  excessLabel: {
7674
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7688
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7675
7689
  sm: string;
7676
7690
  md: string;
7677
7691
  lg: string;
@@ -7681,7 +7695,7 @@ declare const theme: {
7681
7695
  };
7682
7696
  full: {
7683
7697
  container: {
7684
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7698
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7685
7699
  sm: string;
7686
7700
  md: string;
7687
7701
  lg: string;
@@ -7689,7 +7703,7 @@ declare const theme: {
7689
7703
  };
7690
7704
  };
7691
7705
  excessLabel: {
7692
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7706
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7693
7707
  sm: string;
7694
7708
  md: string;
7695
7709
  lg: string;
package/dist/index.d.ts CHANGED
@@ -1581,10 +1581,23 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
1581
1581
  declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React.JSX.Element | null;
1582
1582
 
1583
1583
  type TravelTagProps = TagProps & BoxProps & {
1584
+ /**
1585
+ * Defines the level of importance
1586
+ * Default to none
1587
+ */
1584
1588
  deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
1585
1589
  isDisabled?: boolean;
1590
+ /**
1591
+ * Needs to be defined if variant is custom
1592
+ */
1586
1593
  foregroundColor?: string;
1594
+ /**
1595
+ * Needs to be defined if variant is custom
1596
+ */
1587
1597
  backgroundColor?: string;
1598
+ /**
1599
+ * Define a custom icon variant
1600
+ */
1588
1601
  customIconVariant?: string;
1589
1602
  };
1590
1603
  /**
@@ -4381,7 +4394,6 @@ declare const theme: {
4381
4394
  padding: number;
4382
4395
  "[aria-disabled=true] &": {
4383
4396
  backgroundColor: string;
4384
- color: string;
4385
4397
  };
4386
4398
  };
4387
4399
  textContainer: {
@@ -4814,6 +4826,9 @@ declare const theme: {
4814
4826
  };
4815
4827
  icon: {
4816
4828
  color: string;
4829
+ "[aria-disabled=true] &": {
4830
+ color: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
4831
+ };
4817
4832
  };
4818
4833
  } | undefined;
4819
4834
  sizes?: {
@@ -7336,7 +7351,6 @@ declare const theme: {
7336
7351
  padding: number;
7337
7352
  "[aria-disabled=true] &": {
7338
7353
  backgroundColor: string;
7339
- color: string;
7340
7354
  };
7341
7355
  };
7342
7356
  textContainer: {
@@ -7555,15 +7569,15 @@ declare const theme: {
7555
7569
  sizes?: {
7556
7570
  "2xs": {
7557
7571
  container: {
7558
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | {
7572
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7559
7573
  sm: string;
7560
7574
  md: string;
7561
7575
  lg: string;
7562
7576
  xl: string;
7563
- } | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96;
7577
+ } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7564
7578
  };
7565
7579
  excessLabel: {
7566
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7580
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7567
7581
  sm: string;
7568
7582
  md: string;
7569
7583
  lg: string;
@@ -7573,7 +7587,7 @@ declare const theme: {
7573
7587
  };
7574
7588
  xs: {
7575
7589
  container: {
7576
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7590
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7577
7591
  sm: string;
7578
7592
  md: string;
7579
7593
  lg: string;
@@ -7581,7 +7595,7 @@ declare const theme: {
7581
7595
  };
7582
7596
  };
7583
7597
  excessLabel: {
7584
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7598
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7585
7599
  sm: string;
7586
7600
  md: string;
7587
7601
  lg: string;
@@ -7591,7 +7605,7 @@ declare const theme: {
7591
7605
  };
7592
7606
  sm: {
7593
7607
  container: {
7594
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7608
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7595
7609
  sm: string;
7596
7610
  md: string;
7597
7611
  lg: string;
@@ -7599,7 +7613,7 @@ declare const theme: {
7599
7613
  };
7600
7614
  };
7601
7615
  excessLabel: {
7602
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7616
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7603
7617
  sm: string;
7604
7618
  md: string;
7605
7619
  lg: string;
@@ -7609,7 +7623,7 @@ declare const theme: {
7609
7623
  };
7610
7624
  md: {
7611
7625
  container: {
7612
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7626
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7613
7627
  sm: string;
7614
7628
  md: string;
7615
7629
  lg: string;
@@ -7617,7 +7631,7 @@ declare const theme: {
7617
7631
  };
7618
7632
  };
7619
7633
  excessLabel: {
7620
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7634
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7621
7635
  sm: string;
7622
7636
  md: string;
7623
7637
  lg: string;
@@ -7627,7 +7641,7 @@ declare const theme: {
7627
7641
  };
7628
7642
  lg: {
7629
7643
  container: {
7630
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7644
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7631
7645
  sm: string;
7632
7646
  md: string;
7633
7647
  lg: string;
@@ -7635,7 +7649,7 @@ declare const theme: {
7635
7649
  };
7636
7650
  };
7637
7651
  excessLabel: {
7638
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7652
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7639
7653
  sm: string;
7640
7654
  md: string;
7641
7655
  lg: string;
@@ -7645,7 +7659,7 @@ declare const theme: {
7645
7659
  };
7646
7660
  xl: {
7647
7661
  container: {
7648
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7662
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7649
7663
  sm: string;
7650
7664
  md: string;
7651
7665
  lg: string;
@@ -7653,7 +7667,7 @@ declare const theme: {
7653
7667
  };
7654
7668
  };
7655
7669
  excessLabel: {
7656
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7670
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7657
7671
  sm: string;
7658
7672
  md: string;
7659
7673
  lg: string;
@@ -7663,7 +7677,7 @@ declare const theme: {
7663
7677
  };
7664
7678
  "2xl": {
7665
7679
  container: {
7666
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7680
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7667
7681
  sm: string;
7668
7682
  md: string;
7669
7683
  lg: string;
@@ -7671,7 +7685,7 @@ declare const theme: {
7671
7685
  };
7672
7686
  };
7673
7687
  excessLabel: {
7674
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7688
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7675
7689
  sm: string;
7676
7690
  md: string;
7677
7691
  lg: string;
@@ -7681,7 +7695,7 @@ declare const theme: {
7681
7695
  };
7682
7696
  full: {
7683
7697
  container: {
7684
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7698
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7685
7699
  sm: string;
7686
7700
  md: string;
7687
7701
  lg: string;
@@ -7689,7 +7703,7 @@ declare const theme: {
7689
7703
  };
7690
7704
  };
7691
7705
  excessLabel: {
7692
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7706
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7693
7707
  sm: string;
7694
7708
  md: string;
7695
7709
  lg: string;
package/dist/index.js CHANGED
@@ -9,7 +9,6 @@ var awesomePhonenumber = require('awesome-phonenumber');
9
9
  var lottieReact = require('lottie-react');
10
10
  var sporLoader = require('@vygruppen/spor-loader');
11
11
  var framerMotion = require('framer-motion');
12
- var tmp = require('@vygruppen/spor-icon-react/tmp');
13
12
  var date = require('@internationalized/date');
14
13
  var reactSwipeable = require('react-swipeable');
15
14
  var tokens11 = require('@vygruppen/spor-design-tokens');
@@ -3207,7 +3206,7 @@ var init_AlertIcon = __esm({
3207
3206
  case "global-deviation":
3208
3207
  return sporIconReact.WarningFill24Icon;
3209
3208
  case "service":
3210
- return tmp.ServiceFill24Icon;
3209
+ return sporIconReact.ServiceFill24Icon;
3211
3210
  }
3212
3211
  };
3213
3212
  texts11 = createTexts({
@@ -14072,6 +14071,8 @@ var parts9, helpers13, config20, travel_tag_default, getDeviationContainerStyle,
14072
14071
  var init_travel_tag = __esm({
14073
14072
  "src/theme/components/travel-tag.ts"() {
14074
14073
  init_focus_utils();
14074
+ init_surface_utils();
14075
+ init_base_utils();
14075
14076
  parts9 = themeTools.anatomy("travel-tag").parts(
14076
14077
  "container",
14077
14078
  "iconContainer",
@@ -14094,7 +14095,7 @@ var init_travel_tag = __esm({
14094
14095
  transitionDuration: "fast",
14095
14096
  transitionProperty: "common",
14096
14097
  _disabled: {
14097
- backgroundColor: "silver"
14098
+ ...surface("disabled", props)
14098
14099
  },
14099
14100
  "button&, a&": {
14100
14101
  boxShadow: "sm",
@@ -14111,8 +14112,7 @@ var init_travel_tag = __esm({
14111
14112
  iconContainer: {
14112
14113
  padding: 0.5,
14113
14114
  "[aria-disabled=true] &": {
14114
- backgroundColor: "osloGrey",
14115
- color: "white"
14115
+ ...surface("disabled", props)
14116
14116
  }
14117
14117
  },
14118
14118
  textContainer: {
@@ -14120,7 +14120,7 @@ var init_travel_tag = __esm({
14120
14120
  paddingRight: 0.5,
14121
14121
  whiteSpace: "nowrap",
14122
14122
  "[aria-disabled=true] &": {
14123
- color: "dimGrey"
14123
+ ...baseText("disabled", props)
14124
14124
  }
14125
14125
  },
14126
14126
  title: {
@@ -14542,7 +14542,10 @@ var init_line_icon = __esm({
14542
14542
  alignItems: "center"
14543
14543
  },
14544
14544
  icon: {
14545
- color: "white"
14545
+ color: "white",
14546
+ "[aria-disabled=true] &": {
14547
+ color: themeTools.mode("icon.disabled.light", "icon.disabled.dark")
14548
+ }
14546
14549
  }
14547
14550
  },
14548
14551
  variants: {
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-HAWOB4BD.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-5GZRUD7N.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "10.9.0",
3
+ "version": "10.9.2",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -5,11 +5,11 @@ import {
5
5
  SuccessOutline24Icon,
6
6
  WarningOutline24Icon,
7
7
  WarningFill24Icon,
8
+ ServiceFill24Icon,
8
9
  } from "@vygruppen/spor-icon-react";
9
10
  import React from "react";
10
11
  import { createTexts, useTranslation } from "../i18n";
11
12
  import { BaseAlertProps } from "./BaseAlert";
12
- import { ServiceFill24Icon } from "@vygruppen/spor-icon-react/tmp";
13
13
 
14
14
  type AlertIconProps = { variant: BaseAlertProps["variant"] };
15
15
  /**
@@ -19,10 +19,23 @@ import type { TagProps } from "./types";
19
19
 
20
20
  export type TravelTagProps = TagProps &
21
21
  BoxProps & {
22
+ /**
23
+ * Defines the level of importance
24
+ * Default to none
25
+ */
22
26
  deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
23
27
  isDisabled?: boolean;
28
+ /**
29
+ * Needs to be defined if variant is custom
30
+ */
24
31
  foregroundColor?: string;
32
+ /**
33
+ * Needs to be defined if variant is custom
34
+ */
25
35
  backgroundColor?: string;
36
+ /**
37
+ * Define a custom icon variant
38
+ */
26
39
  customIconVariant?: string;
27
40
  };
28
41
 
@@ -13,6 +13,9 @@ const config = helpers.defineMultiStyleConfig({
13
13
  },
14
14
  icon: {
15
15
  color: "white",
16
+ "[aria-disabled=true] &": {
17
+ color: mode("icon.disabled.light", "icon.disabled.dark"),
18
+ },
16
19
  },
17
20
  },
18
21
  variants: {
@@ -2,6 +2,8 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
2
2
  import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
3
3
  import { anatomy, mode } from "@chakra-ui/theme-tools";
4
4
  import { focusVisibleStyles } from "../utils/focus-utils";
5
+ import { surface } from "../utils/surface-utils";
6
+ import { baseText } from "../utils/base-utils";
5
7
 
6
8
  const parts = anatomy("travel-tag").parts(
7
9
  "container",
@@ -27,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
27
29
  transitionDuration: "fast",
28
30
  transitionProperty: "common",
29
31
  _disabled: {
30
- backgroundColor: "silver",
32
+ ...surface("disabled", props),
31
33
  },
32
34
  "button&, a&": {
33
35
  boxShadow: "sm",
@@ -44,8 +46,7 @@ const config = helpers.defineMultiStyleConfig({
44
46
  iconContainer: {
45
47
  padding: 0.5,
46
48
  "[aria-disabled=true] &": {
47
- backgroundColor: "osloGrey",
48
- color: "white",
49
+ ...surface("disabled", props),
49
50
  },
50
51
  },
51
52
  textContainer: {
@@ -53,7 +54,7 @@ const config = helpers.defineMultiStyleConfig({
53
54
  paddingRight: 0.5,
54
55
  whiteSpace: "nowrap",
55
56
  "[aria-disabled=true] &": {
56
- color: "dimGrey",
57
+ ...baseText("disabled", props),
57
58
  },
58
59
  },
59
60
  title: {