@drivy/cobalt 0.14.2 → 0.14.6

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 (56) hide show
  1. package/cjs/tokens/icons.js +5 -0
  2. package/cjs/tokens/icons.js.map +1 -1
  3. package/components/Form/Checkmark.js.map +1 -1
  4. package/components/Icon/__generated__/CarAddIcon.js +24 -0
  5. package/components/Icon/__generated__/CarAddIcon.js.map +1 -0
  6. package/components/Icon/__generated__/OptionAndroidAutoIcon.js +23 -0
  7. package/components/Icon/__generated__/OptionAndroidAutoIcon.js.map +1 -0
  8. package/components/Icon/__generated__/OptionAppleCarplayIcon.js +24 -0
  9. package/components/Icon/__generated__/OptionAppleCarplayIcon.js.map +1 -0
  10. package/components/Icon/__generated__/OptionBluetoothAudioIcon.js +23 -0
  11. package/components/Icon/__generated__/OptionBluetoothAudioIcon.js.map +1 -0
  12. package/components/Icon/__generated__/OptionDashcamIcon.js +23 -0
  13. package/components/Icon/__generated__/OptionDashcamIcon.js.map +1 -0
  14. package/icons/car-add.js +4 -0
  15. package/icons/car-add.js.map +1 -0
  16. package/icons/car-add.svg +1 -0
  17. package/icons/index.js +5 -0
  18. package/icons/index.js.map +1 -1
  19. package/icons/option-android-auto.js +4 -0
  20. package/icons/option-android-auto.js.map +1 -0
  21. package/icons/option-android-auto.svg +1 -0
  22. package/icons/option-apple-carplay.js +4 -0
  23. package/icons/option-apple-carplay.js.map +1 -0
  24. package/icons/option-apple-carplay.svg +1 -0
  25. package/icons/option-bluetooth-audio.js +4 -0
  26. package/icons/option-bluetooth-audio.js.map +1 -0
  27. package/icons/option-bluetooth-audio.svg +1 -0
  28. package/icons/option-dashcam.js +4 -0
  29. package/icons/option-dashcam.js.map +1 -0
  30. package/icons/option-dashcam.svg +1 -0
  31. package/index.js +5 -0
  32. package/index.js.map +1 -1
  33. package/package.json +16 -16
  34. package/styles/components/Button/legacy.scss +1 -0
  35. package/styles/components/Buttons/index.scss +1 -0
  36. package/styles/components/Form/Checkmark.scss +2 -2
  37. package/styles/components/Form/form.scss +15 -3
  38. package/tokens/icons.js +5 -0
  39. package/tokens/icons.js.map +1 -1
  40. package/types/components/Button/index.d.ts +8 -8
  41. package/types/components/Buttons/BrandButton/index.d.ts +2 -2
  42. package/types/components/Buttons/DefaultButton/index.d.ts +2 -2
  43. package/types/components/Buttons/GhostButton/index.d.ts +2 -2
  44. package/types/components/Form/Autocomplete/index.d.ts +2 -2
  45. package/types/components/Form/Checkmark.d.ts +1 -1
  46. package/types/components/Form/TextInput.d.ts +3 -3
  47. package/types/components/Icon/__generated__/CarAddIcon.d.ts +10 -0
  48. package/types/components/Icon/__generated__/OptionAndroidAutoIcon.d.ts +10 -0
  49. package/types/components/Icon/__generated__/OptionAppleCarplayIcon.d.ts +10 -0
  50. package/types/components/Icon/__generated__/OptionBluetoothAudioIcon.d.ts +10 -0
  51. package/types/components/Icon/__generated__/OptionDashcamIcon.d.ts +10 -0
  52. package/types/components/Icon/__generated__/index.d.ts +5 -0
  53. package/types/components/Icon/index.d.ts +1 -1
  54. package/types/icons/index.d.ts +5 -0
  55. package/types/tokens/index.d.ts +5 -0
  56. package/utilities.css +520 -0
@@ -10,6 +10,7 @@ const icons = {
10
10
  briefcase: "briefcase.svg",
11
11
  bulb: "bulb.svg",
12
12
  camera: "camera.svg",
13
+ carAdd: "car-add.svg",
13
14
  carCheck: "car-check.svg",
14
15
  carDrivyOpen: "car-drivy-open.svg",
15
16
  carGroup: "car-group.svg",
@@ -73,12 +74,16 @@ const icons = {
73
74
  miscGift: "misc-gift.svg",
74
75
  notification: "notification.svg",
75
76
  optionAirConditioning: "option-air-conditioning.svg",
77
+ optionAndroidAuto: "option-android-auto.svg",
78
+ optionAppleCarplay: "option-apple-carplay.svg",
76
79
  optionAudioInput: "option-audio-input.svg",
77
80
  optionBabySeat: "option-baby-seat.svg",
78
81
  optionBikeRack: "option-bike-rack.svg",
82
+ optionBluetoothAudio: "option-bluetooth-audio.svg",
79
83
  optionCdPlayer: "option-cd-player.svg",
80
84
  optionChains: "option-chains.svg",
81
85
  optionCruiseControl: "option-cruise-control.svg",
86
+ optionDashcam: "option-dashcam.svg",
82
87
  optionGps: "option-gps.svg",
83
88
  optionHasTrailer: "option-has-trailer.svg",
84
89
  optionHitch: "option-hitch.svg",
@@ -1 +1 @@
1
- {"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n label: string\n type?: \"checkbox\" | \"radio\"\n hint?: string\n} & FormElement &\n React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n return (\n <div\n className={classNames(\"cobalt-CheckmarkField\", {\n \"cobalt-CheckmarkField--success\": status === \"success\",\n \"cobalt-CheckmarkField--error\": status === \"error\",\n })}\n >\n <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n <span className=\"cobalt-CheckmarkField__Checkmark\" />\n <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n </label>\n {hint && (\n <Hint status={status}>\n <span dangerouslySetInnerHTML={{ __html: hint }} />\n </Hint>\n )}\n </div>\n )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n children: React.ReactNode\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n return (\n <div className=\"cobalt-ChoiceList\">\n {typeof children === \"function\" ? children() : children}\n </div>\n )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["classNames"],"mappings":";;;;;;AAaA,IAAM,SAAS,GAAG,UAAC,EAA6C;IAA3C,IAAA,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAK,UAAU,cAApC,2BAAsC,CAAF;IACrD,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC;QAEF,+BAAO,SAAS,EAAC,qCAAqC;YACpD,0CAAW,UAAU,IAAE,SAAS,EAAC,8BAA8B,IAAG;YAClE,8BAAM,SAAS,EAAC,kCAAkC,GAAG;YACrD,8BAAM,SAAS,EAAC,8BAA8B,IAAE,KAAK,CAAQ,CACvD;QACP,IAAI,KACH,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;YAClB,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;IAEY,QAAQ,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACxC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;IAE1B,KAAK,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACrC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,IAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,IAAM,UAAU,GAAG,UAAC,EAA6B;QAA3B,QAAQ,cAAA;IAC5B,QACE,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;IAEK,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n label: string | JSX.Element\n type?: \"checkbox\" | \"radio\"\n hint?: string\n} & FormElement &\n React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n return (\n <div\n className={classNames(\"cobalt-CheckmarkField\", {\n \"cobalt-CheckmarkField--success\": status === \"success\",\n \"cobalt-CheckmarkField--error\": status === \"error\",\n })}\n >\n <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n <span className=\"cobalt-CheckmarkField__Checkmark\" />\n <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n </label>\n {hint && (\n <Hint status={status}>\n <span dangerouslySetInnerHTML={{ __html: hint }} />\n </Hint>\n )}\n </div>\n )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n children: React.ReactNode\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n return (\n <div className=\"cobalt-ChoiceList\">\n {typeof children === \"function\" ? children() : children}\n </div>\n )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["classNames"],"mappings":";;;;;;AAaA,IAAM,SAAS,GAAG,UAAC,EAA6C;IAA3C,IAAA,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAK,UAAU,cAApC,2BAAsC,CAAF;IACrD,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC;QAEF,+BAAO,SAAS,EAAC,qCAAqC;YACpD,0CAAW,UAAU,IAAE,SAAS,EAAC,8BAA8B,IAAG;YAClE,8BAAM,SAAS,EAAC,kCAAkC,GAAG;YACrD,8BAAM,SAAS,EAAC,8BAA8B,IAAE,KAAK,CAAQ,CACvD;QACP,IAAI,KACH,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;YAClB,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;IAEY,QAAQ,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACxC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;IAE1B,KAAK,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACrC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,IAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,IAAM,UAAU,GAAG,UAAC,EAA6B;QAA3B,QAAQ,cAAA;IAC5B,QACE,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;IAEK,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import capitalize from '../../utils/capitalize.js';
3
+ import 'lodash.throttle';
4
+ import cx from 'classnames';
5
+
6
+ var iconSource = "carAdd";
7
+ var CarAddIcon = function (_a) {
8
+ var _b;
9
+ var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
10
+ var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
11
+ _b["cobalt-Icon--color".concat(capitalize(color))] = color,
12
+ _b["cobalt-Icon--size16"] = size === 16,
13
+ _b["cobalt-Icon--size20"] = size === 20,
14
+ _b["cobalt-Icon--size32"] = size === 32,
15
+ _b["cobalt-Icon--contained"] = contained,
16
+ _b));
17
+ var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
18
+ return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
19
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.882 7.539C19.039 4.819 17.36 3 15 3H8C5.64 3 3.96 4.82 3.118 7.539a1.75 1.75 0 1 0-.59 3.447C2.51 11.32 2.5 11.657 2.5 12v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v-.8a2 2 0 0 1 2-2h1.2V13a2 2 0 0 1 2-2h1.6c.446 0 .857.146 1.19.392-.005-.136-.01-.271-.018-.406a1.75 1.75 0 1 0-.59-3.447ZM6 15a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm-1-5c0-1 0-5 3.5-5h6C18 5 18 9 18 10H5Z" }),
20
+ React.createElement("path", { d: "M22.75 16.2a.25.25 0 0 0-.25-.25h-2.95V13a.25.25 0 0 0-.25-.25h-1.6a.25.25 0 0 0-.25.25v2.95H14.5a.25.25 0 0 0-.25.25v1.6c0 .138.112.25.25.25h2.95V21c0 .138.112.25.25.25h1.6a.25.25 0 0 0 .25-.25v-2.95h2.95a.25.25 0 0 0 .25-.25v-1.6Z" })));
21
+ };
22
+
23
+ export { CarAddIcon as default };
24
+ //# sourceMappingURL=CarAddIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CarAddIcon.js","sources":["../../../../src/components/Icon/__generated__/CarAddIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 | 20 | 24 | 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"carAdd\"\n\nconst CarAddIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M19.882 7.539C19.039 4.819 17.36 3 15 3H8C5.64 3 3.96 4.82 3.118 7.539a1.75 1.75 0 1 0-.59 3.447C2.51 11.32 2.5 11.657 2.5 12v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v-.8a2 2 0 0 1 2-2h1.2V13a2 2 0 0 1 2-2h1.6c.446 0 .857.146 1.19.392-.005-.136-.01-.271-.018-.406a1.75 1.75 0 1 0-.59-3.447ZM6 15a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm-1-5c0-1 0-5 3.5-5h6C18 5 18 9 18 10H5Z\"\n />\n <path d=\"M22.75 16.2a.25.25 0 0 0-.25-.25h-2.95V13a.25.25 0 0 0-.25-.25h-1.6a.25.25 0 0 0-.25.25v2.95H14.5a.25.25 0 0 0-.25.25v1.6c0 .138.112.25.25.25h2.95V21c0 .138.112.25.25.25h1.6a.25.25 0 0 0 .25-.25v-2.95h2.95a.25.25 0 0 0 .25-.25v-1.6Z\" />\n </svg>\n )\n}\n\nexport default CarAddIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,QAAQ,CAAA;IAErB,UAAU,GAAG,UAAC,EAKR;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kXAAkX,GACpX;QACF,8BAAM,CAAC,EAAC,0OAA0O,GAAG,CACjP,CACP,CAAA;AACH;;;;"}
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import capitalize from '../../utils/capitalize.js';
3
+ import 'lodash.throttle';
4
+ import cx from 'classnames';
5
+
6
+ var iconSource = "optionAndroidAuto";
7
+ var OptionAndroidAutoIcon = function (_a) {
8
+ var _b;
9
+ var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
10
+ var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
11
+ _b["cobalt-Icon--color".concat(capitalize(color))] = color,
12
+ _b["cobalt-Icon--size16"] = size === 16,
13
+ _b["cobalt-Icon--size20"] = size === 20,
14
+ _b["cobalt-Icon--size32"] = size === 32,
15
+ _b["cobalt-Icon--contained"] = contained,
16
+ _b));
17
+ var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
18
+ return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
19
+ React.createElement("path", { d: "m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52ZM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" })));
20
+ };
21
+
22
+ export { OptionAndroidAutoIcon as default };
23
+ //# sourceMappingURL=OptionAndroidAutoIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionAndroidAutoIcon.js","sources":["../../../../src/components/Icon/__generated__/OptionAndroidAutoIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 | 20 | 24 | 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"optionAndroidAuto\"\n\nconst OptionAndroidAutoIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52ZM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z\" />\n </svg>\n )\n}\n\nexport default OptionAndroidAutoIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,mBAAmB,CAAA;IAEhC,qBAAqB,GAAG,UAAC,EAKnB;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,qUAAqU,GAAG,CAC5U,CACP,CAAA;AACH;;;;"}
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import capitalize from '../../utils/capitalize.js';
3
+ import 'lodash.throttle';
4
+ import cx from 'classnames';
5
+
6
+ var iconSource = "optionAppleCarplay";
7
+ var OptionAppleCarplayIcon = function (_a) {
8
+ var _b;
9
+ var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
10
+ var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
11
+ _b["cobalt-Icon--color".concat(capitalize(color))] = color,
12
+ _b["cobalt-Icon--size16"] = size === 16,
13
+ _b["cobalt-Icon--size20"] = size === 20,
14
+ _b["cobalt-Icon--size32"] = size === 32,
15
+ _b["cobalt-Icon--contained"] = contained,
16
+ _b));
17
+ var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
18
+ return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
19
+ React.createElement("path", { d: "M11.092 7.72c-.085-.064-.182-.12-.262-.12a.374.374 0 0 0-.367.371v7.924a.375.375 0 0 0 .19.323.363.363 0 0 0 .37-.009c.07-.044 6.71-3.871 6.774-3.928a.371.371 0 0 0 .03-.53c-.067-.074-6.624-3.949-6.735-4.031Z" }),
20
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.564 2C7.122 2 2.7 6.489 2.7 12s4.422 10 9.864 10c3.144 0 6.125-1.54 7.977-4.117l.005-.006a.84.84 0 0 0-.193-1.145.819.819 0 0 0-1.142.166l-.004.006c-1.545 2.148-4.028 3.429-6.643 3.429-4.526 0-8.214-3.736-8.214-8.333 0-4.598 3.688-8.333 8.214-8.333 2.62 0 5.107 1.286 6.65 3.44l.005.006a.824.824 0 0 0 1.142.168.84.84 0 0 0 .194-1.145l-.004-.006C18.7 3.545 15.714 2 12.564 2Z" })));
21
+ };
22
+
23
+ export { OptionAppleCarplayIcon as default };
24
+ //# sourceMappingURL=OptionAppleCarplayIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionAppleCarplayIcon.js","sources":["../../../../src/components/Icon/__generated__/OptionAppleCarplayIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 | 20 | 24 | 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"optionAppleCarplay\"\n\nconst OptionAppleCarplayIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.092 7.72c-.085-.064-.182-.12-.262-.12a.374.374 0 0 0-.367.371v7.924a.375.375 0 0 0 .19.323.363.363 0 0 0 .37-.009c.07-.044 6.71-3.871 6.774-3.928a.371.371 0 0 0 .03-.53c-.067-.074-6.624-3.949-6.735-4.031Z\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.564 2C7.122 2 2.7 6.489 2.7 12s4.422 10 9.864 10c3.144 0 6.125-1.54 7.977-4.117l.005-.006a.84.84 0 0 0-.193-1.145.819.819 0 0 0-1.142.166l-.004.006c-1.545 2.148-4.028 3.429-6.643 3.429-4.526 0-8.214-3.736-8.214-8.333 0-4.598 3.688-8.333 8.214-8.333 2.62 0 5.107 1.286 6.65 3.44l.005.006a.824.824 0 0 0 1.142.168.84.84 0 0 0 .194-1.145l-.004-.006C18.7 3.545 15.714 2 12.564 2Z\"\n />\n </svg>\n )\n}\n\nexport default OptionAppleCarplayIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,oBAAoB,CAAA;IAEjC,sBAAsB,GAAG,UAAC,EAKpB;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,kNAAkN,GAAG;QAC7N,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6XAA6X,GAC/X,CACE,CACP,CAAA;AACH;;;;"}
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import capitalize from '../../utils/capitalize.js';
3
+ import 'lodash.throttle';
4
+ import cx from 'classnames';
5
+
6
+ var iconSource = "optionBluetoothAudio";
7
+ var OptionBluetoothAudioIcon = function (_a) {
8
+ var _b;
9
+ var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
10
+ var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
11
+ _b["cobalt-Icon--color".concat(capitalize(color))] = color,
12
+ _b["cobalt-Icon--size16"] = size === 16,
13
+ _b["cobalt-Icon--size20"] = size === 20,
14
+ _b["cobalt-Icon--size32"] = size === 32,
15
+ _b["cobalt-Icon--contained"] = contained,
16
+ _b));
17
+ var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
18
+ return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
19
+ React.createElement("path", { d: "M17.71 7.71 12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29ZM13 5.83l1.88 1.88L13 9.59V5.83Zm1.88 10.46L13 18.17v-3.76l1.88 1.88Z" })));
20
+ };
21
+
22
+ export { OptionBluetoothAudioIcon as default };
23
+ //# sourceMappingURL=OptionBluetoothAudioIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionBluetoothAudioIcon.js","sources":["../../../../src/components/Icon/__generated__/OptionBluetoothAudioIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 | 20 | 24 | 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"optionBluetoothAudio\"\n\nconst OptionBluetoothAudioIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.71 7.71 12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29ZM13 5.83l1.88 1.88L13 9.59V5.83Zm1.88 10.46L13 18.17v-3.76l1.88 1.88Z\" />\n </svg>\n )\n}\n\nexport default OptionBluetoothAudioIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,sBAAsB,CAAA;IAEnC,wBAAwB,GAAG,UAAC,EAKtB;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,iLAAiL,GAAG,CACxL,CACP,CAAA;AACH;;;;"}
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import capitalize from '../../utils/capitalize.js';
3
+ import 'lodash.throttle';
4
+ import cx from 'classnames';
5
+
6
+ var iconSource = "optionDashcam";
7
+ var OptionDashcamIcon = function (_a) {
8
+ var _b;
9
+ var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
10
+ var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
11
+ _b["cobalt-Icon--color".concat(capitalize(color))] = color,
12
+ _b["cobalt-Icon--size16"] = size === 16,
13
+ _b["cobalt-Icon--size20"] = size === 20,
14
+ _b["cobalt-Icon--size32"] = size === 32,
15
+ _b["cobalt-Icon--contained"] = contained,
16
+ _b));
17
+ var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
18
+ return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
19
+ React.createElement("path", { d: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4Z" })));
20
+ };
21
+
22
+ export { OptionDashcamIcon as default };
23
+ //# sourceMappingURL=OptionDashcamIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionDashcamIcon.js","sources":["../../../../src/components/Icon/__generated__/OptionDashcamIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n color?: IconColors\n size?: 16 | 20 | 24 | 32\n contained?: boolean\n className?: string\n}\nconst iconSource = \"optionDashcam\"\n\nconst OptionDashcamIcon = ({\n color,\n size = 24,\n contained = false,\n className,\n}: IconProps) => {\n const computedClassName = cx(\n className,\n `cobalt-Icon cobalt-Icon--${iconSource}`,\n {\n [`cobalt-Icon--color${capitalize(color)}`]: color,\n \"cobalt-Icon--size16\": size === 16,\n \"cobalt-Icon--size20\": size === 20,\n \"cobalt-Icon--size32\": size === 32,\n \"cobalt-Icon--contained\": contained,\n }\n )\n\n const wrap = (content: React.ReactNode) => (\n <span className={computedClassName}>{content}</span>\n )\n\n return wrap(\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4Z\" />\n </svg>\n )\n}\n\nexport default OptionDashcamIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,eAAe,CAAA;IAE5B,iBAAiB,GAAG,UAAC,EAKf;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,uGAAuG,GAAG,CAC9G,CACP,CAAA;AACH;;;;"}
@@ -0,0 +1,4 @@
1
+ var carAdd = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.882 7.539C19.039 4.819 17.36 3 15 3H8C5.64 3 3.96 4.82 3.118 7.539a1.75 1.75 0 10-.59 3.447C2.51 11.32 2.5 11.657 2.5 12v6a1 1 0 001 1h2a1 1 0 001-1v-1h6v-.8a2 2 0 012-2h1.2V13a2 2 0 012-2h1.6c.446 0 .857.146 1.19.392-.005-.136-.01-.271-.018-.406a1.75 1.75 0 10-.59-3.447zM6 15a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm-1-5c0-1 0-5 3.5-5h6C18 5 18 9 18 10H5z\"/><path d=\"M22.75 16.2a.25.25 0 00-.25-.25h-2.95V13a.25.25 0 00-.25-.25h-1.6a.25.25 0 00-.25.25v2.95H14.5a.25.25 0 00-.25.25v1.6c0 .138.112.25.25.25h2.95V21c0 .138.112.25.25.25h1.6a.25.25 0 00.25-.25v-2.95h2.95a.25.25 0 00.25-.25v-1.6z\"/></svg>";
2
+
3
+ export { carAdd as default };
4
+ //# sourceMappingURL=car-add.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"car-add.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.882 7.539C19.039 4.819 17.36 3 15 3H8C5.64 3 3.96 4.82 3.118 7.539a1.75 1.75 0 1 0-.59 3.447C2.51 11.32 2.5 11.657 2.5 12v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v-.8a2 2 0 0 1 2-2h1.2V13a2 2 0 0 1 2-2h1.6c.446 0 .857.146 1.19.392-.005-.136-.01-.271-.018-.406a1.75 1.75 0 1 0-.59-3.447ZM6 15a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm-1-5c0-1 0-5 3.5-5h6C18 5 18 9 18 10H5Z"/><path d="M22.75 16.2a.25.25 0 0 0-.25-.25h-2.95V13a.25.25 0 0 0-.25-.25h-1.6a.25.25 0 0 0-.25.25v2.95H14.5a.25.25 0 0 0-.25.25v1.6c0 .138.112.25.25.25h2.95V21c0 .138.112.25.25.25h1.6a.25.25 0 0 0 .25-.25v-2.95h2.95a.25.25 0 0 0 .25-.25v-1.6Z"/></svg>
package/icons/index.js CHANGED
@@ -5,6 +5,7 @@ export { default as bin } from './bin.js';
5
5
  export { default as briefcase } from './briefcase.js';
6
6
  export { default as bulb } from './bulb.js';
7
7
  export { default as camera } from './camera.js';
8
+ export { default as carAdd } from './car-add.js';
8
9
  export { default as carCheck } from './car-check.js';
9
10
  export { default as carDrivyOpen } from './car-drivy-open.js';
10
11
  export { default as carGroup } from './car-group.js';
@@ -68,12 +69,16 @@ export { default as mileage } from './mileage.js';
68
69
  export { default as miscGift } from './misc-gift.js';
69
70
  export { default as notification } from './notification.js';
70
71
  export { default as optionAirConditioning } from './option-air-conditioning.js';
72
+ export { default as optionAndroidAuto } from './option-android-auto.js';
73
+ export { default as optionAppleCarplay } from './option-apple-carplay.js';
71
74
  export { default as optionAudioInput } from './option-audio-input.js';
72
75
  export { default as optionBabySeat } from './option-baby-seat.js';
73
76
  export { default as optionBikeRack } from './option-bike-rack.js';
77
+ export { default as optionBluetoothAudio } from './option-bluetooth-audio.js';
74
78
  export { default as optionCdPlayer } from './option-cd-player.js';
75
79
  export { default as optionChains } from './option-chains.js';
76
80
  export { default as optionCruiseControl } from './option-cruise-control.js';
81
+ export { default as optionDashcam } from './option-dashcam.js';
77
82
  export { default as optionGps } from './option-gps.js';
78
83
  export { default as optionHasTrailer } from './option-has-trailer.js';
79
84
  export { default as optionHitch } from './option-hitch.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,4 @@
1
+ var optionAndroidAuto = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 00-.83.22l-1.88 3.24a11.463 11.463 0 00-8.94 0L5.65 5.67a.643.643 0 00-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 001 18h22a10.78 10.78 0 00-5.4-8.52zM7 15.25a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5zm10 0a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z\"/></svg>";
2
+
3
+ export { optionAndroidAuto as default };
4
+ //# sourceMappingURL=option-android-auto.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"option-android-auto.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52ZM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z"/></svg>
@@ -0,0 +1,4 @@
1
+ var optionAppleCarplay = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.092 7.72c-.085-.064-.182-.12-.262-.12a.374.374 0 00-.367.371v7.924a.375.375 0 00.19.323.363.363 0 00.37-.009c.07-.044 6.71-3.871 6.774-3.928a.371.371 0 00.03-.53c-.067-.074-6.624-3.949-6.735-4.031z\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.564 2C7.122 2 2.7 6.489 2.7 12s4.422 10 9.864 10c3.144 0 6.125-1.54 7.977-4.117l.005-.006a.84.84 0 00-.193-1.145.819.819 0 00-1.142.166l-.004.006c-1.545 2.148-4.028 3.429-6.643 3.429-4.526 0-8.214-3.736-8.214-8.333 0-4.598 3.688-8.333 8.214-8.333 2.62 0 5.107 1.286 6.65 3.44l.005.006a.824.824 0 001.142.168.84.84 0 00.194-1.145l-.004-.006C18.7 3.545 15.714 2 12.564 2z\"/></svg>";
2
+
3
+ export { optionAppleCarplay as default };
4
+ //# sourceMappingURL=option-apple-carplay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"option-apple-carplay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.092 7.72c-.085-.064-.182-.12-.262-.12a.374.374 0 0 0-.367.371v7.924a.375.375 0 0 0 .19.323.363.363 0 0 0 .37-.009c.07-.044 6.71-3.871 6.774-3.928a.371.371 0 0 0 .03-.53c-.067-.074-6.624-3.949-6.735-4.031Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.564 2C7.122 2 2.7 6.489 2.7 12s4.422 10 9.864 10c3.144 0 6.125-1.54 7.977-4.117l.005-.006a.84.84 0 0 0-.193-1.145.819.819 0 0 0-1.142.166l-.004.006c-1.545 2.148-4.028 3.429-6.643 3.429-4.526 0-8.214-3.736-8.214-8.333 0-4.598 3.688-8.333 8.214-8.333 2.62 0 5.107 1.286 6.65 3.44l.005.006a.824.824 0 0 0 1.142.168.84.84 0 0 0 .194-1.145l-.004-.006C18.7 3.545 15.714 2 12.564 2Z"/></svg>
@@ -0,0 +1,4 @@
1
+ var optionBluetoothAudio = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z\"/></svg>";
2
+
3
+ export { optionBluetoothAudio as default };
4
+ //# sourceMappingURL=option-bluetooth-audio.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"option-bluetooth-audio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.71 7.71 12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29ZM13 5.83l1.88 1.88L13 9.59V5.83Zm1.88 10.46L13 18.17v-3.76l1.88 1.88Z"/></svg>
@@ -0,0 +1,4 @@
1
+ var optionDashcam = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"/></svg>";
2
+
3
+ export { optionDashcam as default };
4
+ //# sourceMappingURL=option-dashcam.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"option-dashcam.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4Z"/></svg>
package/index.js CHANGED
@@ -53,6 +53,7 @@ export { default as BinIcon } from './components/Icon/__generated__/BinIcon.js';
53
53
  export { default as BriefcaseIcon } from './components/Icon/__generated__/BriefcaseIcon.js';
54
54
  export { default as BulbIcon } from './components/Icon/__generated__/BulbIcon.js';
55
55
  export { default as CameraIcon } from './components/Icon/__generated__/CameraIcon.js';
56
+ export { default as CarAddIcon } from './components/Icon/__generated__/CarAddIcon.js';
56
57
  export { default as CarCheckIcon } from './components/Icon/__generated__/CarCheckIcon.js';
57
58
  export { default as CarDrivyOpenIcon } from './components/Icon/__generated__/CarDrivyOpenIcon.js';
58
59
  export { default as CarGroupIcon } from './components/Icon/__generated__/CarGroupIcon.js';
@@ -115,12 +116,16 @@ export { default as MileageIcon } from './components/Icon/__generated__/MileageI
115
116
  export { default as MiscGiftIcon } from './components/Icon/__generated__/MiscGiftIcon.js';
116
117
  export { default as NotificationIcon } from './components/Icon/__generated__/NotificationIcon.js';
117
118
  export { default as OptionAirConditioningIcon } from './components/Icon/__generated__/OptionAirConditioningIcon.js';
119
+ export { default as OptionAndroidAutoIcon } from './components/Icon/__generated__/OptionAndroidAutoIcon.js';
120
+ export { default as OptionAppleCarplayIcon } from './components/Icon/__generated__/OptionAppleCarplayIcon.js';
118
121
  export { default as OptionAudioInputIcon } from './components/Icon/__generated__/OptionAudioInputIcon.js';
119
122
  export { default as OptionBabySeatIcon } from './components/Icon/__generated__/OptionBabySeatIcon.js';
120
123
  export { default as OptionBikeRackIcon } from './components/Icon/__generated__/OptionBikeRackIcon.js';
124
+ export { default as OptionBluetoothAudioIcon } from './components/Icon/__generated__/OptionBluetoothAudioIcon.js';
121
125
  export { default as OptionCdPlayerIcon } from './components/Icon/__generated__/OptionCdPlayerIcon.js';
122
126
  export { default as OptionChainsIcon } from './components/Icon/__generated__/OptionChainsIcon.js';
123
127
  export { default as OptionCruiseControlIcon } from './components/Icon/__generated__/OptionCruiseControlIcon.js';
128
+ export { default as OptionDashcamIcon } from './components/Icon/__generated__/OptionDashcamIcon.js';
124
129
  export { default as OptionGpsIcon } from './components/Icon/__generated__/OptionGpsIcon.js';
125
130
  export { default as OptionHasTrailerIcon } from './components/Icon/__generated__/OptionHasTrailerIcon.js';
126
131
  export { default as OptionHitchIcon } from './components/Icon/__generated__/OptionHitchIcon.js';
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.14.2",
3
+ "version": "0.14.6",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
@@ -28,10 +28,10 @@
28
28
  "@react-spring/web": "9.3.0",
29
29
  "@tippyjs/react": "4.2.6",
30
30
  "classnames": "2.3.1",
31
- "date-fns": "2.27.0",
31
+ "date-fns": "2.28.0",
32
32
  "lodash.throttle": "4.1.1",
33
33
  "media-typer": "1.1.0",
34
- "nanoid": "3.1.30",
34
+ "nanoid": "3.2.0",
35
35
  "postcss": "8.4.5",
36
36
  "tailwindcss": "2.2.19",
37
37
  "tippy.js": "6.3.7"
@@ -49,25 +49,25 @@
49
49
  "@percy/storybook": "3.3.1",
50
50
  "@rollup/plugin-json": "4.1.0",
51
51
  "@rushstack/eslint-patch": "1.1.0",
52
- "@storybook/addon-essentials": "6.4.13",
53
- "@storybook/addons": "6.4.13",
54
- "@storybook/builder-webpack5": "6.4.13",
55
- "@storybook/manager-webpack5": "6.4.13",
56
- "@storybook/react": "6.4.13",
52
+ "@storybook/addon-essentials": "6.4.14",
53
+ "@storybook/addons": "6.4.14",
54
+ "@storybook/builder-webpack5": "6.4.14",
55
+ "@storybook/manager-webpack5": "6.4.14",
56
+ "@storybook/react": "6.4.14",
57
57
  "@svgr/cli": "5.5.0",
58
58
  "@testing-library/jest-dom": "5.16.1",
59
59
  "@testing-library/react": "12.1.2",
60
60
  "@testing-library/react-hooks": "7.0.2",
61
61
  "@types/classnames": "2.3.0",
62
- "@types/jest": "27.0.3",
62
+ "@types/jest": "27.4.0",
63
63
  "@types/lodash.throttle": "4.1.6",
64
64
  "@types/media-typer": "1.1.1",
65
65
  "@types/react": "17.0.38",
66
- "autoprefixer": "10.4.0",
67
- "core-js": "3.20.1",
66
+ "autoprefixer": "10.4.2",
67
+ "core-js": "3.20.3",
68
68
  "css-loader": "6.5.1",
69
- "eslint": "8.5.0",
70
- "jest": "27.4.5",
69
+ "eslint": "8.7.0",
70
+ "jest": "27.4.7",
71
71
  "np": "7.6.0",
72
72
  "postcss-flexbugs-fixes": "5.0.2",
73
73
  "postcss-loader": "6.2.1",
@@ -77,7 +77,7 @@
77
77
  "react-dom": "17.0.2",
78
78
  "react-test-renderer": "17.0.2",
79
79
  "regenerator-runtime": "0.13.9",
80
- "rollup": "2.61.1",
80
+ "rollup": "2.66.1",
81
81
  "rollup-plugin-copy": "3.4.0",
82
82
  "rollup-plugin-postcss": "4.0.2",
83
83
  "rollup-plugin-svgo": "1.1.0",
@@ -85,10 +85,10 @@
85
85
  "sass": "1.49.0",
86
86
  "sass-loader": "12.4.0",
87
87
  "style-loader": "3.3.1",
88
- "stylelint": "14.2.0",
88
+ "stylelint": "14.3.0",
89
89
  "svgo": "2.8.0",
90
90
  "ts-jest": "27.1.3",
91
- "typescript": "4.5.4"
91
+ "typescript": "4.5.5"
92
92
  },
93
93
  "scripts": {
94
94
  "build": "./scripts/build.sh",
@@ -48,6 +48,7 @@ $group-item-spacing: spacing(tight);
48
48
  font-family: font-family(brand);
49
49
  font-weight: 600;
50
50
  text-align: center;
51
+ white-space: normal;
51
52
 
52
53
  border-radius: border-radius(large);
53
54
  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
@@ -67,6 +67,7 @@
67
67
  font-family: font-family(brand);
68
68
  font-weight: 600;
69
69
  text-align: center;
70
+ white-space: normal;
70
71
 
71
72
  border-radius: border-radius(md);
72
73
  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
@@ -37,7 +37,7 @@
37
37
 
38
38
  flex: 0 0 auto;
39
39
 
40
- margin-right: spacing(tight);
40
+ margin-right: spacing(extra-tight);
41
41
  border: 2px solid $checkmark-color;
42
42
 
43
43
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
@@ -196,7 +196,7 @@
196
196
  @include form-field-container;
197
197
 
198
198
  .cobalt-Hint {
199
- margin: spacing(extra-tight) 0 0 spacing(medium);
199
+ margin: spacing(extra-tight) 0 0 spacing();
200
200
  }
201
201
  }
202
202
  }
@@ -57,7 +57,7 @@ $form-element--error-color: color(essence);
57
57
 
58
58
  transition: border-color 150ms ease-in-out;
59
59
 
60
- &:not(:disabled):hover {
60
+ &:not(:disabled):not(:read-only):hover {
61
61
  border: 1px solid $form-element--default-color;
62
62
 
63
63
  color: color(graphite);
@@ -65,7 +65,7 @@ $form-element--error-color: color(essence);
65
65
  box-shadow: elevation(light);
66
66
  }
67
67
 
68
- &:not(:disabled):focus {
68
+ &:not(:disabled):not(:read-only):focus {
69
69
  border-color: $form-element--default-active-color;
70
70
 
71
71
  border-width: 1px;
@@ -76,12 +76,24 @@ $form-element--error-color: color(essence);
76
76
  inset 0 0 0 1px $form-element--default-active-color;
77
77
  }
78
78
 
79
- &[disabled] {
79
+ &:not(select):read-only:focus {
80
+ border-width: 1px;
81
+
82
+ outline: none;
83
+
84
+ box-shadow: elevation(light);
85
+ }
86
+
87
+ &:disabled,
88
+ &:not(select):read-only {
80
89
  border-color: $form-element--default-color;
81
90
 
82
91
  color: color(graphite, light);
83
92
 
84
93
  background-color: color(acier, light);
94
+ }
95
+
96
+ &:disabled {
85
97
  pointer-events: none;
86
98
  }
87
99
  }
package/tokens/icons.js CHANGED
@@ -6,6 +6,7 @@ const icons = {
6
6
  briefcase: "briefcase.svg",
7
7
  bulb: "bulb.svg",
8
8
  camera: "camera.svg",
9
+ carAdd: "car-add.svg",
9
10
  carCheck: "car-check.svg",
10
11
  carDrivyOpen: "car-drivy-open.svg",
11
12
  carGroup: "car-group.svg",
@@ -69,12 +70,16 @@ const icons = {
69
70
  miscGift: "misc-gift.svg",
70
71
  notification: "notification.svg",
71
72
  optionAirConditioning: "option-air-conditioning.svg",
73
+ optionAndroidAuto: "option-android-auto.svg",
74
+ optionAppleCarplay: "option-apple-carplay.svg",
72
75
  optionAudioInput: "option-audio-input.svg",
73
76
  optionBabySeat: "option-baby-seat.svg",
74
77
  optionBikeRack: "option-bike-rack.svg",
78
+ optionBluetoothAudio: "option-bluetooth-audio.svg",
75
79
  optionCdPlayer: "option-cd-player.svg",
76
80
  optionChains: "option-chains.svg",
77
81
  optionCruiseControl: "option-cruise-control.svg",
82
+ optionDashcam: "option-dashcam.svg",
78
83
  optionGps: "option-gps.svg",
79
84
  optionHasTrailer: "option-has-trailer.svg",
80
85
  optionHitch: "option-hitch.svg",
@@ -1 +1 @@
1
- {"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}