@oztix/roadie-components 1.1.0 → 1.2.0

package/dist/_chunks/chunk-SUDUTP6A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SpotIllustration/SpotIllustration.tsx","../../src/components/SpotIllustration/createSpotIllustration.tsx","../../src/components/SpotIllustration/json/arrow-up-right.json","../../src/components/SpotIllustration/ArrowUpRight.tsx","../../src/components/SpotIllustration/json/cowboy-hat.json","../../src/components/SpotIllustration/CowboyHat.tsx","../../src/components/SpotIllustration/json/cursor.json","../../src/components/SpotIllustration/Cursor.tsx","../../src/components/SpotIllustration/json/flower-spiral.json","../../src/components/SpotIllustration/FlowerSpiral.tsx","../../src/components/SpotIllustration/json/football.json","../../src/components/SpotIllustration/Football.tsx","../../src/components/SpotIllustration/json/hand.json","../../src/components/SpotIllustration/Hand.tsx","../../src/components/SpotIllustration/json/heart.json","../../src/components/SpotIllustration/Heart.tsx","../../src/components/SpotIllustration/json/high-five.json","../../src/components/SpotIllustration/HighFive.tsx","../../src/components/SpotIllustration/json/map-pin.json","../../src/components/SpotIllustration/MapPin.tsx","../../src/components/SpotIllustration/json/note-music.json","../../src/components/SpotIllustration/NoteMusic.tsx","../../src/components/SpotIllustration/json/ticket.json","../../src/components/SpotIllustration/Ticket.tsx","../../src/components/SpotIllustration/json/wine-glass.json","../../src/components/SpotIllustration/WineGlass.tsx"],"names":["StyledSvg","styled","SpotIllustration","forwardRef","illustration","props","ref","viewBox","paths","jsx","path","index","createSpotIllustration","name","data","Component","arrow_up_right_default","ArrowUpRight","cowboy_hat_default","CowboyHat","cursor_default","Cursor","flower_spiral_default","FlowerSpiral","football_default","Football","hand_default","Hand","heart_default","Heart","high_five_default","HighFive","map_pin_default","MapPin","note_music_default","NoteMusic","ticket_default","Ticket","wine_glass_default","WineGlass"],"mappings":"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","file":"chunk-SUDUTP6A.js","sourcesContent":["import { forwardRef } from 'react'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\n\ninterface PathData {\n  d: string\n  layer: 'outline' | 'face' | 'detail' | 'shadow' | 'highlight' | 'stroke'\n}\n\ninterface IllustrationData {\n  viewBox: string\n  paths: PathData[]\n}\n\nconst StyledSvg = styled('svg', {\n  base: {\n    boxSize: '600',\n    fill: 'none',\n    '& [data-part=\"outline\"]': {\n      fill: 'illustrations.outline'\n    },\n    '& [data-part=\"face\"]': {\n      fill: 'illustrations.face'\n    },\n    '& [data-part=\"detail\"]': {\n      fill: 'illustrations.detail'\n    },\n    '& [data-part=\"shadow\"]': {\n      fill: 'illustrations.shadow'\n    },\n    '& [data-part=\"highlight\"]': {\n      fill: 'illustrations.highlight'\n    },\n    '& [data-part=\"stroke\"]': {\n      stroke: 'illustrations.stroke',\n      strokeWidth: '0.5',\n      strokeLinecap: 'round',\n      strokeLinejoin: 'round',\n      fill: 'none'\n    }\n  },\n  variants: {\n    outline: {\n      true: {\n        '& [data-part=\"outline\"]': {\n          opacity: 1\n        }\n      },\n      false: {\n        '& [data-part=\"outline\"]': {\n          opacity: 0\n        }\n      }\n    }\n  },\n  defaultVariants: {\n    outline: false\n  }\n})\n\nexport interface SpotIllustrationProps\n  extends Omit<HTMLStyledProps<'svg'>, 'outline'> {\n  /**\n   * Illustration definition containing viewBox and paths\n   */\n  illustration: IllustrationData\n  /**\n   * Whether to show the outline layer\n   * @default false\n   */\n  outline?: boolean\n}\n\nexport const SpotIllustration = forwardRef<\n  SVGSVGElement,\n  SpotIllustrationProps\n>(({ illustration, ...props }, ref) => {\n  // Fallback to default viewBox if not provided\n  const { viewBox = '0 0 48 48', paths } = illustration\n\n  return (\n    <StyledSvg\n      ref={ref}\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox={viewBox}\n      {...props}\n    >\n      {paths.map((path: PathData, index: number) => (\n        <path key={index} d={path.d} data-part={path.layer} />\n      ))}\n    </StyledSvg>\n  )\n})\n\nSpotIllustration.displayName = 'SpotIllustration'\n","import { forwardRef } from 'react'\n\nimport {\n  SpotIllustration,\n  type SpotIllustrationProps\n} from './SpotIllustration'\n\ntype IllustrationJson = SpotIllustrationProps['illustration']\n\nexport type SpotIllustrationComponentProps = Omit<\n  SpotIllustrationProps,\n  'illustration'\n>\n\n/**\n * Factory function to create a SpotIllustration component from JSON data\n *\n * @param name - Display name for the component\n * @param data - JSON data imported from the json folder\n * @returns A React component that renders the spot illustration\n *\n * @example\n * ```tsx\n * import { createSpotIllustration } from './createSpotIllustration'\n * import noteMusicData from './json/note-music.json'\n *\n * export const NoteMusic = createSpotIllustration('NoteMusic', noteMusicData)\n * ```\n */\nexport function createSpotIllustration(name: string, data: unknown) {\n  const Component = forwardRef<SVGSVGElement, SpotIllustrationComponentProps>(\n    (props, ref) => {\n      return (\n        <SpotIllustration\n          ref={ref}\n          illustration={data as IllustrationJson}\n          {...props}\n        />\n      )\n    }\n  )\n\n  Component.displayName = name\n\n  return Component\n}\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"m40.531.849 6.605 4.69c.574.396.906 1.083.857 1.782L46.694 25.9c-.117 1.677-2.22 2.462-3.409 1.275l-3.032-3.031-8.035 8.033-.413 4.054a2 2 0 0 1-.575 1.211l-8.488 8.485a2.026 2.026 0 0 1-2.695.2l-6.541-4.64a2 2 0 0 1-.703-.897l-2.287-5.8-2.626-1.035a2 2 0 0 1-.424-.23l-6.624-4.7c-.995-.707-1.12-2.183-.257-3.046l8.657-8.646a2 2 0 0 1 1.084-.46l4.051-.413 8.527-8.529-3.267-2.319a2.001 2.001 0 0 1 1.018-3.626l18.578-1.3c.466-.014.913.09 1.298.364\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"m17.153 23.364-8.53 8.53-6.624-4.702 8.53-8.53 3.312 2.351z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"m27.417 8.481 4.446 4.446-9.95 9.949.001.001h-.002l-4.759.487-6.624-4.702 4.76-.486L25.993 7.47z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M45.998 7.183 27.42 8.479 20.795 3.78l18.578-1.3z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M45.998 7.182 27.419 8.48l4.446 4.447-9.95 9.95-4.762.487-8.53 8.53 9.082 3.58 3.58 9.083 8.53-8.53.487-4.762 9.951-9.95 4.446 4.445z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"m12.058 33.247 5.65 2.227 3.58 9.082-6.625-4.701z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M45.998 7.182 27.419 8.48m18.579-1.298L44.699 25.76l-4.446-4.445-9.951 9.95-.487 4.762-8.53 8.53-3.58-9.083-9.082-3.58 8.53-8.53M45.998 7.182 39.373 2.48l-18.578 1.3 6.624 4.7m0 0 4.446 4.447-9.95 9.95m0 0-4.762.487m4.762-.487-6.626-4.701-4.76.487 6.624 4.701m-5.095 9.883 5.65 2.227 3.58 9.082-6.625-4.701zm-3.434-1.351 8.53-8.53-6.624-4.702L2 27.194zm23.239-18.969-4.446-4.446-1.424-1.01-10.705 10.706 6.624 4.701 9.951-9.95z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport arrowuprightData from './json/arrow-up-right.json'\n\nexport const ArrowUpRight = createSpotIllustration(\n  'ArrowUpRight',\n  arrowuprightData\n)\nexport type ArrowUpRightProps = React.ComponentPropsWithRef<typeof ArrowUpRight>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M25.54 4.655c1.616-.432 3.074-.095 4.279.706l.238.166c2.29 1.687 3.466 4.63 4.636 7.122.455.969.902 1.918 1.37 2.825 1.082.044 2.214.015 3.266-.26 1.08-.283 1.886-1.22 2.827-1.782.984-.588 2.163-1.19 3.348-1.017.558.074 1.067.335 1.492.697.531.499.778 1.16.843 1.87.048.925-.325 1.865-.684 2.616-2.48 5.184-9.116 13.492-14.394 18.436-3.795 3.554-10.261 7.758-16.451 9.095-3.21.693-6.636.674-9.577-.95-3.015-1.664-5.07-4.76-5.995-9.26-.653-3.175-.54-7.067.906-10.147.738-1.572 1.868-3.02 3.507-3.965a8 8 0 0 1 2.942-.99c-.101-1.626.06-3.088.651-4.567.583-1.353 1.382-2.564 2.296-3.717 3.248-4.093 7.848-4.486 10.688-4.552 1.231-1.145 2.49-1.972 3.812-2.326m19.964 7.76q.033.005 0 0\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M25.404 28.406c-6.617 4.326-10.427 2.787-13.244.44-.558.526-1.353 1.834-.744 3.06 1.018 2.05 9.75 4.317 19.233-3.453 7.64-6.26 6.273-7.978 4.274-10.492l-.274-.345c.425 3.292-2.627 6.464-9.245 10.79\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M2.951 34.463c1.665 8.096 7.037 9.717 12.881 8.455C23.68 41.066 27.45 36.11 33.08 28.707c.825-1.085 1.69-2.222 2.613-3.41 2.683-3.45 5.51-6.181 7.407-8.014 1.751-1.692 2.71-2.618 2.027-2.634-.854-.021-2.712 1.247-3.792 2.11-1.406 1.123-5.232 1.096-6.686.857-.729-1.293-1.378-2.675-2.002-4.006-2.515-5.356-4.64-9.881-9.982-4.385-.674.807-1.328 1.772-1.992 2.754-2.536 3.744-5.234 7.727-9.829 4.109-.66 1.654-.655 3.352-.18 6.008-7.144-1.094-8.884 6.671-7.713 12.367M34.65 17.616l.274.345c1.999 2.514 3.366 4.233-4.274 10.492-9.483 7.77-18.215 5.503-19.233 3.453-.609-1.226.186-2.534.744-3.06 2.817 2.347 6.627 3.886 13.244-.44 6.618-4.326 9.67-7.498 9.245-10.79\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M25.404 28.406c-6.617 4.326-10.427 2.787-13.244.44-.558.526-1.353 1.834-.744 3.06 1.018 2.05 9.75 4.317 19.233-3.453 7.64-6.26 6.273-7.978 4.273-10.492l-.273-.345c.425 3.292-2.627 6.464-9.245 10.79\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M12.812 12.938c-.927 1.168-1.569 2.151-1.968 3.15 4.595 3.618 7.293-.365 9.829-4.11.665-.98 1.318-1.946 1.992-2.753h-.022c-2.775.039-6.962.097-9.831 3.713\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M31.215 34.384c5.157-4.83 11.583-12.917 13.9-17.761.69-1.442.548-1.961.012-1.974.682.016-.276.942-2.027 2.634-1.897 1.833-4.724 4.564-7.407 8.015a391 391 0 0 0-2.613 3.409c-5.63 7.402-9.4 12.359-17.248 14.211 5.669-1.224 11.781-5.161 15.383-8.535\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M34.65 17.616c1.453.24 5.28.266 6.685-.857 1.08-.863 2.938-2.131 3.792-2.11M34.65 17.616c.425 3.292-2.627 6.464-9.245 10.79s-10.427 2.787-13.244.44m22.49-11.23c-.73-1.293-1.378-2.675-2.003-4.006-2.515-5.356-4.64-9.881-9.982-4.385m11.984 8.39q.138.177.274.346c1.999 2.514 3.366 4.233-4.274 10.492-9.483 7.77-18.215 5.503-19.233 3.453-.609-1.226.186-2.534.744-3.06m0 0-.282-1.202c-.53-2.26-.946-4.055-1.214-5.548m.18-6.008c.4-.999 1.04-1.982 1.968-3.15 2.869-3.616 7.056-3.674 9.831-3.713h.022m-11.82 6.863c-.662 1.654-.656 3.352-.18 6.008m.18-6.008c4.594 3.618 7.292-.365 9.828-4.11.665-.98 1.318-1.946 1.992-2.753m-12 12.871C3.52 21.002 1.78 28.767 2.95 34.463c1.665 8.096 7.037 9.717 12.881 8.455m0 0c5.669-1.224 11.781-5.161 15.383-8.535 5.157-4.83 11.583-12.916 13.9-17.76.69-1.442.548-1.961.012-1.974m-29.295 28.27c7.848-1.853 11.618-6.81 17.248-14.212.825-1.085 1.69-2.222 2.613-3.41 2.683-3.45 5.51-6.181 7.407-8.014 1.751-1.692 2.71-2.618 2.027-2.634\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport cowboyhatData from './json/cowboy-hat.json'\n\nexport const CowboyHat = createSpotIllustration('CowboyHat', cowboyhatData)\nexport type CowboyHatProps = React.ComponentPropsWithRef<typeof CowboyHat>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"m9.597 1.71 32.823 8.54c1.616.42 2.012 2.611.647 3.571l-8.134 5.719 12.252 9.018c.971.715 1.081 2.172.229 3.025L37.03 41.966a2 2 0 0 1-.46.343l-7.007 3.803a2 2 0 0 1-2.567-.575l-6.78-9.244c-.469.656-.901 1.544-1.64 1.94l-7.059 3.775c-1.123.6-2.556-.026-2.878-1.258L.066 7.934a2 2 0 0 1 .99-2.268l7.162-3.838a2.1 2.1 0 0 1 1.38-.118\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"m20.197 32.883 4.78-6.826 10.64 14.51-7.008 3.788z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M41.917 12.186 9.093 3.646l8.54 32.823L24.95 26.06l10.665 14.49L46 30.17 31.51 19.503z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"m9.054 3.646 8.573 32.815-7.053 3.783L2 7.429z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M41.917 12.186 9.093 3.646l8.54 32.823L24.95 26.06l10.665 14.49L46 30.17 31.51 19.503z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"m9.054 3.646 8.573 32.815-7.053 3.783L2 7.429z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"m20.197 32.883 4.78-6.826 10.64 14.51-7.008 3.788z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport cursorData from './json/cursor.json'\n\nexport const Cursor = createSpotIllustration('Cursor', cursorData)\nexport type CursorProps = React.ComponentPropsWithRef<typeof Cursor>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M26.483.37a6.4 6.4 0 0 1 2.927.628l.939.557 5.219 4.925a6.4 6.4 0 0 1 1.866 2.753l.073.224.577 1.89a6.4 6.4 0 0 1 3.507 1.975l4.15 3.981a6.43 6.43 0 0 1 2.23 4.274l.021.299a6.43 6.43 0 0 1-1.263 4.154l-.03.039-.136.174-.031.039-1.388 1.682v.001a16.9 16.9 0 0 1-4.502 3.835q.132.074.26.154a6.43 6.43 0 0 1 .328 10.684 6.4 6.4 0 0 1-1.98.95l-.306.079a6.4 6.4 0 0 1-2.194.12l-.313-.044-2.153-.36a16.9 16.9 0 0 1-6.506-2.552q.03.495-.017.99a6.428 6.428 0 0 1-9.415 5.057 6.4 6.4 0 0 1-1.843-1.474l-4.4-4.186v-.002l-.055-.052a6.4 6.4 0 0 1-1.556-2.622l-.578-1.893a6.4 6.4 0 0 1-2.85-1.344q-.394-.326-.718-.695L2.26 30.7a6.43 6.43 0 0 1-1.98-6.771 6.4 6.4 0 0 1 1.188-2.209l1.387-1.684a16.9 16.9 0 0 1 4.464-3.814l-1.25-.993-.001-.001a2 2 0 0 1-.23-.21 6.429 6.429 0 0 1 5.725-10.762l2.153.361.43.078a16.9 16.9 0 0 1 6.024 2.439l.052.035a6.4 6.4 0 0 1 .311-2.38l.082-.235a6.43 6.43 0 0 1 2.193-2.918l.201-.145A6.43 6.43 0 0 1 26.484.37\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M22.592 45.22a4.2 4.2 0 0 1-5.244-2.789l-.637-2.088a14.7 14.7 0 0 1 .687-10.405 6.3 6.3 0 0 0-1.618 1.394l-1.39 1.685a4.2 4.2 0 1 1-6.481-5.342l1.389-1.685a14.7 14.7 0 0 1 9.982-5.287 6.3 6.3 0 0 0-2.594-1.067l-2.154-.36a4.2 4.2 0 0 1 1.386-8.284l2.154.36a14.7 14.7 0 0 1 10.002 6.647 6.3 6.3 0 0 0-.092-3.348l-.638-2.089a4.198 4.198 0 0 1 5.988-4.935 4.2 4.2 0 0 1 2.045 2.48l.638 2.09a14.7 14.7 0 0 1-.688 10.404 6.3 6.3 0 0 0 1.617-1.394l1.39-1.685a4.2 4.2 0 1 1 6.48 5.343l-1.389 1.684a14.7 14.7 0 0 1-9.981 5.287c.773.547 1.66.911 2.594 1.067l2.153.36a4.2 4.2 0 0 1-1.386 8.284l-2.153-.36A14.7 14.7 0 0 1 24.65 34.54a6.3 6.3 0 0 0 .092 3.348l.638 2.089a4.2 4.2 0 0 1-2.788 5.243\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M35.325 22.6a14.7 14.7 0 0 0 1.02-9.115 4.19 4.19 0 0 1 3.67 1.411l4.28 4.108c-.439-.405-1.692-1.199-3.264-.975a4.19 4.19 0 0 0-2.7 1.493l-1.388 1.685a6.3 6.3 0 0 1-1.618 1.393\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M18.104 43.855c-.342-.421-.6-.905-.758-1.424l-.637-2.088a14.7 14.7 0 0 1 .687-10.405 6.3 6.3 0 0 0-1.618 1.394l-1.388 1.685a4.19 4.19 0 0 1-2.738 1.498q.136.647.332 1.29l.638 2.088c.196.644.544 1.23 1.016 1.712z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M7.945 33.06a4.2 4.2 0 0 1-.034-5.385l1.388-1.685a14.7 14.7 0 0 1 9.982-5.287 6.3 6.3 0 0 0-2.594-1.067l-2.154-.36a4.2 4.2 0 0 1-3.153-2.457 14.68 14.68 0 0 0-6.806 4.632l-1.388 1.685a4.2 4.2 0 0 0 .569 5.912z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M11.257 16.508a4.2 4.2 0 0 1 4.663-5.515l2.153.359c1.856.31 3.59.964 5.14 1.894a14.7 14.7 0 0 0-9.864-6.433l-2.154-.36a4.2 4.2 0 0 0-3.74 7.032z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M23.378 13.346A14.7 14.7 0 0 1 28.075 18a6.3 6.3 0 0 0-.092-3.348l-.638-2.089a4.2 4.2 0 0 1 6.703-4.454l-5.072-4.8a4.2 4.2 0 0 0-6.355 4.715l.637 2.089a6.3 6.3 0 0 1 .119 3.234\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m9.298 25.99-1.39 1.685a4.2 4.2 0 1 0 6.483 5.342l1.39-1.685a6.3 6.3 0 0 1 1.617-1.393 14.7 14.7 0 0 0-.687 10.404l.637 2.088a4.2 4.2 0 1 0 8.032-2.454l-.638-2.089a6.3 6.3 0 0 1-.092-3.348 14.7 14.7 0 0 0 10.002 6.647l2.153.36a4.2 4.2 0 1 0 1.386-8.284l-2.153-.36a6.3 6.3 0 0 1-2.594-1.067 14.7 14.7 0 0 0 9.981-5.287l1.389-1.684a4.199 4.199 0 1 0-6.48-5.343l-1.39 1.685M9.298 25.99a14.7 14.7 0 0 1 9.982-5.287 6.3 6.3 0 0 0-2.594-1.067l-2.154-.36M9.298 25.99 7.91 27.675a4.2 4.2 0 0 0 .034 5.384l-4.19-4.011a4.2 4.2 0 0 1-.57-5.912l1.39-1.685a14.68 14.68 0 0 1 6.805-4.632 4.2 4.2 0 0 0 3.152 2.457m0 0a4.2 4.2 0 0 1 1.386-8.284l2.154.36a14.7 14.7 0 0 1 10.002 6.647 6.3 6.3 0 0 0-.092-3.348l-.638-2.089a4.198 4.198 0 0 1 5.989-4.935 4.2 4.2 0 0 1 2.044 2.48l.638 2.09a14.7 14.7 0 0 1-.688 10.404 6.3 6.3 0 0 0 1.617-1.394m0 0 1.387-1.685a4.19 4.19 0 0 1 2.7-1.493c1.572-.224 2.825.57 3.264.975l-4.28-4.108a4.19 4.19 0 0 0-3.67-1.411c.641 3.07.284 6.264-1.02 9.116a6.3 6.3 0 0 0 1.62-1.394m-18.84 22.648c-.342-.421-.6-.905-.758-1.424l-.637-2.088a14.7 14.7 0 0 1 .687-10.405 6.3 6.3 0 0 0-1.618 1.394l-1.388 1.685a4.19 4.19 0 0 1-2.738 1.498q.136.647.332 1.29l.638 2.088c.196.644.544 1.23 1.016 1.712zm-6.847-27.347a4.2 4.2 0 0 1 4.663-5.515l2.153.359c1.856.31 3.59.964 5.14 1.894a14.7 14.7 0 0 0-9.864-6.433l-2.154-.36a4.2 4.2 0 0 0-3.74 7.032zm12.12-3.162A14.7 14.7 0 0 1 28.076 18a6.3 6.3 0 0 0-.092-3.348l-.638-2.089a4.2 4.2 0 0 1 6.703-4.454l-5.072-4.8a4.2 4.2 0 0 0-6.355 4.715l.637 2.089a6.3 6.3 0 0 1 .119 3.234z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport flowerspiralData from './json/flower-spiral.json'\n\nexport const FlowerSpiral = createSpotIllustration(\n  'FlowerSpiral',\n  flowerspiralData\n)\nexport type FlowerSpiralProps = React.ComponentPropsWithRef<typeof FlowerSpiral>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 49 48\",\n  \"paths\": [\n    {\n      \"d\": \"M35.168.015C37.81.12 40.7.82 42.578 2.813c1.339 1.298 2.176 2.645 3.48 4.308 1.542 1.966 2.002 3.98 1.96 6.408-.045 2.527-.626 5.548-1.657 8.818-1.602 5.085-4.591 10.612-9.27 15.197a38.2 38.2 0 0 1-13.22 8.432c-3.678 1.38-7.279 2.048-10.352 2.023-2.977-.024-5.851-.709-7.625-2.481-.784-.785-2.204-2.428-3.343-3.943C1.386 40.32.759 38.587.486 36.762c-.564-3.777.22-7.73 1.439-11.3C3.619 20.5 6.687 15.178 11.277 10.68c4.433-4.345 9.514-7.336 14.309-9.024C28.978.463 32.287-.1 35.168.015\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"m4.086 40.29.035.035c2.437 2.437 8.882 2.619 15.861 0a36.2 36.2 0 0 0 12.522-7.988c4.413-4.325 7.244-9.554 8.762-14.37 1.961-6.224 1.728-11.758-.123-13.76.768.732 1.514 1.75 2.175 2.653.5.684.951 1.3 1.327 1.676 1.926 1.926 1.799 6.894-.192 13.21-1.517 4.816-4.349 10.044-8.762 14.37a36.2 36.2 0 0 1-12.522 7.987c-6.978 2.62-13.423 2.437-15.86 0-.717-.716-2.115-2.331-3.223-3.813\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M3.817 26.108c-2.153 6.308-1.943 11.971.304 14.217 2.437 2.437 8.882 2.619 15.861 0-9.446-2.756-12.942-5.903-16.165-14.217\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M41.06 4.12c-2.593-2.591-8.396-2.835-14.81-.577 7.668 3.786 10.998 6.897 15.016 14.424 1.99-6.316 1.72-11.921-.206-13.847\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M32.504 32.337a36.2 36.2 0 0 1-12.522 7.988C10.536 37.569 7.04 34.422 3.817 26.108c1.602-4.69 4.51-9.737 8.86-14 4.22-4.136 9.048-6.973 13.573-8.565 7.668 3.786 10.998 6.897 15.016 14.424-1.518 4.816-4.35 10.045-8.762 14.37\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"m4.086 40.29.035.035c2.437 2.437 8.882 2.619 15.861 0a36.2 36.2 0 0 0 12.522-7.988c4.413-4.325 7.244-9.554 8.762-14.37 1.961-6.224 1.728-11.758-.123-13.76.768.732 1.514 1.75 2.175 2.653.5.684.951 1.3 1.327 1.676 1.926 1.926 1.799 6.894-.192 13.21-1.517 4.816-4.349 10.044-8.762 14.37a36.2 36.2 0 0 1-12.522 7.987c-6.978 2.62-13.423 2.437-15.86 0-.717-.716-2.115-2.331-3.223-3.813Z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M3.817 26.108c-2.153 6.308-1.943 11.971.304 14.217 2.437 2.437 8.882 2.619 15.861 0-9.446-2.756-12.942-5.903-16.165-14.217Z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M41.06 4.12c-2.593-2.591-8.396-2.835-14.81-.577 7.668 3.786 10.998 6.897 15.016 14.424 1.99-6.316 1.72-11.921-.206-13.847Z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M32.504 32.337a36.2 36.2 0 0 1-12.522 7.988C10.536 37.569 7.04 34.422 3.817 26.108c1.602-4.69 4.51-9.737 8.86-14 4.22-4.136 9.048-6.973 13.573-8.565 7.668 3.786 10.998 6.897 15.016 14.424-1.518 4.816-4.35 10.045-8.762 14.37Z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M14.51 28.855a54 54 0 0 1 2.85-4.275m0 0a55 55 0 0 1 3.706-4.54m-3.706 4.54c-.974-.832-1.814-1.679-2.85-2.833m2.85 2.833c.806.687 1.703 1.364 2.876 2.193m.83-6.734c1.353-1.478 2.807-2.867 4.293-3.99m-4.293 3.99c-.816-.873-1.55-1.78-2.425-2.962m2.425 2.962c.855.915 1.802 1.792 3.097 2.909m1.195-6.898c1.455-1.099 2.94-1.941 4.39-2.36m-4.39 2.36c-.714-.877-1.363-1.792-2.123-2.962m2.124 2.962c.828 1.016 1.746 1.981 3.032 3.232\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport footballData from './json/football.json'\n\nexport const Football = createSpotIllustration('Football', footballData)\nexport type FootballProps = React.ComponentPropsWithRef<typeof Football>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M26.167.04a4.87 4.87 0 0 1 4.426 1.835c2.303-1.339 5.347-.505 6.646 1.821a4.86 4.86 0 0 1 .39 3.802 4.88 4.88 0 0 1 2.798 3.792 4.83 4.83 0 0 1-.381 2.571 4.9 4.9 0 0 1 2.655 3.695h.002l.941 6.262c0 1.367-.084 2.535-.953 3.664l.001.001-8.922 11.61v-.001c-2.717 3.595-6.164 6.837-10.185 8.213-4.203 1.438-8.739.736-13.15-3.001-2.26-1.915-4.191-4.844-4.655-7.823l-1.02-6.563-.01-.033c-.443-2.058-.485-4.029-.417-5.61.115-2.704.705-6.03 1.335-9.109.548-2.681 1.038-5.412 1.702-8.066a5.01 5.01 0 0 1 5.151-4.082 5.05 5.05 0 0 1 3.416 1.54c1.183 1.228 1.409 2.735 1.417 4.352l5.605-7.042A4.88 4.88 0 0 1 26.167.04\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M37.884 13.617a2.833 2.833 0 0 0-4.454-3.501l1.798-2.289a2.834 2.834 0 1 0-4.455-3.5l-1.796 2.287a2.83 2.83 0 0 0-.453-4.008 2.83 2.83 0 0 0-4.001.507l-9.13 11.474-.042-6.546a3.049 3.049 0 0 0-4.926-2.381 3 3 0 0 0-1.09 1.807C8.57 11.6 6.544 19.3 6.328 24.36c-.148 3.466.286 8.59 4.44 12.107 7.842 6.644 15.234 2.019 20.459-4.904l8.92-11.608a2.85 2.85 0 0 0-4.497-3.497z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M40.73 17.963a2.84 2.84 0 0 1-.577 1.991L31.23 31.563c-5.225 6.922-12.617 11.547-20.46 4.904-2.36-1.998-3.517-4.516-4.052-6.955l1.036 6.663c.567 2.327 1.725 4.701 3.972 6.604 7.842 6.643 15.234 2.019 20.46-4.905l8.921-11.608a2.84 2.84 0 0 0 .56-2.15z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m28.977 6.614 1.796-2.287a2.833 2.833 0 1 1 4.455 3.5l-1.798 2.289a2.833 2.833 0 0 1 4.454 3.501l-2.233 2.841a2.848 2.848 0 1 1 4.498 3.497l-8.921 11.608c-5.225 6.923-12.617 11.548-20.46 4.904-4.153-3.516-4.587-8.641-4.439-12.107.215-5.06 2.242-12.76 3.005-16.893a3.01 3.01 0 0 1 3.101-2.453 3.05 3.05 0 0 1 2.916 3.027l.042 6.546 9.13-11.474a2.832 2.832 0 0 1 4.97 2.513c-.105.36-.28.696-.516.988m0 0-7.949 10.113m5.542 2.117 6.861-8.728m4.454 3.5-7.95 10.113m10.795-5.766a2.84 2.84 0 0 1-.577 1.991L31.23 31.563c-5.225 6.922-12.617 11.547-20.46 4.904-2.36-1.998-3.517-4.516-4.052-6.955l1.036 6.663c.567 2.327 1.725 4.701 3.972 6.604 7.842 6.643 15.234 2.019 20.46-4.905l8.921-11.609a2.84 2.84 0 0 0 .56-2.15z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport handData from './json/hand.json'\n\nexport const Hand = createSpotIllustration('Hand', handData)\nexport type HandProps = React.ComponentPropsWithRef<typeof Hand>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M4.9 5.947A11.3 11.3 0 0 1 13.77 4.09c.194.048 1.475.382 1.457.4 3.725 1.276 8.897 2.24 12.108 4.972 1.466-.105 2.937.089 4.328.557 3.026.993 6.046 2 9.032 3.108 5.705 2.122 8.464 8.795 6.537 14.425-.964 2.811-3.138 5.134-5.775 6.487L22.11 43.902a2.26 2.26 0 0 1-1.752.125c-2.825-.706-5.81-1.835-8.513-2.917-.686-.237-.845-.711-1.305-1.17-3.087-6.567-6.615-13.08-9.31-19.815-1.04-2.667-1.598-5.346-.508-8.527A11.73 11.73 0 0 1 4.9 5.947M1.238 20.145l-.007-.02z\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M14.47 6.614c-4.773-1.635-9.932.797-11.617 5.715-.85 2.482-.461 4.574.486 6.995l9.249 19.657 8.496 2.912 19.343-9.86c2.235-1.332 3.82-2.732 4.67-5.21 1.684-4.918-.863-10.113-5.636-11.749l-8.497-2.91a8.8 8.8 0 0 0-4.402-.335 8.94 8.94 0 0 0-3.596-2.303l-8.497-2.912\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M36.587 23.906c1.683-4.916-.862-10.111-5.633-11.746-3.852-1.32-8.021.22-10.368 3.427.113-3.972-2.267-7.653-6.12-8.974-4.771-1.634-9.927.799-11.612 5.716-.851 2.483-.464 4.575.484 6.995L12.58 38.98l19.338-9.864c2.234-1.33 3.818-2.73 4.669-5.21\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M14.47 6.614c-4.773-1.635-9.932.797-11.617 5.715-.85 2.482-.461 4.574.486 6.995l9.249 19.657 8.496 2.912 19.343-9.86c2.235-1.332 3.82-2.732 4.67-5.21 1.684-4.918-.863-10.113-5.636-11.749l-8.497-2.91a8.8 8.8 0 0 0-4.402-.335 8.94 8.94 0 0 0-3.596-2.303l-8.497-2.912z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M36.587 23.906c1.683-4.916-.862-10.111-5.633-11.746-3.852-1.32-8.021.22-10.368 3.427.113-3.972-2.267-7.653-6.12-8.974-4.771-1.634-9.927.799-11.612 5.716-.851 2.483-.464 4.575.484 6.995L12.58 38.98l19.338-9.864c2.234-1.33 3.818-2.73 4.669-5.21\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport heartData from './json/heart.json'\n\nexport const Heart = createSpotIllustration('Heart', heartData)\nexport type HeartProps = React.ComponentPropsWithRef<typeof Heart>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M44.318 33.2c3.516-2.978 3.767-7.23 3.664-9.645-.14-3.28-.98-6.5-1.666-9.698l-.51-2.319c-.642-2.066-1.79-4.23-3.526-5.583a5.47 5.47 0 0 0-3.636-1.152 4.26 4.26 0 0 0-3.67 2.504c-1.333-1.674-2.493-3.984-4.8-4.395-1.234-.155-2.454.117-3.409.958a4.11 4.11 0 0 0-4.289 1.024 4.12 4.12 0 0 0-4.29-1.024c-.887-.782-2.041-1.106-3.208-.988-2.354.299-3.655 2.736-5 4.425a4.216 4.216 0 0 0-6.46-1.604C1.472 7.323 1.34 11.272.9 13.424.492 15.42.095 17.638.017 19.47c-.117 2.758.948 5.376.948 8.09.339 2.16 1.697 4.25 3.337 5.64 2.068 1.75 4.223 2.575 6.34 2.614.073 1.449 1.739 2.75 2.614 3.625.665.729 1.637.858 2.534.558-.19.784-.036 1.617.487 2.192l2.03 2.23c.6.48 1.16.824 1.972.71.696-.174 1.413-.516 1.701-1.235.403-.823 1.553-2.512 2.509-2.139.316.179 1.573 1.768 2.346 2.67a2.245 2.245 0 0 0 2.722.453c.748-.748 1.41-1.34 1.1-2.536-.123-.491-.597-2.458.142-2.629.593-.136 1.481.071 2.003.332a2.246 2.246 0 0 0 2.61-.88c.524-.875.493-1.97-.21-2.746l-1.415-1.552q.535.256 1.098.45c3.064 1.048 6.345.498 9.433-2.117\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M24.525 15.426c.042.46-.091.921-.374 1.288l-5.774 7.514c-3.383 4.48-8.167 7.474-13.243 3.174-1.527-1.293-2.277-2.923-2.623-4.501l.67 4.312c.368 1.506 1.117 3.043 2.571 4.275 5.076 4.3 9.86 1.306 13.243-3.175L24.77 20.8a1.84 1.84 0 0 0 .362-1.392z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M22.683 12.613a1.833 1.833 0 0 0-2.883-2.267l1.164-1.48a1.835 1.835 0 1 0-2.884-2.267l-1.163 1.48a1.834 1.834 0 1 0-2.882-2.266l-5.91 7.427-.027-4.236A1.973 1.973 0 0 0 4.91 7.462c-.369.292-.62.707-.706 1.17-.494 2.675-1.806 7.66-1.945 10.934-.096 2.243.185 5.56 2.873 7.837 5.076 4.3 9.86 1.306 13.243-3.175l5.774-7.513a1.844 1.844 0 1 0-2.912-2.263z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M22.683 12.613a1.834 1.834 0 0 0-2.883-2.267m2.883 2.267-1.446 1.839a1.845 1.845 0 1 1 2.912 2.263l-5.774 7.513c-3.383 4.481-8.167 7.474-13.243 3.174-2.688-2.276-2.969-5.593-2.873-7.836.139-3.275 1.45-8.259 1.945-10.934A1.95 1.95 0 0 1 6.21 7.044a1.973 1.973 0 0 1 1.887 1.96l.027 4.236 5.91-7.426a1.834 1.834 0 1 1 2.882 2.266m5.766 4.533-5.145 6.545m2.262-8.812 1.164-1.48a1.835 1.835 0 1 0-2.884-2.267l-1.163 1.48m2.883 2.267-4.44 5.65m1.557-7.916-5.144 6.546m12.752.8c.042.46-.091.921-.374 1.288l-5.774 7.514c-3.383 4.48-8.167 7.474-13.243 3.174-1.527-1.293-2.277-2.923-2.623-4.501l.67 4.312c.368 1.506 1.117 3.043 2.571 4.275 5.076 4.3 9.86 1.306 13.243-3.175L24.77 20.8a1.84 1.84 0 0 0 .362-1.392z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M22.27 12.613a1.833 1.833 0 0 1 2.882-2.267l-1.163-1.48a1.835 1.835 0 1 1 2.883-2.267l1.163 1.48a1.836 1.836 0 0 1 .936-2.92 1.83 1.83 0 0 1 1.947.655l5.909 7.426.027-4.236a1.973 1.973 0 0 1 3.188-1.542c.37.292.62.707.707 1.17.494 2.675 1.805 7.66 1.944 10.934.096 2.243-.184 5.56-2.873 7.837-5.076 4.3-9.86 1.306-13.242-3.175l-5.774-7.513a1.842 1.842 0 0 1 1.685-2.961 1.85 1.85 0 0 1 1.226.698z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M23.59 20.34q.098.249.261.46l5.775 7.513c3.382 4.481 8.166 7.475 13.242 3.175 2.688-2.276 2.969-5.594 2.873-7.837-.1-2.35-.803-5.581-1.376-8.207a95 95 0 0 1-.569-2.727c-.211-1.134-2.022-5.798-4.767-5.658 1.688.101 1.826 2.023 1.883 2.284.621 2.883 1.688 8.029 1.782 10.223.095 2.243-.185 5.56-2.873 7.837-5.077 4.3-9.861 1.306-13.243-3.175z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M42.694 19.566c.095 2.243-.185 5.56-2.873 7.837-5.077 4.3-9.861 1.306-13.243-3.175m16.116-4.662c-.094-2.194-1.16-7.34-1.782-10.223-.057-.261-.194-2.183-1.883-2.284 2.745-.14 4.556 4.524 4.767 5.658.14.755.344 1.694.57 2.727.572 2.626 1.275 5.857 1.375 8.207.096 2.243-.185 5.56-2.873 7.837-5.076 4.3-9.86 1.306-13.243-3.175L23.851 20.8a1.9 1.9 0 0 1-.26-.46l2.987 3.888m16.116-4.662c-.14-3.275-1.451-8.259-1.945-10.934a1.95 1.95 0 0 0-2.008-1.588 1.973 1.973 0 0 0-1.887 1.96l-.027 4.236-5.91-7.426a1.834 1.834 0 1 0-2.882 2.266m-1.457 16.148-5.774-7.513a1.842 1.842 0 0 1 1.685-2.961 1.85 1.85 0 0 1 1.226.698l-1.446-1.84m0 0a1.833 1.833 0 0 1 2.883-2.266m-2.883 2.267 5.145 6.545m-2.262-8.812-1.163-1.48a1.835 1.835 0 1 1 2.883-2.267l1.163 1.48m-2.883 2.267 4.44 5.65M28.036 8.08l5.145 6.546m-12.753.8c-.042.46.091.921.374 1.288l5.775 7.514c3.382 4.48 8.166 7.474 13.243 3.174 1.527-1.293 2.276-2.923 2.622-4.501\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M17.935 22.198c1.386 2.83 3.417 3.49 4.26 3.465.842.024 2.873-.635 4.26-3.465-.65 2.479-.55 6.944 5.054 4.981-1.304.841-2.907 2.441-2.945 4.259.038 1.817 1.64 3.417 2.945 4.259-5.603-1.964-5.705 2.502-5.055 4.98-1.386-2.83-3.417-3.489-4.259-3.465-.843-.024-2.874.636-4.26 3.465.65-2.478.548-6.944-5.054-4.98 1.303-.842 2.906-2.442 2.944-4.26-.038-1.817-1.64-3.417-2.944-4.258 5.602 1.963 5.704-2.502 5.053-4.98\",\n      \"layer\": \"highlight\"\n    },\n    {\n      \"d\": \"m17.935 40.678 2.031 2.229c1.386-2.83 3.417-3.49 4.26-3.465.42-.012 1.136.146 1.92.66-1.363-2.345-3.17-2.912-3.951-2.89-.843-.023-2.874.637-4.26 3.466\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m12.88 35.697 2.032 2.228c1.369-.48 2.41-.575 3.191-.41-.358-1.751-1.706-3.05-5.222-1.819\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m26.454 40.677 2.032 2.23c-.65-2.479-.549-6.944 5.054-4.981l-2.031-2.23c-5.603-1.963-5.704 2.503-5.054 4.981\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M31.096 35.413c-.298-.543-.488-1.132-.501-1.745.038-1.818 1.64-3.418 2.944-4.26l-2.03-2.228c-1.305.84-2.908 2.44-2.945 4.259.034 1.629 1.326 3.084 2.532 3.974\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M28.318 27.59c-.212-1.04-.074-2.24.168-3.162l-2.032-2.23c-.49 1.874-.553 4.88 1.864 5.392\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M26.454 22.198c-1.386 2.83-3.417 3.489-4.26 3.465-.842.024-2.873-.635-4.26-3.465.651 2.479.55 6.944-5.053 4.981 1.303.841 2.906 2.441 2.944 4.259-.038 1.817-1.64 3.417-2.944 4.259m13.573-13.499c-.65 2.479-.549 6.944 5.055 4.981m-5.055-4.98 2.032 2.229c-.242.923-.38 2.121-.168 3.162-2.417-.511-2.355-3.518-1.864-5.392m5.055 4.98c-1.304.841-2.907 2.441-2.945 4.259.038 1.817 1.64 3.417 2.945 4.259m0-8.518 2.03 2.23c-1.304.841-2.906 2.441-2.944 4.259.013.613.203 1.202.5 1.745-1.205-.89-2.497-2.345-2.531-3.974.037-1.818 1.64-3.419 2.945-4.26m0 8.518c-5.603-1.964-5.705 2.502-5.055 4.98m5.055-4.98 2.031 2.229c-5.603-1.963-5.703 2.502-5.054 4.98l-2.032-2.229m0 0c-1.386-2.83-3.417-3.489-4.259-3.465m0 0c-.843-.024-2.874.636-4.26 3.465m4.26-3.465c.782-.022 2.588.545 3.951 2.89-.784-.514-1.5-.672-1.92-.66-.843-.024-2.874.635-4.26 3.465l-2.031-2.23m0 0c.65-2.478.548-6.944-5.054-4.98m0 0 2.031 2.228c1.369-.48 2.41-.575 3.191-.41-.358-1.751-1.706-3.05-5.222-1.819\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport highfiveData from './json/high-five.json'\n\nexport const HighFive = createSpotIllustration('HighFive', highfiveData)\nexport type HighFiveProps = React.ComponentPropsWithRef<typeof HighFive>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M22.357.002C29.314.1 35.343 4.838 39.042 10.446c2.034 3.082 3.43 6.654 3.382 10.088-.078 5.505-2.673 10.947-5.772 15.523-2.856 4.219-6.288 8.012-9.982 11.417a1.987 1.987 0 0 1-2.747-.051c-1.4-1.392-2.528-2.636-3.848-3.85-2.985-2.723-6.589-7.337-9.433-12.25-2.677-4.625-5.203-9.97-5.054-15.435C5.942 6.95 13.362-.124 22.358.002m2.33 17.737a2.84 2.84 0 0 0-1.367 1.368 2.88 2.88 0 0 0 1.366-1.368\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M29.894 4.508c4.006 2.59 6.63 7.122 6.557 12.243-.138 9.735-9.272 20.018-14.869 25.181a119 119 0 0 0 2.876 2.898q.455.447.872.86c5.596-5.163 14.736-15.448 14.873-25.187.08-5.683-4.685-12.541-10.309-15.995\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M20.963 21.463a5.05 5.05 0 0 1 1.395-4.782 5.1 5.1 0 0 1 4.68-1.293 5.1 5.1 0 0 0-2.915-3.475 5.1 5.1 0 0 0-5.518 1.016c-1.971 1.917-2.018 5.168-.1 7.14a5.05 5.05 0 0 0 2.458 1.394\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M22.327 2.222c7.912.112 14.236 6.617 14.124 14.528-.137 9.739-9.278 20.025-14.874 25.187-5.553-5.064-13.89-17.678-13.78-25.59.113-7.912 6.618-14.236 14.53-14.125m-.13 9.28c-2.75-.04-5.082 2.226-5.121 4.976-.038 2.72 2.227 5.12 4.978 5.12 2.509 0 5.08-2.228 5.12-4.977.038-2.75-2.228-5.08-4.978-5.12\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M36.45 16.751c.073-5.121-2.55-9.653-6.556-12.243 5.624 3.454 10.39 10.312 10.31 15.995-.138 9.739-9.278 20.024-14.874 25.186-1.078-1.07-2.363-2.301-3.748-3.757 5.597-5.163 14.731-15.446 14.869-25.181Zm0 0c.113-7.912-6.21-14.417-14.123-14.529-7.913-.11-14.417 6.213-14.53 14.125-.11 7.912 8.227 20.526 13.78 25.59 5.596-5.162 14.736-15.448 14.874-25.186Zm-9.634-2.068q.138.346.223.705a5.1 5.1 0 0 0-4.681 1.293c-1.261 1.226-1.815 3.035-1.412 4.742-.928-.22-1.766-.66-2.442-1.354m8.312-5.386a5.09 5.09 0 0 0-4.62-3.182c-2.75-.039-5.08 2.227-5.12 4.977a5.05 5.05 0 0 0 1.428 3.59m8.312-5.385a5.09 5.09 0 0 1-1.172 5.486c-1.964 1.91-5.213 1.882-7.14-.1m8.24-17.087a12 12 0 0 0-2.685-.631c.926.125 1.824.338 2.685.631Z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport mappinData from './json/map-pin.json'\n\nexport const MapPin = createSpotIllustration('MapPin', mappinData)\nexport type MapPinProps = React.ComponentPropsWithRef<typeof MapPin>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M26.179 26.197a9.9 9.9 0 0 1-1.033 4.32 9.94 9.94 0 0 1 4.776-2.34v-8.682l-3.743-.46zm21.823 6.637a9.9 9.9 0 0 1-2.985 7.005c-.064.062-.12.108-.14.126l-6.628 5.452q-.03.023-.058.042a9.91 9.91 0 0 1-8.63 2.145 9.92 9.92 0 0 1-7.546-7.732l-.065-.366a9.92 9.92 0 0 1 .922-6.017l-6.413 5.263c-.895.733-1.844 1.355-2.927 1.778a9.9 9.9 0 0 1-5.431.512l-.363-.074a9.92 9.92 0 0 1-7.544-7.733l-.066-.365A9.92 9.92 0 0 1 8.1 21.54l.002-13.928a2.23 2.23 0 0 1 .812-1.77l.004-.004L15.253.656a2 2 0 0 1 .146-.109l.042-.028.19-.113a2.23 2.23 0 0 1 1.135-.25l.167.013L46.04 3.74c.136.017.303.049.487.114l.199.082.002.001A2.23 2.23 0 0 1 48 5.947zM37.975 45.608l.011-.006.01-.006zm.029-.017-.009.005.01-.007z\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M39.439 37.998a7.68 7.68 0 0 1-2.605 5.7l6.628-5.453a7.67 7.67 0 0 0 2.313-5.428V5.947l-6.335 5.183V38z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m23.953 16.519-6.336-.777V31.36a7.67 7.67 0 0 1-2.578 5.675l6.522-5.352a7.67 7.67 0 0 0 2.392-5.505z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M45.769 5.95 16.662 2.378 10.328 7.56l29.105 3.57z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M39.436 11.131 10.33 7.561l-.004 16.047a7.693 7.693 0 1 0 7.288 7.754v-15.62l14.534 1.783v12.72a7.693 7.693 0 1 0 7.288 7.753z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M39.436 11.131 10.33 7.561l-.004 16.047a7.693 7.693 0 1 0 7.288 7.754v-15.62l14.534 1.783v12.72a7.693 7.693 0 1 0 7.288 7.753z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M45.769 5.95 16.662 2.378 10.328 7.56l29.105 3.57z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"M39.439 37.998a7.68 7.68 0 0 1-2.605 5.7l6.628-5.453a7.67 7.67 0 0 0 2.313-5.428V5.947l-6.335 5.183V38z\",\n      \"layer\": \"stroke\"\n    },\n    {\n      \"d\": \"m23.953 16.519-6.336-.777V31.36a7.67 7.67 0 0 1-2.578 5.675l6.522-5.352a7.67 7.67 0 0 0 2.392-5.505z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport notemusicData from './json/note-music.json'\n\nexport const NoteMusic = createSpotIllustration('NoteMusic', notemusicData)\nexport type NoteMusicProps = React.ComponentPropsWithRef<typeof NoteMusic>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"M9.419 2.893C10.316 1.34 12.29.867 13.834 1.71l32.435 18.726c.938.542 1.655 1.658 1.65 2.764l-.016 4.7v.002c-.002.4-.11.793-.314 1.138l-2.112 3.553c-.543.911-1.637 1.368-2.675 1.014-1.483-.505-2.517-.255-3.18.144.561.645.777 1.387.886 2.216.108.828.238 4.571.238 4.571.02.413-.072.842-.291 1.227l-.003.004-2.251 3.933a2.24 2.24 0 0 1-1.782 1.12 2.24 2.24 0 0 1-1.355-.286L1.221 26.982a2.25 2.25 0 0 1-1.123-1.946v-.003l.01-4.57c0-.77.043-1.518.44-2.205l1.478-2.56c.88-1.524 2.566-1.84 3.809-1.526l.466.136c.728.176 1.494.03 2.109-.377l-.325-.365-.001-.002a2.25 2.25 0 0 1-.57-1.46V12.1l-.063-4.761-.001-.003a3.85 3.85 0 0 1 .49-1.881l1.478-2.561z\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"m38.506 40.634-2.252 3.935-.102-4.667 2.131-3.665z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m43.55 31.424-.118-4.54s.083-.06.127-.096c.07-.058.108-.141.108-.141l2.01-3.473-.016 4.7z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m43.432 26.884.119 4.54c-3.862-1.317-6.158.903-6.812 2.159-.812-.812-.947-3.271.136-4.783 2.059-2.874 5.159-2.518 6.557-1.916\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M11.364 4.017a.986.986 0 0 1 1.346-.361l32.437 18.727a.986.986 0 0 1 .36 1.347l-1.478 2.56c-.272.472-.874.622-1.39.448a4.93 4.93 0 0 0-4.83 8.368c.408.36.578.956.306 1.427l-1.479 2.561a.986.986 0 0 1-1.346.36L2.854 20.729a.986.986 0 0 1-.361-1.347l1.478-2.56c.272-.472.874-.622 1.39-.449a4.93 4.93 0 0 0 4.83-8.367c-.408-.36-.578-.956-.306-1.428z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M31.383 18.875a.986.986 0 0 1 1.346-.36l2.073 1.196a.986.986 0 0 1 .36 1.346L29.15 31.472a.986.986 0 0 1-1.347.36l-2.072-1.197a.986.986 0 0 1-.361-1.346z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"m2.345 25.038.008-4.57 33.814 19.539.02 4.584z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"m9.761 12.069-.064-4.76c2.232 2.019 2.598 4.544 1.661 6.549z\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"m43.428 27.072.119 4.372 2.11-3.551.017-4.7zm0 0 .098 4.41c-3.862-1.318-6.17.953-6.824 2.21-.63-1.165-.914-3.361.169-4.872 2.059-2.874 5.158-2.35 6.557-1.748ZM12.71 3.656a.986.986 0 0 0-1.346.36L9.885 6.578c-.272.472-.313.881.307 1.428a4.93 4.93 0 0 1-4.831 8.367c-.516-.173-1.118-.023-1.39.448l-1.478 2.561c-.272.472-.148 1.053.36 1.347L35.29 39.455a.986.986 0 0 0 1.346-.36l1.479-2.562c.272-.471.102-1.067-.307-1.427a4.93 4.93 0 0 1-1.004-6.158c1.193-2.067 3.833-2.712 5.849-2.142.515.174.9.051 1.172-.42l1.741-3.008c.272-.471.052-.723-.42-.995zm13.02 26.98 2.073 1.196a.986.986 0 0 0 1.347-.36l6.013-10.415a.986.986 0 0 0-.361-1.346l-2.073-1.197a.986.986 0 0 0-1.346.36L25.37 29.29a.986.986 0 0 0 .36 1.346ZM2.354 20.468l-.008 4.57L36.187 44.59l-.02-4.584zm33.897 24.12 2.252-3.935-.223-4.397-2.131 3.665zM9.697 7.308l.064 4.76 1.597 1.79c.937-2.005.571-4.53-1.66-6.55Z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport ticketData from './json/ticket.json'\n\nexport const Ticket = createSpotIllustration('Ticket', ticketData)\nexport type TicketProps = React.ComponentPropsWithRef<typeof Ticket>\n","{\n  \"$comment\": \"Generated file - do not edit directly\",\n  \"viewBox\": \"0 0 48 48\",\n  \"paths\": [\n    {\n      \"d\": \"m18.33 38.725-5.971.7c-1.213.197-2.194 1.174-2.194 2.462v1.732c.001 1.915 2.328 2.894 3.708 3.835l.015.012c.056.037.697.534 1.612.534h19.85a2.477 2.477 0 0 0 2.477-2.477l-.008-1.93a2.4 2.4 0 0 0-.23-.85c-.238-.447-.59-.78-1.005-1.062-3.464-2.36-2.594-2.114-6.97-2.624v-4.52c5.49-1.768 9.466-6.91 9.466-12.99q-.001-.967-.133-1.905L36.804 3.667c-.131-.604-.49-1.006-.945-1.385C34.84 1.603 33.223 0 31.757 0H13.775a2.24 2.24 0 0 0-2.17 1.686L9.15 17.135a13.8 13.8 0 0 0 .143 5.683l.11.436c1.15 5.014 4.85 8.415 8.927 10.269z\",\n      \"layer\": \"outline\"\n    },\n    {\n      \"d\": \"M12.512 43.817q.056.038.128.039h19.85a.24.24 0 0 0 .24-.24v-1.73a.24.24 0 0 0-.083-.18l2.677 1.825c.197.138.265.14.265.26v1.733a.24.24 0 0 1-.238.238H15.5c-.132 0-.223-.06-.368-.157z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"m34.617 4.144 2.112 15.798q.112.787.112 1.605c0 5.638-4.09 10.322-9.464 11.246v8.257l-2.86-.332v-9.832c5.374-.924 9.464-5.607 9.464-11.245q0-.819-.112-1.606L31.758 2.242h.004z\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M11.564 22.666a11.43 11.43 0 0 0 9.004 8.21v1.144c-4.19-1.502-7.964-4.656-9.004-9.354\",\n      \"layer\": \"shadow\"\n    },\n    {\n      \"d\": \"M31.758 2.237H13.775L11.35 17.544a11.5 11.5 0 0 0-.193 2.096c0 5.62 4.062 10.29 9.41 11.237v9.84l-7.952.931a.24.24 0 0 0-.214.237v1.732c0 .132.107.239.239.239h19.85a.24.24 0 0 0 .238-.239v-1.731a.24.24 0 0 0-.213-.237l-8-.931v-9.832c5.376-.923 9.465-5.607 9.465-11.246q0-.817-.112-1.605z\",\n      \"layer\": \"face\"\n    },\n    {\n      \"d\": \"M31.657 18.978a9.087 9.087 0 0 1-18.01 1.722c1.34.571 2.72.756 4.357.756 3.117 0 5.664-4.952 8.41-4.952 2.477 0 3.53.356 5.141 1.114q.101.666.102 1.36\",\n      \"layer\": \"detail\"\n    },\n    {\n      \"d\": \"M12.64 43.856a.24.24 0 0 1-.128-.04l2.621 1.789c.145.097.236.157.368.157h19.85a.24.24 0 0 0 .17-.072m-22.88-1.834h19.85m-19.85 0a.24.24 0 0 1-.239-.239v-1.731c0-.123.092-.225.214-.238l7.952-.93v-9.842m11.922 12.98c.063 0 .12-.025.163-.064m-.163.064a.24.24 0 0 0 .24-.24m0 0v-1.73m0 1.73c0 .07-.03.132-.077.176m.076-1.906a.24.24 0 0 0-.082-.18l2.677 1.825c.197.138.265.14.265.26v1.733a.24.24 0 0 1-.068.166m-2.792-3.804a.24.24 0 0 0-.213-.237l-8-.931m2.86-7.925c5.376-.924 9.465-5.608 9.465-11.246q0-.817-.112-1.605L34.617 4.144l-2.855-1.902h-.004l2.111 15.793m-6.492 14.758v8.257l-2.86-.332m2.86-7.925-2.86-1.907m0 9.832v-9.832m0 9.832v-9.832m0 0c5.374-.924 9.464-5.607 9.464-11.245q0-.819-.112-1.606m0 0L31.758 2.237H13.775L11.35 17.544a11.5 11.5 0 0 0-.193 2.096c0 5.62 4.062 10.29 9.41 11.237m0 0a11.43 11.43 0 0 1-9.004-8.21c1.04 4.697 4.815 7.85 9.004 9.353zM35.52 45.69l-2.868-1.898m-.996-24.814a9.087 9.087 0 0 1-18.01 1.722c1.34.571 2.72.756 4.357.756 3.117 0 5.664-4.952 8.41-4.952 2.477 0 3.53.356 5.141 1.114q.101.666.102 1.36Z\",\n      \"layer\": \"stroke\"\n    }\n  ]\n}\n","// Generated file - do not edit directly\nimport { createSpotIllustration } from './createSpotIllustration'\nimport wineglassData from './json/wine-glass.json'\n\nexport const WineGlass = createSpotIllustration('WineGlass', wineglassData)\nexport type WineGlassProps = React.ComponentPropsWithRef<typeof WineGlass>\n"]}

package/dist/_chunks/{chunk-6FIUWNC7.js → chunk-YNF56IUK.js}

@@ -1,2 +1,2 @@
-import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {heading}from'@oztix/roadie-core/recipes';var r=styled(ark.h2,heading);r.displayName="Heading";export{r as a};//# sourceMappingURL=chunk-6FIUWNC7.js.map
-//# sourceMappingURL=chunk-6FIUWNC7.js.map
+import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {heading}from'@oztix/roadie-core/recipes';var r=styled(ark.h2,heading);r.displayName="Heading";export{r as a};//# sourceMappingURL=chunk-YNF56IUK.js.map
+//# sourceMappingURL=chunk-YNF56IUK.js.map

package/dist/_chunks/{chunk-6FIUWNC7.js.map → chunk-YNF56IUK.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Heading/index.tsx"],"names":["Heading","styled","ark","heading"],"mappings":"qIA8CO,IAAMA,EAAUC,MAAAA,CACrBC,GAAAA,CAAI,GACJC,OACF,EAEAH,EAAQ,WAAA,CAAc,SAAA","file":"chunk-6FIUWNC7.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { type HTMLStyledProps, styled } from '@oztix/roadie-core/jsx'\nimport { type HeadingVariantProps, heading } from '@oztix/roadie-core/recipes'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'\ntype HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'> {\n  /**\n   * The heading element to render\n   * @default 'h2'\n   */\n  as?: HeadingElement\n\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: HeadingStyle\n\n  /**\n   * The color palette to use for the heading\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * Set a sepecific empahasis level for differen fonts like subtitles\n   * @default 'default'\n   */\n  emphasis?: HeadingVariantProps['emphasis']\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Heading = styled(\n  ark.h2,\n  heading\n) as React.ForwardRefExoticComponent<HeadingProps>\n\nHeading.displayName = 'Heading'\n"]}
+{"version":3,"sources":["../../src/components/Heading/index.tsx"],"names":["Heading","styled","ark","heading"],"mappings":"qIA8CO,IAAMA,EAAUC,MAAAA,CAAOC,GAAAA,CAAI,GAAIC,OAAO,EAE7CH,EAAQ,WAAA,CAAc,SAAA","file":"chunk-YNF56IUK.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { type HTMLStyledProps, styled } from '@oztix/roadie-core/jsx'\nimport { type HeadingVariantProps, heading } from '@oztix/roadie-core/recipes'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'\ntype HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'> {\n  /**\n   * The heading element to render\n   * @default 'h2'\n   */\n  as?: HeadingElement\n\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: HeadingStyle\n\n  /**\n   * The color palette to use for the heading\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * Set a sepecific empahasis level for differen fonts like subtitles\n   * @default 'default'\n   */\n  emphasis?: HeadingVariantProps['emphasis']\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Heading = styled(ark.h2, heading)\n\nHeading.displayName = 'Heading'\n"]}

package/dist/_chunks/chunk-ZXS7U3VJ.js

@@ -0,0 +1,2 @@
+import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {text}from'@oztix/roadie-core/recipes';var r=styled(ark.p,text);r.displayName="Text";export{r as a};//# sourceMappingURL=chunk-ZXS7U3VJ.js.map
+//# sourceMappingURL=chunk-ZXS7U3VJ.js.map

package/dist/_chunks/chunk-ZXS7U3VJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Text/index.tsx"],"names":["Text","styled","ark","text"],"mappings":"kIAgDO,IAAMA,EAAOC,MAAAA,CAAOC,GAAAA,CAAI,EAAGC,IAAI,EAEtCH,EAAK,WAAA,CAAc,MAAA","file":"chunk-ZXS7U3VJ.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type TextVariantProps, text } from '@oztix/roadie-core/recipes'\n\n/**\n * Text component for displaying content with various styling options\n */\nexport interface TextProps extends HTMLStyledProps<'p'> {\n  /**\n   * The visual emphasis of the text\n   * @default 'default'\n   */\n  emphasis?: TextVariantProps['emphasis']\n\n  /**\n   * Whether the text is interactive\n   * @default false\n   */\n  interactive?: TextVariantProps['interactive']\n\n  /**\n   * The HTML element to render the text as\n   * @default 'p'\n   */\n  as?: HTMLStyledProps<'p'>['as']\n\n  /**\n   * The color palette to use for the text\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Text = styled(ark.p, text)\n\nText.displayName = 'Text'\n"]}

package/dist/index.d.ts

@@ -1,10 +1,16 @@
-export { Button, ButtonProps } from './Button.js';
+export { Button, ButtonProps, IconButton, IconButtonProps } from './Button.js';
 export { Code, CodeProps } from './Code.js';
+export { Container, ContainerProps } from './Container.js';
 export { Heading, HeadingProps } from './Heading.js';
+export { Highlight, HighlightProps } from './Highlight.js';
+export { Mark, MarkProps } from './Mark.js';
+export { ArrowUpRight, ArrowUpRightProps, CowboyHat, CowboyHatProps, Cursor, CursorProps, FlowerSpiral, FlowerSpiralProps, Football, FootballProps, Hand, HandProps, Heart, HeartProps, HighFive, HighFiveProps, MapPin, MapPinProps, NoteMusic, NoteMusicProps, SpotIllustration, SpotIllustrationComponentProps, SpotIllustrationProps, Ticket, TicketProps, WineGlass, WineGlassProps, createSpotIllustration } from './SpotIllustration.js';
 export { Text, TextProps } from './Text.js';
 export { View, ViewProps } from './View.js';
+export { HighlightChunk, UseHighlightProps, useHighlight } from '@ark-ui/react/highlight';
+import '@oztix/roadie-core/jsx';
 import 'react';
+import 'react/jsx-runtime';
 import '@oztix/roadie-core';
-import '@oztix/roadie-core/jsx';
 import '@oztix/roadie-core/recipes';
 import '@oztix/roadie-core/types';

package/dist/index.js

@@ -1,2 +1,2 @@
-export{a as Button}from'./_chunks/chunk-VDMZIGT2.js';export{a as Code}from'./_chunks/chunk-P5L5LN6E.js';export{a as Heading}from'./_chunks/chunk-6FIUWNC7.js';export{a as Text}from'./_chunks/chunk-GSK3G4DW.js';export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';//# sourceMappingURL=index.js.map
+export{c as ArrowUpRight,d as CowboyHat,e as Cursor,f as FlowerSpiral,g as Football,h as Hand,i as Heart,j as HighFive,k as MapPin,l as NoteMusic,a as SpotIllustration,m as Ticket,n as WineGlass,b as createSpotIllustration}from'./_chunks/chunk-SUDUTP6A.js';export{a as Text}from'./_chunks/chunk-ZXS7U3VJ.js';export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';export{a as Button,b as IconButton}from'./_chunks/chunk-NMGF2AP6.js';export{a as Code}from'./_chunks/chunk-P5L5LN6E.js';export{a as Container}from'./_chunks/chunk-JOQJCXYF.js';export{a as Heading}from'./_chunks/chunk-YNF56IUK.js';export{a as Highlight,b as useHighlight}from'./_chunks/chunk-AZZHYO2A.js';export{a as Mark}from'./_chunks/chunk-OH4JYS35.js';//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The components for Roadie Design System at Oztix",
   "type": "module",
   "repository": {
@@ -21,6 +21,11 @@
       "import": "./dist/hooks/index.js",
       "require": "./dist/hooks/index.js"
     },
+    "./spot-illustrations": {
+      "types": "./dist/SpotIllustration.d.ts",
+      "import": "./dist/SpotIllustration.js",
+      "require": "./dist/SpotIllustration.js"
+    },
     "./src/*": {
       "types": "./src/*",
       "import": "./src/*"
@@ -40,7 +45,7 @@
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
-    "@oztix/roadie-core": "1.1.0"
+    "@oztix/roadie-core": "1.2.0"
   },
   "devDependencies": {
     "@pandacss/dev": "1.4.3",
@@ -54,6 +59,7 @@
     "@vitest/coverage-v8": "4.0.4",
     "@vitest/ui": "4.0.4",
     "jsdom": "27.0.1",
+    "svgo": "4.0.0",
     "tsup": "8.5.0",
     "vitest": "4.0.4"
   },
@@ -74,8 +80,9 @@
   },
   "scripts": {
     "build": "tsup",
+    "build:spotillustration": "node scripts/svg-to-spot-illustration.cjs",
     "clean": "rm -rf node_modules dist",
-    "dev": "tsup --watch",
+    "dev": "node scripts/svg-to-spot-illustration.cjs --watch & tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",

package/src/components/Button/Button.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react'
+
+import { ark } from '@ark-ui/react/factory'
+
+import { styled } from '@oztix/roadie-core/jsx'
+import { button } from '@oztix/roadie-core/recipes'
+
+export const Button = styled(ark.button, button)
+
+Button.displayName = 'Button'
+
+export type ButtonProps = ComponentProps<typeof Button>

package/src/components/Button/IconButton.test.tsx

@@ -0,0 +1,234 @@
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { IconButton } from './IconButton'
+
+describe('IconButton', () => {
+  it('renders with default props', () => {
+    const { getByRole } = render(<IconButton aria-label='Icon'>+</IconButton>)
+    const button = getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button.tagName.toLowerCase()).toBe('button')
+    expect(button).toHaveClass(
+      'button',
+      'button--emphasis_default',
+      'button--size_md'
+    )
+  })
+
+  it('applies zero padding to create square button', () => {
+    const { getByRole } = render(<IconButton aria-label='Icon'>+</IconButton>)
+    const button = getByRole('button')
+    // The component should have px="0" and py="0" applied
+    expect(button).toBeInTheDocument()
+  })
+
+  it('renders with different emphasis', () => {
+    const { rerender, getByRole } = render(
+      <IconButton emphasis='strong' colorPalette='accent' aria-label='Strong'>
+        +
+      </IconButton>
+    )
+    let button = getByRole('button')
+    expect(button).toHaveClass(
+      'button--emphasis_strong',
+      'color-palette_accent'
+    )
+
+    rerender(
+      <IconButton emphasis='default' aria-label='Default'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--emphasis_default')
+
+    rerender(
+      <IconButton emphasis='subtle' aria-label='Subtle'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--emphasis_subtle')
+
+    rerender(
+      <IconButton emphasis='subtler' aria-label='Subtler'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--emphasis_subtler')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender, getByRole } = render(
+      <IconButton size='xs' aria-label='Extra small'>
+        +
+      </IconButton>
+    )
+    let button = getByRole('button')
+    expect(button).toHaveClass('button--size_xs')
+
+    rerender(
+      <IconButton size='sm' aria-label='Small'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--size_sm')
+
+    rerender(
+      <IconButton size='md' aria-label='Medium'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--size_md')
+
+    rerender(
+      <IconButton size='lg' aria-label='Large'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('button--size_lg')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, getByRole } = render(
+      <IconButton emphasis='strong' colorPalette='accent' aria-label='Accent'>
+        +
+      </IconButton>
+    )
+    let button = getByRole('button')
+    expect(button).toHaveClass('color-palette_accent')
+
+    rerender(
+      <IconButton emphasis='strong' colorPalette='success' aria-label='Success'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('color-palette_success')
+
+    rerender(
+      <IconButton emphasis='strong' colorPalette='warning' aria-label='Warning'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('color-palette_warning')
+
+    rerender(
+      <IconButton emphasis='strong' colorPalette='danger' aria-label='Danger'>
+        +
+      </IconButton>
+    )
+    button = getByRole('button')
+    expect(button).toHaveClass('color-palette_danger')
+  })
+
+  it('handles disabled state', () => {
+    const { getByRole } = render(
+      <IconButton disabled aria-label='Disabled'>
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('button')
+  })
+
+  it('calls onClick when clicked', async () => {
+    const handleClick = vi.fn()
+    const user = userEvent.setup()
+
+    const { getByRole } = render(
+      <IconButton onClick={handleClick} aria-label='Click me'>
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+
+    await user.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClick when disabled', async () => {
+    const handleClick = vi.fn()
+    const user = userEvent.setup()
+
+    const { getByRole } = render(
+      <IconButton disabled onClick={handleClick} aria-label='Disabled'>
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+
+    await user.click(button)
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { getByRole } = render(
+      <IconButton className='custom-class' aria-label='Custom'>
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('combines multiple props', () => {
+    const { getByRole } = render(
+      <IconButton
+        emphasis='strong'
+        size='lg'
+        colorPalette='accent'
+        className='custom-class'
+        aria-label='Combined'
+      >
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+    expect(button).toHaveClass(
+      'button',
+      'button--emphasis_strong',
+      'button--size_lg',
+      'color-palette_accent',
+      'custom-class'
+    )
+  })
+
+  it('renders icon content correctly', () => {
+    const { getByRole } = render(
+      <IconButton aria-label='Add item'>
+        <svg
+          width='16'
+          height='16'
+          viewBox='0 0 16 16'
+          fill='currentColor'
+          data-testid='icon'
+        >
+          <path d='M8 0L8 16M0 8L16 8' />
+        </svg>
+      </IconButton>
+    )
+    const button = getByRole('button')
+    const icon = button.querySelector('[data-testid="icon"]')
+    expect(icon).toBeInTheDocument()
+  })
+
+  it('allows padding override', () => {
+    const { getByRole } = render(
+      <IconButton px='200' aria-label='Custom padding'>
+        +
+      </IconButton>
+    )
+    const button = getByRole('button')
+    // Should allow override of default px="0"
+    expect(button).toBeInTheDocument()
+  })
+})

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react'
+
+import { Button } from './Button'
+
+export interface IconButtonProps
+  extends Omit<ComponentProps<typeof Button>, 'aria-label'> {
+  'aria-label': string
+}
+
+export const IconButton = (props: IconButtonProps) => {
+  return <Button px='0' py='0' _icon={{ fontSize: '1.2em' }} {...props} />
+}
+
+IconButton.displayName = 'IconButton'

package/src/components/Button/index.tsx

@@ -1,48 +1,2 @@
-import React from 'react'
-
-import { ark } from '@ark-ui/react/factory'
-
-import type { ColorPalette } from '@oztix/roadie-core'
-import { styled } from '@oztix/roadie-core/jsx'
-import type { HTMLStyledProps } from '@oztix/roadie-core/jsx'
-import { type ButtonVariantProps, button } from '@oztix/roadie-core/recipes'
-
-/**
- * A button component with various emphasis levels and sizes
- */
-export interface ButtonProps extends HTMLStyledProps<'button'> {
-  /**
-   * The visual emphasis of the button
-   * @default 'default'
-   */
-  emphasis?: ButtonVariantProps['emphasis']
-
-  /**
-   * The size of the button
-   * @default 'md'
-   */
-  size?: ButtonVariantProps['size']
-
-  /**
-   * The color palette to use for the button
-   * @default 'neutral'
-   */
-  colorPalette?: ColorPalette
-
-  /**
-   * When true, the component will pass props to its child component
-   */
-  asChild?: boolean
-
-  /**
-   * The content to display
-   */
-  children?: React.ReactNode
-}
-
-export const Button = styled(
-  ark.button,
-  button
-) as React.ForwardRefExoticComponent<ButtonProps>
-
-Button.displayName = 'Button'
+export * from './Button'
+export * from './IconButton'