@hyphen/hyphen-components 4.0.1 → 4.1.0

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.
Files changed (5) hide show
  1. package/dist/css/utilities.css +697 -45
  2. package/dist/css/variables.css +8 -2
  3. package/dist/lib/tokens.d.ts +3 -3
  4. package/package.json +21 -21
  5. package/src/components/Box/Box.stories.tsx +12 -0
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Wed, 13 Nov 2024 18:41:41 GMT
6
+ * Generated on Wed, 04 Dec 2024 00:29:13 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -1300,6 +1300,10 @@
1300
1300
 
1301
1301
  .h-60 { height: var(--size-percentage-60); }
1302
1302
 
1303
+ .w-66 { width: var(--size-percentage-66); }
1304
+
1305
+ .h-66 { height: var(--size-percentage-66); }
1306
+
1303
1307
  .w-70 { width: var(--size-percentage-70); }
1304
1308
 
1305
1309
  .h-70 { height: var(--size-percentage-70); }
@@ -1334,134 +1338,90 @@
1334
1338
 
1335
1339
  .hover\:font-size-2xs:hover { font-size: var(--size-font-size-2xs); }
1336
1340
 
1337
- .focus\:font-size-2xs:focus { font-size: var(--size-font-size-2xs); }
1338
-
1339
1341
  .font-size-xs { font-size: var(--size-font-size-xs); }
1340
1342
 
1341
1343
  .hover\:font-size-xs:hover { font-size: var(--size-font-size-xs); }
1342
1344
 
1343
- .focus\:font-size-xs:focus { font-size: var(--size-font-size-xs); }
1344
-
1345
1345
  .font-size-sm { font-size: var(--size-font-size-sm); }
1346
1346
 
1347
1347
  .hover\:font-size-sm:hover { font-size: var(--size-font-size-sm); }
1348
1348
 
1349
- .focus\:font-size-sm:focus { font-size: var(--size-font-size-sm); }
1350
-
1351
1349
  .font-size-md { font-size: var(--size-font-size-md); }
1352
1350
 
1353
1351
  .hover\:font-size-md:hover { font-size: var(--size-font-size-md); }
1354
1352
 
1355
- .focus\:font-size-md:focus { font-size: var(--size-font-size-md); }
1356
-
1357
1353
  .font-size-lg { font-size: var(--size-font-size-lg); }
1358
1354
 
1359
1355
  .hover\:font-size-lg:hover { font-size: var(--size-font-size-lg); }
1360
1356
 
1361
- .focus\:font-size-lg:focus { font-size: var(--size-font-size-lg); }
1362
-
1363
1357
  .font-size-xl { font-size: var(--size-font-size-xl); }
1364
1358
 
1365
1359
  .hover\:font-size-xl:hover { font-size: var(--size-font-size-xl); }
1366
1360
 
1367
- .focus\:font-size-xl:focus { font-size: var(--size-font-size-xl); }
1368
-
1369
1361
  .font-size-2xl { font-size: var(--size-font-size-2xl); }
1370
1362
 
1371
1363
  .hover\:font-size-2xl:hover { font-size: var(--size-font-size-2xl); }
1372
1364
 
1373
- .focus\:font-size-2xl:focus { font-size: var(--size-font-size-2xl); }
1374
-
1375
1365
  .font-size-3xl { font-size: var(--size-font-size-3xl); }
1376
1366
 
1377
1367
  .hover\:font-size-3xl:hover { font-size: var(--size-font-size-3xl); }
1378
1368
 
1379
- .focus\:font-size-3xl:focus { font-size: var(--size-font-size-3xl); }
1380
-
1381
1369
  .font-size-4xl { font-size: var(--size-font-size-4xl); }
1382
1370
 
1383
1371
  .hover\:font-size-4xl:hover { font-size: var(--size-font-size-4xl); }
1384
1372
 
1385
- .focus\:font-size-4xl:focus { font-size: var(--size-font-size-4xl); }
1386
-
1387
1373
  .font-size-5xl { font-size: var(--size-font-size-5xl); }
1388
1374
 
1389
1375
  .hover\:font-size-5xl:hover { font-size: var(--size-font-size-5xl); }
1390
1376
 
1391
- .focus\:font-size-5xl:focus { font-size: var(--size-font-size-5xl); }
1392
-
1393
1377
  .font-size-6xl { font-size: var(--size-font-size-6xl); }
1394
1378
 
1395
1379
  .hover\:font-size-6xl:hover { font-size: var(--size-font-size-6xl); }
1396
1380
 
1397
- .focus\:font-size-6xl:focus { font-size: var(--size-font-size-6xl); }
1398
-
1399
1381
  .font-size-7xl { font-size: var(--size-font-size-7xl); }
1400
1382
 
1401
1383
  .hover\:font-size-7xl:hover { font-size: var(--size-font-size-7xl); }
1402
1384
 
1403
- .focus\:font-size-7xl:focus { font-size: var(--size-font-size-7xl); }
1404
-
1405
1385
  .font-size-base { font-size: var(--size-font-size-base); }
1406
1386
 
1407
1387
  .hover\:font-size-base:hover { font-size: var(--size-font-size-base); }
1408
1388
 
1409
- .focus\:font-size-base:focus { font-size: var(--size-font-size-base); }
1410
-
1411
1389
  .heading-sm { font-size: var(--size-heading-sm); }
1412
1390
 
1413
1391
  .hover\:heading-sm:hover { font-size: var(--size-heading-sm); }
1414
1392
 
1415
- .focus\:heading-sm:focus { font-size: var(--size-heading-sm); }
1416
-
1417
1393
  .heading-md { font-size: var(--size-heading-md); }
1418
1394
 
1419
1395
  .hover\:heading-md:hover { font-size: var(--size-heading-md); }
1420
1396
 
1421
- .focus\:heading-md:focus { font-size: var(--size-heading-md); }
1422
-
1423
1397
  .heading-lg { font-size: var(--size-heading-lg); }
1424
1398
 
1425
1399
  .hover\:heading-lg:hover { font-size: var(--size-heading-lg); }
1426
1400
 
1427
- .focus\:heading-lg:focus { font-size: var(--size-heading-lg); }
1428
-
1429
1401
  .heading-xl { font-size: var(--size-heading-xl); }
1430
1402
 
1431
1403
  .hover\:heading-xl:hover { font-size: var(--size-heading-xl); }
1432
1404
 
1433
- .focus\:heading-xl:focus { font-size: var(--size-heading-xl); }
1434
-
1435
1405
  .heading-2xl { font-size: var(--size-heading-2xl); }
1436
1406
 
1437
1407
  .hover\:heading-2xl:hover { font-size: var(--size-heading-2xl); }
1438
1408
 
1439
- .focus\:heading-2xl:focus { font-size: var(--size-heading-2xl); }
1440
-
1441
1409
  .heading-3xl { font-size: var(--size-heading-3xl); }
1442
1410
 
1443
1411
  .hover\:heading-3xl:hover { font-size: var(--size-heading-3xl); }
1444
1412
 
1445
- .focus\:heading-3xl:focus { font-size: var(--size-heading-3xl); }
1446
-
1447
1413
  .heading-4xl { font-size: var(--size-heading-4xl); }
1448
1414
 
1449
1415
  .hover\:heading-4xl:hover { font-size: var(--size-heading-4xl); }
1450
1416
 
1451
- .focus\:heading-4xl:focus { font-size: var(--size-heading-4xl); }
1452
-
1453
1417
  .heading-5xl { font-size: var(--size-heading-5xl); }
1454
1418
 
1455
1419
  .hover\:heading-5xl:hover { font-size: var(--size-heading-5xl); }
1456
1420
 
1457
- .focus\:heading-5xl:focus { font-size: var(--size-heading-5xl); }
1458
-
1459
1421
  .heading-6xl { font-size: var(--size-heading-6xl); }
1460
1422
 
1461
1423
  .hover\:heading-6xl:hover { font-size: var(--size-heading-6xl); }
1462
1424
 
1463
- .focus\:heading-6xl:focus { font-size: var(--size-heading-6xl); }
1464
-
1465
1425
  .lh-none { line-height: var(--size-line-height-none); }
1466
1426
 
1467
1427
  .lh-base { line-height: var(--size-line-height-base); }
@@ -1846,6 +1806,176 @@
1846
1806
 
1847
1807
  .cg-5xl { column-gap: var(--size-spacing-5xl); }
1848
1808
 
1809
+ .m-6xl { margin: var(--size-spacing-6xl); }
1810
+
1811
+ .m-top-6xl { margin-top: var(--size-spacing-6xl); }
1812
+
1813
+ .m-right-6xl { margin-right: var(--size-spacing-6xl); }
1814
+
1815
+ .m-bottom-6xl { margin-bottom: var(--size-spacing-6xl); }
1816
+
1817
+ .m-left-6xl { margin-left: var(--size-spacing-6xl); }
1818
+
1819
+ .m-h-6xl { margin-left: var(--size-spacing-6xl); margin-right: var(--size-spacing-6xl); }
1820
+
1821
+ .m-v-6xl { margin-top: var(--size-spacing-6xl); margin-bottom: var(--size-spacing-6xl); }
1822
+
1823
+ .p-6xl { padding: var(--size-spacing-6xl); }
1824
+
1825
+ .p-top-6xl { padding-top: var(--size-spacing-6xl); }
1826
+
1827
+ .p-right-6xl { padding-right: var(--size-spacing-6xl); }
1828
+
1829
+ .p-bottom-6xl { padding-bottom: var(--size-spacing-6xl); }
1830
+
1831
+ .p-left-6xl { padding-left: var(--size-spacing-6xl); }
1832
+
1833
+ .p-h-6xl { padding-left: var(--size-spacing-6xl); padding-right: var(--size-spacing-6xl); }
1834
+
1835
+ .p-v-6xl { padding-top: var(--size-spacing-6xl); padding-bottom: var(--size-spacing-6xl); }
1836
+
1837
+ .g-6xl { gap: var(--size-spacing-6xl); }
1838
+
1839
+ .rg-6xl { row-gap: var(--size-spacing-6xl); }
1840
+
1841
+ .cg-6xl { column-gap: var(--size-spacing-6xl); }
1842
+
1843
+ .m-7xl { margin: var(--size-spacing-7xl); }
1844
+
1845
+ .m-top-7xl { margin-top: var(--size-spacing-7xl); }
1846
+
1847
+ .m-right-7xl { margin-right: var(--size-spacing-7xl); }
1848
+
1849
+ .m-bottom-7xl { margin-bottom: var(--size-spacing-7xl); }
1850
+
1851
+ .m-left-7xl { margin-left: var(--size-spacing-7xl); }
1852
+
1853
+ .m-h-7xl { margin-left: var(--size-spacing-7xl); margin-right: var(--size-spacing-7xl); }
1854
+
1855
+ .m-v-7xl { margin-top: var(--size-spacing-7xl); margin-bottom: var(--size-spacing-7xl); }
1856
+
1857
+ .p-7xl { padding: var(--size-spacing-7xl); }
1858
+
1859
+ .p-top-7xl { padding-top: var(--size-spacing-7xl); }
1860
+
1861
+ .p-right-7xl { padding-right: var(--size-spacing-7xl); }
1862
+
1863
+ .p-bottom-7xl { padding-bottom: var(--size-spacing-7xl); }
1864
+
1865
+ .p-left-7xl { padding-left: var(--size-spacing-7xl); }
1866
+
1867
+ .p-h-7xl { padding-left: var(--size-spacing-7xl); padding-right: var(--size-spacing-7xl); }
1868
+
1869
+ .p-v-7xl { padding-top: var(--size-spacing-7xl); padding-bottom: var(--size-spacing-7xl); }
1870
+
1871
+ .g-7xl { gap: var(--size-spacing-7xl); }
1872
+
1873
+ .rg-7xl { row-gap: var(--size-spacing-7xl); }
1874
+
1875
+ .cg-7xl { column-gap: var(--size-spacing-7xl); }
1876
+
1877
+ .m-8xl { margin: var(--size-spacing-8xl); }
1878
+
1879
+ .m-top-8xl { margin-top: var(--size-spacing-8xl); }
1880
+
1881
+ .m-right-8xl { margin-right: var(--size-spacing-8xl); }
1882
+
1883
+ .m-bottom-8xl { margin-bottom: var(--size-spacing-8xl); }
1884
+
1885
+ .m-left-8xl { margin-left: var(--size-spacing-8xl); }
1886
+
1887
+ .m-h-8xl { margin-left: var(--size-spacing-8xl); margin-right: var(--size-spacing-8xl); }
1888
+
1889
+ .m-v-8xl { margin-top: var(--size-spacing-8xl); margin-bottom: var(--size-spacing-8xl); }
1890
+
1891
+ .p-8xl { padding: var(--size-spacing-8xl); }
1892
+
1893
+ .p-top-8xl { padding-top: var(--size-spacing-8xl); }
1894
+
1895
+ .p-right-8xl { padding-right: var(--size-spacing-8xl); }
1896
+
1897
+ .p-bottom-8xl { padding-bottom: var(--size-spacing-8xl); }
1898
+
1899
+ .p-left-8xl { padding-left: var(--size-spacing-8xl); }
1900
+
1901
+ .p-h-8xl { padding-left: var(--size-spacing-8xl); padding-right: var(--size-spacing-8xl); }
1902
+
1903
+ .p-v-8xl { padding-top: var(--size-spacing-8xl); padding-bottom: var(--size-spacing-8xl); }
1904
+
1905
+ .g-8xl { gap: var(--size-spacing-8xl); }
1906
+
1907
+ .rg-8xl { row-gap: var(--size-spacing-8xl); }
1908
+
1909
+ .cg-8xl { column-gap: var(--size-spacing-8xl); }
1910
+
1911
+ .m-9xl { margin: var(--size-spacing-9xl); }
1912
+
1913
+ .m-top-9xl { margin-top: var(--size-spacing-9xl); }
1914
+
1915
+ .m-right-9xl { margin-right: var(--size-spacing-9xl); }
1916
+
1917
+ .m-bottom-9xl { margin-bottom: var(--size-spacing-9xl); }
1918
+
1919
+ .m-left-9xl { margin-left: var(--size-spacing-9xl); }
1920
+
1921
+ .m-h-9xl { margin-left: var(--size-spacing-9xl); margin-right: var(--size-spacing-9xl); }
1922
+
1923
+ .m-v-9xl { margin-top: var(--size-spacing-9xl); margin-bottom: var(--size-spacing-9xl); }
1924
+
1925
+ .p-9xl { padding: var(--size-spacing-9xl); }
1926
+
1927
+ .p-top-9xl { padding-top: var(--size-spacing-9xl); }
1928
+
1929
+ .p-right-9xl { padding-right: var(--size-spacing-9xl); }
1930
+
1931
+ .p-bottom-9xl { padding-bottom: var(--size-spacing-9xl); }
1932
+
1933
+ .p-left-9xl { padding-left: var(--size-spacing-9xl); }
1934
+
1935
+ .p-h-9xl { padding-left: var(--size-spacing-9xl); padding-right: var(--size-spacing-9xl); }
1936
+
1937
+ .p-v-9xl { padding-top: var(--size-spacing-9xl); padding-bottom: var(--size-spacing-9xl); }
1938
+
1939
+ .g-9xl { gap: var(--size-spacing-9xl); }
1940
+
1941
+ .rg-9xl { row-gap: var(--size-spacing-9xl); }
1942
+
1943
+ .cg-9xl { column-gap: var(--size-spacing-9xl); }
1944
+
1945
+ .m-10xl { margin: var(--size-spacing-10xl); }
1946
+
1947
+ .m-top-10xl { margin-top: var(--size-spacing-10xl); }
1948
+
1949
+ .m-right-10xl { margin-right: var(--size-spacing-10xl); }
1950
+
1951
+ .m-bottom-10xl { margin-bottom: var(--size-spacing-10xl); }
1952
+
1953
+ .m-left-10xl { margin-left: var(--size-spacing-10xl); }
1954
+
1955
+ .m-h-10xl { margin-left: var(--size-spacing-10xl); margin-right: var(--size-spacing-10xl); }
1956
+
1957
+ .m-v-10xl { margin-top: var(--size-spacing-10xl); margin-bottom: var(--size-spacing-10xl); }
1958
+
1959
+ .p-10xl { padding: var(--size-spacing-10xl); }
1960
+
1961
+ .p-top-10xl { padding-top: var(--size-spacing-10xl); }
1962
+
1963
+ .p-right-10xl { padding-right: var(--size-spacing-10xl); }
1964
+
1965
+ .p-bottom-10xl { padding-bottom: var(--size-spacing-10xl); }
1966
+
1967
+ .p-left-10xl { padding-left: var(--size-spacing-10xl); }
1968
+
1969
+ .p-h-10xl { padding-left: var(--size-spacing-10xl); padding-right: var(--size-spacing-10xl); }
1970
+
1971
+ .p-v-10xl { padding-top: var(--size-spacing-10xl); padding-bottom: var(--size-spacing-10xl); }
1972
+
1973
+ .g-10xl { gap: var(--size-spacing-10xl); }
1974
+
1975
+ .rg-10xl { row-gap: var(--size-spacing-10xl); }
1976
+
1977
+ .cg-10xl { column-gap: var(--size-spacing-10xl); }
1978
+
1849
1979
  .m-auto { margin: var(--size-spacing-auto); }
1850
1980
 
1851
1981
  .m-top-auto { margin-top: var(--size-spacing-auto); }
@@ -2273,6 +2403,10 @@
2273
2403
 
2274
2404
  .h-60-tablet { height: var(--size-percentage-60); }
2275
2405
 
2406
+ .w-66-tablet { width: var(--size-percentage-66); }
2407
+
2408
+ .h-66-tablet { height: var(--size-percentage-66); }
2409
+
2276
2410
  .w-70-tablet { width: var(--size-percentage-70); }
2277
2411
 
2278
2412
  .h-70-tablet { height: var(--size-percentage-70); }
@@ -2721,6 +2855,176 @@
2721
2855
 
2722
2856
  .cg-5xl-tablet { column-gap: var(--size-spacing-5xl); }
2723
2857
 
2858
+ .m-6xl-tablet { margin: var(--size-spacing-6xl); }
2859
+
2860
+ .m-top-6xl-tablet { margin-top: var(--size-spacing-6xl); }
2861
+
2862
+ .m-right-6xl-tablet { margin-right: var(--size-spacing-6xl); }
2863
+
2864
+ .m-bottom-6xl-tablet { margin-bottom: var(--size-spacing-6xl); }
2865
+
2866
+ .m-left-6xl-tablet { margin-left: var(--size-spacing-6xl); }
2867
+
2868
+ .m-h-6xl-tablet { margin-left: var(--size-spacing-6xl); margin-right: var(--size-spacing-6xl); }
2869
+
2870
+ .m-v-6xl-tablet { margin-top: var(--size-spacing-6xl); margin-bottom: var(--size-spacing-6xl); }
2871
+
2872
+ .p-6xl-tablet { padding: var(--size-spacing-6xl); }
2873
+
2874
+ .p-top-6xl-tablet { padding-top: var(--size-spacing-6xl); }
2875
+
2876
+ .p-right-6xl-tablet { padding-right: var(--size-spacing-6xl); }
2877
+
2878
+ .p-bottom-6xl-tablet { padding-bottom: var(--size-spacing-6xl); }
2879
+
2880
+ .p-left-6xl-tablet { padding-left: var(--size-spacing-6xl); }
2881
+
2882
+ .p-h-6xl-tablet { padding-left: var(--size-spacing-6xl); padding-right: var(--size-spacing-6xl); }
2883
+
2884
+ .p-v-6xl-tablet { padding-top: var(--size-spacing-6xl); padding-bottom: var(--size-spacing-6xl); }
2885
+
2886
+ .g-6xl-tablet { gap: var(--size-spacing-6xl); }
2887
+
2888
+ .rg-6xl-tablet { row-gap: var(--size-spacing-6xl); }
2889
+
2890
+ .cg-6xl-tablet { column-gap: var(--size-spacing-6xl); }
2891
+
2892
+ .m-7xl-tablet { margin: var(--size-spacing-7xl); }
2893
+
2894
+ .m-top-7xl-tablet { margin-top: var(--size-spacing-7xl); }
2895
+
2896
+ .m-right-7xl-tablet { margin-right: var(--size-spacing-7xl); }
2897
+
2898
+ .m-bottom-7xl-tablet { margin-bottom: var(--size-spacing-7xl); }
2899
+
2900
+ .m-left-7xl-tablet { margin-left: var(--size-spacing-7xl); }
2901
+
2902
+ .m-h-7xl-tablet { margin-left: var(--size-spacing-7xl); margin-right: var(--size-spacing-7xl); }
2903
+
2904
+ .m-v-7xl-tablet { margin-top: var(--size-spacing-7xl); margin-bottom: var(--size-spacing-7xl); }
2905
+
2906
+ .p-7xl-tablet { padding: var(--size-spacing-7xl); }
2907
+
2908
+ .p-top-7xl-tablet { padding-top: var(--size-spacing-7xl); }
2909
+
2910
+ .p-right-7xl-tablet { padding-right: var(--size-spacing-7xl); }
2911
+
2912
+ .p-bottom-7xl-tablet { padding-bottom: var(--size-spacing-7xl); }
2913
+
2914
+ .p-left-7xl-tablet { padding-left: var(--size-spacing-7xl); }
2915
+
2916
+ .p-h-7xl-tablet { padding-left: var(--size-spacing-7xl); padding-right: var(--size-spacing-7xl); }
2917
+
2918
+ .p-v-7xl-tablet { padding-top: var(--size-spacing-7xl); padding-bottom: var(--size-spacing-7xl); }
2919
+
2920
+ .g-7xl-tablet { gap: var(--size-spacing-7xl); }
2921
+
2922
+ .rg-7xl-tablet { row-gap: var(--size-spacing-7xl); }
2923
+
2924
+ .cg-7xl-tablet { column-gap: var(--size-spacing-7xl); }
2925
+
2926
+ .m-8xl-tablet { margin: var(--size-spacing-8xl); }
2927
+
2928
+ .m-top-8xl-tablet { margin-top: var(--size-spacing-8xl); }
2929
+
2930
+ .m-right-8xl-tablet { margin-right: var(--size-spacing-8xl); }
2931
+
2932
+ .m-bottom-8xl-tablet { margin-bottom: var(--size-spacing-8xl); }
2933
+
2934
+ .m-left-8xl-tablet { margin-left: var(--size-spacing-8xl); }
2935
+
2936
+ .m-h-8xl-tablet { margin-left: var(--size-spacing-8xl); margin-right: var(--size-spacing-8xl); }
2937
+
2938
+ .m-v-8xl-tablet { margin-top: var(--size-spacing-8xl); margin-bottom: var(--size-spacing-8xl); }
2939
+
2940
+ .p-8xl-tablet { padding: var(--size-spacing-8xl); }
2941
+
2942
+ .p-top-8xl-tablet { padding-top: var(--size-spacing-8xl); }
2943
+
2944
+ .p-right-8xl-tablet { padding-right: var(--size-spacing-8xl); }
2945
+
2946
+ .p-bottom-8xl-tablet { padding-bottom: var(--size-spacing-8xl); }
2947
+
2948
+ .p-left-8xl-tablet { padding-left: var(--size-spacing-8xl); }
2949
+
2950
+ .p-h-8xl-tablet { padding-left: var(--size-spacing-8xl); padding-right: var(--size-spacing-8xl); }
2951
+
2952
+ .p-v-8xl-tablet { padding-top: var(--size-spacing-8xl); padding-bottom: var(--size-spacing-8xl); }
2953
+
2954
+ .g-8xl-tablet { gap: var(--size-spacing-8xl); }
2955
+
2956
+ .rg-8xl-tablet { row-gap: var(--size-spacing-8xl); }
2957
+
2958
+ .cg-8xl-tablet { column-gap: var(--size-spacing-8xl); }
2959
+
2960
+ .m-9xl-tablet { margin: var(--size-spacing-9xl); }
2961
+
2962
+ .m-top-9xl-tablet { margin-top: var(--size-spacing-9xl); }
2963
+
2964
+ .m-right-9xl-tablet { margin-right: var(--size-spacing-9xl); }
2965
+
2966
+ .m-bottom-9xl-tablet { margin-bottom: var(--size-spacing-9xl); }
2967
+
2968
+ .m-left-9xl-tablet { margin-left: var(--size-spacing-9xl); }
2969
+
2970
+ .m-h-9xl-tablet { margin-left: var(--size-spacing-9xl); margin-right: var(--size-spacing-9xl); }
2971
+
2972
+ .m-v-9xl-tablet { margin-top: var(--size-spacing-9xl); margin-bottom: var(--size-spacing-9xl); }
2973
+
2974
+ .p-9xl-tablet { padding: var(--size-spacing-9xl); }
2975
+
2976
+ .p-top-9xl-tablet { padding-top: var(--size-spacing-9xl); }
2977
+
2978
+ .p-right-9xl-tablet { padding-right: var(--size-spacing-9xl); }
2979
+
2980
+ .p-bottom-9xl-tablet { padding-bottom: var(--size-spacing-9xl); }
2981
+
2982
+ .p-left-9xl-tablet { padding-left: var(--size-spacing-9xl); }
2983
+
2984
+ .p-h-9xl-tablet { padding-left: var(--size-spacing-9xl); padding-right: var(--size-spacing-9xl); }
2985
+
2986
+ .p-v-9xl-tablet { padding-top: var(--size-spacing-9xl); padding-bottom: var(--size-spacing-9xl); }
2987
+
2988
+ .g-9xl-tablet { gap: var(--size-spacing-9xl); }
2989
+
2990
+ .rg-9xl-tablet { row-gap: var(--size-spacing-9xl); }
2991
+
2992
+ .cg-9xl-tablet { column-gap: var(--size-spacing-9xl); }
2993
+
2994
+ .m-10xl-tablet { margin: var(--size-spacing-10xl); }
2995
+
2996
+ .m-top-10xl-tablet { margin-top: var(--size-spacing-10xl); }
2997
+
2998
+ .m-right-10xl-tablet { margin-right: var(--size-spacing-10xl); }
2999
+
3000
+ .m-bottom-10xl-tablet { margin-bottom: var(--size-spacing-10xl); }
3001
+
3002
+ .m-left-10xl-tablet { margin-left: var(--size-spacing-10xl); }
3003
+
3004
+ .m-h-10xl-tablet { margin-left: var(--size-spacing-10xl); margin-right: var(--size-spacing-10xl); }
3005
+
3006
+ .m-v-10xl-tablet { margin-top: var(--size-spacing-10xl); margin-bottom: var(--size-spacing-10xl); }
3007
+
3008
+ .p-10xl-tablet { padding: var(--size-spacing-10xl); }
3009
+
3010
+ .p-top-10xl-tablet { padding-top: var(--size-spacing-10xl); }
3011
+
3012
+ .p-right-10xl-tablet { padding-right: var(--size-spacing-10xl); }
3013
+
3014
+ .p-bottom-10xl-tablet { padding-bottom: var(--size-spacing-10xl); }
3015
+
3016
+ .p-left-10xl-tablet { padding-left: var(--size-spacing-10xl); }
3017
+
3018
+ .p-h-10xl-tablet { padding-left: var(--size-spacing-10xl); padding-right: var(--size-spacing-10xl); }
3019
+
3020
+ .p-v-10xl-tablet { padding-top: var(--size-spacing-10xl); padding-bottom: var(--size-spacing-10xl); }
3021
+
3022
+ .g-10xl-tablet { gap: var(--size-spacing-10xl); }
3023
+
3024
+ .rg-10xl-tablet { row-gap: var(--size-spacing-10xl); }
3025
+
3026
+ .cg-10xl-tablet { column-gap: var(--size-spacing-10xl); }
3027
+
2724
3028
  .m-auto-tablet { margin: var(--size-spacing-auto); }
2725
3029
 
2726
3030
  .m-top-auto-tablet { margin-top: var(--size-spacing-auto); }
@@ -3326,6 +3630,10 @@
3326
3630
 
3327
3631
  .h-60-desktop { height: var(--size-percentage-60); }
3328
3632
 
3633
+ .w-66-desktop { width: var(--size-percentage-66); }
3634
+
3635
+ .h-66-desktop { height: var(--size-percentage-66); }
3636
+
3329
3637
  .w-70-desktop { width: var(--size-percentage-70); }
3330
3638
 
3331
3639
  .h-70-desktop { height: var(--size-percentage-70); }
@@ -3774,6 +4082,176 @@
3774
4082
 
3775
4083
  .cg-5xl-desktop { column-gap: var(--size-spacing-5xl); }
3776
4084
 
4085
+ .m-6xl-desktop { margin: var(--size-spacing-6xl); }
4086
+
4087
+ .m-top-6xl-desktop { margin-top: var(--size-spacing-6xl); }
4088
+
4089
+ .m-right-6xl-desktop { margin-right: var(--size-spacing-6xl); }
4090
+
4091
+ .m-bottom-6xl-desktop { margin-bottom: var(--size-spacing-6xl); }
4092
+
4093
+ .m-left-6xl-desktop { margin-left: var(--size-spacing-6xl); }
4094
+
4095
+ .m-h-6xl-desktop { margin-left: var(--size-spacing-6xl); margin-right: var(--size-spacing-6xl); }
4096
+
4097
+ .m-v-6xl-desktop { margin-top: var(--size-spacing-6xl); margin-bottom: var(--size-spacing-6xl); }
4098
+
4099
+ .p-6xl-desktop { padding: var(--size-spacing-6xl); }
4100
+
4101
+ .p-top-6xl-desktop { padding-top: var(--size-spacing-6xl); }
4102
+
4103
+ .p-right-6xl-desktop { padding-right: var(--size-spacing-6xl); }
4104
+
4105
+ .p-bottom-6xl-desktop { padding-bottom: var(--size-spacing-6xl); }
4106
+
4107
+ .p-left-6xl-desktop { padding-left: var(--size-spacing-6xl); }
4108
+
4109
+ .p-h-6xl-desktop { padding-left: var(--size-spacing-6xl); padding-right: var(--size-spacing-6xl); }
4110
+
4111
+ .p-v-6xl-desktop { padding-top: var(--size-spacing-6xl); padding-bottom: var(--size-spacing-6xl); }
4112
+
4113
+ .g-6xl-desktop { gap: var(--size-spacing-6xl); }
4114
+
4115
+ .rg-6xl-desktop { row-gap: var(--size-spacing-6xl); }
4116
+
4117
+ .cg-6xl-desktop { column-gap: var(--size-spacing-6xl); }
4118
+
4119
+ .m-7xl-desktop { margin: var(--size-spacing-7xl); }
4120
+
4121
+ .m-top-7xl-desktop { margin-top: var(--size-spacing-7xl); }
4122
+
4123
+ .m-right-7xl-desktop { margin-right: var(--size-spacing-7xl); }
4124
+
4125
+ .m-bottom-7xl-desktop { margin-bottom: var(--size-spacing-7xl); }
4126
+
4127
+ .m-left-7xl-desktop { margin-left: var(--size-spacing-7xl); }
4128
+
4129
+ .m-h-7xl-desktop { margin-left: var(--size-spacing-7xl); margin-right: var(--size-spacing-7xl); }
4130
+
4131
+ .m-v-7xl-desktop { margin-top: var(--size-spacing-7xl); margin-bottom: var(--size-spacing-7xl); }
4132
+
4133
+ .p-7xl-desktop { padding: var(--size-spacing-7xl); }
4134
+
4135
+ .p-top-7xl-desktop { padding-top: var(--size-spacing-7xl); }
4136
+
4137
+ .p-right-7xl-desktop { padding-right: var(--size-spacing-7xl); }
4138
+
4139
+ .p-bottom-7xl-desktop { padding-bottom: var(--size-spacing-7xl); }
4140
+
4141
+ .p-left-7xl-desktop { padding-left: var(--size-spacing-7xl); }
4142
+
4143
+ .p-h-7xl-desktop { padding-left: var(--size-spacing-7xl); padding-right: var(--size-spacing-7xl); }
4144
+
4145
+ .p-v-7xl-desktop { padding-top: var(--size-spacing-7xl); padding-bottom: var(--size-spacing-7xl); }
4146
+
4147
+ .g-7xl-desktop { gap: var(--size-spacing-7xl); }
4148
+
4149
+ .rg-7xl-desktop { row-gap: var(--size-spacing-7xl); }
4150
+
4151
+ .cg-7xl-desktop { column-gap: var(--size-spacing-7xl); }
4152
+
4153
+ .m-8xl-desktop { margin: var(--size-spacing-8xl); }
4154
+
4155
+ .m-top-8xl-desktop { margin-top: var(--size-spacing-8xl); }
4156
+
4157
+ .m-right-8xl-desktop { margin-right: var(--size-spacing-8xl); }
4158
+
4159
+ .m-bottom-8xl-desktop { margin-bottom: var(--size-spacing-8xl); }
4160
+
4161
+ .m-left-8xl-desktop { margin-left: var(--size-spacing-8xl); }
4162
+
4163
+ .m-h-8xl-desktop { margin-left: var(--size-spacing-8xl); margin-right: var(--size-spacing-8xl); }
4164
+
4165
+ .m-v-8xl-desktop { margin-top: var(--size-spacing-8xl); margin-bottom: var(--size-spacing-8xl); }
4166
+
4167
+ .p-8xl-desktop { padding: var(--size-spacing-8xl); }
4168
+
4169
+ .p-top-8xl-desktop { padding-top: var(--size-spacing-8xl); }
4170
+
4171
+ .p-right-8xl-desktop { padding-right: var(--size-spacing-8xl); }
4172
+
4173
+ .p-bottom-8xl-desktop { padding-bottom: var(--size-spacing-8xl); }
4174
+
4175
+ .p-left-8xl-desktop { padding-left: var(--size-spacing-8xl); }
4176
+
4177
+ .p-h-8xl-desktop { padding-left: var(--size-spacing-8xl); padding-right: var(--size-spacing-8xl); }
4178
+
4179
+ .p-v-8xl-desktop { padding-top: var(--size-spacing-8xl); padding-bottom: var(--size-spacing-8xl); }
4180
+
4181
+ .g-8xl-desktop { gap: var(--size-spacing-8xl); }
4182
+
4183
+ .rg-8xl-desktop { row-gap: var(--size-spacing-8xl); }
4184
+
4185
+ .cg-8xl-desktop { column-gap: var(--size-spacing-8xl); }
4186
+
4187
+ .m-9xl-desktop { margin: var(--size-spacing-9xl); }
4188
+
4189
+ .m-top-9xl-desktop { margin-top: var(--size-spacing-9xl); }
4190
+
4191
+ .m-right-9xl-desktop { margin-right: var(--size-spacing-9xl); }
4192
+
4193
+ .m-bottom-9xl-desktop { margin-bottom: var(--size-spacing-9xl); }
4194
+
4195
+ .m-left-9xl-desktop { margin-left: var(--size-spacing-9xl); }
4196
+
4197
+ .m-h-9xl-desktop { margin-left: var(--size-spacing-9xl); margin-right: var(--size-spacing-9xl); }
4198
+
4199
+ .m-v-9xl-desktop { margin-top: var(--size-spacing-9xl); margin-bottom: var(--size-spacing-9xl); }
4200
+
4201
+ .p-9xl-desktop { padding: var(--size-spacing-9xl); }
4202
+
4203
+ .p-top-9xl-desktop { padding-top: var(--size-spacing-9xl); }
4204
+
4205
+ .p-right-9xl-desktop { padding-right: var(--size-spacing-9xl); }
4206
+
4207
+ .p-bottom-9xl-desktop { padding-bottom: var(--size-spacing-9xl); }
4208
+
4209
+ .p-left-9xl-desktop { padding-left: var(--size-spacing-9xl); }
4210
+
4211
+ .p-h-9xl-desktop { padding-left: var(--size-spacing-9xl); padding-right: var(--size-spacing-9xl); }
4212
+
4213
+ .p-v-9xl-desktop { padding-top: var(--size-spacing-9xl); padding-bottom: var(--size-spacing-9xl); }
4214
+
4215
+ .g-9xl-desktop { gap: var(--size-spacing-9xl); }
4216
+
4217
+ .rg-9xl-desktop { row-gap: var(--size-spacing-9xl); }
4218
+
4219
+ .cg-9xl-desktop { column-gap: var(--size-spacing-9xl); }
4220
+
4221
+ .m-10xl-desktop { margin: var(--size-spacing-10xl); }
4222
+
4223
+ .m-top-10xl-desktop { margin-top: var(--size-spacing-10xl); }
4224
+
4225
+ .m-right-10xl-desktop { margin-right: var(--size-spacing-10xl); }
4226
+
4227
+ .m-bottom-10xl-desktop { margin-bottom: var(--size-spacing-10xl); }
4228
+
4229
+ .m-left-10xl-desktop { margin-left: var(--size-spacing-10xl); }
4230
+
4231
+ .m-h-10xl-desktop { margin-left: var(--size-spacing-10xl); margin-right: var(--size-spacing-10xl); }
4232
+
4233
+ .m-v-10xl-desktop { margin-top: var(--size-spacing-10xl); margin-bottom: var(--size-spacing-10xl); }
4234
+
4235
+ .p-10xl-desktop { padding: var(--size-spacing-10xl); }
4236
+
4237
+ .p-top-10xl-desktop { padding-top: var(--size-spacing-10xl); }
4238
+
4239
+ .p-right-10xl-desktop { padding-right: var(--size-spacing-10xl); }
4240
+
4241
+ .p-bottom-10xl-desktop { padding-bottom: var(--size-spacing-10xl); }
4242
+
4243
+ .p-left-10xl-desktop { padding-left: var(--size-spacing-10xl); }
4244
+
4245
+ .p-h-10xl-desktop { padding-left: var(--size-spacing-10xl); padding-right: var(--size-spacing-10xl); }
4246
+
4247
+ .p-v-10xl-desktop { padding-top: var(--size-spacing-10xl); padding-bottom: var(--size-spacing-10xl); }
4248
+
4249
+ .g-10xl-desktop { gap: var(--size-spacing-10xl); }
4250
+
4251
+ .rg-10xl-desktop { row-gap: var(--size-spacing-10xl); }
4252
+
4253
+ .cg-10xl-desktop { column-gap: var(--size-spacing-10xl); }
4254
+
3777
4255
  .m-auto-desktop { margin: var(--size-spacing-auto); }
3778
4256
 
3779
4257
  .m-top-auto-desktop { margin-top: var(--size-spacing-auto); }
@@ -4379,6 +4857,10 @@
4379
4857
 
4380
4858
  .h-60-hd { height: var(--size-percentage-60); }
4381
4859
 
4860
+ .w-66-hd { width: var(--size-percentage-66); }
4861
+
4862
+ .h-66-hd { height: var(--size-percentage-66); }
4863
+
4382
4864
  .w-70-hd { width: var(--size-percentage-70); }
4383
4865
 
4384
4866
  .h-70-hd { height: var(--size-percentage-70); }
@@ -4827,6 +5309,176 @@
4827
5309
 
4828
5310
  .cg-5xl-hd { column-gap: var(--size-spacing-5xl); }
4829
5311
 
5312
+ .m-6xl-hd { margin: var(--size-spacing-6xl); }
5313
+
5314
+ .m-top-6xl-hd { margin-top: var(--size-spacing-6xl); }
5315
+
5316
+ .m-right-6xl-hd { margin-right: var(--size-spacing-6xl); }
5317
+
5318
+ .m-bottom-6xl-hd { margin-bottom: var(--size-spacing-6xl); }
5319
+
5320
+ .m-left-6xl-hd { margin-left: var(--size-spacing-6xl); }
5321
+
5322
+ .m-h-6xl-hd { margin-left: var(--size-spacing-6xl); margin-right: var(--size-spacing-6xl); }
5323
+
5324
+ .m-v-6xl-hd { margin-top: var(--size-spacing-6xl); margin-bottom: var(--size-spacing-6xl); }
5325
+
5326
+ .p-6xl-hd { padding: var(--size-spacing-6xl); }
5327
+
5328
+ .p-top-6xl-hd { padding-top: var(--size-spacing-6xl); }
5329
+
5330
+ .p-right-6xl-hd { padding-right: var(--size-spacing-6xl); }
5331
+
5332
+ .p-bottom-6xl-hd { padding-bottom: var(--size-spacing-6xl); }
5333
+
5334
+ .p-left-6xl-hd { padding-left: var(--size-spacing-6xl); }
5335
+
5336
+ .p-h-6xl-hd { padding-left: var(--size-spacing-6xl); padding-right: var(--size-spacing-6xl); }
5337
+
5338
+ .p-v-6xl-hd { padding-top: var(--size-spacing-6xl); padding-bottom: var(--size-spacing-6xl); }
5339
+
5340
+ .g-6xl-hd { gap: var(--size-spacing-6xl); }
5341
+
5342
+ .rg-6xl-hd { row-gap: var(--size-spacing-6xl); }
5343
+
5344
+ .cg-6xl-hd { column-gap: var(--size-spacing-6xl); }
5345
+
5346
+ .m-7xl-hd { margin: var(--size-spacing-7xl); }
5347
+
5348
+ .m-top-7xl-hd { margin-top: var(--size-spacing-7xl); }
5349
+
5350
+ .m-right-7xl-hd { margin-right: var(--size-spacing-7xl); }
5351
+
5352
+ .m-bottom-7xl-hd { margin-bottom: var(--size-spacing-7xl); }
5353
+
5354
+ .m-left-7xl-hd { margin-left: var(--size-spacing-7xl); }
5355
+
5356
+ .m-h-7xl-hd { margin-left: var(--size-spacing-7xl); margin-right: var(--size-spacing-7xl); }
5357
+
5358
+ .m-v-7xl-hd { margin-top: var(--size-spacing-7xl); margin-bottom: var(--size-spacing-7xl); }
5359
+
5360
+ .p-7xl-hd { padding: var(--size-spacing-7xl); }
5361
+
5362
+ .p-top-7xl-hd { padding-top: var(--size-spacing-7xl); }
5363
+
5364
+ .p-right-7xl-hd { padding-right: var(--size-spacing-7xl); }
5365
+
5366
+ .p-bottom-7xl-hd { padding-bottom: var(--size-spacing-7xl); }
5367
+
5368
+ .p-left-7xl-hd { padding-left: var(--size-spacing-7xl); }
5369
+
5370
+ .p-h-7xl-hd { padding-left: var(--size-spacing-7xl); padding-right: var(--size-spacing-7xl); }
5371
+
5372
+ .p-v-7xl-hd { padding-top: var(--size-spacing-7xl); padding-bottom: var(--size-spacing-7xl); }
5373
+
5374
+ .g-7xl-hd { gap: var(--size-spacing-7xl); }
5375
+
5376
+ .rg-7xl-hd { row-gap: var(--size-spacing-7xl); }
5377
+
5378
+ .cg-7xl-hd { column-gap: var(--size-spacing-7xl); }
5379
+
5380
+ .m-8xl-hd { margin: var(--size-spacing-8xl); }
5381
+
5382
+ .m-top-8xl-hd { margin-top: var(--size-spacing-8xl); }
5383
+
5384
+ .m-right-8xl-hd { margin-right: var(--size-spacing-8xl); }
5385
+
5386
+ .m-bottom-8xl-hd { margin-bottom: var(--size-spacing-8xl); }
5387
+
5388
+ .m-left-8xl-hd { margin-left: var(--size-spacing-8xl); }
5389
+
5390
+ .m-h-8xl-hd { margin-left: var(--size-spacing-8xl); margin-right: var(--size-spacing-8xl); }
5391
+
5392
+ .m-v-8xl-hd { margin-top: var(--size-spacing-8xl); margin-bottom: var(--size-spacing-8xl); }
5393
+
5394
+ .p-8xl-hd { padding: var(--size-spacing-8xl); }
5395
+
5396
+ .p-top-8xl-hd { padding-top: var(--size-spacing-8xl); }
5397
+
5398
+ .p-right-8xl-hd { padding-right: var(--size-spacing-8xl); }
5399
+
5400
+ .p-bottom-8xl-hd { padding-bottom: var(--size-spacing-8xl); }
5401
+
5402
+ .p-left-8xl-hd { padding-left: var(--size-spacing-8xl); }
5403
+
5404
+ .p-h-8xl-hd { padding-left: var(--size-spacing-8xl); padding-right: var(--size-spacing-8xl); }
5405
+
5406
+ .p-v-8xl-hd { padding-top: var(--size-spacing-8xl); padding-bottom: var(--size-spacing-8xl); }
5407
+
5408
+ .g-8xl-hd { gap: var(--size-spacing-8xl); }
5409
+
5410
+ .rg-8xl-hd { row-gap: var(--size-spacing-8xl); }
5411
+
5412
+ .cg-8xl-hd { column-gap: var(--size-spacing-8xl); }
5413
+
5414
+ .m-9xl-hd { margin: var(--size-spacing-9xl); }
5415
+
5416
+ .m-top-9xl-hd { margin-top: var(--size-spacing-9xl); }
5417
+
5418
+ .m-right-9xl-hd { margin-right: var(--size-spacing-9xl); }
5419
+
5420
+ .m-bottom-9xl-hd { margin-bottom: var(--size-spacing-9xl); }
5421
+
5422
+ .m-left-9xl-hd { margin-left: var(--size-spacing-9xl); }
5423
+
5424
+ .m-h-9xl-hd { margin-left: var(--size-spacing-9xl); margin-right: var(--size-spacing-9xl); }
5425
+
5426
+ .m-v-9xl-hd { margin-top: var(--size-spacing-9xl); margin-bottom: var(--size-spacing-9xl); }
5427
+
5428
+ .p-9xl-hd { padding: var(--size-spacing-9xl); }
5429
+
5430
+ .p-top-9xl-hd { padding-top: var(--size-spacing-9xl); }
5431
+
5432
+ .p-right-9xl-hd { padding-right: var(--size-spacing-9xl); }
5433
+
5434
+ .p-bottom-9xl-hd { padding-bottom: var(--size-spacing-9xl); }
5435
+
5436
+ .p-left-9xl-hd { padding-left: var(--size-spacing-9xl); }
5437
+
5438
+ .p-h-9xl-hd { padding-left: var(--size-spacing-9xl); padding-right: var(--size-spacing-9xl); }
5439
+
5440
+ .p-v-9xl-hd { padding-top: var(--size-spacing-9xl); padding-bottom: var(--size-spacing-9xl); }
5441
+
5442
+ .g-9xl-hd { gap: var(--size-spacing-9xl); }
5443
+
5444
+ .rg-9xl-hd { row-gap: var(--size-spacing-9xl); }
5445
+
5446
+ .cg-9xl-hd { column-gap: var(--size-spacing-9xl); }
5447
+
5448
+ .m-10xl-hd { margin: var(--size-spacing-10xl); }
5449
+
5450
+ .m-top-10xl-hd { margin-top: var(--size-spacing-10xl); }
5451
+
5452
+ .m-right-10xl-hd { margin-right: var(--size-spacing-10xl); }
5453
+
5454
+ .m-bottom-10xl-hd { margin-bottom: var(--size-spacing-10xl); }
5455
+
5456
+ .m-left-10xl-hd { margin-left: var(--size-spacing-10xl); }
5457
+
5458
+ .m-h-10xl-hd { margin-left: var(--size-spacing-10xl); margin-right: var(--size-spacing-10xl); }
5459
+
5460
+ .m-v-10xl-hd { margin-top: var(--size-spacing-10xl); margin-bottom: var(--size-spacing-10xl); }
5461
+
5462
+ .p-10xl-hd { padding: var(--size-spacing-10xl); }
5463
+
5464
+ .p-top-10xl-hd { padding-top: var(--size-spacing-10xl); }
5465
+
5466
+ .p-right-10xl-hd { padding-right: var(--size-spacing-10xl); }
5467
+
5468
+ .p-bottom-10xl-hd { padding-bottom: var(--size-spacing-10xl); }
5469
+
5470
+ .p-left-10xl-hd { padding-left: var(--size-spacing-10xl); }
5471
+
5472
+ .p-h-10xl-hd { padding-left: var(--size-spacing-10xl); padding-right: var(--size-spacing-10xl); }
5473
+
5474
+ .p-v-10xl-hd { padding-top: var(--size-spacing-10xl); padding-bottom: var(--size-spacing-10xl); }
5475
+
5476
+ .g-10xl-hd { gap: var(--size-spacing-10xl); }
5477
+
5478
+ .rg-10xl-hd { row-gap: var(--size-spacing-10xl); }
5479
+
5480
+ .cg-10xl-hd { column-gap: var(--size-spacing-10xl); }
5481
+
4830
5482
  .m-auto-hd { margin: var(--size-spacing-auto); }
4831
5483
 
4832
5484
  .m-top-auto-hd { margin-top: var(--size-spacing-auto); }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Wed, 13 Nov 2024 18:41:41 GMT
6
+ * Generated on Wed, 04 Dec 2024 00:29:13 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -265,6 +265,7 @@
265
265
  --size-percentage-40: 40%;
266
266
  --size-percentage-50: 50%;
267
267
  --size-percentage-60: 60%;
268
+ --size-percentage-66: 66%;
268
269
  --size-percentage-70: 70%;
269
270
  --size-percentage-75: 75%;
270
271
  --size-percentage-80: 80%;
@@ -313,6 +314,11 @@
313
314
  --size-spacing-3xl: 1.5rem;
314
315
  --size-spacing-4xl: 2rem;
315
316
  --size-spacing-5xl: 4rem;
317
+ --size-spacing-6xl: 6rem;
318
+ --size-spacing-7xl: 8rem;
319
+ --size-spacing-8xl: 10rem;
320
+ --size-spacing-9xl: 12rem;
321
+ --size-spacing-10xl: 16rem;
316
322
  --size-spacing-auto: auto;
317
323
  --size-z-index-0: 0;
318
324
  --size-z-index-popover: 9000;
@@ -327,7 +333,7 @@
327
333
  \*******************************************************************************************************************************/
328
334
  /**
329
335
  * Do not edit directly
330
- * Generated on Wed, 13 Nov 2024 18:41:41 GMT
336
+ * Generated on Wed, 04 Dec 2024 00:29:13 GMT
331
337
  */
332
338
 
333
339
  :root.dark {
package/dist/lib/tokens.d.ts CHANGED
@@ -13,10 +13,10 @@ export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl
13
13
  export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
14
14
  export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];
15
15
  export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
16
- export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
16
+ export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
17
17
  export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
18
- export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "auto")[];
19
- export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
18
+ export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "auto")[];
19
+ export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "66" | "70" | "75" | "80" | "90" | "100")[];
20
20
  export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];
21
21
  export declare const Z_INDEX_VALUES: any;
22
22
  export declare const BOX_SHADOW_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "4.0.1",
3
+ "version": "4.1.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -60,6 +60,26 @@
60
60
  "limit": "10 KB"
61
61
  }
62
62
  ],
63
+ "dependencies": {
64
+ "@hyphen/hyphen-design-tokens": "^4.19.0",
65
+ "@popperjs/core": "^2.11.8",
66
+ "@radix-ui/react-collapsible": "^1.1.1",
67
+ "@radix-ui/react-dropdown-menu": "^2.1.2",
68
+ "@radix-ui/react-slot": "^1.1.0",
69
+ "@types/react-modal": "^3.16.3",
70
+ "classnames": "^2.5.1",
71
+ "date-fns": "^2.16.1",
72
+ "focus-trap-react": "^10.2.3",
73
+ "formik": "^2.4.6",
74
+ "react-datepicker": "^6.3.0",
75
+ "react-focus-lock": "^2.13.2",
76
+ "react-modal": "^3.16.1",
77
+ "react-popper": "^2.3.0",
78
+ "react-remove-scroll": "^2.5.10",
79
+ "react-router-dom": "^6.26.1",
80
+ "react-select": "^5.8.0",
81
+ "react-select-event": "^5.5.1"
82
+ },
63
83
  "devDependencies": {
64
84
  "@babel/core": "^7.23.7",
65
85
  "@chromatic-com/storybook": "^1.8.0",
@@ -120,25 +140,5 @@
120
140
  },
121
141
  "optionalDependencies": {
122
142
  "@rollup/rollup-linux-x64-gnu": "^4.21.2"
123
- },
124
- "dependencies": {
125
- "@hyphen/hyphen-design-tokens": "^4.18.0",
126
- "@popperjs/core": "^2.11.8",
127
- "@radix-ui/react-collapsible": "^1.1.1",
128
- "@radix-ui/react-dropdown-menu": "^2.1.2",
129
- "@radix-ui/react-slot": "^1.1.0",
130
- "@types/react-modal": "^3.16.3",
131
- "classnames": "^2.5.1",
132
- "date-fns": "^2.16.1",
133
- "focus-trap-react": "^10.2.3",
134
- "formik": "^2.4.6",
135
- "react-datepicker": "^6.3.0",
136
- "react-focus-lock": "^2.13.2",
137
- "react-modal": "^3.16.1",
138
- "react-popper": "^2.3.0",
139
- "react-remove-scroll": "^2.5.10",
140
- "react-router-dom": "^6.26.1",
141
- "react-select": "^5.8.0",
142
- "react-select-event": "^5.5.1"
143
143
  }
144
144
  }
package/src/components/Box/Box.stories.tsx CHANGED
@@ -1060,6 +1060,9 @@ export const WidthPercentages = () => (
1060
1060
  <Box background="tertiary" width="60">
1061
1061
  60%
1062
1062
  </Box>
1063
+ <Box background="tertiary" width="66">
1064
+ 66%
1065
+ </Box>
1063
1066
  <Box background="tertiary" width="70">
1064
1067
  70%
1065
1068
  </Box>
@@ -1343,6 +1346,15 @@ export const HeightPercentages = () => (
1343
1346
  >
1344
1347
  60%
1345
1348
  </Box>
1349
+ <Box
1350
+ flex="auto"
1351
+ justifyContent="center"
1352
+ alignItems="center"
1353
+ background="tertiary"
1354
+ height="66"
1355
+ >
1356
+ 66%
1357
+ </Box>
1346
1358
  <Box
1347
1359
  flex="auto"
1348
1360
  justifyContent="center"