@kenlo/sds-design-system 0.9.9

package/icons/social/social-linkedin-color.marko

@@ -0,0 +1,8 @@
+<!-- social-linkedin-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export LinkedInColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path d="M7.68851 8.4H3.81149C3.63942 8.4 3.5 8.53439 3.5 8.7001V20.6999C3.5 20.8657 3.63942 21 3.81149 21H7.68851C7.86058 21 8 20.8657 8 20.6999V8.7001C8 8.53439 7.86058 8.4 7.68851 8.4Z" fill="#006699" />
+      <path d="M16.9339 8.4C15.4991 8.4 14.4385 9.03001 13.7952 9.74585V8.98451C13.7952 8.82262 13.6667 8.69134 13.5081 8.69134H10.087C9.92847 8.69134 9.8 8.82262 9.8 8.98451V20.7068C9.8 20.8687 9.92847 20.9999 10.087 20.9999H13.6515C13.8101 20.9999 13.9385 20.8687 13.9385 20.7068V14.907C13.9385 12.9526 14.4583 12.1912 15.7921 12.1912C17.2447 12.1912 17.3601 13.4118 17.3601 15.0075V20.7068C17.3601 20.8688 17.4886 21 17.6471 21H21.213C21.3715 21 21.5 20.8688 21.5 20.7068V14.277C21.5 11.3708 20.9575 8.4 16.9339 8.4Z" fill="#006699" />
+      <path d="M5.7509 3C4.50974 3 3.5 4.00914 3.5 5.24953C3.5 6.49048 4.50974 7.5 5.7509 7.5C6.99108 7.5 8 6.49042 8 5.24953C8.00005 4.00914 6.99108 3 5.7509 3Z" fill="#006699" />
+    </svg>

package/icons/social/social-linkedin.marko

@@ -0,0 +1,8 @@
+<!-- social-linkedin — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export LinkedIn.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path d="M7.68851 8.4H3.81149C3.63942 8.4 3.5 8.53439 3.5 8.7001V20.6999C3.5 20.8657 3.63942 21 3.81149 21H7.68851C7.86058 21 8 20.8657 8 20.6999V8.7001C8 8.53439 7.86058 8.4 7.68851 8.4Z" fill="currentColor" />
+      <path d="M16.9339 8.4C15.4991 8.4 14.4385 9.03001 13.7952 9.74585V8.98451C13.7952 8.82262 13.6667 8.69134 13.5081 8.69134H10.087C9.92847 8.69134 9.8 8.82262 9.8 8.98451V20.7068C9.8 20.8687 9.92847 20.9999 10.087 20.9999H13.6515C13.8101 20.9999 13.9385 20.8687 13.9385 20.7068V14.907C13.9385 12.9526 14.4583 12.1912 15.7921 12.1912C17.2447 12.1912 17.3601 13.4118 17.3601 15.0075V20.7068C17.3601 20.8688 17.4886 21 17.6471 21H21.213C21.3715 21 21.5 20.8688 21.5 20.7068V14.277C21.5 11.3708 20.9575 8.4 16.9339 8.4Z" fill="currentColor" />
+      <path d="M5.7509 3C4.50974 3 3.5 4.00914 3.5 5.24953C3.5 6.49048 4.50974 7.5 5.7509 7.5C6.99108 7.5 8 6.49042 8 5.24953C8.00005 4.00914 6.99108 3 5.7509 3Z" fill="currentColor" />
+    </svg>

package/icons/social/social-messenger-color.marko

@@ -0,0 +1,15 @@
+<!-- social-messenger-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export MessengerColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <ellipse cx="12" cy="11.5" rx="9" ry="8.5" fill="var(--color-white)" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 11.6997C2 6.12739 6.3675 2 12 2C17.6325 2 22 6.12989 22 11.7022C22 17.2746 17.6325 21.402 12 21.402C10.9875 21.402 10.0175 21.267 9.105 21.017C8.9275 20.9695 8.7375 20.982 8.57 21.057L6.585 21.932C6.46511 21.9848 6.33407 22.0075 6.2034 21.9978C6.07272 21.9882 5.94641 21.9467 5.83556 21.8768C5.72471 21.8069 5.63271 21.7109 5.56767 21.5972C5.50262 21.4834 5.4665 21.3554 5.4625 21.2245L5.4075 19.4445C5.4025 19.2245 5.3025 19.0195 5.14 18.8745C3.195 17.1346 2 14.6147 2 11.6997ZM8.9325 9.87728L5.995 14.5372C5.7125 14.9846 6.2625 15.4871 6.6825 15.1671L9.8375 12.7722C9.94131 12.6934 10.068 12.6505 10.1983 12.65C10.3287 12.6496 10.4556 12.6916 10.56 12.7697L12.8975 14.5222C13.0633 14.6467 13.2531 14.7355 13.455 14.7829C13.6568 14.8304 13.8663 14.8355 14.0702 14.7979C14.2741 14.7603 14.468 14.6808 14.6397 14.5645C14.8113 14.4482 14.957 14.2976 15.0675 14.1222L18.0075 9.46479C18.2875 9.0173 17.7375 8.51232 17.3175 8.83231L14.1625 11.2272C14.0587 11.3061 13.932 11.349 13.8017 11.3494C13.6713 11.3499 13.5444 11.3079 13.44 11.2297L11.1025 9.47729C10.9367 9.35278 10.7469 9.26399 10.5451 9.21654C10.3432 9.16908 10.1337 9.16398 9.92981 9.20157C9.7259 9.23916 9.53199 9.31861 9.36034 9.43491C9.18868 9.55121 9.043 9.70184 8.9325 9.87728Z" fill="url(#messenger-color-grad)" />
+      <defs>
+        <radialGradient id="messenger-color-grad" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.35 21.9995) scale(22 21.9994)">
+          <stop stop-color="#0099FF" />
+          <stop offset="0.6" stop-color="#A033FF" />
+          <stop offset="0.9" stop-color="#FF5280" />
+          <stop offset="1" stop-color="#FF7061" />
+        </radialGradient>
+      </defs>
+    </svg>

package/icons/social/social-messenger.marko

@@ -0,0 +1,6 @@
+<!-- social-messenger — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export Messenger.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 11.6997C2 6.12739 6.3675 2 12 2C17.6325 2 22 6.12989 22 11.7022C22 17.2746 17.6325 21.402 12 21.402C10.9875 21.402 10.0175 21.267 9.105 21.017C8.9275 20.9695 8.7375 20.982 8.57 21.057L6.585 21.932C6.46511 21.9848 6.33407 22.0075 6.2034 21.9978C6.07272 21.9882 5.94641 21.9467 5.83556 21.8768C5.72471 21.8069 5.63271 21.7109 5.56767 21.5972C5.50262 21.4834 5.4665 21.3554 5.4625 21.2245L5.4075 19.4445C5.4025 19.2245 5.3025 19.0195 5.14 18.8745C3.195 17.1346 2 14.6147 2 11.6997ZM8.9325 9.87728L5.995 14.5372C5.7125 14.9846 6.2625 15.4871 6.6825 15.1671L9.8375 12.7722C9.94131 12.6934 10.068 12.6505 10.1983 12.65C10.3287 12.6496 10.4556 12.6916 10.56 12.7697L12.8975 14.5222C13.0633 14.6467 13.2531 14.7355 13.455 14.7829C13.6568 14.8304 13.8663 14.8355 14.0702 14.7979C14.2741 14.7603 14.468 14.6808 14.6397 14.5645C14.8113 14.4482 14.957 14.2976 15.0675 14.1222L18.0075 9.46479C18.2875 9.0173 17.7375 8.51232 17.3175 8.83231L14.1625 11.2272C14.0587 11.3061 13.932 11.349 13.8017 11.3494C13.6713 11.3499 13.5444 11.3079 13.44 11.2297L11.1025 9.47729C10.9367 9.35278 10.7469 9.26399 10.5451 9.21654C10.3432 9.16908 10.1337 9.16398 9.92981 9.20157C9.7259 9.23916 9.53199 9.31861 9.36034 9.43491C9.18868 9.55121 9.043 9.70184 8.9325 9.87728Z" fill="currentColor" />
+    </svg>

package/icons/social/social-pinterest-color.marko

@@ -0,0 +1,6 @@
+<!-- social-pinterest-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export PinterestColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path d="M7.54308 21.9879C6.90819 21.7701 7.31377 18.3776 7.39313 18.0541C7.61634 17.1489 8.88694 11.9776 8.88694 11.9776C8.88694 11.9776 8.51607 11.2655 8.51607 10.2132C8.51607 8.56055 9.51321 7.3263 10.7551 7.3263C11.8111 7.3263 12.3212 8.08818 12.3212 9.00052C12.3212 10.0202 11.6442 11.5454 11.296 12.9581C11.0051 14.1411 11.9135 15.1059 13.1284 15.1059C15.328 15.1059 16.8095 12.3922 16.8095 9.17686C16.8095 6.73274 15.0957 4.90335 11.9787 4.90335C8.45702 4.90335 6.26311 7.42605 6.26311 10.2439C6.26311 11.2155 6.56133 11.9006 7.02843 12.4312C7.2432 12.6749 7.27304 12.7729 7.19531 13.0527C7.13963 13.2579 7.01174 13.7519 6.95877 13.9477C6.8815 14.2301 6.64323 14.3311 6.37748 14.2268C4.75543 13.5907 4 11.8844 4 9.96635C4 6.79851 6.78137 3 12.2973 3C16.7297 3 19.6471 6.08098 19.6471 9.38821C19.6471 13.7629 17.1151 17.0311 13.3829 17.0311C12.1295 17.0311 10.9505 16.3803 10.5466 15.641C10.5466 15.641 9.87265 18.2104 9.72989 18.7066C9.52525 19.4214 8.17797 22.2057 7.54308 21.9879Z" fill="#CB1F27" />
+    </svg>

package/icons/social/social-pinterest.marko

@@ -0,0 +1,6 @@
+<!-- social-pinterest — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export Pinterest.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path d="M7.54308 21.9879C6.90819 21.7701 7.31377 18.3776 7.39313 18.0541C7.61634 17.1489 8.88694 11.9776 8.88694 11.9776C8.88694 11.9776 8.51607 11.2655 8.51607 10.2132C8.51607 8.56055 9.51321 7.3263 10.7551 7.3263C11.8111 7.3263 12.3212 8.08818 12.3212 9.00052C12.3212 10.0202 11.6442 11.5454 11.296 12.9581C11.0051 14.1411 11.9135 15.1059 13.1284 15.1059C15.328 15.1059 16.8095 12.3922 16.8095 9.17686C16.8095 6.73274 15.0957 4.90335 11.9787 4.90335C8.45702 4.90335 6.26311 7.42605 6.26311 10.2439C6.26311 11.2155 6.56133 11.9006 7.02843 12.4312C7.2432 12.6749 7.27304 12.7729 7.19531 13.0527C7.13963 13.2579 7.01174 13.7519 6.95877 13.9477C6.8815 14.2301 6.64323 14.3311 6.37748 14.2268C4.75543 13.5907 4 11.8844 4 9.96635C4 6.79851 6.78137 3 12.2973 3C16.7297 3 19.6471 6.08098 19.6471 9.38821C19.6471 13.7629 17.1151 17.0311 13.3829 17.0311C12.1295 17.0311 10.9505 16.3803 10.5466 15.641C10.5466 15.641 9.87265 18.2104 9.72989 18.7066C9.52525 19.4214 8.17797 22.2057 7.54308 21.9879Z" fill="currentColor" />
+    </svg>

package/icons/social/social-telegram-color.marko

@@ -0,0 +1,7 @@
+<!-- social-telegram-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export TelegramColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <circle cx="12" cy="12" r="9" fill="var(--color-white)" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM17.2623 6.68698C17.1216 6.5688 16.9058 6.54354 16.8081 6.54556C16.3677 6.55365 15.6909 6.79709 12.4368 8.19714C11.2961 8.68706 9.01867 9.70225 5.60247 11.2417C5.04776 11.47 4.75672 11.6932 4.73036 11.9114C4.68569 12.2801 5.13135 12.4254 5.73907 12.6234C5.8223 12.6505 5.90856 12.6786 5.99702 12.7084C6.59569 12.9094 7.40042 13.1448 7.81841 13.1529C8.19831 13.163 8.62119 13.0014 9.08996 12.668C12.2815 10.4407 13.9291 9.31334 14.0326 9.2891C14.1059 9.27193 14.2074 9.25072 14.2758 9.31334C14.3441 9.37597 14.3373 9.49517 14.3305 9.52749C14.2859 9.72203 12.5379 11.4033 11.6294 12.2771C11.3445 12.5512 11.1421 12.7459 11.1008 12.7902C11.0093 12.8884 10.9161 12.9813 10.8264 13.0706C10.2701 13.6247 9.85219 14.0411 10.8488 14.7196C11.3282 15.0466 11.7116 15.3168 12.0944 15.5865C12.511 15.8801 12.9267 16.173 13.4642 16.5379C13.6018 16.6311 13.7332 16.7279 13.8612 16.8222C14.3462 17.1798 14.7819 17.501 15.3198 17.449C15.6333 17.4197 15.9565 17.1157 16.1206 16.2065C16.5093 14.06 17.273 9.40931 17.4488 7.49206C17.4644 7.32438 17.4449 7.10922 17.4293 7.01528C17.4153 6.88808 17.3557 6.77092 17.2623 6.68698Z" fill="#5B8FE8" />
+    </svg>

package/icons/social/social-telegram.marko

@@ -0,0 +1,6 @@
+<!-- social-telegram — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export Telegram.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM17.2623 6.68698C17.1216 6.5688 16.9058 6.54354 16.8081 6.54556C16.3677 6.55365 15.6909 6.79709 12.4368 8.19714C11.2961 8.68706 9.01867 9.70225 5.60247 11.2417C5.04776 11.47 4.75672 11.6932 4.73036 11.9114C4.68569 12.2801 5.13135 12.4254 5.73907 12.6234C5.8223 12.6505 5.90856 12.6786 5.99702 12.7084C6.59569 12.9094 7.40042 13.1448 7.81841 13.1529C8.19831 13.163 8.62119 13.0014 9.08996 12.668C12.2815 10.4407 13.9291 9.31334 14.0326 9.2891C14.1059 9.27193 14.2074 9.25072 14.2758 9.31334C14.3441 9.37597 14.3373 9.49517 14.3305 9.52749C14.2859 9.72203 12.5379 11.4033 11.6294 12.2771C11.3445 12.5512 11.1421 12.7459 11.1008 12.7902C11.0093 12.8884 10.9161 12.9813 10.8264 13.0706C10.2701 13.6247 9.85219 14.0411 10.8488 14.7196C11.3282 15.0466 11.7116 15.3168 12.0944 15.5865C12.511 15.8801 12.9267 16.173 13.4642 16.5379C13.6018 16.6311 13.7332 16.7279 13.8612 16.8222C14.3462 17.1798 14.7819 17.501 15.3198 17.449C15.6333 17.4197 15.9565 17.1157 16.1206 16.2065C16.5093 14.06 17.273 9.40931 17.4488 7.49206C17.4644 7.32438 17.4449 7.10922 17.4293 7.01528C17.4153 6.88808 17.3557 6.77092 17.2623 6.68698Z" fill="currentColor" />
+    </svg>

package/icons/social/social-whatsapp-color.marko

@@ -0,0 +1,8 @@
+<!-- social-whatsapp-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export WhatsAppColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9964 21.5479C17.2004 21.5479 21.4191 17.3292 21.4191 12.1252C21.4191 6.92124 17.2004 2.70256 11.9964 2.70256C6.79241 2.70256 2.57373 6.92124 2.57373 12.1252C2.57373 13.7711 3.35624 16.0795 4.00833 16.8875L3.65797 19.0925L3.25767 21.4894L7.59481 20.4427C8.57295 21.0891 10.5366 21.5479 11.9964 21.5479Z" fill="#25D366" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22.2085C17.5228 22.2085 22 17.6847 22 12.1043C22 6.52383 17.5228 2 12 2C6.47715 2 2 6.52383 2 12.1043C2 13.8692 2.44782 15.5284 3.23492 16.9722L2.37439 22.1787C2.37439 22.1787 2.35822 22.3017 2.40394 22.3479C2.4557 22.4002 2.60098 22.3479 2.60098 22.3479L7.67488 21.2171C8.98381 21.8525 10.4508 22.2085 12 22.2085ZM12 20.7236C16.6944 20.7236 20.5 16.87 20.5 12.1163C20.5 7.36261 16.6944 3.50897 12 3.50897C7.30558 3.50897 3.5 7.36261 3.5 12.1163C3.5 13.6197 4.20588 15.7284 4.79412 16.4665L4.47807 18.4806L4.11696 20.6702L8.02941 19.714C8.91176 20.3045 10.6831 20.7236 12 20.7236Z" fill="var(--color-white)" />
+      <path d="M14.3659 13.2793C14.0368 13.3395 13.4272 14.564 13.0374 14.564C12.6475 14.564 11.7424 14.032 10.9743 13.3617C10.2062 12.6914 9.34624 11.5037 9.34624 11.1265C9.34624 10.7916 10.2173 10.3436 10.2173 9.78354C10.2173 9.56029 10.0002 9.0498 9.83712 8.62305C9.59105 7.97926 9.41443 7.26333 9.10892 7.18806C8.80341 7.11279 8.25125 7.09438 8.07148 7.17805C7.8917 7.26173 6.76471 7.98086 6.76471 9.61552C6.76471 10.3628 7.00691 11.1606 7.74104 12.2859C8.39553 13.2892 9.15192 14.2699 10.0765 15.0341C10.9613 15.7652 11.8986 16.2434 12.73 16.5307C13.4697 16.805 14.1067 16.9722 14.5093 16.9722C15.5031 16.9722 16.2712 16.4512 16.6303 15.9185C16.8606 15.577 16.9296 14.9652 16.9296 14.7043C16.9296 14.5088 16.9396 14.5036 16.3012 14.1624C15.1739 13.6206 14.6752 13.189 14.3659 13.2793Z" fill="var(--color-white)" />
+    </svg>

package/icons/social/social-whatsapp.marko

@@ -0,0 +1,7 @@
+<!-- social-whatsapp — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export WhatsApp.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.8403C17.5228 21.8403 22 17.3989 22 11.9202C22 6.44141 17.5228 2 12 2C6.47715 2 2 6.44141 2 11.9202C2 13.6529 2.44782 15.2819 3.23492 16.6995L2.37439 21.811C2.37439 21.811 2.35822 21.9318 2.40394 21.9772C2.4557 22.0285 2.60098 21.9772 2.60098 21.9772L7.67488 20.867C8.98381 21.4909 10.4508 21.8403 12 21.8403ZM12 20.3825C16.6944 20.3825 20.5 16.5991 20.5 11.932C20.5 7.26491 16.6944 3.48148 12 3.48148C7.30558 3.48148 3.5 7.26491 3.5 11.932C3.5 13.408 4.20588 15.4783 4.79412 16.2029L4.47807 18.1804L4.11696 20.33L8.02941 19.3913C8.91176 19.971 10.6831 20.3825 12 20.3825Z" fill="currentColor" />
+      <path d="M14.3659 13.0738C14.0368 13.1329 13.4272 14.3351 13.0374 14.3351C12.6475 14.3351 11.7424 13.8128 10.9743 13.1547C10.2062 12.4967 9.34624 11.3305 9.34624 10.9602C9.34624 10.6314 10.2173 10.1916 10.2173 9.64173C10.2173 9.42256 10.0002 8.92136 9.83712 8.50238C9.59105 7.87033 9.41443 7.16744 9.10892 7.09354C8.80341 7.01965 8.25125 7.00156 8.07148 7.08372C7.8917 7.16587 6.76471 7.87189 6.76471 9.47678C6.76471 10.2105 7.00691 10.9937 7.74104 12.0985C8.39553 13.0835 9.15192 14.0464 10.0765 14.7966C10.9613 15.5144 11.8986 15.9839 12.73 16.266C13.4697 16.5353 14.1067 16.6995 14.5093 16.6995C15.5031 16.6995 16.2712 16.1879 16.6303 15.6649C16.8606 15.3296 16.9296 14.729 16.9296 14.4728C16.9296 14.2809 16.9396 14.2758 16.3012 13.9409C15.1739 13.4088 14.6752 12.9852 14.3659 13.0738Z" fill="currentColor" />
+    </svg>

package/icons/social/social-x-color.marko

@@ -0,0 +1,7 @@
+<!-- social-x-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export XColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <circle cx="12" cy="12" r="9" fill="var(--color-white)" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM9.57328 6H6L10.6848 12.6714L6 18H7.05866L11.1549 13.3408L14.4267 18H18L13.1415 11.0813L17.6089 6H16.5503L12.6714 10.4119L9.57328 6ZM9.06615 6.7798H7.44011L14.9248 17.2557H16.5508L9.06615 6.7798Z" fill="var(--color-black)" />
+    </svg>

package/icons/social/social-x.marko

@@ -0,0 +1,6 @@
+<!-- social-x — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export X.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM9.57328 6H6L10.6848 12.6714L6 18H7.05866L11.1549 13.3408L14.4267 18H18L13.1415 11.0813L17.6089 6H16.5503L12.6714 10.4119L9.57328 6ZM9.06615 6.7798H7.44011L14.9248 17.2557H16.5508L9.06615 6.7798Z" fill="currentColor" />
+    </svg>

package/icons/social/social-youtube-color.marko

@@ -0,0 +1,7 @@
+<!-- social-youtube-color — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export YouTubeColor.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <ellipse cx="12" cy="12" rx="9" ry="6" fill="var(--color-white)" />
+      <path d="M11.9999 5C8.07733 5 4.15489 5.30155 3.29294 5.90493C1.56902 7.11167 1.56902 16.8882 3.29294 18.0949C5.01684 19.3017 18.9832 19.3017 20.7071 18.0949C22.431 16.8882 22.431 7.11167 20.7071 5.90493C19.8451 5.30155 15.9224 5 11.9999 5ZM10.0106 9.07306L15.0584 12.0001L10.0106 14.9268V9.07306Z" fill="#FF0000" />
+    </svg>

package/icons/social/social-youtube.marko

@@ -0,0 +1,6 @@
+<!-- social-youtube — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/Icon/social/index.tsx, export YouTube.
+     Divergence: none beyond React-to-Marko syntax. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" class=input.class>
+      <path d="M11.9999 5C8.07733 5 4.15489 5.30155 3.29294 5.90493C1.56902 7.11167 1.56902 16.8882 3.29294 18.0949C5.01684 19.3017 18.9832 19.3017 20.7071 18.0949C22.431 16.8882 22.431 7.11167 20.7071 5.90493C19.8451 5.30155 15.9224 5 11.9999 5ZM10.0106 9.07306L15.0584 12.0001L10.0106 14.9268V9.07306Z" fill="currentColor" />
+    </svg>

package/marko.json

@@ -0,0 +1,203 @@
+{
+  "taglib-id": "@kenlo/sds-design-system",
+  "tags-dir": [
+    "./icons/generated",
+    "./icons/social",
+    "./icons/custom"
+  ],
+  "<sds-icon>": {
+    "template": "./components/Icon/icon.marko"
+  },
+  "<sds-badge>": {
+    "template": "./components/Badge/badge.marko"
+  },
+  "<sds-badge-dismissible>": {
+    "template": "./components/Badge/badge-dismissible.marko"
+  },
+  "<sds-accordion>": {
+    "template": "./components/Accordion/accordion.marko"
+  },
+  "<sds-text>": {
+    "template": "./components/Text/text.marko"
+  },
+  "<sds-spinner>": {
+    "template": "./components/Spinner/spinner.marko"
+  },
+  "<sds-icon-button>": {
+    "template": "./components/IconButton/icon-button.marko"
+  },
+  "<sds-button>": {
+    "template": "./components/Button/button.marko"
+  },
+  "<sds-notification>": {
+    "template": "./components/Notification/notification.marko"
+  },
+  "<sds-floating>": {
+    "template": "./components/Floating/floating.marko"
+  },
+  "<sds-form>": {
+    "template": "./components/Form/form.marko"
+  },
+  "<sds-header>": {
+    "template": "./components/Header/header.marko"
+  },
+  "<sds-table>": {
+    "template": "./components/Table/table.marko"
+  },
+  "<sds-table-header>": {
+    "template": "./components/Table/table-header.marko"
+  },
+  "<sds-table-cell>": {
+    "template": "./components/Table/table-cell.marko"
+  },
+  "<sds-date-picker>": {
+    "template": "./components/DatePicker/date-picker.marko"
+  },
+  "<sds-gradient-picker>": {
+    "template": "./components/GradientPicker/gradient-picker.marko"
+  },
+  "<sds-color-picker>": {
+    "template": "./components/ColorPicker/color-picker.marko"
+  },
+  "<sds-text-editor>": {
+    "template": "./components/TextEditor/text-editor.marko"
+  },
+  "<sds-uploader>": {
+    "template": "./components/Uploader/uploader.marko"
+  },
+  "<sds-bulk-action-bar>": {
+    "template": "./components/BulkActionBar/bulk-action-bar.marko"
+  },
+  "<sds-attachment-list>": {
+    "template": "./components/AttachmentList/attachment-list.marko"
+  },
+  "<sds-attachment-row>": {
+    "template": "./components/AttachmentList/attachment-row.marko"
+  },
+  "<sds-toast>": {
+    "template": "./components/Toast/toast.marko"
+  },
+  "<sds-toaster>": {
+    "template": "./components/Toast/toaster.marko"
+  },
+  "<sds-bottom-sheet>": {
+    "template": "./components/BottomSheet/bottom-sheet.marko"
+  },
+  "<sds-drawer>": {
+    "template": "./components/Drawer/drawer.marko"
+  },
+  "<sds-modal>": {
+    "template": "./components/Modal/modal.marko"
+  },
+  "<sds-tooltip>": {
+    "template": "./components/Tooltip/tooltip.marko"
+  },
+  "<sds-popover>": {
+    "template": "./components/Popover/popover.marko"
+  },
+  "<sds-search-bar>": {
+    "template": "./components/SearchBar/search-bar.marko"
+  },
+  "<sds-input>": {
+    "template": "./components/Input/input.marko"
+  },
+  "<sds-nav>": {
+    "template": "./components/Nav/nav.marko"
+  },
+  "<sds-menu>": {
+    "template": "./components/Menu/menu.marko"
+  },
+  "<sds-checkbox>": {
+    "template": "./components/Checkbox/checkbox.marko"
+  },
+  "<sds-pill>": {
+    "template": "./components/Pill/pill.marko"
+  },
+  "<sds-select>": {
+    "template": "./components/Select/select.marko"
+  },
+  "<sds-avatar>": {
+    "template": "./components/Avatar/avatar.marko"
+  },
+  "<sds-skeleton>": {
+    "template": "./components/Skeleton/skeleton.marko"
+  },
+  "<sds-skeleton-avatar>": {
+    "template": "./components/Skeleton/skeleton-avatar.marko"
+  },
+  "<sds-skeleton-button>": {
+    "template": "./components/Skeleton/skeleton-button.marko"
+  },
+  "<sds-skeleton-input>": {
+    "template": "./components/Skeleton/skeleton-input.marko"
+  },
+  "<sds-skeleton-image>": {
+    "template": "./components/Skeleton/skeleton-image.marko"
+  },
+  "<sds-alert>": {
+    "template": "./components/Alert/alert.marko"
+  },
+  "<sds-card>": {
+    "template": "./components/Card/card.marko"
+  },
+  "<sds-card-header>": {
+    "template": "./components/Card/card-header.marko"
+  },
+  "<sds-card-body>": {
+    "template": "./components/Card/card-body.marko"
+  },
+  "<sds-card-footer>": {
+    "template": "./components/Card/card-footer.marko"
+  },
+  "<sds-card-section>": {
+    "template": "./components/Card/card-section.marko"
+  },
+  "<sds-card-info-row>": {
+    "template": "./components/Card/card-info-row.marko"
+  },
+  "<sds-card-info-pair>": {
+    "template": "./components/Card/card-info-pair.marko"
+  },
+  "<sds-card-collapsible>": {
+    "template": "./components/Card/card-collapsible.marko"
+  },
+  "<sds-separator>": {
+    "template": "./components/Separator/separator.marko"
+  },
+  "<sds-stat-card>": {
+    "template": "./components/StatCard/stat-card.marko"
+  },
+  "<sds-stat-card-group>": {
+    "template": "./components/StatCard/stat-card-group.marko"
+  },
+  "<sds-grid>": {
+    "template": "./components/Grid/grid.marko"
+  },
+  "<sds-incrementer>": {
+    "template": "./components/Incrementer/incrementer.marko"
+  },
+  "<sds-col>": {
+    "template": "./components/Grid/col.marko"
+  },
+  "<sds-radio>": {
+    "template": "./components/Radio/radio.marko"
+  },
+  "<sds-switch>": {
+    "template": "./components/Switch/switch.marko"
+  },
+  "<sds-toggle>": {
+    "template": "./components/Toggle/toggle.marko"
+  },
+  "<sds-accordion-group>": {
+    "template": "./components/AccordionGroup/accordion-group.marko"
+  },
+  "<sds-radio-group>": {
+    "template": "./components/RadioGroup/radio-group.marko"
+  },
+  "<sds-pagination>": {
+    "template": "./components/Pagination/pagination.marko"
+  },
+  "<sds-spinner-overlay>": {
+    "template": "./components/Spinner/spinner-overlay.marko"
+  }
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenlo/sds-design-system",
+  "version": "0.9.9",
+  "description": "SDS, the Site Design System — Marko 5 components for Kenlo's public products (Site, Landing Page, Blog)",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/kenlo1/kenlo-sites/frontend/sds-design-system.git"
+  },
+  "keywords": [
+    "design-system",
+    "marko",
+    "kenlo",
+    "sds",
+    "components"
+  ],
+  "type": "module",
+  "files": [
+    "components",
+    "foundations",
+    "icons",
+    "marko.json",
+    "!**/*.test.js",
+    "!**/*-probe.marko"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --config portal/vite.config.js",
+    "build:portal": "vite build --config portal/vite.config.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "gen:icons": "node scripts/gen-icons.mjs",
+    "gen:contrast": "node scripts/gen-contrast-tokens.mjs"
+  },
+  "peerDependencies": {
+    "marko": "^5.38.39"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@babel/preset-env": "^7.25.0",
+    "@fluentui/svg-icons": "^1.1.340",
+    "@marko/compiler": "^5.42.0",
+    "@marko/jest": "^6.0.1",
+    "@marko/testing-library": "^6.4.2",
+    "@marko/vite": "^5.4.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "marko": "^5.38.39",
+    "vite": "^5.4.0"
+  }
+}