@7shifts/sous-chef 3.10.3 → 3.11.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,10 +1,11 @@
1
1
  import React from 'react';
2
2
  declare type Props = {
3
3
  isPaywall: Boolean;
4
+ isInsideModal?: Boolean;
4
5
  actions: {
5
6
  primary?: React.ReactElement;
6
7
  secondary?: React.ReactElement;
7
8
  };
8
9
  };
9
- declare const EmptyStateContainerCTA: ({ isPaywall, actions }: Props) => JSX.Element;
10
+ declare const EmptyStateContainerCTA: ({ isPaywall, isInsideModal, actions }: Props) => JSX.Element;
10
11
  export default EmptyStateContainerCTA;
@@ -5,5 +5,11 @@ import type { Props as TextFieldProps } from '../TextField/TextField';
5
5
  *
6
6
  * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
7
7
  */
8
- declare const TimeField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "onBlur" | "onFocus" | "onKeyDown" | "id" | "testId" | "caption" | "label" | "name" | "onChange" | "error" | "placeholder" | "value" | "defaultValue" | "autoComplete" | "autoFocus" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
8
+ declare const TimeField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "onBlur" | "onFocus" | "onKeyDown" | "id" | "testId" | "caption" | "label" | "name" | "onChange" | "error" | "placeholder" | "value" | "defaultValue" | "autoComplete" | "autoFocus" | "maxLength"> & {
9
+ onClick?: (() => void) | undefined;
10
+ onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
11
+ onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
12
+ interval?: 15 | 30 | undefined;
13
+ startTime?: string | undefined;
14
+ } & React.RefAttributes<HTMLInputElement>>;
9
15
  export default TimeField;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { TimeInterval } from '../../../utils/date';
3
+ declare type TimeFieldDropdownProps = {
4
+ trigger: React.ReactElement;
5
+ interval: TimeInterval;
6
+ startTime?: 'now' | string;
7
+ onOptionClick: (option: any) => void;
8
+ inputValue?: string;
9
+ width?: number;
10
+ };
11
+ declare const TimeFieldDropdown: ({ trigger, interval, startTime, onOptionClick, inputValue, width }: TimeFieldDropdownProps) => JSX.Element;
12
+ export default TimeFieldDropdown;
@@ -0,0 +1 @@
1
+ export { default } from './TimeFieldDropdown';
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { Props as TextFieldProps } from '../../TextField/TextField';
3
+ declare const TimeFieldDropdownTrigger: React.ForwardRefExoticComponent<Pick<TextFieldProps, "disabled" | "onBlur" | "onFocus" | "onKeyDown" | "id" | "testId" | "caption" | "label" | "name" | "onChange" | "error" | "placeholder" | "value" | "defaultValue" | "autoComplete" | "autoFocus" | "maxLength"> & {
4
+ onClick?: (() => void) | undefined;
5
+ onMouseEnter?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
6
+ onMouseLeave?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
7
+ onInputChange?: ((e: string) => void) | undefined;
8
+ } & React.RefAttributes<HTMLInputElement>>;
9
+ export default TimeFieldDropdownTrigger;
@@ -0,0 +1 @@
1
+ export { default } from './TimeFieldDropdownTrigger';
@@ -0,0 +1,7 @@
1
+ declare type Props = {
2
+ inputProps: any;
3
+ allOtherProps: any;
4
+ onInputChange?: (e: string) => void;
5
+ };
6
+ declare const TimeFieldInput: ({ inputProps, allOtherProps }: Props) => JSX.Element;
7
+ export default TimeFieldInput;
@@ -0,0 +1 @@
1
+ export { default } from './TimeFieldInput';
@@ -0,0 +1 @@
1
+ export declare const getTimeOptions: (interval: number, startTime?: Date) => string[];
@@ -1,19 +1,18 @@
1
1
  /// <reference types="react" />
2
- import { DateRange } from '../../utils/date';
3
- declare type FieldControls = {
2
+ declare type FieldControls<T> = {
4
3
  id: string;
5
4
  error?: React.ReactNode;
6
- value: DateRange;
7
- onChange: (e: DateRange) => void;
5
+ value: any;
6
+ onChange: (e: T) => void;
8
7
  onBlur: () => void;
9
8
  };
10
- declare type Props = {
9
+ declare type Props<T> = {
11
10
  name: string;
12
11
  id?: string;
13
- value?: DateRange;
14
- onChange?: (e: DateRange) => void;
12
+ value?: T;
13
+ onChange?: (e: T) => void;
15
14
  onBlur?: () => void;
16
15
  error?: React.ReactNode;
17
16
  };
18
- export declare const useRangeFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error }: Props) => FieldControls;
17
+ export declare const useRangeFieldControllers: <T extends unknown>({ name, id: inputId, value, onChange, onBlur, error }: Props<T>) => FieldControls<T>;
19
18
  export {};
package/dist/index.css CHANGED
@@ -817,10 +817,10 @@ Just for future references:
817
817
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
818
818
  background: var(--color-white);
819
819
  margin-top: 8px;
820
- z-index: 10;
821
820
  transform-origin: top right;
822
821
  min-width: 120px;
823
822
  padding: 20px;
823
+ box-sizing: border-box;
824
824
  }
825
825
  ._2rs8m {
826
826
  all: unset;
@@ -836,170 +836,6 @@ Just for future references:
836
836
  ._2rs8m:focus > * {
837
837
  box-shadow: 0 0 8px var(--color-eggplant-300);
838
838
  }
839
- ._1v1df {
840
- font-family: "Proxima Nova", sans-serif;
841
- list-style: none;
842
- margin: -20px;
843
- padding: 0;
844
- }
845
- ._eAjpa {
846
- background-color: var(--color-grey-100);
847
- }
848
- ._3x1F6 {
849
- width: 100%;
850
- height: 1px;
851
- background-color: var(--color-grey-200);
852
- margin: 4px 0;
853
- }
854
- ._B3_I5 {
855
- padding: 12px;
856
- font-size: 14px;
857
- line-height: 20px;
858
- display: flex;
859
- cursor: pointer;
860
- white-space: nowrap;
861
- color: var(--color-grey-400);
862
- gap: 8px;
863
- align-items: center;
864
- }
865
- ._1mr1h {
866
- background-color: var(--color-eggplant-100);
867
- }
868
- ._1mr1h > ._2b7Fg {
869
- color: var(--color-eggplant-500);
870
- }
871
- ._2l0Cb {
872
- cursor: auto;
873
- color: var(--color-grey-500);
874
- }
875
- ._2l0Cb > ._2b7Fg {
876
- color: var(--color-grey-400);
877
- }
878
- ._2b7Fg {
879
- flex: 1;
880
- color: var(--color-grey-500);
881
- }
882
- h1._3CIA3 {
883
- font-size: 1.75rem;
884
- line-height: 2rem;
885
- font-weight: 600;
886
- }
887
-
888
- h2._3CIA3 {
889
- font-size: 1.5rem;
890
- line-height: 1.75rem;
891
- font-weight: 600;
892
- }
893
-
894
- h3._3CIA3 {
895
- font-size: 1.25rem;
896
- line-height: 1.5rem;
897
- font-weight: 600;
898
- }
899
-
900
- h4._3CIA3 {
901
- font-size: 1.25rem;
902
- line-height: 1.5rem;
903
- font-weight: 400;
904
- color: var(--color-grey-400);
905
- }
906
-
907
- h5._3CIA3 {
908
- font-size: 1rem;
909
- line-height: 1.25rem;
910
- font-weight: 400;
911
- color: var(--color-grey-400);
912
- }
913
-
914
- ._3CIA3 {
915
- font-family: "Proxima Nova", sans-serif;
916
- color: var(--color-grey-500);
917
- margin: 0;
918
- }
919
- ._1nnj8 {
920
- font-size: 0.875rem;
921
- line-height: 1.125rem;
922
- font-weight: 400;
923
- }
924
- ._37K6o {
925
- font-size: 0.75rem;
926
- line-height: 1rem;
927
- font-weight: 400;
928
- }
929
- ._avqxy {
930
- font-size: 2.5rem;
931
- line-height: 2.75rem;
932
- font-weight: 600;
933
- }
934
- ._2TG6E {
935
- font-weight: 600;
936
- }
937
- ._2hlsn {
938
- font-style: italic;
939
- }
940
- ._1Pjo6 {
941
- text-decoration: underline;
942
- }
943
- ._eDdDI {
944
- font-variant-numeric: tabular-nums;
945
- }
946
- ._2gNwS {
947
- text-align: left;
948
- }
949
- ._ufv1W {
950
- text-align: right;
951
- }
952
- ._2WMN6 {
953
- text-align: center;
954
- }
955
- ._2iH-J {
956
- text-align: justify;
957
- }
958
- ._2Ybjx {
959
- position: relative;
960
- border-bottom: 1px solid var(--color-grey-200);
961
- padding: 16px;
962
- word-break: break-word;
963
- -webkit-hyphens: auto;
964
- -ms-hyphens: auto;
965
- hyphens: auto;
966
- }
967
- ._2Ybjx:first-of-type {
968
- border-left: 1px solid var(--color-grey-200);
969
- }
970
- ._2Ybjx:last-of-type {
971
- border-right: 1px solid var(--color-grey-200);
972
- }
973
- ._5KXHH {
974
- padding: 0;
975
- }
976
- ._2-I0j:not(:last-child) {
977
- border-right: 1px solid var(--color-grey-200);
978
- }
979
- ._D73Vx {
980
- background: var(--color-radish-100);
981
- color: var(--color-radish-400);
982
- }
983
- ._3A9-M {
984
- height: 100%;
985
- display: flex;
986
- align-items: center;
987
- }
988
- ._17Km7 {
989
- justify-content: flex-end;
990
- }
991
- ._2c6KQ {
992
- justify-content: space-between;
993
- }
994
- ._2hIl3 {
995
- width: 16px;
996
- }
997
- ._8Uhyd {
998
- margin-left: 4px;
999
- }
1000
- ._3X51R {
1001
- margin-right: 4px;
1002
- }
1003
839
  ._2puqJ {
1004
840
  position: fixed;
1005
841
  top: 0px;
@@ -1035,7 +871,7 @@ h5._3CIA3 {
1035
871
  }
1036
872
 
1037
873
  ._wQQ_2 {
1038
- position: initial;
874
+ position: relative;
1039
875
  border: 1px solid var(--color-grey-200);
1040
876
  background: var(--color-white);
1041
877
  overflow: auto;
@@ -1064,6 +900,12 @@ h5._3CIA3 {
1064
900
  font-weight: 600;
1065
901
  font-family: "Proxima Nova", sans-serif;
1066
902
  }
903
+ ._2zYre {
904
+ display: flex;
905
+ justify-content: end;
906
+ margin-bottom: -20px;
907
+ z-index: 2;
908
+ }
1067
909
 
1068
910
  ._2XwRD {
1069
911
  font-size: 20px;
@@ -1078,7 +920,6 @@ h5._3CIA3 {
1078
920
  */
1079
921
  ._2J-ku {
1080
922
  overflow: auto;
1081
- margin-top: 24px;
1082
923
  font-family: "Proxima Nova", sans-serif;
1083
924
  font-size: 14px;
1084
925
  line-height: 16px;
@@ -1573,6 +1414,125 @@ h5._3CIA3 {
1573
1414
  border-top-right-radius: 50%;
1574
1415
  border-bottom-right-radius: 50%;
1575
1416
  }
1417
+ ._1v1df {
1418
+ font-family: "Proxima Nova", sans-serif;
1419
+ list-style: none;
1420
+ margin: -20px;
1421
+ padding: 0;
1422
+ }
1423
+ ._eAjpa {
1424
+ background-color: var(--color-grey-100);
1425
+ }
1426
+ ._3x1F6 {
1427
+ width: 100%;
1428
+ height: 1px;
1429
+ background-color: var(--color-grey-200);
1430
+ margin: 4px 0;
1431
+ }
1432
+ ._B3_I5 {
1433
+ padding: 12px;
1434
+ font-size: 14px;
1435
+ line-height: 20px;
1436
+ display: flex;
1437
+ cursor: pointer;
1438
+ white-space: nowrap;
1439
+ color: var(--color-grey-400);
1440
+ gap: 8px;
1441
+ align-items: center;
1442
+ }
1443
+ ._1mr1h {
1444
+ background-color: var(--color-eggplant-100);
1445
+ }
1446
+ ._1mr1h > ._2b7Fg {
1447
+ color: var(--color-eggplant-500);
1448
+ }
1449
+ ._2l0Cb {
1450
+ cursor: auto;
1451
+ color: var(--color-grey-500);
1452
+ }
1453
+ ._2l0Cb > ._2b7Fg {
1454
+ color: var(--color-grey-400);
1455
+ }
1456
+ ._2b7Fg {
1457
+ flex: 1;
1458
+ color: var(--color-grey-500);
1459
+ }
1460
+ h1._3CIA3 {
1461
+ font-size: 1.75rem;
1462
+ line-height: 2rem;
1463
+ font-weight: 600;
1464
+ }
1465
+
1466
+ h2._3CIA3 {
1467
+ font-size: 1.5rem;
1468
+ line-height: 1.75rem;
1469
+ font-weight: 600;
1470
+ }
1471
+
1472
+ h3._3CIA3 {
1473
+ font-size: 1.25rem;
1474
+ line-height: 1.5rem;
1475
+ font-weight: 600;
1476
+ }
1477
+
1478
+ h4._3CIA3 {
1479
+ font-size: 1.25rem;
1480
+ line-height: 1.5rem;
1481
+ font-weight: 400;
1482
+ color: var(--color-grey-400);
1483
+ }
1484
+
1485
+ h5._3CIA3 {
1486
+ font-size: 1rem;
1487
+ line-height: 1.25rem;
1488
+ font-weight: 400;
1489
+ color: var(--color-grey-400);
1490
+ }
1491
+
1492
+ ._3CIA3 {
1493
+ font-family: "Proxima Nova", sans-serif;
1494
+ color: var(--color-grey-500);
1495
+ margin: 0;
1496
+ }
1497
+ ._1nnj8 {
1498
+ font-size: 0.875rem;
1499
+ line-height: 1.125rem;
1500
+ font-weight: 400;
1501
+ }
1502
+ ._37K6o {
1503
+ font-size: 0.75rem;
1504
+ line-height: 1rem;
1505
+ font-weight: 400;
1506
+ }
1507
+ ._avqxy {
1508
+ font-size: 2.5rem;
1509
+ line-height: 2.75rem;
1510
+ font-weight: 600;
1511
+ }
1512
+ ._2TG6E {
1513
+ font-weight: 600;
1514
+ }
1515
+ ._2hlsn {
1516
+ font-style: italic;
1517
+ }
1518
+ ._1Pjo6 {
1519
+ text-decoration: underline;
1520
+ }
1521
+ ._eDdDI {
1522
+ font-variant-numeric: tabular-nums;
1523
+ }
1524
+ ._2gNwS {
1525
+ text-align: left;
1526
+ }
1527
+ ._ufv1W {
1528
+ text-align: right;
1529
+ }
1530
+ ._2WMN6 {
1531
+ text-align: center;
1532
+ }
1533
+ ._2iH-J {
1534
+ text-align: justify;
1535
+ }
1576
1536
  ._h724f {
1577
1537
  line-height: normal;
1578
1538
  padding: 0;
@@ -1603,6 +1563,90 @@ h5._3CIA3 {
1603
1563
  font-weight: 400;
1604
1564
  font-size: 12px;
1605
1565
  }
1566
+ ._20YOA {
1567
+ padding: 7px;
1568
+ line-height: 22px;
1569
+ border-radius: 4px;
1570
+ font-size: 14px;
1571
+ font-family: "Proxima Nova", sans-serif;
1572
+ color: var(--color-grey-500);
1573
+ box-shadow: none;
1574
+ border: 1px solid var(--color-grey-200);
1575
+ margin: 0;
1576
+ flex: 1;
1577
+ min-width: 90px;
1578
+ }
1579
+ ._20YOA:focus {
1580
+ border: 1px solid var(--color-eggplant-400);
1581
+ box-shadow: 0 0 8px var(--color-eggplant-300);
1582
+ outline: none;
1583
+ }
1584
+ ._20YOA:disabled {
1585
+ background-color: var(--color-grey-100);
1586
+ color: var(--color-grey-400);
1587
+ }
1588
+
1589
+ ._3kUSh {
1590
+ border-color: var(--color-radish-400) !important;
1591
+ }
1592
+
1593
+ ._3IU3Q {
1594
+ border-left: 0 !important;
1595
+ border-top-left-radius: 0 !important;
1596
+ border-bottom-left-radius: 0 !important;
1597
+ color: var(--color-grey-400);
1598
+ }
1599
+
1600
+ ._QXJOD {
1601
+ border-right: 0 !important;
1602
+ border-top-right-radius: 0 !important;
1603
+ border-bottom-right-radius: 0 !important;
1604
+ }
1605
+ ._2Ybjx {
1606
+ position: relative;
1607
+ border-bottom: 1px solid var(--color-grey-200);
1608
+ padding: 16px;
1609
+ word-break: break-word;
1610
+ -webkit-hyphens: auto;
1611
+ -ms-hyphens: auto;
1612
+ hyphens: auto;
1613
+ }
1614
+ ._2Ybjx:first-of-type {
1615
+ border-left: 1px solid var(--color-grey-200);
1616
+ }
1617
+ ._2Ybjx:last-of-type {
1618
+ border-right: 1px solid var(--color-grey-200);
1619
+ }
1620
+ ._5KXHH {
1621
+ padding: 0;
1622
+ }
1623
+ ._2-I0j:not(:last-child) {
1624
+ border-right: 1px solid var(--color-grey-200);
1625
+ }
1626
+ ._D73Vx {
1627
+ background: var(--color-radish-100);
1628
+ color: var(--color-radish-400);
1629
+ }
1630
+ ._3A9-M {
1631
+ height: 100%;
1632
+ display: flex;
1633
+ align-items: center;
1634
+ }
1635
+ ._17Km7 {
1636
+ justify-content: flex-end;
1637
+ }
1638
+ ._2c6KQ {
1639
+ justify-content: space-between;
1640
+ }
1641
+ ._2hIl3 {
1642
+ width: 16px;
1643
+ }
1644
+ ._8Uhyd {
1645
+ margin-left: 4px;
1646
+ }
1647
+ ._3X51R {
1648
+ margin-right: 4px;
1649
+ }
1606
1650
  ._ybKOk {
1607
1651
  position: relative;
1608
1652
  display: flex;
@@ -1953,45 +1997,6 @@ h5._3CIA3 {
1953
1997
  ._2F1jP {
1954
1998
  padding: 8px 4px 8px 4px;
1955
1999
  }
1956
- ._20YOA {
1957
- padding: 7px;
1958
- line-height: 22px;
1959
- border-radius: 4px;
1960
- font-size: 14px;
1961
- font-family: "Proxima Nova", sans-serif;
1962
- color: var(--color-grey-500);
1963
- box-shadow: none;
1964
- border: 1px solid var(--color-grey-200);
1965
- margin: 0;
1966
- flex: 1;
1967
- min-width: 90px;
1968
- }
1969
- ._20YOA:focus {
1970
- border: 1px solid var(--color-eggplant-400);
1971
- box-shadow: 0 0 8px var(--color-eggplant-300);
1972
- outline: none;
1973
- }
1974
- ._20YOA:disabled {
1975
- background-color: var(--color-grey-100);
1976
- color: var(--color-grey-400);
1977
- }
1978
-
1979
- ._3kUSh {
1980
- border-color: var(--color-radish-400) !important;
1981
- }
1982
-
1983
- ._3IU3Q {
1984
- border-left: 0 !important;
1985
- border-top-left-radius: 0 !important;
1986
- border-bottom-left-radius: 0 !important;
1987
- color: var(--color-grey-400);
1988
- }
1989
-
1990
- ._QXJOD {
1991
- border-right: 0 !important;
1992
- border-top-right-radius: 0 !important;
1993
- border-bottom-right-radius: 0 !important;
1994
- }
1995
2000
  ._2X-yg {
1996
2001
  width: 272px;
1997
2002
  }
@@ -3440,7 +3445,7 @@ input:disabled + ._1tMq-::after {
3440
3445
  }
3441
3446
 
3442
3447
  @media screen and (max-width: 900px) {
3443
- ._1Cx9N {
3448
+ ._1Cx9N:not(._WbcaM) {
3444
3449
  justify-content: center;
3445
3450
  }
3446
3451
  }
@@ -3450,6 +3455,11 @@ input:disabled + ._1tMq-::after {
3450
3455
  flex-direction: row;
3451
3456
  justify-content: space-between;
3452
3457
  }
3458
+ ._2sweG {
3459
+ flex-direction: row-reverse;
3460
+ padding-top: 20px;
3461
+ padding-bottom: 20px;
3462
+ }
3453
3463
  ._2jreb {
3454
3464
  display: flex;
3455
3465
  flex-direction: column;
@@ -3466,9 +3476,14 @@ input:disabled + ._1tMq-::after {
3466
3476
  color: var(--color-grey-500);
3467
3477
  font-size: 14px;
3468
3478
  }
3479
+ ._G2VtA {
3480
+ display: flex;
3481
+ flex-direction: column;
3482
+ justify-content: center;
3483
+ }
3469
3484
 
3470
3485
  @media screen and (max-width: 900px) {
3471
- ._eMr1V {
3486
+ ._eMr1V:not(._2sweG) {
3472
3487
  align-items: center;
3473
3488
  text-align: center;
3474
3489
  flex-direction: column-reverse;