@vygruppen/spor-react 9.13.3 → 9.14.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.13.3 build
2
+ > @vygruppen/spor-react@9.14.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
- ESM dist/index.mjs 2.19 KB
13
- ESM dist/chunk-Y56HXMZC.mjs 414.22 KB
14
- ESM dist/CountryCodeSelect-7VDV2T5R.mjs 1.19 KB
15
- ESM ⚡️ Build success in 2170ms
16
- CJS dist/index.js 527.27 KB
17
- CJS ⚡️ Build success in 2171ms
18
- DTS ⚡️ Build success in 16058ms
19
- DTS dist/index.d.ts 345.58 KB
20
- DTS dist/index.d.mts 345.58 KB
12
+ CJS dist/index.js 536.08 KB
13
+ CJS ⚡️ Build success in 2234ms
14
+ ESM dist/index.mjs 2.21 KB
15
+ ESM dist/CountryCodeSelect-JADNUR4X.mjs 1.19 KB
16
+ ESM dist/chunk-HKTFZRTD.mjs 421.95 KB
17
+ ESM ⚡️ Build success in 2234ms
18
+ DTS ⚡️ Build success in 16305ms
19
+ DTS dist/index.d.ts 345.90 KB
20
+ DTS dist/index.d.mts 345.90 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.14.1
4
+
5
+ ### Patch Changes
6
+
7
+ - c71b156: Vertical align for infoselect
8
+
9
+ ## 9.14.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 4481b5a: Add logo file for Cargonet
14
+ - 98968e7: FullScreenDrawer: Added back button as default view. Title gets more space on mobile.
15
+
3
16
  ## 9.13.3
4
17
 
5
18
  ### Patch Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-Y56HXMZC.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-HKTFZRTD.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -5,7 +5,7 @@ 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 React87 from 'react';
7
7
  import React87__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, ArrowRightFill18Icon, ArrowLeftFill24Icon, 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, 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';
@@ -1400,9 +1400,9 @@ function InfoSelect({
1400
1400
  Box,
1401
1401
  {
1402
1402
  ...valueProps,
1403
- h: !hasChosenValue ? "0px" : "18px",
1403
+ h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
1404
1404
  hidden: !hasChosenValue,
1405
- transform: "scale(1) translateY(-10px)",
1405
+ transform: isLabelSrOnly ? "" : "scale(1) translateY(-10px)",
1406
1406
  transitionProperty: "var(--spor-transition-property-common)",
1407
1407
  transitionDuration: "var(--spor-transition-duration-normal)"
1408
1408
  },
@@ -1758,7 +1758,7 @@ var texts4 = createTexts({
1758
1758
  sv: "Landskod"
1759
1759
  }
1760
1760
  });
1761
- var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-7VDV2T5R.mjs'));
1761
+ var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-JADNUR4X.mjs'));
1762
1762
  var Radio = forwardRef((props, ref) => {
1763
1763
  return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
1764
1764
  });
@@ -4176,6 +4176,122 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
4176
4176
  }
4177
4177
  return /* @__PURE__ */ React87__default.createElement(VyLogoDefault, { colorScheme, ...boxProps });
4178
4178
  };
4179
+ var CargonetLogo = ({
4180
+ colorScheme,
4181
+ ...boxProps
4182
+ }) => {
4183
+ const mainColor = "#DF8200";
4184
+ const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
4185
+ return /* @__PURE__ */ React87__default.createElement(Box, { as: "svg", viewBox: "0 0 251 52", ...boxProps }, /* @__PURE__ */ React87__default.createElement("title", null, "Cargonet logo"), /* @__PURE__ */ React87__default.createElement(
4186
+ "path",
4187
+ {
4188
+ d: "M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z",
4189
+ fill: accentColor
4190
+ }
4191
+ ), /* @__PURE__ */ React87__default.createElement(
4192
+ "path",
4193
+ {
4194
+ d: "M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z",
4195
+ fill: accentColor
4196
+ }
4197
+ ), /* @__PURE__ */ React87__default.createElement(
4198
+ "path",
4199
+ {
4200
+ d: "M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z",
4201
+ fill: accentColor
4202
+ }
4203
+ ), /* @__PURE__ */ React87__default.createElement(
4204
+ "path",
4205
+ {
4206
+ d: "M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z",
4207
+ fill: accentColor
4208
+ }
4209
+ ), /* @__PURE__ */ React87__default.createElement(
4210
+ "path",
4211
+ {
4212
+ d: "M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z",
4213
+ fill: accentColor
4214
+ }
4215
+ ), /* @__PURE__ */ React87__default.createElement(
4216
+ "path",
4217
+ {
4218
+ d: "M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z",
4219
+ fill: mainColor
4220
+ }
4221
+ ), /* @__PURE__ */ React87__default.createElement(
4222
+ "path",
4223
+ {
4224
+ d: "M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z",
4225
+ fill: mainColor
4226
+ }
4227
+ ), /* @__PURE__ */ React87__default.createElement(
4228
+ "path",
4229
+ {
4230
+ d: "M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z",
4231
+ fill: mainColor
4232
+ }
4233
+ ), /* @__PURE__ */ React87__default.createElement(
4234
+ "path",
4235
+ {
4236
+ d: "M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z",
4237
+ fill: mainColor
4238
+ }
4239
+ ), /* @__PURE__ */ React87__default.createElement(
4240
+ "path",
4241
+ {
4242
+ d: "M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z",
4243
+ fill: mainColor
4244
+ }
4245
+ ), /* @__PURE__ */ React87__default.createElement(
4246
+ "path",
4247
+ {
4248
+ d: "M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z",
4249
+ fill: mainColor
4250
+ }
4251
+ ), /* @__PURE__ */ React87__default.createElement(
4252
+ "path",
4253
+ {
4254
+ d: "M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z",
4255
+ fill: mainColor
4256
+ }
4257
+ ), /* @__PURE__ */ React87__default.createElement(
4258
+ "path",
4259
+ {
4260
+ d: "M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z",
4261
+ fill: mainColor
4262
+ }
4263
+ ), /* @__PURE__ */ React87__default.createElement(
4264
+ "path",
4265
+ {
4266
+ d: "M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z",
4267
+ fill: mainColor
4268
+ }
4269
+ ), /* @__PURE__ */ React87__default.createElement(
4270
+ "path",
4271
+ {
4272
+ d: "M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z",
4273
+ fill: mainColor
4274
+ }
4275
+ ), /* @__PURE__ */ React87__default.createElement(
4276
+ "path",
4277
+ {
4278
+ d: "M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z",
4279
+ fill: mainColor
4280
+ }
4281
+ ), /* @__PURE__ */ React87__default.createElement(
4282
+ "path",
4283
+ {
4284
+ d: "M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z",
4285
+ fill: mainColor
4286
+ }
4287
+ ), /* @__PURE__ */ React87__default.createElement(
4288
+ "path",
4289
+ {
4290
+ d: "M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z",
4291
+ fill: mainColor
4292
+ }
4293
+ ));
4294
+ };
4179
4295
  var JumpButton = ({
4180
4296
  direction: direction2,
4181
4297
  isDisabled,
@@ -4371,7 +4487,7 @@ var FullScreenDrawer = ({
4371
4487
  children,
4372
4488
  title,
4373
4489
  placement = "bottom",
4374
- leftButton = null,
4490
+ leftButton = /* @__PURE__ */ React87__default.createElement(DrawerBackButton, null),
4375
4491
  rightButton = /* @__PURE__ */ React87__default.createElement(DrawerCloseButton2, null),
4376
4492
  isOpen,
4377
4493
  onClose,
@@ -4432,7 +4548,7 @@ var DrawerTopMenu = ({
4432
4548
  transition: "box-shadow 0.2s",
4433
4549
  boxShadow: isScrolled ? "md" : void 0
4434
4550
  },
4435
- /* @__PURE__ */ React87__default.createElement(Box, { flex: "1" }, leftButton),
4551
+ /* @__PURE__ */ React87__default.createElement(Box, { flex: "1" }, /* @__PURE__ */ React87__default.createElement(Box, { width: "fit-content" }, leftButton)),
4436
4552
  /* @__PURE__ */ React87__default.createElement(
4437
4553
  DrawerHeader,
4438
4554
  {
@@ -4440,7 +4556,7 @@ var DrawerTopMenu = ({
4440
4556
  fontSize: "md",
4441
4557
  fontWeight: "bold",
4442
4558
  textAlign: "center",
4443
- flex: "1",
4559
+ flex: "2",
4444
4560
  margin: 0,
4445
4561
  padding: 0
4446
4562
  },
@@ -4479,12 +4595,60 @@ var DrawerCloseButton2 = () => {
4479
4595
  }
4480
4596
  );
4481
4597
  };
4598
+ var DrawerBackButton = () => {
4599
+ const { onClose } = useModalContext();
4600
+ const { t: t2 } = useTranslation();
4601
+ const [isScreenSizeMinSm] = useMediaQuery(
4602
+ `(min-width: ${tokens11__default.size.breakpoint.sm})`
4603
+ );
4604
+ if (isScreenSizeMinSm) {
4605
+ return /* @__PURE__ */ React87__default.createElement(
4606
+ Button2,
4607
+ {
4608
+ variant: "ghost",
4609
+ leftIcon: /* @__PURE__ */ React87__default.createElement(ArrowLeftFill24Icon, null),
4610
+ onClick: onClose,
4611
+ "aria-label": t2(texts20.backAriaLabel),
4612
+ width: "fit-content",
4613
+ marginLeft: "auto"
4614
+ },
4615
+ t2(texts20.back)
4616
+ );
4617
+ }
4618
+ return /* @__PURE__ */ React87__default.createElement(
4619
+ IconButton,
4620
+ {
4621
+ variant: "ghost",
4622
+ icon: /* @__PURE__ */ React87__default.createElement(ArrowLeftFill30Icon, null),
4623
+ onClick: onClose,
4624
+ "aria-label": t2(texts20.close)
4625
+ }
4626
+ );
4627
+ };
4482
4628
  var texts20 = createTexts({
4483
4629
  close: {
4484
4630
  nb: "Lukk",
4485
4631
  nn: "Lukk",
4486
4632
  en: "Close",
4487
4633
  sv: "St\xE4ng"
4634
+ },
4635
+ closeAriaLabel: {
4636
+ nb: "Lukk vindu",
4637
+ nn: "Lukk vindauge",
4638
+ en: "Close window",
4639
+ sv: "St\xE4ng f\xF6nster"
4640
+ },
4641
+ back: {
4642
+ nb: "Tilbake",
4643
+ nn: "Tilbake",
4644
+ en: "Back",
4645
+ sv: "Tillbaka"
4646
+ },
4647
+ backAriaLabel: {
4648
+ nb: "G\xE5 tilbake",
4649
+ nn: "G\xE5 tilbake",
4650
+ en: "Go back",
4651
+ sv: "G\xE5 tillbaka"
4488
4652
  }
4489
4653
  });
4490
4654
  var SimpleDrawer = ({
@@ -12162,7 +12326,6 @@ var config19 = helpers11.defineMultiStyleConfig({
12162
12326
  justifyContent: "space-between",
12163
12327
  alignItems: "center",
12164
12328
  fontSize: "mobile.md",
12165
- h: 8,
12166
12329
  ...baseBorder("default", props),
12167
12330
  _hover: {
12168
12331
  ...baseBorder("hover", props)
@@ -14531,4 +14694,4 @@ function slugify(text, maxLength = 50) {
14531
14694
  return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
14532
14695
  }
14533
14696
 
14534
- export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };
14697
+ export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };
package/dist/index.d.mts CHANGED
@@ -1906,6 +1906,16 @@ type VyLogoDefaultProps = {
1906
1906
  } & BoxProps;
1907
1907
  declare const VyLogoDefault: ({ colorScheme, ...boxProps }: VyLogoDefaultProps) => React.JSX.Element;
1908
1908
 
1909
+ type CargonetLogoProps = {
1910
+ /** The color of the logo
1911
+ *
1912
+ * Use `"light"` when the logo is used on a light background.
1913
+ * Use `"dark"` when the logo is used on a dark background.
1914
+ */
1915
+ colorScheme: "light" | "dark";
1916
+ } & BoxProps;
1917
+ declare const CargonetLogo: ({ colorScheme, ...boxProps }: CargonetLogoProps) => React.JSX.Element;
1918
+
1909
1919
  type JumpButtonProps = BoxProps & {
1910
1920
  onClick: () => void;
1911
1921
  "aria-label"?: string;
@@ -4704,7 +4714,6 @@ declare const theme: {
4704
4714
  justifyContent: string;
4705
4715
  alignItems: string;
4706
4716
  fontSize: string;
4707
- h: number;
4708
4717
  } | {
4709
4718
  _disabled: {
4710
4719
  backgroundColor: string;
@@ -4751,7 +4760,6 @@ declare const theme: {
4751
4760
  justifyContent: string;
4752
4761
  alignItems: string;
4753
4762
  fontSize: string;
4754
- h: number;
4755
4763
  };
4756
4764
  placeholder: {};
4757
4765
  arrowIcon: {};
@@ -9585,4 +9593,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9585
9593
  **/
9586
9594
  declare function slugify(text: string | string[], maxLength?: number): string;
9587
9595
 
9588
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
9596
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
package/dist/index.d.ts CHANGED
@@ -1906,6 +1906,16 @@ type VyLogoDefaultProps = {
1906
1906
  } & BoxProps;
1907
1907
  declare const VyLogoDefault: ({ colorScheme, ...boxProps }: VyLogoDefaultProps) => React.JSX.Element;
1908
1908
 
1909
+ type CargonetLogoProps = {
1910
+ /** The color of the logo
1911
+ *
1912
+ * Use `"light"` when the logo is used on a light background.
1913
+ * Use `"dark"` when the logo is used on a dark background.
1914
+ */
1915
+ colorScheme: "light" | "dark";
1916
+ } & BoxProps;
1917
+ declare const CargonetLogo: ({ colorScheme, ...boxProps }: CargonetLogoProps) => React.JSX.Element;
1918
+
1909
1919
  type JumpButtonProps = BoxProps & {
1910
1920
  onClick: () => void;
1911
1921
  "aria-label"?: string;
@@ -4704,7 +4714,6 @@ declare const theme: {
4704
4714
  justifyContent: string;
4705
4715
  alignItems: string;
4706
4716
  fontSize: string;
4707
- h: number;
4708
4717
  } | {
4709
4718
  _disabled: {
4710
4719
  backgroundColor: string;
@@ -4751,7 +4760,6 @@ declare const theme: {
4751
4760
  justifyContent: string;
4752
4761
  alignItems: string;
4753
4762
  fontSize: string;
4754
- h: number;
4755
4763
  };
4756
4764
  placeholder: {};
4757
4765
  arrowIcon: {};
@@ -9585,4 +9593,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9585
9593
  **/
9586
9594
  declare function slugify(text: string | string[], maxLength?: number): string;
9587
9595
 
9588
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
9596
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
package/dist/index.js CHANGED
@@ -1522,9 +1522,9 @@ function InfoSelect({
1522
1522
  react.Box,
1523
1523
  {
1524
1524
  ...valueProps,
1525
- h: !hasChosenValue ? "0px" : "18px",
1525
+ h: isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px",
1526
1526
  hidden: !hasChosenValue,
1527
- transform: "scale(1) translateY(-10px)",
1527
+ transform: isLabelSrOnly ? "" : "scale(1) translateY(-10px)",
1528
1528
  transitionProperty: "var(--spor-transition-property-common)",
1529
1529
  transitionDuration: "var(--spor-transition-duration-normal)"
1530
1530
  },
@@ -4956,6 +4956,127 @@ var init_VyLogo = __esm({
4956
4956
  };
4957
4957
  }
4958
4958
  });
4959
+ exports.CargonetLogo = void 0;
4960
+ var init_CargonetLogo = __esm({
4961
+ "src/logo/CargonetLogo.tsx"() {
4962
+ exports.CargonetLogo = ({
4963
+ colorScheme,
4964
+ ...boxProps
4965
+ }) => {
4966
+ const mainColor = "#DF8200";
4967
+ const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
4968
+ return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 251 52", ...boxProps }, /* @__PURE__ */ React88__namespace.default.createElement("title", null, "Cargonet logo"), /* @__PURE__ */ React88__namespace.default.createElement(
4969
+ "path",
4970
+ {
4971
+ d: "M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z",
4972
+ fill: accentColor
4973
+ }
4974
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
4975
+ "path",
4976
+ {
4977
+ d: "M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z",
4978
+ fill: accentColor
4979
+ }
4980
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
4981
+ "path",
4982
+ {
4983
+ d: "M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z",
4984
+ fill: accentColor
4985
+ }
4986
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
4987
+ "path",
4988
+ {
4989
+ d: "M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z",
4990
+ fill: accentColor
4991
+ }
4992
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
4993
+ "path",
4994
+ {
4995
+ d: "M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z",
4996
+ fill: accentColor
4997
+ }
4998
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
4999
+ "path",
5000
+ {
5001
+ d: "M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z",
5002
+ fill: mainColor
5003
+ }
5004
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5005
+ "path",
5006
+ {
5007
+ d: "M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z",
5008
+ fill: mainColor
5009
+ }
5010
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5011
+ "path",
5012
+ {
5013
+ d: "M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z",
5014
+ fill: mainColor
5015
+ }
5016
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5017
+ "path",
5018
+ {
5019
+ d: "M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z",
5020
+ fill: mainColor
5021
+ }
5022
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5023
+ "path",
5024
+ {
5025
+ d: "M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z",
5026
+ fill: mainColor
5027
+ }
5028
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5029
+ "path",
5030
+ {
5031
+ d: "M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z",
5032
+ fill: mainColor
5033
+ }
5034
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5035
+ "path",
5036
+ {
5037
+ d: "M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z",
5038
+ fill: mainColor
5039
+ }
5040
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5041
+ "path",
5042
+ {
5043
+ d: "M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z",
5044
+ fill: mainColor
5045
+ }
5046
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5047
+ "path",
5048
+ {
5049
+ d: "M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z",
5050
+ fill: mainColor
5051
+ }
5052
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5053
+ "path",
5054
+ {
5055
+ d: "M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z",
5056
+ fill: mainColor
5057
+ }
5058
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5059
+ "path",
5060
+ {
5061
+ d: "M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z",
5062
+ fill: mainColor
5063
+ }
5064
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5065
+ "path",
5066
+ {
5067
+ d: "M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z",
5068
+ fill: mainColor
5069
+ }
5070
+ ), /* @__PURE__ */ React88__namespace.default.createElement(
5071
+ "path",
5072
+ {
5073
+ d: "M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z",
5074
+ fill: mainColor
5075
+ }
5076
+ ));
5077
+ };
5078
+ }
5079
+ });
4959
5080
 
4960
5081
  // src/logo/index.tsx
4961
5082
  var init_logo = __esm({
@@ -4963,6 +5084,7 @@ var init_logo = __esm({
4963
5084
  init_VyLogo();
4964
5085
  init_VyLogoPride();
4965
5086
  init_VyLogoDefault();
5087
+ init_CargonetLogo();
4966
5088
  }
4967
5089
  });
4968
5090
  exports.JumpButton = void 0; var texts18;
@@ -5192,7 +5314,7 @@ var init_Drawer = __esm({
5192
5314
  };
5193
5315
  }
5194
5316
  });
5195
- exports.FullScreenDrawer = void 0; var DrawerTopMenu, DrawerCloseButton2, texts21;
5317
+ exports.FullScreenDrawer = void 0; var DrawerTopMenu, DrawerCloseButton2, DrawerBackButton, texts21;
5196
5318
  var init_FullScreenDrawer = __esm({
5197
5319
  "src/modal/FullScreenDrawer.tsx"() {
5198
5320
  init_button();
@@ -5202,7 +5324,7 @@ var init_FullScreenDrawer = __esm({
5202
5324
  children,
5203
5325
  title,
5204
5326
  placement = "bottom",
5205
- leftButton = null,
5327
+ leftButton = /* @__PURE__ */ React88__namespace.default.createElement(DrawerBackButton, null),
5206
5328
  rightButton = /* @__PURE__ */ React88__namespace.default.createElement(DrawerCloseButton2, null),
5207
5329
  isOpen,
5208
5330
  onClose,
@@ -5263,7 +5385,7 @@ var init_FullScreenDrawer = __esm({
5263
5385
  transition: "box-shadow 0.2s",
5264
5386
  boxShadow: isScrolled ? "md" : void 0
5265
5387
  },
5266
- /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { flex: "1" }, leftButton),
5388
+ /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { flex: "1" }, /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { width: "fit-content" }, leftButton)),
5267
5389
  /* @__PURE__ */ React88__namespace.default.createElement(
5268
5390
  react.DrawerHeader,
5269
5391
  {
@@ -5271,7 +5393,7 @@ var init_FullScreenDrawer = __esm({
5271
5393
  fontSize: "md",
5272
5394
  fontWeight: "bold",
5273
5395
  textAlign: "center",
5274
- flex: "1",
5396
+ flex: "2",
5275
5397
  margin: 0,
5276
5398
  padding: 0
5277
5399
  },
@@ -5310,12 +5432,60 @@ var init_FullScreenDrawer = __esm({
5310
5432
  }
5311
5433
  );
5312
5434
  };
5435
+ DrawerBackButton = () => {
5436
+ const { onClose } = react.useModalContext();
5437
+ const { t: t2 } = useTranslation();
5438
+ const [isScreenSizeMinSm] = react.useMediaQuery(
5439
+ `(min-width: ${tokens11__namespace.default.size.breakpoint.sm})`
5440
+ );
5441
+ if (isScreenSizeMinSm) {
5442
+ return /* @__PURE__ */ React88__namespace.default.createElement(
5443
+ exports.Button,
5444
+ {
5445
+ variant: "ghost",
5446
+ leftIcon: /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
5447
+ onClick: onClose,
5448
+ "aria-label": t2(texts21.backAriaLabel),
5449
+ width: "fit-content",
5450
+ marginLeft: "auto"
5451
+ },
5452
+ t2(texts21.back)
5453
+ );
5454
+ }
5455
+ return /* @__PURE__ */ React88__namespace.default.createElement(
5456
+ exports.IconButton,
5457
+ {
5458
+ variant: "ghost",
5459
+ icon: /* @__PURE__ */ React88__namespace.default.createElement(sporIconReact.ArrowLeftFill30Icon, null),
5460
+ onClick: onClose,
5461
+ "aria-label": t2(texts21.close)
5462
+ }
5463
+ );
5464
+ };
5313
5465
  texts21 = createTexts({
5314
5466
  close: {
5315
5467
  nb: "Lukk",
5316
5468
  nn: "Lukk",
5317
5469
  en: "Close",
5318
5470
  sv: "St\xE4ng"
5471
+ },
5472
+ closeAriaLabel: {
5473
+ nb: "Lukk vindu",
5474
+ nn: "Lukk vindauge",
5475
+ en: "Close window",
5476
+ sv: "St\xE4ng f\xF6nster"
5477
+ },
5478
+ back: {
5479
+ nb: "Tilbake",
5480
+ nn: "Tilbake",
5481
+ en: "Back",
5482
+ sv: "Tillbaka"
5483
+ },
5484
+ backAriaLabel: {
5485
+ nb: "G\xE5 tilbake",
5486
+ nn: "G\xE5 tilbake",
5487
+ en: "Go back",
5488
+ sv: "G\xE5 tillbaka"
5319
5489
  }
5320
5490
  });
5321
5491
  }
@@ -13820,7 +13990,6 @@ var init_info_select = __esm({
13820
13990
  justifyContent: "space-between",
13821
13991
  alignItems: "center",
13822
13992
  fontSize: "mobile.md",
13823
- h: 8,
13824
13993
  ...baseBorder("default", props),
13825
13994
  _hover: {
13826
13995
  ...baseBorder("hover", props)
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, 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, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, 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, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-Y56HXMZC.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, 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, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, 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, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-HKTFZRTD.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.13.3",
3
+ "version": "9.14.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -224,9 +224,9 @@ export function InfoSelect<T extends object>({
224
224
  </chakra.div>
225
225
  <Box
226
226
  {...valueProps}
227
- h={!hasChosenValue ? "0px" : "18px"}
227
+ h={isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px"}
228
228
  hidden={!hasChosenValue}
229
- transform={"scale(1) translateY(-10px)"}
229
+ transform={isLabelSrOnly ? "" : "scale(1) translateY(-10px)"}
230
230
  transitionProperty={"var(--spor-transition-property-common)"}
231
231
  transitionDuration={"var(--spor-transition-duration-normal)"}
232
232
  >
@@ -0,0 +1,98 @@
1
+ import { Box, BoxProps } from "@chakra-ui/react";
2
+ import React from "react";
3
+
4
+ export type CargonetLogoProps = {
5
+ /** The color of the logo
6
+ *
7
+ * Use `"light"` when the logo is used on a light background.
8
+ * Use `"dark"` when the logo is used on a dark background.
9
+ */
10
+ colorScheme: "light" | "dark";
11
+ } & BoxProps;
12
+
13
+ export const CargonetLogo = ({
14
+ colorScheme,
15
+ ...boxProps
16
+ }: CargonetLogoProps) => {
17
+ // These colors should not be tokenized, as they are logo specific.
18
+ const mainColor = "#DF8200";
19
+ const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
20
+
21
+ return (
22
+ <Box as="svg" viewBox="0 0 251 52" {...boxProps}>
23
+ <title>Cargonet logo</title>
24
+ <path
25
+ d="M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z"
26
+ fill={accentColor}
27
+ />
28
+ <path
29
+ d="M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z"
30
+ fill={accentColor}
31
+ />
32
+ <path
33
+ d="M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z"
34
+ fill={accentColor}
35
+ />
36
+ <path
37
+ d="M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z"
38
+ fill={accentColor}
39
+ />
40
+ <path
41
+ d="M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z"
42
+ fill={accentColor}
43
+ />
44
+ <path
45
+ d="M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z"
46
+ fill={mainColor}
47
+ />
48
+ <path
49
+ d="M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z"
50
+ fill={mainColor}
51
+ />
52
+ <path
53
+ d="M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z"
54
+ fill={mainColor}
55
+ />
56
+ <path
57
+ d="M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z"
58
+ fill={mainColor}
59
+ />
60
+ <path
61
+ d="M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z"
62
+ fill={mainColor}
63
+ />
64
+ <path
65
+ d="M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z"
66
+ fill={mainColor}
67
+ />
68
+ <path
69
+ d="M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z"
70
+ fill={mainColor}
71
+ />
72
+ <path
73
+ d="M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z"
74
+ fill={mainColor}
75
+ />
76
+ <path
77
+ d="M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z"
78
+ fill={mainColor}
79
+ />
80
+ <path
81
+ d="M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z"
82
+ fill={mainColor}
83
+ />
84
+ <path
85
+ d="M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z"
86
+ fill={mainColor}
87
+ />
88
+ <path
89
+ d="M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z"
90
+ fill={mainColor}
91
+ />
92
+ <path
93
+ d="M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z"
94
+ fill={mainColor}
95
+ />
96
+ </Box>
97
+ );
98
+ };
@@ -1,3 +1,4 @@
1
1
  export * from "./VyLogo";
2
2
  export * from "./VyLogoPride";
3
3
  export * from "./VyLogoDefault";
4
+ export * from "./CargonetLogo";
@@ -10,7 +10,12 @@ import {
10
10
  useModalContext,
11
11
  } from "@chakra-ui/react";
12
12
  import tokens from "@vygruppen/spor-design-tokens";
13
- import { CloseFill24Icon, CloseFill30Icon } from "@vygruppen/spor-icon-react";
13
+ import {
14
+ ArrowLeftFill24Icon,
15
+ ArrowLeftFill30Icon,
16
+ CloseFill24Icon,
17
+ CloseFill30Icon,
18
+ } from "@vygruppen/spor-icon-react";
14
19
  import React, { useEffect, useState } from "react";
15
20
  import { Button, IconButton } from "../button";
16
21
  import { createTexts, useTranslation } from "../i18n";
@@ -42,7 +47,7 @@ export const FullScreenDrawer = ({
42
47
  children,
43
48
  title,
44
49
  placement = "bottom",
45
- leftButton = null,
50
+ leftButton = <DrawerBackButton />,
46
51
  rightButton = <DrawerCloseButton />,
47
52
  isOpen,
48
53
  onClose,
@@ -119,13 +124,15 @@ const DrawerTopMenu = ({
119
124
  transition="box-shadow 0.2s"
120
125
  boxShadow={isScrolled ? "md" : undefined}
121
126
  >
122
- <Box flex="1">{leftButton}</Box>
127
+ <Box flex="1">
128
+ <Box width="fit-content">{leftButton}</Box>
129
+ </Box>
123
130
  <DrawerHeader
124
131
  as="h2"
125
132
  fontSize="md"
126
133
  fontWeight="bold"
127
134
  textAlign="center"
128
- flex="1"
135
+ flex="2"
129
136
  margin={0}
130
137
  padding={0}
131
138
  >
@@ -173,6 +180,39 @@ const DrawerCloseButton = () => {
173
180
  );
174
181
  };
175
182
 
183
+ const DrawerBackButton = () => {
184
+ const { onClose } = useModalContext();
185
+ const { t } = useTranslation();
186
+
187
+ const [isScreenSizeMinSm] = useMediaQuery(
188
+ `(min-width: ${tokens.size.breakpoint.sm})`,
189
+ );
190
+
191
+ if (isScreenSizeMinSm) {
192
+ return (
193
+ <Button
194
+ variant="ghost"
195
+ leftIcon={<ArrowLeftFill24Icon />}
196
+ onClick={onClose}
197
+ aria-label={t(texts.backAriaLabel)}
198
+ width="fit-content"
199
+ marginLeft="auto"
200
+ >
201
+ {t(texts.back)}
202
+ </Button>
203
+ );
204
+ }
205
+
206
+ return (
207
+ <IconButton
208
+ variant="ghost"
209
+ icon={<ArrowLeftFill30Icon />}
210
+ onClick={onClose}
211
+ aria-label={t(texts.close)}
212
+ />
213
+ );
214
+ };
215
+
176
216
  const texts = createTexts({
177
217
  close: {
178
218
  nb: "Lukk",
@@ -180,4 +220,22 @@ const texts = createTexts({
180
220
  en: "Close",
181
221
  sv: "Stäng",
182
222
  },
223
+ closeAriaLabel: {
224
+ nb: "Lukk vindu",
225
+ nn: "Lukk vindauge",
226
+ en: "Close window",
227
+ sv: "Stäng fönster",
228
+ },
229
+ back: {
230
+ nb: "Tilbake",
231
+ nn: "Tilbake",
232
+ en: "Back",
233
+ sv: "Tillbaka",
234
+ },
235
+ backAriaLabel: {
236
+ nb: "Gå tilbake",
237
+ nn: "Gå tilbake",
238
+ en: "Go back",
239
+ sv: "Gå tillbaka",
240
+ },
183
241
  });
@@ -40,7 +40,6 @@ const config = helpers.defineMultiStyleConfig({
40
40
  justifyContent: "space-between",
41
41
  alignItems: "center",
42
42
  fontSize: "mobile.md",
43
- h: 8,
44
43
  ...baseBorder("default", props),
45
44
  _hover: {
46
45
  ...baseBorder("hover", props),